Add woo-hosted setup flow

Author: michaeldcain

client/blocks/product-purchase-features-list/index.jsx

@@ -21,6 +21,8 @@ import {
 	WPCOM_FEATURES_WORDADS,
 	TYPE_WOOEXPRESS_MEDIUM,
 	TYPE_WOOEXPRESS_SMALL,
+	TYPE_WOO_HOSTED_BASIC,
+	TYPE_WOO_HOSTED_PRO,
 	TYPE_100_YEAR,
 	TYPE_STARTER,
 } from '@automattic/calypso-products';
@@ -395,6 +397,8 @@ export class ProductPurchaseFeaturesList extends Component {
 				[ TYPE_ECOMMERCE ]: () => this.getEcommerceFeatures(),
 				[ TYPE_WOOEXPRESS_MEDIUM ]: () => this.getEcommerceFeatures(),
 				[ TYPE_WOOEXPRESS_SMALL ]: () => this.getEcommerceFeatures(),
+				[ TYPE_WOO_HOSTED_BASIC ]: () => this.getEcommerceFeatures(),
+				[ TYPE_WOO_HOSTED_PRO ]: () => this.getEcommerceFeatures(),
 				[ TYPE_BUSINESS ]: () => this.getBusinessFeatures(),
 				[ TYPE_PREMIUM ]: () => this.getPremiumFeatures(),
 				[ TYPE_PERSONAL ]: () => this.getPersonalFeatures(),

client/landing/stepper/declarative-flow/flows/woo-hosted/README.md

@@ -0,0 +1,15 @@
+# woo-hosted flow
+
+## Testing instructions
+
+Please improve the instructions on how to test this flow.
+
+1. Go to /setup/woo-hosted.
+
+## Owned by
+
+@michaeldcain
+
+## Context
+
+https://ciabp2.wordpress.com/2025/07/31/ciab-plans-and-pricing-where-we-are-and-next-steps/

client/landing/stepper/declarative-flow/flows/woo-hosted/style.scss

@@ -0,0 +1,8 @@
+.woo-hosted {
+    // Set WooCommerce purple as the accent color
+    --color-accent: var(--studio-woocommerce-purple-60);
+    --color-accent-60: var(--studio-woocommerce-purple-70);
+    --wp-components-color-accent-darker-10: var(--studio-woocommerce-purple-70);
+    --wp-components-color-accent-darker-20: var(--studio-woocommerce-purple-80);
+    --wp-components-color-accent: var(--studio-woocommerce-purple-60);
+}

client/landing/stepper/declarative-flow/flows/woo-hosted/woo-hosted.tsx

@@ -0,0 +1,141 @@
+import { WooCommerceWooLogo } from '@automattic/components';
+import { WOO_HOSTED_FLOW } from '@automattic/onboarding';
+import { MinimalRequestCartProduct } from '@automattic/shopping-cart';
+import { useDispatch, useSelect, dispatch } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
+import { persistSignupDestination } from 'calypso/signup/storageUtils';
+import { useQuery } from '../../../hooks/use-query';
+import { ONBOARD_STORE } from '../../../stores';
+import { stepsWithRequiredLogin } from '../../../utils/steps-with-required-login';
+import { STEPS } from '../../internals/steps';
+import { ProcessingResult } from '../../internals/steps-repository/processing-step/constants';
+import type { FlowV2, SubmitHandler } from '../../internals/types';
+import type { DomainSuggestion } from '@automattic/api-core';
+import type { OnboardActions, OnboardSelect } from '@automattic/data-stores';
+import './style.scss';
+
+const WooHostedLogo = () => <WooCommerceWooLogo width={ 50 } />;
+
+async function initialize() {
+	const { resetOnboardStore } = dispatch( ONBOARD_STORE ) as OnboardActions;
+
+	await resetOnboardStore();
+
+	const steps = [ STEPS.UNIFIED_DOMAINS, STEPS.UNIFIED_PLANS, STEPS.PROCESSING ];
+
+	return stepsWithRequiredLogin( steps );
+}
+
+const wooHosted: FlowV2< typeof initialize > = {
+	name: WOO_HOSTED_FLOW,
+	__experimentalUseBuiltinAuth: true,
+	isSignupFlow: false,
+	logo: WooHostedLogo,
+	initialize,
+	useStepsProps() {
+		return {
+			plans: {
+				displayedIntervals: [ 'monthly', 'yearly' ],
+			},
+		};
+	},
+	useStepNavigation( _currentStepSlug, navigate ) {
+		const {
+			setDomain,
+			setDomainCartItem,
+			setDomainCartItems,
+			setPlanCartItem,
+			setProductCartItems,
+			setSiteUrl,
+			setSignupDomainOrigin,
+			resetCouponCode,
+		} = useDispatch( ONBOARD_STORE ) as OnboardActions;
+		const couponCode = useSelect(
+			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getCouponCode(),
+			[]
+		);
+
+		const query = useQuery();
+
+		const wooHostedSiteSlug = query.get( 'site' );
+		const showDomainStep = query.has( 'showDomainStep' );
+
+		const getGoBack = () => {
+			if ( _currentStepSlug === STEPS.UNIFIED_PLANS.slug && showDomainStep ) {
+				return () => navigate( STEPS.UNIFIED_PLANS.slug );
+			}
+		};
+
+		const submit: SubmitHandler< typeof initialize > = ( submittedStep ) => {
+			const { slug, providedDependencies } = submittedStep;
+
+			switch ( slug ) {
+				case STEPS.UNIFIED_DOMAINS.slug: {
+					if ( ! providedDependencies ) {
+						throw new Error( 'No provided dependencies found' );
+					}
+
+					if ( providedDependencies.navigateToUseMyDomain ) {
+						throw new Error( 'Navigation to use my domain is not supported for this flow' );
+					}
+
+					setSiteUrl( wooHostedSiteSlug as string );
+					setDomain( providedDependencies.suggestion as DomainSuggestion );
+					setDomainCartItem( providedDependencies.domainItem as MinimalRequestCartProduct );
+					setDomainCartItems( providedDependencies.domainCart as MinimalRequestCartProduct[] );
+					setSignupDomainOrigin( providedDependencies.signupDomainOrigin as string );
+
+					return navigate( STEPS.UNIFIED_PLANS.slug );
+				}
+
+				case STEPS.UNIFIED_PLANS.slug: {
+					const cartItems = providedDependencies.cartItems;
+					const [ pickedPlan, ...extraProducts ] = cartItems ?? [];
+
+					if ( ! pickedPlan ) {
+						throw new Error( 'No product slug found' );
+					}
+
+					setPlanCartItem( {
+						...pickedPlan,
+						extra: {
+							...pickedPlan.extra,
+						},
+					} );
+
+					setProductCartItems( extraProducts.filter( ( product ) => product !== null ) );
+					return navigate( STEPS.PROCESSING.slug );
+				}
+
+				case STEPS.PROCESSING.slug: {
+					if ( providedDependencies.processingResult === ProcessingResult.SUCCESS ) {
+						const destination = `https://${ wooHostedSiteSlug }/wp-admin/admin.php?page=wc-admin`;
+
+						if ( providedDependencies.goToCheckout ) {
+							persistSignupDestination( destination );
+
+							couponCode && resetCouponCode();
+							return window.location.assign(
+								addQueryArgs(
+									`/checkout/${ encodeURIComponent(
+										( providedDependencies?.siteSlug as string ) ?? ''
+									) }`,
+									{ redirect_to: destination, coupon: couponCode }
+								)
+							);
+						}
+
+						return navigate( STEPS.UNIFIED_PLANS.slug );
+					}
+				}
+			}
+		};
+
+		return {
+			goBack: getGoBack(),
+			submit,
+		};
+	},
+};
+
+export default wooHosted;

client/landing/stepper/declarative-flow/helpers/should-use-step-container-v2.ts

@@ -6,6 +6,7 @@ import {
 	TRANSFERRING_HOSTED_SITE_FLOW,
 	ONBOARDING_UNIFIED_FLOW,
 	DOMAIN_FLOW,
+	WOO_HOSTED_FLOW,
 } from '@automattic/onboarding';
 
 const FLOWS_USING_STEP_CONTAINER_V2 = [
@@ -16,6 +17,7 @@ const FLOWS_USING_STEP_CONTAINER_V2 = [
 	SITE_MIGRATION_FLOW,
 	ONBOARDING_UNIFIED_FLOW,
 	DOMAIN_FLOW,
+	WOO_HOSTED_FLOW,
 ];
 
 export const shouldUseStepContainerV2 = ( flow: string ) => {

client/landing/stepper/declarative-flow/internals/index.tsx

@@ -215,6 +215,7 @@ export const FlowRenderer: React.FC< {
 				variantSlug={ flow.variantSlug }
 				stepName={ step.slug }
 				data={ stepData }
+				logo={ flow.logo }
 				{ ...stepsProps?.[ step.slug ] }
 			/>
 		);

client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/index.tsx

@@ -131,6 +131,9 @@ const DomainsStep: Step< { submits: DomainStepSubmittedTypes } > = ( { navigatio
 				step={ stepState }
 				flowName={ props.flow }
 				useStepperWrapper
+				wrapperProps={ {
+					logo: props.logo,
+				} }
 			/>
 		</CalypsoShoppingCartProvider>
 	);

client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/index.tsx

@@ -8,6 +8,7 @@ import {
 	ONBOARDING_FLOW,
 	ONBOARDING_UNIFIED_FLOW,
 	START_WRITING_FLOW,
+	WOO_HOSTED_FLOW,
 	Step,
 	useStepPersistedState,
 } from '@automattic/onboarding';
@@ -70,6 +71,8 @@ function getPlansIntent( flowName: string | null ): PlansIntent | null {
 			break;
 		case ONBOARDING_UNIFIED_FLOW:
 			return 'plans-affiliate';
+		case WOO_HOSTED_FLOW:
+			return 'plans-woo-hosted';
 		default:
 			return null;
 	}
@@ -220,11 +223,13 @@ const PlansStepAdaptor: StepType< {
 			onIntentChange={ handleIntentChange }
 			onPlanIntervalUpdate={ onPlanIntervalUpdate }
 			intervalType={ planInterval }
+			displayedIntervals={ props.displayedIntervals }
 			wrapperProps={ {
 				hideBack: false,
 				goBack: props.navigation.goBack,
 				isFullLayout: true,
 				isExtraWideLayout: false,
+				logo: props.logo,
 			} }
 			useStepperWrapper
 			useStepContainerV2={ isUsingStepContainerV2 }

client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/unified-plans-step.tsx

@@ -120,6 +120,7 @@ export interface UnifiedPlansStepProps {
 		goBack: NavigationControls[ 'goBack' ];
 		isFullLayout: boolean;
 		isExtraWideLayout: boolean;
+		logo?: React.ComponentType< any >;
 	};
 
 	shouldHideNavButtons?: boolean;
@@ -581,6 +582,7 @@ function UnifiedPlansStep( {
 									<Step.BackButton onClick={ goBack }>{ backLabelText }</Step.BackButton>
 								) : undefined
 							}
+							logo={ wrapperProps.logo && <wrapperProps.logo /> }
 						/>
 					}
 					heading={

client/landing/stepper/declarative-flow/internals/types.ts

@@ -267,6 +267,7 @@ export interface FlowV2< FlowStepsInitialize extends DefaultFlowStepsConfig > {
 	 */
 	variantSlug?: string;
 	title?: string;
+	logo?: React.ComponentType< any >;
 	classnames?: string | [ string ];
 	/**
 	 * Required flag to indicate if the flow is a signup flow.
@@ -335,6 +336,7 @@ export type StepProps< StepDataShape extends StepPropTypes = object > = Conditio
 		 */
 		redirectTo?: string;
 		signupUrl?: string;
+		logo: React.ComponentType< any >;
 	},
 	StepDataShape[ 'accepts' ]
 >;