Merge pull request #415 from bluehost/fix-app-customize-site-url

Fix home/onboarding customize site link

inc/RestApi/rest-api.php

@@ -9,7 +9,6 @@ function bluehost_init_rest_api() {
 		'Bluehost\\RestApi\\AdminErrorController',
 		'Bluehost\\RestApi\\BluehostBlogController',
 		'Bluehost\\RestApi\\CachingController',
-		'Bluehost\\RestApi\\CustomizeSiteController',
 		'Bluehost\\RestApi\\SettingsController',
 		'Bluehost\\RestApi\\StagingController',
 	);

inc/admin.php

@@ -26,6 +26,7 @@ class Init {
 		'mods.php',
 		'page.php',
 		'assets.php',
+		'utils.php',
 	);
 
 	/**
@@ -123,6 +124,7 @@ protected function load_class_instances() {
 		\Bluehost_Admin_App_Mods::return_instance();
 		\Bluehost_Admin_App_Assets::return_instance();
 		\Bluehost_Admin_App_Page::return_instance();
+		\Bluehost_Admin_App_Utils::return_instance();
 		\Newfold\Plugin\DefaultContent\Pages::return_instance();
 		\Newfold\Plugin\Tours\BlockEditor::return_instance();
 	}

inc/admin/class-assets.php

@@ -106,6 +106,7 @@ protected function prepareData() {
 				'isTopLevel'           => 0,
 				'pages'                => Bluehost_Admin_App_Page::get_top_level_pages(),
 				'noticesPathsDenyList' => Bluehost_Admin_App_Page::$noticesPathsDenyList, // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
+				'customizeSiteUrl'     => Bluehost_Admin_App_Utils::get_customize_site_url(),
 				'accountId'            => mojo_site_bin2hex(),
 				'nonce'                => \wp_create_nonce( mojo_site_bin2hex() ),
 				'customer'             => $customerData,
@@ -117,6 +118,7 @@ protected function prepareData() {
 				'isJarvis'   => $bh_module_container->get( 'isJarvis' ),
 			),
 			'wordpress'    => array(
+				'isFSE'                          => Bluehost_Admin_App_Utils::is_fse(),
 				'hasReusableBlocks'              => \wp_count_posts( 'wp_block' )->publish >= 1,
 				'isJetpackActive'                => class_exists( 'Jetpack' ) ? 1 : 0,
 				'isWooActive'                    => class_exists( 'woocommerce' ) ? 1 : 0,

inc/admin/class-utils.php

@@ -7,6 +7,26 @@
  */
 class Bluehost_Admin_App_Utils {
 
+	/**
+	 * Class instance.
+	 *
+	 * @var stdClass
+	 */
+	protected static $instance;
+
+	/**
+	 * Get class instance.
+	 *
+	 * @return Bluehost_Admin_App_Utils|stdClass
+	 */
+	public static function return_instance() {
+		if ( ! isset( self::$instance ) && ! ( self::$instance instanceof Bluehost_Admin_App_Utils ) ) {
+			self::$instance = new Bluehost_Admin_App_Utils();
+		}
+
+		return self::$instance;
+	}
+
 	/**
 	 * Check if PHP is version 7.
 	 *
@@ -24,4 +44,25 @@ public static function is_php_7() {
 	public static function get_bluehost_site_id() {
 		return SiteMeta::get_id();
 	}
+
+	/**
+	 * Check if the active theme is FSE.
+	 *
+	 * @return bool
+	 */
+	public static function is_fse() {
+		return is_readable( get_stylesheet_directory() . '/templates/index.html' );
+	}
+
+	/**
+	 * Get the correct site editor url between FSE and classic Customizer.
+	 *
+	 * @return string
+	 */
+	public static function get_customize_site_url() {
+		$is_fse      = self::is_fse();
+		$destination = get_admin_url() . ( $is_fse ? 'site-editor.php' : 'customize.php' );
+
+		return esc_url( $destination );
+	}
 }

src/app/functions/index.js

@@ -1,3 +1,4 @@
+import { select } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import apiFetch from '@wordpress/api-fetch';
 import handleWPMenuActiveHighlight from './highlightTopLevel';
@@ -110,9 +111,25 @@ export function getPlatformPathUrl ( jarvisPath = '', legacyPath = '' ) {
 	return getPlatformBaseUrl('/hosting/') + legacyPath;
 }
 
+/**
+ * Get the correct site editor url between FSE and classic Customizer.
+ * 
+ * @returns {string}
+ */
+export function getSiteCustomizerUrl() {
+        const customizerUrl = 'undefined' !== typeof bluehost.app.customizeSiteUrl ? bluehost.app.customizeSiteUrl : false;
+
+        if (!customizerUrl) {
+			const adminUrl = select('bluehost/plugin').getAdminUrl();
+            return adminUrl + 'customize.php';
+        }
+
+        return customizerUrl;
+}
+
 export { 
 	sendPageviewEvent,
 	handleWPMenuAugmentation,
 	handleWPMenuActiveHighlight,
-	userTrigger
+	userTrigger,
 };

src/app/pages/home/onboarding/steps/look-right/index.js

@@ -2,13 +2,14 @@ import { __ } from '@wordpress/i18n';
 import BaseStep from '../base';
 import { BWAButton } from '@app/components/atoms';
 import designUrl from '@app/assets/illustrations/design.svg';
+import { getSiteCustomizerUrl } from '@app/functions';
 
 export const LookRightStep = () => {
     return(
         <BaseStep>
             <img className="illustration" src={designUrl} alt={__("Designer working on a website", 'bluehost-wordpress-plugin')} />
             <p>{__("You want your site to look just right - maybe you want it to match your company colors, to be serious or fun, simple or bold—whatever's you. Customize the look of your site, or", 'bluehost-wordpress-plugin')} <a href='#/home/onboarding/premium-themes'>{__('browse our premium themes', 'bluehost-wordpress-plugin')}</a> {__(" to find something that fits you just right.", 'bluehost-wordpress-plugin')}</p>
-            <BWAButton isPrimary href={window.nfdRestRoot + '/bluehost/v1/customize-site'}>{__('Customize your site', 'bluehost-wordpress-plugin')}</BWAButton>
+            <BWAButton isPrimary href={getSiteCustomizerUrl()}>{__('Customize your site', 'bluehost-wordpress-plugin')}</BWAButton>
         </BaseStep>
     );
 }

src/app/pages/home/sections.js

@@ -4,7 +4,7 @@ import { BWAHeading, BWAButton } from '@app/components/atoms';
 import { BWAContentList, BWAContentListRow } from '@app/components/molecules';
 import { __ } from '@wordpress/i18n';
 import { JetpackLogo } from '@app/assets';
-import { getPlatformBaseUrl, getPlatformPathUrl } from '@app/functions';
+import { getPlatformBaseUrl, getPlatformPathUrl, getSiteCustomizerUrl } from '@app/functions';
 
 const baseUrl = select('bluehost/plugin').getAdminUrl();
 
@@ -210,7 +210,7 @@ export const DesignBuildSection = ( props ) => {
             title={ __( 'Customizer', 'bluehost-wordpress-plugin' ) }
             desc={ __( 'Make edits and see changes before you update.', 'bluehost-wordpress-plugin' ) }>
             <BWAButton
-                href={ window.nfdRestRoot + '/bluehost/v1/customize-site' }
+                href={ getSiteCustomizerUrl() }
                 isSecondary
             >
                 { __( 'Customize Theme', 'bluehost-wordpress-plugin' ) }

tests/cypress/integration/home.cy.js

@@ -99,9 +99,19 @@ describe('Home Page', () => {
 					cy.contains('p', 'Make edits and see changes before you update.');
 
 					cy.contains('a.bluehost.components-button', 'Customize Theme');
-					cy.get('a.bluehost.components-button')
-						.should('have.attr', 'href')
-						.and('include', '/customize-site');
+
+					cy.window().then((win) => {
+						if ('undefined' !== typeof win.bluehost.wordpress.isFSE && win.bluehost.wordpress.isFSE) {
+							cy.get('a.bluehost.components-button')
+							.should('have.attr', 'href')
+							.and('include', '/site-editor');
+						} else {
+							cy.get('a.bluehost.components-button')
+							.should('have.attr', 'href')
+							.and('include', '/customize');
+						}
+					});
+
 				});
 
 		});

tests/cypress/integration/onboarding.cy.js

@@ -92,11 +92,23 @@ describe('Onboarding', () => {
 		cy.get('.nf-onboarding-base-step .illustration')
 			.should('be.visible').and('have.attr', 'alt', "Designer working on a website");
 
-		cy.get('.nf-onboarding-base-step .components-button')
-			.should('be.visible')
-			.and('have.text', 'Customize your site')
-			.and('have.attr', 'href')
-			.and('include', '/customize-site');
+			cy.window().then((win) => {
+				if ('undefined' !== typeof win.bluehost.wordpress.isFSE && win.bluehost.wordpress.isFSE) {
+					cy.get('.nf-onboarding-base-step .components-button')
+					.should('be.visible')
+					.and('have.text', 'Customize your site')
+					.and('have.attr', 'href')
+					.and('include', '/site-editor');
+				} else {
+					cy.get('.nf-onboarding-base-step .components-button')
+					.should('be.visible')
+					.and('have.text', 'Customize your site')
+					.and('have.attr', 'href')
+					.and('include', '/customize');
+				}
+			});
+
+
 	})
 
 	it('Launch Tab', () => {