diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx index c5cdb9643eacf..f74d10e0b9bed 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/components/flow-card/index.tsx +++ b/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 ( { icon && ( - + ) } -

+

{ title } { badge && { badge.text } }

-

{ text }

+

{ text }

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 new file mode 100644 index 0000000000000..a6122f8dc9ac0 --- /dev/null +++ b/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 ( +
+ redirect( `/home/${ siteSlug }` ) } + /> + + redirect( '/support' ) } + /> +
+ ); +}; + +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: , + }, + } + ), + 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: , + }, + } + ), + }; + + const content = + contentVariation[ variation as keyof typeof contentVariation ] ?? contentVariation.default; + + return ( + + } + isHorizontalLayout={ false } + stepContent={ } + recordTracksEvent={ recordTracksEvent } + /> + ); +}; + +export default SiteMigrationSupportInstructions; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-support-instructions/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-support-instructions/style.scss new file mode 100644 index 0000000000000..d2fbdea439f75 --- /dev/null +++ b/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; + } +} diff --git a/client/landing/stepper/declarative-flow/internals/steps.tsx b/client/landing/stepper/declarative-flow/internals/steps.tsx index 4c9449d0d7767..2293d9ace4e6a 100644 --- a/client/landing/stepper/declarative-flow/internals/steps.tsx +++ b/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', diff --git a/client/landing/stepper/declarative-flow/migration/index.tsx b/client/landing/stepper/declarative-flow/migration/index.tsx index 54253e38dcb59..20e8e69619b71 100644 --- a/client/landing/stepper/declarative-flow/migration/index.tsx +++ b/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 } ); }, diff --git a/client/landing/stepper/declarative-flow/migration/test/index.tsx b/client/landing/stepper/declarative-flow/migration/test/index.tsx index 46a97861994cb..80e4a98f073e3 100644 --- a/client/landing/stepper/declarative-flow/migration/test/index.tsx +++ b/client/landing/stepper/declarative-flow/migration/test/index.tsx @@ -442,7 +442,7 @@ 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' }, @@ -450,8 +450,8 @@ describe( `${ flow.name }`, () => { } ); 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' }, } ); } ); } ); diff --git a/client/landing/stepper/declarative-flow/site-migration-flow.ts b/client/landing/stepper/declarative-flow/site-migration-flow.ts index 64bcbe6b33b65..43327abf29d2c 100644 --- a/client/landing/stepper/declarative-flow/site-migration-flow.ts +++ b/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 ) ); }