Migration: Add credentials step (#94024)

* Add credentials step * Remove uncessary query keys
Automattic · Aug 29, 2024 · ffa0ca1 · ffa0ca1
1 parent aabecfc
commit ffa0ca1
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 2 deletions.
diff --git a/client/landing/stepper/declarative-flow/migration/index.tsx b/client/landing/stepper/declarative-flow/migration/index.tsx
@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import {
 	PLAN_MIGRATION_TRIAL_MONTHLY,
 	PLAN_BUSINESS,
@@ -33,6 +34,7 @@ const {
 	SITE_MIGRATION_INSTRUCTIONS,
 	SITE_MIGRATION_STARTED,
 	SITE_MIGRATION_ASSISTED_MIGRATION,
+	SITE_MIGRATION_CREDENTIALS,
 } = STEPS;
 
 const steps = [
@@ -45,6 +47,7 @@ const steps = [
 	SITE_MIGRATION_INSTRUCTIONS,
 	SITE_MIGRATION_STARTED,
 	SITE_MIGRATION_ASSISTED_MIGRATION,
+	SITE_MIGRATION_CREDENTIALS,
 ];
 
 const plans: { [ key: string ]: string } = {
@@ -236,14 +239,21 @@ const useCreateStepHandlers = ( navigate: Navigate< StepperStep[] >, flowObject:
 					return navigateWithQueryParams( SITE_MIGRATION_INSTRUCTIONS, [], props );
 				}
 
-				return navigateWithQueryParams( MIGRATION_SOURCE_URL, [], props );
+				// @deprecated Remove the MIGRATION_SOURCE_URL when SITE_MIGRATION_CREDENTIALS is considered stable.
+				const SOURCE_STEP = config.isEnabled( 'automated-migration/collect-credentials' )
+					? SITE_MIGRATION_CREDENTIALS
+					: MIGRATION_SOURCE_URL;
+
+				return navigateWithQueryParams( SOURCE_STEP, [], props );
 			},
 		},
 		[ SITE_MIGRATION_INSTRUCTIONS.slug ]: {
 			submit: ( props?: ProvidedDependencies ) => {
 				return navigateWithQueryParams( SITE_MIGRATION_STARTED, [], props );
 			},
 		},
+
+		// @deprecated Remove the MIGRATION_SOURCE_URL when SITE_MIGRATION_CREDENTIALS is considered stable.
 		[ MIGRATION_SOURCE_URL.slug ]: {
 			submit: ( props?: ProvidedDependencies ) => {
 				return navigateWithQueryParams( SITE_MIGRATION_ASSISTED_MIGRATION, [], props );
@@ -252,6 +262,25 @@ const useCreateStepHandlers = ( navigate: Navigate< StepperStep[] >, flowObject:
 				return navigateWithQueryParams( MIGRATION_HOW_TO_MIGRATE, [], props );
 			},
 		},
+
+		[ SITE_MIGRATION_CREDENTIALS.slug ]: {
+			submit: ( props?: ProvidedDependencies ) => {
+				const action = getFromPropsOrUrl( 'action', props ) as 'skip' | 'submit';
+				const extraPrams = {
+					...( action === 'skip' ? { credentials: 'skipped' } : {} ),
+				};
+
+				return navigateWithQueryParams(
+					SITE_MIGRATION_ASSISTED_MIGRATION,
+					[ 'credentials' ],
+					{ ...props, ...extraPrams },
+					{ replaceHistory: true }
+				);
+			},
+			goBack: ( props?: ProvidedDependencies ) => {
+				return navigateWithQueryParams( MIGRATION_HOW_TO_MIGRATE, [], props );
+			},
+		},
 	};
 };
 

diff --git a/client/landing/stepper/declarative-flow/migration/test/index.tsx b/client/landing/stepper/declarative-flow/migration/test/index.tsx
@@ -2,6 +2,7 @@
  * @jest-environment jsdom
  */
 import { URLSearchParams } from 'url';
+import config from '@automattic/calypso-config';
 import { isCurrentUserLoggedIn } from '@automattic/data-stores/src/user/selectors';
 import { useIsSiteOwner } from 'calypso/landing/stepper/hooks/use-is-site-owner';
 import { goToCheckout } from 'calypso/landing/stepper/utils/checkout';
@@ -352,7 +353,9 @@ describe( `${ flow.name }`, () => {
 				} );
 			} );
 
-			it( 'redirects user from How To Migrate to Capture Source URL when they selects the option "do it for me"', () => {
+			it( 'redirects user from How To Migrate to MIGRATION_SOURCE_URL when they selects the option "do it for me"', () => {
+				config.disable( 'automated-migration/collect-credentials' );
+
 				const destination = runNavigation( {
 					from: STEPS.MIGRATION_HOW_TO_MIGRATE,
 					query: { siteId: 123, siteSlug: 'example.wordpress.com' },
@@ -364,6 +367,56 @@ describe( `${ flow.name }`, () => {
 					query: { siteId: 123, siteSlug: 'example.wordpress.com' },
 				} );
 			} );
+
+			it( 'redirects user from How To Migrate > SITE_MIGRATION_CREDENTIALS when they selects the option "do it for me"', () => {
+				config.enable( 'automated-migration/collect-credentials' );
+				const destination = runNavigation( {
+					from: STEPS.MIGRATION_HOW_TO_MIGRATE,
+					query: { siteId: 123, siteSlug: 'example.wordpress.com' },
+					dependencies: { how: HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME },
+				} );
+
+				expect( destination ).toMatchDestination( {
+					step: STEPS.SITE_MIGRATION_CREDENTIALS,
+					query: { siteId: 123, siteSlug: 'example.wordpress.com' },
+				} );
+			} );
+		} );
+
+		describe( 'SITE_MIGRATION_CREDENTIALS STEP', () => {
+			it( 'redirects users from SITE_MIGRATION_CREDENTIALS > SITE_MIGRATION_ASSISTED_MIGRATION', () => {
+				const destination = runNavigation( {
+					from: STEPS.SITE_MIGRATION_CREDENTIALS,
+					query: {
+						siteId: 123,
+						siteSlug: 'example.wordpress.com',
+						from: 'http://oldsite.example.com',
+					},
+					dependencies: { action: 'submit' },
+				} );
+
+				expect( destination ).toMatchDestination( {
+					step: STEPS.SITE_MIGRATION_ASSISTED_MIGRATION,
+					query: {
+						siteId: 123,
+						siteSlug: 'example.wordpress.com',
+						from: 'http://oldsite.example.com',
+					},
+				} );
+			} );
+
+			it( 'redirects users from SITE_MIGRATION_CREDENTIALS > SITE_MIGRATION_ASSISTED_MIGRATION passing the skipped query param', () => {
+				const destination = runNavigation( {
+					from: STEPS.SITE_MIGRATION_CREDENTIALS,
+					query: { siteId: 123, siteSlug: 'example.wordpress.com' },
+					dependencies: { action: 'skip' },
+				} );
+
+				expect( destination ).toMatchDestination( {
+					step: STEPS.SITE_MIGRATION_ASSISTED_MIGRATION,
+					query: { siteId: 123, siteSlug: 'example.wordpress.com', credentials: 'skipped' },
+				} );
+			} );
 		} );
 
 		describe( 'SITE_MIGRATION_INSTRUCTIONS STEP', () => {
@@ -450,5 +503,25 @@ describe( `${ flow.name }`, () => {
 				},
 			} );
 		} );
+
+		it( 'redirects back user from SITE_MIGRATION_CREDENTIALS  >  MIGRATION_HOW_TO_MIGRATE STEP when the assisted modal query param is set', () => {
+			const destination = runNavigationBack( {
+				from: STEPS.SITE_MIGRATION_CREDENTIALS,
+				query: {
+					siteId: 123,
+					siteSlug: 'example.wordpress.com',
+					from: 'http://oldsite.example.com',
+				},
+			} );
+
+			expect( destination ).toMatchDestination( {
+				step: STEPS.MIGRATION_HOW_TO_MIGRATE,
+				query: {
+					siteId: 123,
+					siteSlug: 'example.wordpress.com',
+					from: 'http://oldsite.example.com',
+				},
+			} );
+		} );
 	} );
 } );