refactor: use tsdk_translate_link upgrade links and load Formbricks f…

…rom SDK

inc/class-main.php

@@ -579,7 +579,7 @@ public function about_page() {
 			'location'         => 'otter',
 			'logo'             => esc_url_raw( OTTER_BLOCKS_URL . 'assets/images/logo-alt.png' ),
 			'has_upgrade_menu' => ! DEFINED( 'OTTER_PRO_VERSION' ),
-			'upgrade_link'     => tsdk_utmify( Pro::get_url(), 'editor', Pro::get_reference() ),
+			'upgrade_link'     => tsdk_translate_link( tsdk_utmify( Pro::get_url(), 'editor', Pro::get_reference() ), 'query' ),
 			'upgrade_text'     => __( 'Get Otter Pro', 'otter-blocks' ),
 		);
 	}

inc/class-pro.php

@@ -250,7 +250,7 @@ public function render_metabox_upsell( $post_type ) {
 					<li><?php _e( 'Priority Support', 'otter-blocks' ); ?></li>
 				</ul>
 
-				<a href="<?php echo esc_url_raw( tsdk_utmify( self::get_url(), 'woobuilder', 'wooproducteditor' ) ); ?>" target="_blank" class="button button-primary">
+				<a href="<?php echo esc_url_raw( tsdk_translate_link( tsdk_utmify( self::get_url(), 'woobuilder', 'wooproducteditor' ), 'query' ) ); ?>" target="_blank" class="button button-primary">
 					<?php _e( 'Discover Otter Pro', 'otter-blocks' ); ?>
 				</a>
 			</div>

inc/class-registration.php

@@ -252,8 +252,8 @@ public function enqueue_block_editor_assets() {
 				'hasNeve'                 => defined( 'NEVE_VERSION' ),
 				'hasPro'                  => Pro::is_pro_installed(),
 				'isProActive'             => Pro::is_pro_active(),
-				'upgradeLink'             => tsdk_utmify( Pro::get_url(), 'editor', Pro::get_reference() ),
-				'patternsLink'            => tsdk_utmify( Pro::get_patterns_url(), 'editor', Pro::get_reference() ),
+				'upgradeLink'             => tsdk_translate_link( tsdk_utmify( Pro::get_url(), 'editor', Pro::get_reference() ), 'query' ),
+				'patternsLink'            => tsdk_translate_link( tsdk_utmify( Pro::get_patterns_url(), 'editor', Pro::get_reference() ), 'query' ),
 				'should_show_upsell'      => Pro::should_show_upsell(),
 				'assetsPath'              => OTTER_BLOCKS_URL . 'assets',
 				'updatePath'              => admin_url( 'update-core.php' ),

inc/plugins/class-dashboard.php

@@ -179,7 +179,7 @@ public function form_submissions_callback() {
 				<img style="max-width: 100%" src="<?php echo esc_url( OTTER_BLOCKS_URL . 'assets/images/form-submissions-upsell.svg' ); ?>" alt="Otter Form Submissions Upsell" />
 				<h2 style="line-height: 1"><?php esc_html_e( 'Collect Your Form Submissions', 'otter-blocks' ); ?></h2>
 				<p><?php esc_html_e( 'Store, manage and analyze your form submissions with ease – all in one place. With Otter powerful features, managing submissions has never been simpler.', 'otter-blocks' ); ?></p>
-				<a href="<?php echo esc_url( tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/upgrade/', 'form-submissions', 'admin' ) ); ?>" class="button button-primary" target="_blank"><?php esc_html_e( 'Explore Otter PRO', 'otter-blocks' ); ?></a>
+				<a href="<?php echo esc_url( tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/upgrade/', 'form-submissions', 'admin' ), 'query' ) ); ?>" class="button button-primary" target="_blank"><?php esc_html_e( 'Explore Otter PRO', 'otter-blocks' ); ?></a>
 			</div>
 		</div>
 		<?php
@@ -225,7 +225,7 @@ public function enqueue_options_assets() {
 					'assetsPath'             => OTTER_BLOCKS_URL . 'assets/',
 					'stylesExist'            => is_dir( $basedir ) || boolval( get_transient( 'otter_animations_parsed' ) ),
 					'hasPro'                 => Pro::is_pro_installed(),
-					'upgradeLink'            => tsdk_utmify( Pro::get_url(), 'options', Pro::get_reference() ),
+					'upgradeLink'            => tsdk_translate_link( tsdk_utmify( Pro::get_url(), 'options', Pro::get_reference() ), 'query' ),
 					'docsLink'               => Pro::get_docs_url(),
 					'showFeedbackNotice'     => $this->should_show_feedback_notice(),
 					'deal'                   => ! Pro::is_pro_installed() ? $offer->get_localized_data() : array(),
@@ -262,6 +262,8 @@ public function enqueue_options_assets() {
 				)
 			)
 		);
+
+		$this->load_survey();
 	}
 
 	/**
@@ -720,6 +722,18 @@ public function form_submissions_widget_content() {
 		<?php
 	}
 
+	/**
+	 * Load the Formbricks deps from SDK to initiate the survey.
+	 */
+	private function load_survey() {
+		$survey_handler = apply_filters( 'themeisle_sdk_dependency_script_handler', 'survey' );
+		if ( empty( $survey_handler ) ) {
+			return;
+		}
+
+		do_action( 'themeisle_sdk_dependency_enqueue_script', 'survey' );
+	}
+
 	/**
 	 * The instance method for the static class.
 	 * Defines and returns the instance of the static class.

otter-blocks.php

@@ -56,7 +56,7 @@ function() {
 			'is_enabled' => ! defined( 'OTTER_PRO_VERSION' ),
 			'pro_name'   => __( 'Otter Blocks Pro', 'otter-blocks' ),
 			'logo'       => OTTER_BLOCKS_URL . '/assets/images/logo-alt.png',
-			'cta_link'   => tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/upgrade/?discount=LOYALUSER583&dvalue=60#pricing', 'otter-welcome', 'notice' ),
+			'cta_link'   => tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/plugins/otter-blocks/upgrade/?discount=LOYALUSER583&dvalue=60#pricing', 'otter-welcome', 'notice' ), 'query' ),
 		];
 	}
 );

package.json

@@ -64,7 +64,6 @@
 		"lasttranslator": "Themeisle Translate Team <[email protected]>"
 	},
 	"dependencies": {
-		"@formbricks/js": "^2.2.0",
 		"@wordpress/icons": "^9.46.0",
 		"array-move": "^3.0.1",
 		"classnames": "^2.5.1",
@@ -80,7 +79,7 @@
 	},
 	"devDependencies": {
 		"@automattic/babel-plugin-replace-textdomain": "^1.0.35",
-		"@playwright/test": "^1.48.1",
+		"@playwright/test": "^1.48.2",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/exec": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",

src/dashboard/index.js

@@ -2,8 +2,6 @@
 /**
  * External dependencies.
  */
-/* eslint-disable import/no-unresolved */
-import formbricks from '@formbricks/js/app';
 
 /**
  * WordPress dependencies.
@@ -52,18 +50,6 @@ const convertToCategory = ( number, scale = 1 ) => {
 	}
 };
 
-if ( 'undefined' !== typeof window ) {
-	formbricks.init({
-		environmentId: 'clp9hqm8c1osfdl2ixwd0k0iz',
-		apiHost: 'https://app.formbricks.com',
-		userId: 'otter_' + ( undefined !== window.otterObj?.license?.key ? window.otterObj.license.key : window.otterObj.rootUrl.replace( /[^\w\d]*/g, '' ) ),
-		attributes: {
-			plan: undefined !== window.otterObj?.license?.type ? window.otterObj.license.type : 'free',
-			days_since_install: convertToCategory( window.otterObj.days_since_install )
-		}
-	});
-}
-
 const App = () => {
 	const [ currentTab, setTab ] = useState( getInitialStateFromURLQuery() );
 
@@ -89,3 +75,20 @@ const App = () => {
 const root = createRoot( document.getElementById( 'otter' ) );
 
 root.render( <App /> );
+
+/**
+ * Initialize the formbricks survey.
+ *
+ * @see https://github.com/formbricks/setup-examples/tree/main/html
+ */
+window.addEventListener('themeisle:survey:loaded', function () {
+	window?.tsdk_formbricks?.init?.({
+		environmentId: 'clp9hqm8c1osfdl2ixwd0k0iz',
+		apiHost: 'https://app.formbricks.com',
+		userId: 'otter_' + ( undefined !== window.otterObj?.license?.key ? window.otterObj.license.key : window.otterObj.rootUrl.replace( /[^\w\d]*/g, '' ) ),
+		attributes: {
+			plan: undefined !== window.otterObj?.license?.type ? window.otterObj.license.type : 'free',
+			days_since_install: convertToCategory( window.otterObj.days_since_install )
+		}
+	});
+});