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

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' );

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 (
+		<HundredYearPlanStepWrapper
+			stepContent={
+				<div>
+					<Button onClick={ () => submit?.( { diyOrDifmChoice: 'difm' } ) }>Do it for me</Button>
+					<Button onClick={ () => submit?.( { diyOrDifmChoice: 'diy' } ) }>Do it myself</Button>
+				</div>
+			}
+			formattedHeader={
+				<FormattedHeader
+					brandFont
+					headerText={ translate( 'TODO: title' ) }
+					subHeaderText={ translate( 'TODO: header' ) }
+					subHeaderAlign="center"
+				/>
+			}
+			stepName="hundred-year-plan-setup"
+			flowName={ flow }
+		/>
+	);
+};
+
+export default HundredYearPlanDIYOrDIFM;

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 */