diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index a75ec317f..6a5834935 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -16,6 +16,7 @@ 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 . @@ -23,16 +24,16 @@ import { findIndex } from 'lodash'; * @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 = () => { <> - { currentStep !== stepTheFork && ( - - ) } + { currentStep !== stepTheFork && + currentRoute !== stepMigration.path && ( + + ) } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js index 954a9a660..35e27a6f1 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js +++ b/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( diff --git a/src/OnboardingSPA/data/flows/ecommerce.js b/src/OnboardingSPA/data/flows/ecommerce.js index 68bca7e04..956c6d2e5 100644 --- a/src/OnboardingSPA/data/flows/ecommerce.js +++ b/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( [ diff --git a/src/OnboardingSPA/steps/SiteGen/Migration/contents.js b/src/OnboardingSPA/steps/SiteGen/Migration/contents.js new file mode 100644 index 000000000..985490d00 --- /dev/null +++ b/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; diff --git a/src/OnboardingSPA/steps/SiteGen/Migration/index.js b/src/OnboardingSPA/steps/SiteGen/Migration/index.js new file mode 100644 index 000000000..f9d3fe44e --- /dev/null +++ b/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 ( + + +
+
{ ' ' } +

{ content?.importtext }

+
+

{ content?.description }

+ + ); +}; + +export default Migrate; diff --git a/src/OnboardingSPA/steps/SiteGen/Migration/step.js b/src/OnboardingSPA/steps/SiteGen/Migration/step.js new file mode 100644 index 000000000..d29a21840 --- /dev/null +++ b/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: [], + }, + }, +} ); diff --git a/src/OnboardingSPA/steps/SiteGen/Migration/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Migration/stylesheet.scss new file mode 100644 index 000000000..db9ea90bf --- /dev/null +++ b/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); } + } + } + +} \ No newline at end of file diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index 1bb4cf42b..0e11b0ce7 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/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 ( {

{ migrationUrl && ( - + // href={ migrationUrl } + // target={ '_blank' } + // rel={ 'noreferrer' } + onClick={ () => { + navigate( '/sitegen/step/migration' ); trackOnboardingEvent( new OnboardingEvent( ACTION_SITEGEN_FORK_OPTION_SELECTED, 'MIGRATE' ) - ) - } + ); + } } > { content.importtext } - + ) } { return ( @@ -15,6 +15,12 @@ export const installerRestURL = ( api ) => { ); }; +export const migrateRestURL = ( api ) => { + return ( + `${ migrateRestBase }/${ api }` + ); +}; + export const wpRestURL = ( api ) => { return `${ wpRestBase }/${ api }`; }; diff --git a/src/OnboardingSPA/utils/api/siteGen.js b/src/OnboardingSPA/utils/api/siteGen.js index 64893f1c0..151898e09 100644 --- a/src/OnboardingSPA/utils/api/siteGen.js +++ b/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() + ); +} diff --git a/src/constants.js b/src/constants.js index 125041109..25a6c3443 100644 --- a/src/constants.js +++ b/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