Site Migration: Show correct landing page when user ask for help (#98092

)

* Redirect user to the support landing page

* Create a ticket when user lands on the support page

* Fix import order

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

@@ -1,6 +1,8 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { useLocale } from '@automattic/i18n-utils';
 import { StepContainer } from '@automattic/onboarding';
 import { translate, useTranslate } from 'i18n-calypso';
+import { useMemo, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
@@ -9,8 +11,8 @@ 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 { useSubmitMigrationTicket } from '../importer-migrate-message/hooks/use-submit-migration-ticket';
 import type { Step } from '../../types';
-
 import './style.scss';
 
 const StepContent = () => {
@@ -42,35 +44,56 @@ export const SiteMigrationSupportInstructions: Step = ( { stepName } ) => {
 	const user = useSelector( getCurrentUser ) as UserData;
 	const [ query ] = useSearchParams();
 	const variation = query.get( 'variation' ) || 'default';
+	const siteSlug = query.get( 'siteSlug' ) || '';
+	const fromUrl = query.get( 'from' ) || '';
+	const locale = useLocale();
 
-	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 contentVariation = useMemo(
+		() => ( {
+			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 />,
+					},
+				}
+			),
+		} ),
+		[ user.email, translate ]
+	);
 
 	const content =
 		contentVariation[ variation as keyof typeof contentVariation ] ?? contentVariation.default;
 
+	const { sendTicket } = useSubmitMigrationTicket();
+
+	useEffect( () => {
+		recordTracksEvent( 'wpcom_support_free_migration_request_click', {
+			path: window.location.pathname,
+			automated_migration: true,
+		} );
+
+		sendTicket( {
+			locale,
+			blog_url: siteSlug,
+			from_url: fromUrl,
+		} );
+	}, [ sendTicket, locale, siteSlug, fromUrl ] );
+
 	return (
 		<StepContainer
 			stepName={ stepName }

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

@@ -55,6 +55,7 @@ const siteMigration: Flow = {
 			STEPS.SITE_MIGRATION_ALREADY_WPCOM,
 			STEPS.SITE_MIGRATION_OTHER_PLATFORM_DETECTED_IMPORT,
 			STEPS.SITE_MIGRATION_APPLICATION_PASSWORD_AUTHORIZATION,
+			STEPS.SITE_MIGRATION_SUPPORT_INSTRUCTIONS,
 		];
 
 		const hostedVariantSteps = isHostedSiteMigrationFlow( this.variantSlug ?? FLOW_NAME )
@@ -516,7 +517,7 @@ const siteMigration: Flow = {
 					return navigate(
 						addQueryArgs(
 							{ siteId, from: fromQueryParam, siteSlug },
-							STEPS.SITE_MIGRATION_ASSISTED_MIGRATION.slug
+							STEPS.SITE_MIGRATION_SUPPORT_INSTRUCTIONS.slug
 						)
 					);
 				}

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

@@ -530,7 +530,7 @@ describe( 'Site Migration Flow', () => {
 			expect( getFlowLocation() ).toEqual( {
 				path: addQueryArgs(
 					{ siteId: 123, from: 'oldsite.com', siteSlug: 'example.wordpress.com' },
-					`/${ STEPS.SITE_MIGRATION_ASSISTED_MIGRATION.slug }`
+					`/${ STEPS.SITE_MIGRATION_SUPPORT_INSTRUCTIONS.slug }`
 				),
 				state: null,
 			} );