feat: adds visitors based plan integration

Codeinwp · Sep 25, 2019 · ea07a94 · ea07a94
1 parent 17bb13a
commit ea07a94
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/assets/vue/components/cdn-details.vue b/assets/vue/components/cdn-details.vue
@@ -16,7 +16,29 @@
 			</div>
 		</div>
 		<hr/>
-		<div class="level stats">
+
+		<div  v-if="this.userData.visitors_limit && parseInt( this.userData.visitors_limit ) > 0" class="level stats">
+			<div class="level-left">
+				<div class="level-item">
+					<div class="tags has-addons">
+						<span class="tag is-info">{{strings.usage}}:</span>
+						<span class="tag">{{this.userData.visitors_pretty}} </span>
+					</div>
+				</div>
+			</div>
+			<h4 class="level-item is-size-5 is-marginless has-text-grey">
+				{{computedPercentageVisitors()}}%
+			</h4>
+			<div class="level-right">
+				<div class="level-item">
+					<div class="tags has-addons">
+						<span class="tag is-info">{{strings.quota}}:</span>
+						<span class="tag">{{this.userData.visitors_limit_pretty}} (<a href="https://docs.optimole.com/article/1134-how-optimole-counts-the-number-of-visitors" target="_blank">?</a>)</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div   v-else class="level stats">
 			<div class="level-left">
 				<div class="level-item">
 					<div class="tags has-addons">
@@ -50,8 +72,9 @@
 			</div>
 		</div>
 		<hr/>
-		<progress class="progress is-success" :value="this.userData.usage" :max="this.userData.quota">60%</progress>
-
+		<progress v-if="this.userData.visitors_limit && parseInt( this.userData.visitors_limit ) > 0" class="progress is-success" :value="this.userData.visitors" :max="this.userData.visitors_limit">60%</progress>
+		<progress v-else class="progress is-success" :value="this.userData.usage" :max="this.userData.quota">60%</progress>
+
 	</div>
 </template>
 
@@ -65,13 +88,17 @@
 		},
 		computed:{
 			userData:function(){
+
                 return  this.$store.state.userData;
 			}
 		},
 		methods: {
 			computedPercentage() {
 				return ((this.userData.usage / this.userData.quota) * 100).toFixed(2);
 			},
+			computedPercentageVisitors() {
+				return ((this.userData.visitors / this.userData.visitors_limit) * 100).toFixed(2);
+			},
 			requestUpdate() {
 				this.$store.dispatch('requestStatsUpdate', {waitTime: 0, component: null});
 			}

diff --git a/inc/admin.php b/inc/admin.php
@@ -246,7 +246,8 @@ public function should_show_upgrade() {
 		if ( $service_data['plan'] !== 'free' ) {
 			return false;
 		}
-		if ( $service_data['usage'] < 800 ) {
+		$visitors = isset( $service_data['visitors_limit'] ) ? (int) $service_data['visitors_limit'] : 0;
+		if ( $service_data['usage'] < 800 && $visitors === 0 ) {
 			return false;
 		}
 
@@ -505,11 +506,13 @@ private function get_dashboard_strings() {
 				' <a href="https://dashboard.optimole.com/register" target="_blank">optimole.com</a>'
 			),
 			'account_needed_subtitle_1'      => sprintf(
-				__( 'You will get access to our image optimization service for %1$sFREE%2$s in the limit of %3$s1GB%4$s traffic per month. ', 'optimole-wp' ),
+				__( 'You will get access to our image optimization service for %1$sFREE%2$s in the limit of %3$s5k%4$s %5$svisitors%6$s per month. ', 'optimole-wp' ),
 				'<strong>',
 				'</strong>',
 				'<strong>',
-				'</strong>'
+				'</strong>',
+				'<a href="https://docs.optimole.com/article/1134-how-optimole-counts-the-number-of-visitors" target="_blank">',
+				'</a>'
 			),
 			'account_needed_subtitle_2'      => sprintf(
 				__( 'Bonus, if you dont use a CDN, we got you covered, we will serve the images using CloudFront CDN.', 'optimole-wp' )

diff --git a/inc/api.php b/inc/api.php
@@ -139,8 +139,9 @@ public function create_account( $email ) {
 			'optml/v1/user/register-remote',
 			'POST',
 			array(
-				'email' => $email,
-				'site'  => get_home_url(),
+				'email'   => $email,
+				'version' => '2.1.2',
+				'site'    => get_home_url(),
 			)
 		);
 	}