fix: webhook button tooltip upgrade pro plugin version

Codeinwp · Jul 16, 2024 · 694f66d · 694f66d
1 parent 6d9b469
commit 694f66d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/includes/admin/class-rop-admin.php b/includes/admin/class-rop-admin.php
@@ -407,7 +407,8 @@ public function enqueue_scripts() {
 			$is_new_user = update_option( 'rop_is_new_user', 1 );
 		}
 
-		$rop_api_settings['is_new_user'] = $is_new_user;
+		$rop_api_settings['is_new_user']           = $is_new_user;
+		$rop_api_settings['webhook_pro_available'] = defined( 'ROP_PRO_VERSION' ) && version_compare( ROP_PRO_VERSION, '3.1.0', '>=' ) ? true : false;
 
 		wp_localize_script( $this->plugin_name . '-' . $page, 'ropApiSettings', $rop_api_settings );
 		wp_localize_script( $this->plugin_name . '-' . $page, 'ROP_ASSETS_URL', array( ROP_LITE_URL . 'assets/' ) );

diff --git a/includes/class-rop-i18n.php b/includes/class-rop-i18n.php
@@ -133,6 +133,7 @@ public static function get_labels( $key = '' ) {
 				'upsell_service_body'        => __( 'We\'re sorry, %1$s is not available on your plan. Please upgrade to the Pro plan to unlock all these features and get more traffic.', 'tweet-old-post' ),
 				'edit_headers'               => __( 'Edit Headers', 'tweet-old-post' ),
 				'hide'                       => __( 'Hide', 'tweet-old-post' ),
+				'get_latest_pro_version'     => __( 'Get the latest Pro version to unlock.', 'tweet-old-post' ),
 			),
 			'settings'    => array(
 				'yes_text' => __( 'Yes', 'tweet-old-post' ),

diff --git a/vue/src/vue-elements/sign-in-btn.vue b/vue/src/vue-elements/sign-in-btn.vue
@@ -6,7 +6,8 @@
         :key="network"
         :title="getTooltip( service, network )"
         class="btn input-group-btn"
-        :class="'btn-' + network + ' ' + ( checkDisabled( service, network ) ? 'rop-disabled' : '' )"
+        :class="getButtonClass( service, network )"
+        :data-tooltip="canShowProPluginUpgradeWebhookNotice ? labels.get_latest_pro_version : ''"
         @click="requestAuthorization( network )"
       >
         <i
@@ -59,7 +60,7 @@ q2 -17 -1.5 -33t-13.5 -30q-16 -22 -41 -32q-17 -7 -35.5 -6.5t-35.5 7.5q-28 12 -43
         </i>
         {{ displayName( service.name, false, true ) }}
         <span
-          v-if="checkDisabled( service, network )"
+          v-if="checkDisabled( service, network ) || ('webhook' === network && canShowProPluginUpgradeWebhookNotice)"
           style="font-size:13px;line-height: 20px"
           class="dashicons dashicons-lock"
         />
@@ -358,6 +359,7 @@ export default {
       webhooksHeaders: [],
       showBtn: false,
       showHeaders: false,
+      canShowProPluginUpgradeWebhookNotice: 'valid' === ropApiSettings?.license_data_view?.license && ! ropApiSettings?.webhook_pro_available // Notice the user to upgrade to the last version of the plugin to use the webhook feature.
     }
   },
   computed: {
@@ -433,7 +435,7 @@ export default {
         showButton = false;
       }
       return showButton;
-    }
+    },
   },
   watch: {
     isOpenToEdit( canShow) {
@@ -632,6 +634,14 @@ export default {
     requestAuthentication() {
       this.$store.dispatch('fetchAJAX', {req: 'authenticate_service', data: {service: this.selected_network}})
     },
+    getButtonClass( service, network )  {
+      let cssClasses = 'btn-' + network + ' ' + ( this.checkDisabled( service, network ) ? 'rop-disabled' : '' );
+      
+      if ( 'webhook' === network && this.canShowProPluginUpgradeWebhookNotice ) {
+        cssClasses = cssClasses + ' tooltip tooltip-top';
+      }
+      return cssClasses;
+    },
     /**
      * Open the modal.
      */