Add We’ll take it from here! step when user tries to migrate a wpco…

…m site (#95294)

* Add support migration instructions step

* Connect steps with migration flows

* Fix mobile issues

client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx

@@ -1,6 +1,7 @@
 import { Badge } from '@automattic/components';
 import { Flex, FlexBlock, FlexItem, Card, CardBody, Icon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
+import clsx from 'clsx';
 import type { BadgeType } from '@automattic/components';
 import './style.scss';
 
@@ -14,12 +15,26 @@ interface FlowCardProps {
 		type: BadgeType;
 		text: string;
 	};
+	className?: string;
 }
 
-const FlowCard = ( { icon, onClick, text, title, disabled = false, badge }: FlowCardProps ) => {
+const bemElement = ( customClassName?: string ) => ( element: string ) =>
+	customClassName ? `${ customClassName }__${ element }` : undefined;
+
+const FlowCard = ( {
+	icon,
+	onClick,
+	text,
+	title,
+	disabled = false,
+	badge,
+	className,
+}: FlowCardProps ) => {
+	const bem = bemElement( className );
+
 	return (
 		<Card
-			className="flow-question"
+			className={ clsx( 'flow-question', className ) }
 			as="button"
 			size="small"
 			onClick={ onClick }
@@ -28,16 +43,16 @@ const FlowCard = ( { icon, onClick, text, title, disabled = false, badge }: Flow
 			<CardBody>
 				<Flex>
 					{ icon && (
-						<FlexItem className="flow-question__icon">
+						<FlexItem className={ clsx( 'flow-question__icon', bem( 'icon' ) ) }>
 							<Icon icon={ icon } size={ 24 } />
 						</FlexItem>
 					) }
 					<FlexBlock>
-						<h3 className="flow-question__heading">
+						<h3 className={ clsx( 'flow-question__heading', bem( 'heading' ) ) }>
 							{ title }
 							{ badge && <Badge type={ badge.type }>{ badge.text }</Badge> }
 						</h3>
-						<p className="flow-question__description">{ text }</p>
+						<p className={ clsx( 'flow-question__description', bem( 'description' ) ) }>{ text }</p>
 					</FlexBlock>
 					<FlexItem>
 						<Icon icon={ chevronRight } size={ 24 } />

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-support-instructions/index.tsx

@@ -0,0 +1,92 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { StepContainer } from '@automattic/onboarding';
+import { translate, useTranslate } from 'i18n-calypso';
+import { useSearchParams } from 'react-router-dom';
+import FormattedHeader from 'calypso/components/formatted-header';
+import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
+import { UserData } from 'calypso/lib/user/user';
+import { useSelector } from 'calypso/state';
+import { getCurrentUser } from 'calypso/state/current-user/selectors';
+import FlowCard from '../components/flow-card';
+import { redirect } from '../import/util';
+import type { Step } from '../../types';
+
+import './style.scss';
+
+const StepContent = () => {
+	const siteSlug = useSiteSlugParam();
+
+	return (
+		<div className="migration-support-instructions__list">
+			<FlowCard
+				className="migration-support-instructions__card"
+				title={ translate( 'Explore features' ) }
+				text={ translate( 'Discover the features available on WordPress.com.' ) }
+				onClick={ () => redirect( `/home/${ siteSlug }` ) }
+			/>
+
+			<FlowCard
+				className="migration-support-instructions__card"
+				title={ translate( 'Learn about WordPress.com' ) }
+				text={ translate(
+					'Access guides and tutorials to better understand how to use WordPress.com.'
+				) }
+				onClick={ () => redirect( '/support' ) }
+			/>
+		</div>
+	);
+};
+
+export const SiteMigrationSupportInstructions: Step = ( { stepName } ) => {
+	const translate = useTranslate();
+	const user = useSelector( getCurrentUser ) as UserData;
+	const [ query ] = useSearchParams();
+	const variation = query.get( 'variation' ) || 'default';
+
+	const contentVariation = {
+		default: translate(
+			'We apologize for the problems you’re running into. Our Happiness Engineers will reach out to you shortly at {{strong}}%(email)s{{/strong}} to help you figure out your next steps together.',
+			{
+				args: {
+					email: user.email!,
+				},
+				components: {
+					strong: <strong />,
+				},
+			}
+		),
+		goals_shared: translate(
+			'Thanks for sharing your goals. Our Happiness Engineers will reach out to you shortly at {{strong}}%(email)s{{/strong}} to help you figure out your next steps together.',
+			{
+				args: {
+					email: user.email!,
+				},
+				components: {
+					strong: <strong />,
+				},
+			}
+		),
+	};
+
+	const content =
+		contentVariation[ variation as keyof typeof contentVariation ] ?? contentVariation.default;
+
+	return (
+		<StepContainer
+			stepName={ stepName }
+			hideBack
+			formattedHeader={
+				<FormattedHeader
+					headerText={ translate( 'We’ll take it from here!' ) }
+					subHeaderText={ content }
+					subHeaderAlign="center"
+				/>
+			}
+			isHorizontalLayout={ false }
+			stepContent={ <StepContent /> }
+			recordTracksEvent={ recordTracksEvent }
+		/>
+	);
+};
+
+export default SiteMigrationSupportInstructions;

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-support-instructions/style.scss

@@ -0,0 +1,18 @@
+.migration-support-instructions {
+	padding: 0 24px;
+
+	.migration-support-instructions__list {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.migration-support-instructions__card {
+		max-width: 520px;
+		width: 100%;
+		margin: 0;
+	}
+}

client/landing/stepper/declarative-flow/internals/steps.tsx

@@ -295,6 +295,10 @@ export const STEPS = {
 		slug: 'already-wpcom',
 		asyncComponent: () => import( './steps-repository/site-migration-already-wpcom' ),
 	},
+	SITE_MIGRATION_SUPPORT_INSTRUCTIONS: {
+		slug: 'migration-support-instructions',
+		asyncComponent: () => import( './steps-repository/site-migration-support-instructions' ),
+	},
 
 	PICK_SITE: {
 		slug: 'sitePicker',

client/landing/stepper/declarative-flow/migration/index.tsx

@@ -36,6 +36,7 @@ const {
 	SITE_MIGRATION_ASSISTED_MIGRATION,
 	SITE_MIGRATION_CREDENTIALS,
 	SITE_MIGRATION_ALREADY_WPCOM,
+	SITE_MIGRATION_SUPPORT_INSTRUCTIONS,
 } = STEPS;
 
 const steps = [
@@ -50,6 +51,7 @@ const steps = [
 	SITE_MIGRATION_ASSISTED_MIGRATION,
 	SITE_MIGRATION_CREDENTIALS,
 	SITE_MIGRATION_ALREADY_WPCOM,
+	SITE_MIGRATION_SUPPORT_INSTRUCTIONS,
 ];
 
 const plans: { [ key: string ]: string } = {
@@ -307,9 +309,9 @@ const useCreateStepHandlers = ( navigate: Navigate< StepperStep[] >, flowObject:
 		[ SITE_MIGRATION_ALREADY_WPCOM.slug ]: {
 			submit: ( props?: ProvidedDependencies ) => {
 				return navigateWithQueryParams(
-					SITE_MIGRATION_ASSISTED_MIGRATION,
-					[ 'preventTicketCreation' ],
-					{ ...props, ...{ preventTicketCreation: true } },
+					SITE_MIGRATION_SUPPORT_INSTRUCTIONS,
+					[ 'variation' ],
+					{ ...props, variation: 'goals_shared' },
 					{ replaceHistory: true }
 				);
 			},

client/landing/stepper/declarative-flow/migration/test/index.tsx

@@ -442,16 +442,16 @@ describe( `${ flow.name }`, () => {
 		} );
 
 		describe( 'SITE_MIGRATION_ALREADY_WPCOM STEP', () => {
-			it( 'redirects users from SITE_MIGRATION_ALREADY_WPCOM to SITE_MIGRATION_CREDENTIALS', () => {
+			it( 'redirects users from SITE_MIGRATION_ALREADY_WPCOM to SITE_MIGRATION_SUPPORT_INSTRUCTIONS', () => {
 				const destination = runNavigation( {
 					from: STEPS.SITE_MIGRATION_ALREADY_WPCOM,
 					query: { siteId: 123, siteSlug: 'example.wordpress.com' },
 					dependencies: { action: 'submit' },
 				} );
 
 				expect( destination ).toMatchDestination( {
-					step: STEPS.SITE_MIGRATION_ASSISTED_MIGRATION,
-					query: { siteId: 123, siteSlug: 'example.wordpress.com', preventTicketCreation: true },
+					step: STEPS.SITE_MIGRATION_SUPPORT_INSTRUCTIONS,
+					query: { siteId: 123, siteSlug: 'example.wordpress.com', variation: 'goals_shared' },
 				} );
 			} );
 		} );

client/landing/stepper/declarative-flow/site-migration-flow.ts

@@ -474,7 +474,7 @@ const siteMigration: Flow = {
 					return navigate(
 						addQueryArgs(
 							{ siteId, from: fromQueryParam, siteSlug, preventTicketCreation: true },
-							STEPS.SITE_MIGRATION_ASSISTED_MIGRATION.slug
+							STEPS.SITE_MIGRATION_SUPPORT_INSTRUCTIONS.slug
 						)
 					);
 				}