From a7b46f5cec87477f0ae040227f4245dbd21c771c Mon Sep 17 00:00:00 2001 From: Tim Broddin Date: Mon, 30 Sep 2024 11:57:53 +0200 Subject: [PATCH] Add DIY/DIFM step to 100 year flow (#94996) * Add DIY/DIFM step to 100 year flow * Change comments * Fix DIY flow going the wrong screen --- .../declarative-flow/hundred-year-plan.ts | 74 +++++++++++-------- .../hundred-year-plan-diy-or-difm/index.tsx | 35 +++++++++ .../hundred-year-plan-diy-or-difm/styles.scss | 1 + 3 files changed, 78 insertions(+), 32 deletions(-) create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx create mode 100644 client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss diff --git a/client/landing/stepper/declarative-flow/hundred-year-plan.ts b/client/landing/stepper/declarative-flow/hundred-year-plan.ts index 9581237815eaf..9c722015de1d0 100644 --- a/client/landing/stepper/declarative-flow/hundred-year-plan.ts +++ b/client/landing/stepper/declarative-flow/hundred-year-plan.ts @@ -1,3 +1,4 @@ +import config from '@automattic/calypso-config'; import { PLAN_100_YEARS, getPlan } from '@automattic/calypso-products'; import { UserSelect } from '@automattic/data-stores'; import { HUNDRED_YEAR_PLAN_FLOW, addProductsToCart } from '@automattic/onboarding'; @@ -26,38 +27,35 @@ const HundredYearPlanFlow: Flow = { [] ); - if ( currentUser?.site_count ) { - return stepsWithRequiredLogin( [ - { - slug: 'new-or-existing-site', - asyncComponent: () => import( './internals/steps-repository/new-or-existing-site' ), - }, - { - slug: 'site-picker', - asyncComponent: () => - import( './internals/steps-repository/hundred-year-plan-site-picker' ), - }, - { - slug: 'setup', - asyncComponent: () => import( './internals/steps-repository/hundred-year-plan-setup' ), - }, - { - slug: 'domains', - asyncComponent: () => import( './internals/steps-repository/domains' ), - }, - { - slug: 'processing', - asyncComponent: () => import( './internals/steps-repository/processing-step' ), - }, + const isVipFeatureEnabled = config.isEnabled( '100year/vip' ); + const hasSite = !! currentUser?.site_count; - { - slug: 'createSite', - asyncComponent: () => import( './internals/steps-repository/create-site' ), - }, - ] ); - } + const steps = [ + // VIP step (conditional) + ...( isVipFeatureEnabled + ? [ + { + slug: 'diy-or-difm', + asyncComponent: () => + import( './internals/steps-repository/hundred-year-plan-diy-or-difm' ), + }, + ] + : [] ), - return stepsWithRequiredLogin( [ + // If the user has a site, we show them a different flow + ...( hasSite + ? [ + { + slug: 'new-or-existing-site', + asyncComponent: () => import( './internals/steps-repository/new-or-existing-site' ), + }, + { + slug: 'site-picker', + asyncComponent: () => + import( './internals/steps-repository/hundred-year-plan-site-picker' ), + }, + ] + : [] ), { slug: 'setup', asyncComponent: () => import( './internals/steps-repository/hundred-year-plan-setup' ), @@ -70,12 +68,13 @@ const HundredYearPlanFlow: Flow = { slug: 'processing', asyncComponent: () => import( './internals/steps-repository/processing-step' ), }, - { slug: 'createSite', asyncComponent: () => import( './internals/steps-repository/create-site' ), }, - ] ); + ]; + + return stepsWithRequiredLogin( steps ); }, useSideEffect() { useEffect( () => { @@ -85,6 +84,11 @@ const HundredYearPlanFlow: Flow = { useStepNavigation( _currentStep, navigate ) { const flowName = this.name; const { setPlanCartItem, setPendingAction } = useDispatch( ONBOARD_STORE ); + const currentUser = useSelect( + ( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(), + [] + ); + const hasSite = !! currentUser?.site_count; function submit( providedDependencies: ProvidedDependencies = {} ) { const updateCartForExistingSite = async () => { @@ -110,6 +114,12 @@ const HundredYearPlanFlow: Flow = { }; switch ( _currentStep ) { + case 'diy-or-difm': + if ( 'diy' === providedDependencies?.diyOrDifmChoice ) { + return navigate( hasSite ? 'new-or-existing-site' : 'setup' ); + } + // TODO: add VIP flow + return navigate( hasSite ? 'new-or-existing-site' : 'setup' ); case 'new-or-existing-site': if ( 'new-site' === providedDependencies?.newExistingSiteChoice ) { return navigate( 'setup' ); diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx new file mode 100644 index 0000000000000..d438ec66ad413 --- /dev/null +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx @@ -0,0 +1,35 @@ +import { Button } from '@wordpress/components'; +import { useTranslate } from 'i18n-calypso'; +import FormattedHeader from 'calypso/components/formatted-header'; +import HundredYearPlanStepWrapper from '../hundred-year-plan-step-wrapper'; +import type { Step } from '../../types'; + +import './styles.scss'; + +const HundredYearPlanDIYOrDIFM: Step = function HundredYearPlanDIYOrDIFM( { navigation, flow } ) { + const { submit } = navigation; + const translate = useTranslate(); + + return ( + + + + + } + formattedHeader={ + + } + stepName="hundred-year-plan-setup" + flowName={ flow } + /> + ); +}; + +export default HundredYearPlanDIYOrDIFM; diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss new file mode 100644 index 0000000000000..e1bb944593466 --- /dev/null +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss @@ -0,0 +1 @@ +/* Comment because we cannot have empty files */ \ No newline at end of file