post migration changes

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'moment', 'react', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '75ee6dfacce73eb32cea');
+<?php return array('dependencies' => array('lodash', 'moment', 'react', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '71d3ad3ac78432fb6a1b');

includes/ECommerce.php

@@ -67,6 +67,8 @@ class ECommerce {
 		'woocommerce_cheque_settings',
 		'onboarding_experience_level',
 		'yoast_seo_signup_status',
+		'showMigrationSteps',
+		'update_site_server_clicked',
 	);
 
 
@@ -95,6 +97,8 @@ public function __construct( Container $container ) {
 		add_action( 'before_woocommerce_init', array( $this, 'dismiss_woo_payments_cta' ) );
 		add_action( 'load-toplevel_page_' . $container->plugin()->id, array( $this, 'disable_creative_mail_banner' ) );
 		add_action( 'activated_plugin', array( $this, 'detect_plugin_activation' ), 10, 1 );
+		add_action( 'wp_login', array( $this, 'show_store_setup' ) );
+		add_action( 'auth_cookie_expired', array( $this, 'show_store_setup' ) );
 
 		$brandNameValue = $container->plugin()->brand;
 		$this->set_wpnav_collapse_setting( $brandNameValue );
@@ -194,9 +198,8 @@ public static function add_filters( $tags, $function_to_add, $priority = 10, $ac
 	public static function set_wpnav_collapse_setting( $brandNameValue ) {
 
 		wp_enqueue_script( 'nfd_wpnavbar_setting', NFD_ECOMMERCE_PLUGIN_URL . 'vendor/newfold-labs/wp-module-ecommerce/includes/wpnavbar.js', array( 'jquery' ), '1.0', true );
-		$params = array('nfdbrandname' => $brandNameValue);
+		$params = array( 'nfdbrandname' => $brandNameValue );
 		wp_localize_script( 'nfd_wpnavbar_setting', 'navBarParams', $params );
-
 	}
 
 	/**
@@ -302,6 +305,24 @@ public function register_settings() {
 				'description'  => __( 'NFD eCommerce Options', 'wp-module-ecommerce' ),
 			)
 		);
+		\register_setting(
+			'general',
+			'update_site_server_clicked',
+			array(
+				'show_in_rest' => true,
+				'type'         => 'boolean',
+				'description'  => __( 'NFD eCommerce Options', 'wp-module-ecommerce' ),
+			)
+		);
+		\register_setting(
+			'general',
+			'showMigrationSteps',
+			array(
+				'show_in_rest' => true,
+				'type'         => 'boolean',
+				'description'  => __( 'NFD eCommerce Options', 'wp-module-ecommerce' ),
+			)
+		);
 		$payments                    = array(
 			'woocommerce_bacs_settings',
 			'woocommerce_cod_settings',
@@ -543,4 +564,35 @@ public function detect_plugin_activation( $plugin ) {
 			}
 		}
 	}
+
+	/**
+	 *  On login, it checks whether to show the migration steps, post migration to user
+	 */
+	public function show_store_setup() {
+		$site_url         = get_option( 'siteurl', false );
+		$webserverUpdated = get_option( 'update_site_server_clicked', false );
+
+		$brand = $this->container->plugin()->id;
+
+		/**
+		 * Verifies if the url is matching with the regex
+		 *
+		 * @param string $brand_name id of the brand
+		 *
+		 * @param string $site_url siteurl
+		 */
+		function check_url_match( $brand_name, $site_url ) {
+			switch ( $brand_name ) {
+				case 'bluehost':
+					return ! preg_match( '/\b\w+(\.\w+)*\.mybluehost\.me\b/', $site_url );
+				case 'hostgator':
+					return ! preg_match( '/\b\w+(\.\w+)*\.temporary\.site\b/', $site_url );
+				default:
+					return true;
+			}
+		}
+		if ( check_url_match( $brand, $site_url ) ) {
+			update_option( 'showMigrationSteps', false );
+		}
+	}
 }

src/components/OnboardingList.js

@@ -9,6 +9,7 @@ import { Card, Link, Spinner, Title } from "@newfold/ui-component-library";
 import useSWRMutation from "swr/mutation";
 import { OnboardingListDefinition } from "../configs/OnboardingList.config";
 import { useCardManager } from "./useCardManager";
+import { brandName, check_url_match } from "../configs/Utility";
 
 function OnboardingCheckListItem({ children, actions, state, ...props }) {
   let manageAction = useSWRMutation(props.name, async () => {
@@ -21,6 +22,7 @@ function OnboardingCheckListItem({ children, actions, state, ...props }) {
       className={classNames(
         "nfd-p-[2px]",
         "nfd-m-0 nfd-border-b nfd-border-line last:nfd-border-b-0",
+        state.className,
         "hover:nfd-bg-canvas"
       )}
       id={props.name.trim().replace(/\s+/g, '-').toLowerCase()}
@@ -38,19 +40,22 @@ function OnboardingCheckListItem({ children, actions, state, ...props }) {
           ? { onClick: manageAction.trigger }
           : {})}
       >
-        <CheckCircleIcon
+        {!state.hideCheck && <CheckCircleIcon
           className={classNames(
             "nfd-w-[1.125rem]",
             state.isCompleted
               ? "nfd-text-[--nfd-ecomemerce-text-success]"
               : "nfd-text-[--nfd-ecommerce-text-light]"
           )}
-        />
-        <span className="nfd-flex-1 nfd-text-black">{props.text}</span>
+        />}
+        <span className="nfd-flex-1 nfd-text-black" {...(props["data-nfdhelpcenterquery"] 
+        ? {"data-nfdhelpcenterquery": props["data-nfdhelpcenterquery"]} 
+        : {}
+    )} >{props.text}</span>
         {manageAction.isMutating ? (
           <Spinner size="4" className="nfd-text-primary" />
         ) : (
-          <ArrowLongRightIcon className="nfd-text-black nfd-w-[1.125rem]" />
+          (state.showText || <ArrowLongRightIcon className="nfd-text-black nfd-w-[1.125rem]" />)
         )}
       </Link>
     </li>
@@ -70,16 +75,22 @@ export function OnboardingList(props) {
   let completedItems = items.filter((item) => item.state.isCompleted);
   let incompleteItems = items.filter((item) => !item.state.isCompleted);
   let itemsToDisplay =
-    view === "incomplete" ? incompleteItems.slice(0, 5) : completedItems;
+    props.isMigrationCompleted ? items.slice(0, 3) : (view === "incomplete" ? incompleteItems.slice(0, 5) : completedItems);
+
+  const migration_text = {
+    title: check_url_match( brandName ) && props.webServersUpdated ? __("Good job!", "wp-module-ecommerce") : __("One last thing to do...", "wp-module-ecommerce"),
+    description: check_url_match( brandName ) && props.webServersUpdated ? __("Your site is now ready for public visitors!", "wp-module-ecommerce") : __("Finish this last step so your migrated site is ready for visitors.", "wp-module-ecommerce")
+  }
+
   return (
     <div className="nfd-grid nfd-grid-rows-[repeat(3,_min-content)] nfd-gap-4" id="next-steps-section">
       <Title size="2">
-        {NewfoldRuntime.hasCapability("isEcommerce")
+        {props.isMigrationCompleted ? migration_text.title : NewfoldRuntime.hasCapability("isEcommerce")
           ? __("Next steps for your store", "wp-module-ecommerce")
           : __("Next steps for your site", "wp-module-ecommerce")}
       </Title>
       <p>
-        {NewfoldRuntime.hasCapability("isEcommerce")
+        {props.isMigrationCompleted ? migration_text.description : NewfoldRuntime.hasCapability("isEcommerce")
           ? __(
             "You're just a few steps away from sharing your store with the world!",
             "wp-module-ecommerce"
@@ -128,9 +139,9 @@ export function OnboardingList(props) {
             setView(view === "completed" ? "incomplete" : "completed")
           }
         >
-          {view === "completed"
+          {!props.isMigrationCompleted && (view === "completed"
             ? __("View remaining tasks", "wp-module-ecommerce")
-            : __("View completed tasks", "wp-module-ecommerce")}
+            : __("View completed tasks", "wp-module-ecommerce"))}
         </Link>
       )}
     </div>

src/components/OnboardingScreen.js

@@ -27,6 +27,10 @@ const Text = {
     description: __("Your site is live to the world!", "wp-module-ecommerce"),
     Illustration: WelcomeIllustration,
   },
+  isMigrated: {
+    title: __("Welcome home!", "wp-module-ecommerce"),
+    description: __("Your site has been successfully migrated.", "wp-module-ecommerce"),
+  }
 };
 
 export function OnboardingScreen({
@@ -41,6 +45,8 @@ export function OnboardingScreen({
 
   const [hovered, setIsHovered] = useState(false);
   const [editUrl, setEditUrl] = useState("");
+  const [isMigrationCompleted, setIsMigrationCompleted] = useState(false);
+  const [ webServersUpdated, setWebServersUpdated ] = useState(false);
 
   const handleMouseOver = () => {
     setIsHovered(true);
@@ -59,6 +65,8 @@ export function OnboardingScreen({
 
   useEffect(() => {
     WordPressSdk.settings.get().then((res) => {
+      setIsMigrationCompleted( res.showMigrationSteps || false );
+      setWebServersUpdated( res.update_site_server_clicked );
       if (res?.page_on_front && res?.show_on_front === "page") {
         setEditUrl(
           RuntimeSdk.adminUrl(
@@ -88,18 +96,18 @@ export function OnboardingScreen({
             )}
           >
             <div className="nfd-flex nfd-flex-col nfd-justify-start nfd-items-start nfd-gap-4">
-              <Title size="2">{title}</Title>
+              <Title size="2">{isMigrationCompleted ? Text.isMigrated.title : title}</Title>
               <div>
                 {comingSoon ? (
                   <Alert
                     variant="warning"
                     className="nfd-text-sm nfd-bg-transparent nfd-p-0 "
                   >
-                    <span className="nfd-text-red-700">{description}</span>
+                    <span className="nfd-text-red-700">{isMigrationCompleted ? Text.isMigrated.description : description}</span>
                   </Alert>
                 ) : (
                   <span className="nfd-text-[--nfd-ecommerce-text-info] nfd-text-sm">
-                    {description}
+                    {isMigrationCompleted ? Text.isMigrated.description : description}
                   </span>
                 )}
               </div>
@@ -180,7 +188,12 @@ export function OnboardingScreen({
                 </div>
               </div>
             </div>
-            <OnboardingList notify={notify} />
+            <OnboardingList notify={notify}
+            isMigrationCompleted={isMigrationCompleted}
+            setIsMigrationCompleted={setIsMigrationCompleted} 
+            setWebServersUpdated={setWebServersUpdated}
+            webServersUpdated={webServersUpdated}
+            />
           </div>
           <SiteStatus
             comingSoon={comingSoon}