Merge pull request #535 from ramyakrishnai/migration-screens

Migration screens

src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js

@@ -16,23 +16,24 @@ import StepNavigation from './step-navigation';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { findIndex } from 'lodash';
+import { stepMigration } from '../../../../steps/SiteGen/Migration/step';
 
 /**
  * Interface header rendered into header render prop in <InterfaceSkeleton />.
  *
  * @return {WPComponent} Header
  */
 const SiteGenHeader = () => {
-	const { isHeaderNavigationEnabled, currentStep, allSteps } = useSelect(
-		( select ) => {
+	const { isHeaderNavigationEnabled, currentStep, allSteps, currentRoute } =
+		useSelect( ( select ) => {
 			return {
 				currentStep: select( nfdOnboardingStore ).getCurrentStep(),
+				currentRoute: select( nfdOnboardingStore ).getCurrentStepPath(),
 				isHeaderNavigationEnabled:
 					select( nfdOnboardingStore ).isHeaderNavigationEnabled(),
 				allSteps: select( nfdOnboardingStore ).getAllSteps(),
 			};
-		}
-	);
+		} );
 
 	const currentStepIndex = findIndex( allSteps, {
 		path: currentStep?.path,
@@ -45,9 +46,10 @@ const SiteGenHeader = () => {
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_TOP }` }>
 				<>
 					<AdminBar />
-					{ currentStep !== stepTheFork && (
-						<ProgressBar progress={ progress } />
-					) }
+					{ currentStep !== stepTheFork &&
+						currentRoute !== stepMigration.path && (
+							<ProgressBar progress={ progress } />
+						) }
 				</>
 			</Fill>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js

@@ -55,6 +55,7 @@ import { stepTheFork } from '../../../steps/TheFork/step';
 import { ThemeProvider } from '../../ThemeContextProvider';
 import themeToggleHOC from '../themeToggleHOC';
 import Footer from '../../Footer';
+import { stepMigration } from '../../../steps/SiteGen/Migration/step';
 
 const SiteBuild = () => {
 	const location = useLocation();
@@ -67,6 +68,7 @@ const SiteBuild = () => {
 		onboardingFlow,
 		currentData,
 		currentStep,
+		currentRoute,
 		lastChapter,
 		socialData,
 		firstStep,
@@ -99,6 +101,7 @@ const SiteBuild = () => {
 				initialize: select( nfdOnboardingStore ).getInitialize(),
 				pluginInstallHash:
 					select( nfdOnboardingStore ).getPluginInstallHash(),
+				currentRoute: select( nfdOnboardingStore ).getCurrentStepPath(),
 			};
 		},
 		[ location.pathname ]
@@ -431,6 +434,7 @@ const SiteBuild = () => {
 
 	const isForkStep =
 		currentStep === stepTheFork ||
+		currentRoute === stepMigration.path ||
 		window.nfdOnboarding.currentFlow === 'sitegen';
 	// wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available
 	const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(

src/OnboardingSPA/data/flows/ecommerce.js

@@ -19,6 +19,7 @@ import { filter } from 'lodash';
 import { store } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { stepTheFork } from '../../steps/TheFork/step';
+import { stepMigration } from '../../steps/SiteGen/Migration/step';
 
 export const pages = [ indexPage, errorPage ];
 
@@ -50,6 +51,7 @@ export const getSteps = ( chapters = initialChapters ) => {
 export const getRoutes = ( chapters = initialChapters ) => {
 	let routes = [ ...pages ];
 	routes.push( stepTheFork );
+	routes.push( stepMigration );
 	routes.push( stepWelcome );
 	chapters.forEach( ( chapter ) => {
 		routes = routes.concat( [

src/OnboardingSPA/steps/SiteGen/Migration/contents.js

@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __(
+			"Let's migrate your existing site to your new account",
+			'wp-module-onboarding'
+		),
+		description: __(
+			'Please wait a few seconds while we get your new account ready to import your existing WordPress site. ',
+			'wp-module-onboarding'
+		),
+		importtext: __( 'Preparing your account', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;

src/OnboardingSPA/steps/SiteGen/Migration/index.js

@@ -0,0 +1,56 @@
+import CommonLayout from '../../../components/Layouts/Common';
+
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+import { store as nfdOnboardingStore } from '../../../store';
+import { FOOTER_SITEGEN, HEADER_SITEGEN } from '../../../../constants';
+
+import getContents from './contents';
+import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading/SiteGen';
+import { getSiteMigrateUrl } from '../../../utils/api/siteGen';
+
+const Migrate = () => {
+	const {
+		setIsHeaderEnabled,
+		setSidebarActiveView,
+		setHeaderActiveView,
+		setDrawerActiveView,
+		setIsHeaderNavigationEnabled,
+		setFooterActiveView,
+		setHideFooterNav,
+	} = useDispatch( nfdOnboardingStore );
+
+	const loadData = async () => {
+		const migrateUrl = await getSiteMigrateUrl();
+		migrateUrl?.body && window.open(migrateUrl?.body, "_self")
+	};
+
+	useEffect( () => {
+		setHideFooterNav( true );
+		setIsHeaderEnabled( false );
+		setSidebarActiveView( false );
+		setIsHeaderNavigationEnabled( false );
+		setHeaderActiveView( HEADER_SITEGEN );
+		setDrawerActiveView( false );
+		setFooterActiveView( FOOTER_SITEGEN );
+		loadData()
+	} );
+
+	const content = getContents();
+	return (
+		<CommonLayout
+			// isCentered
+			className="nfd-onboarding-step--site-gen__migration"
+		>
+			<HeadingWithSubHeading title={ content?.heading } />
+			<div className="nfd-onboarding-step--site-gen__migration__contain">
+				<div className="nfd-onboarding-step--site-gen__migration__loader"></div>{ ' ' }
+				<p className="importtext">{ content?.importtext }</p>
+			</div>
+			<p className="description">{ content?.description }</p>
+		</CommonLayout>
+	);
+};
+
+export default Migrate;

src/OnboardingSPA/steps/SiteGen/Migration/step.js

@@ -0,0 +1,19 @@
+import { copy } from '@wordpress/icons';
+import { lazy } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Step } from '../../../data/models/Step';
+
+const StepMigration = lazy( () => import( './index' ) );
+
+export const stepMigration = new Step( {
+	path: '/sitegen/step/migration',
+	title: __( 'Migration', 'wp-module-onboarding' ),
+	Component: StepMigration,
+	icon: copy,
+	drawerNavigation: false,
+	sidebars: {
+		LearnMore: {
+			SidebarComponents: [],
+		},
+	},
+} );

src/OnboardingSPA/steps/SiteGen/Migration/stylesheet.scss

@@ -0,0 +1,41 @@
+.nfd-onboarding-step--site-gen__migration {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-start;
+  font-weight: 500;
+  .description{
+    font-size: 18px;
+    color: var(--nfd-onboarding-primary);
+    margin: 50px 0;
+  }
+  .nfd-onboarding-step--site-gen__migration__contain {
+    display: flex;
+    align-items: center;
+    border-radius: 12px;
+    gap: 16px;
+    padding: 24px;
+    background-color: var(--nfd-onboarding-card-background);
+    justify-content: center;
+    width: 436px;
+    .importtext{
+      color: var(--nfd-onboarding-primary);
+      font-size: 16px;
+      font-weight: 500;
+    }
+    .nfd-onboarding-step--site-gen__migration__loader {
+      border: 5px solid var(--nfd-onboarding-progress-bar-background);
+      border-top: 5px solid var(--nfd-onboarding-progress-bar-fill);
+      border-radius: 50%;
+      width: 29px;
+      height: 28px;
+      animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  }
+
+}

src/OnboardingSPA/steps/TheFork/index.js

@@ -20,6 +20,7 @@ import {
 	trackOnboardingEvent,
 } from '../../utils/analytics/hiive';
 import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants';
+import { useNavigate } from 'react-router-dom';
 
 const TheFork = () => {
 	const { migrationUrl } = useSelect( ( select ) => {
@@ -63,6 +64,8 @@ const TheFork = () => {
 		window.location.replace( pluginDashboardPage );
 	};
 	const content = getContents();
+	const navigate = useNavigate();
+
 	return (
 		<CommonLayout
 			isCentered
@@ -80,22 +83,23 @@ const TheFork = () => {
 			<br />
 			<br />
 			{ migrationUrl && (
-				<a
+				<div
 					className="nfd-onboarding-step--site-gen__fork__importsite"
-					href={ migrationUrl }
-					target={ '_blank' }
-					rel={ 'noreferrer' }
-					onClick={ () =>
+					// href={ migrationUrl }
+					// target={ '_blank' }
+					// rel={ 'noreferrer' }
+					onClick={ () => {
+						navigate( '/sitegen/step/migration' );
 						trackOnboardingEvent(
 							new OnboardingEvent(
 								ACTION_SITEGEN_FORK_OPTION_SELECTED,
 								'MIGRATE'
 							)
-						)
-					}
+						);
+					} }
 				>
 					{ content.importtext }
-				</a>
+				</div>
 			) }
 			<span
 				role="button"

src/OnboardingSPA/steps/TheFork/stylesheet.scss

@@ -51,6 +51,7 @@
 				text-align: center;
 				margin: 25px !important;
 				color: var(--nfd-onboarding-primary);
+				text-decoration: underline;
 			}
 
 			&__exit {

src/OnboardingSPA/styles/app.scss

@@ -89,6 +89,7 @@
 @import "../steps/SiteGen/Welcome/stylesheet";
 @import "../steps/SiteGen/Editor/stylesheet";
 @import "../steps/SiteGen/Editor/Header/stylesheet";
+@import "../steps/SiteGen/Migration/stylesheet.scss";
 
 .nfd-onboarding-container {
 	display: flex;

src/OnboardingSPA/utils/api/common.js

@@ -1,4 +1,4 @@
-import { onboardingRestBase, wpRestBase, installerRestBase } from '../../../constants';
+import { onboardingRestBase, wpRestBase, installerRestBase, migrateRestBase } from '../../../constants';
 
 export const onboardingRestURL = ( api ) => {
 	return (
@@ -15,6 +15,12 @@ export const installerRestURL = ( api ) => {
 	);
 };
 
+export const migrateRestURL = ( api ) => {
+	return (
+		`${ migrateRestBase }/${ api }`
+	);
+};
+
 export const wpRestURL = ( api ) => {
 	return `${ wpRestBase }/${ api }`;
 };

src/OnboardingSPA/utils/api/siteGen.js

@@ -1,7 +1,7 @@
 import apiFetch from '@wordpress/api-fetch';
 
 import { resolve } from './resolve.js';
-import { onboardingRestURL } from './common';
+import { onboardingRestURL, migrateRestURL } from './common';
 
 export async function getSiteGenIdentifiers() {
 	return await resolve(
@@ -88,3 +88,11 @@ export async function publishSitemapPages( siteDescription ) {
 		} ).then()
 	);
 }
+
+export async function getSiteMigrateUrl() {
+	return await resolve(
+		apiFetch( {
+			url: migrateRestURL( 'migrate/connect' ),
+		} ).then()
+	);
+}

src/constants.js

@@ -10,9 +10,11 @@ export const wpRestURL = window.nfdOnboarding.restUrl;
 export const wpRestRoute = 'wp/v2';
 export const onboardingRestRoute = 'newfold-onboarding/v1';
 export const installerRestRoute = 'newfold-installer/v1';
+export const migrationRestRoute = 'newfold-migration/v1';
 export const wpRestBase = `${ wpRestURL }/${ wpRestRoute }`;
 export const onboardingRestBase = `${ wpRestURL }/${ onboardingRestRoute }`;
 export const installerRestBase = `${ wpRestURL }/${ installerRestRoute }`;
+export const migrateRestBase = `${ wpRestURL }/${ migrationRestRoute }`;
 export const wpAdminPage = addQueryArgs(
 	`${ wpAdminUrl }index.php`,
 	window.nfdOnboarding.currentBrand?.dashboardRedirectParams