diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-support-instructions/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-support-instructions/index.tsx index a6122f8dc9ac..13e0b909f5bf 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-support-instructions/index.tsx +++ b/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 } diff --git a/client/landing/stepper/declarative-flow/site-migration-flow.ts b/client/landing/stepper/declarative-flow/site-migration-flow.ts index e29a64806fc0..d94583e2a204 100644 --- a/client/landing/stepper/declarative-flow/site-migration-flow.ts +++ b/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 ) ); } diff --git a/client/landing/stepper/declarative-flow/test/site-migration-flow.tsx b/client/landing/stepper/declarative-flow/test/site-migration-flow.tsx index ea1bf6dc96bd..7f718e7c914c 100644 --- a/client/landing/stepper/declarative-flow/test/site-migration-flow.tsx +++ b/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, } );