@automattic/onboarding 1.0.0 → 1.0.1

package/src/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.tsx

@@ -0,0 +1,93 @@
+import clsx from 'clsx';
+import { Children, Fragment, isValidElement, ReactNode } from 'react';
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { ContentProp } from '../../components/StepContainerV2/context';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+import './style.scss';
+
+interface TwoColumnLayoutProps {
+	topBar?: ContentProp;
+	heading?: ReactNode;
+	className?: string;
+	children?: ContentProp;
+	footer?: ReactNode;
+	stickyBottomBar?: ContentProp;
+	firstColumnWidth: number;
+	secondColumnWidth: number;
+	noBottomPadding?: boolean;
+	columns?: number;
+	isFullWidth?: boolean;
+	noInlinePadding?: boolean;
+}
+
+export const TwoColumnLayout = ( {
+	firstColumnWidth,
+	secondColumnWidth,
+	children,
+	topBar,
+	heading,
+	className,
+	footer,
+	stickyBottomBar,
+	noBottomPadding = false,
+	columns = 10,
+	isFullWidth = false,
+	noInlinePadding = false,
+}: TwoColumnLayoutProps ) => {
+	const getChildFlexGrow = ( index: number ) => {
+		switch ( index ) {
+			case 0:
+				return firstColumnWidth;
+			case 1:
+				return secondColumnWidth;
+			default:
+				return undefined;
+		}
+	};
+
+	return (
+		<StepContainerV2>
+			{ ( context ) => {
+				let childElements = typeof children === 'function' ? children( context ) : children;
+				if (
+					isValidElement< { children?: ReactNode } >( childElements ) &&
+					childElements.type === Fragment
+				) {
+					childElements = childElements.props.children;
+				}
+
+				childElements = Children.toArray( childElements )
+					.filter( isValidElement )
+					.map( ( child, index ) => (
+						<div style={ { flex: getChildFlexGrow( index ) } } key={ index }>
+							{ child }
+						</div>
+					) );
+
+				return (
+					<>
+						<TopBarRenderer topBar={ topBar } />
+						<ContentWrapper
+							noBottomPadding={ noBottomPadding }
+							noInlinePadding={ noInlinePadding }
+							isFullWidth={ isFullWidth }
+						>
+							{ heading && <ContentRow columns={ 6 }>{ heading }</ContentRow> }
+							<ContentRow
+								columns={ columns }
+								className={ clsx( 'step-container-v2__content-row--two-column-layout', className ) }
+							>
+								{ childElements }
+							</ContentRow>
+							{ footer && <ContentRow columns={ 6 }>{ footer }</ContentRow> }
+						</ContentWrapper>
+						<StickyBottomBarRenderer stickyBottomBar={ stickyBottomBar } />
+					</>
+				);
+			} }
+		</StepContainerV2>
+	);
+};

package/src/step-container-v2/wireframes/TwoColumnLayout/style.scss

@@ -0,0 +1,15 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2__content-row--two-column-layout {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 3rem;
+
+	@include break-large {
+		gap: 4rem;
+		flex-direction: row;
+		align-items: flex-start;
+	}
+}

package/src/step-container-v2/wireframes/WideLayout/WideLayout.stories.tsx

@@ -0,0 +1,83 @@
+import { createInterpolateElement } from '@wordpress/element';
+import { Heading, TopBar, BackButton, PrimaryButton, StickyBottomBar } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { WideLayout } from './WideLayout';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta< typeof WideLayout > = {
+	title: 'Onboarding/StepWireframes/WideLayout',
+	component: WideLayout,
+	decorators: [ withStepContainerV2ContextDecorator ],
+};
+
+export default meta;
+
+export const Wide_Default = () => (
+	<WideLayout
+		topBar={ <TopBar leftElement={ <BackButton /> } /> }
+		heading={
+			<Heading
+				text="Wide layout"
+				subText={ createInterpolateElement(
+					'A <code>WideLayout</code> with the heading rendered in the default 12-column track. This subtext is intentionally long enough that you can compare it side-by-side with the 6-column variant and see the wrapping change.',
+					{
+						code: <code />,
+					}
+				) }
+			/>
+		}
+		stickyBottomBar={ <StickyBottomBar rightElement={ <PrimaryButton /> } /> }
+	>
+		<WireframePlaceholder height={ 616 }>Main</WireframePlaceholder>
+	</WideLayout>
+);
+
+export const Wide_HeadingSixColumns = () => (
+	<WideLayout
+		topBar={ <TopBar leftElement={ <BackButton /> } /> }
+		heading={
+			<Heading
+				text="Wide layout — 6-column heading"
+				subText={ createInterpolateElement(
+					'A <code>WideLayout</code> with the heading constrained to a 6-column track (matching the heading width used by <code>CenteredColumnLayout</code> by default). Main content keeps the full 12-column width. This subtext is intentionally long enough that you can compare it side-by-side with the default and see the wrapping change.',
+					{
+						code: <code />,
+					}
+				) }
+			/>
+		}
+		headingColumnWidth={ 6 }
+		stickyBottomBar={ <StickyBottomBar rightElement={ <PrimaryButton /> } /> }
+	>
+		<WireframePlaceholder height={ 616 }>Main</WireframePlaceholder>
+	</WideLayout>
+);
+
+type WideLayoutStory = StoryObj< typeof WideLayout >;
+
+export const Wide_Playground: WideLayoutStory = {
+	args: {
+		topBar: <TopBar leftElement={ <BackButton /> } />,
+		heading: (
+			<Heading
+				text="Wide layout — Playground"
+				subText={ createInterpolateElement(
+					'Use the <code>Controls</code> panel to switch <code>headingColumnWidth</code> between values and watch the heading wrapper resize. The main content row below stays full-width regardless.',
+					{
+						code: <code />,
+					}
+				) }
+			/>
+		),
+		headingColumnWidth: 6,
+		stickyBottomBar: <StickyBottomBar rightElement={ <PrimaryButton /> } />,
+		children: <WireframePlaceholder height={ 616 }>Main</WireframePlaceholder>,
+	},
+	argTypes: {
+		headingColumnWidth: {
+			control: { type: 'select' },
+			options: [ undefined, 4, 5, 6, 8, 10 ],
+		},
+	},
+};

package/src/step-container-v2/wireframes/WideLayout/WideLayout.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { ContentProp } from '../../components/StepContainerV2/context';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+
+interface WideLayoutProps {
+	topBar?: ContentProp;
+	heading?: ReactNode;
+	headingColumnWidth?: 4 | 5 | 6 | 8 | 10;
+	className?: string;
+	children?: ContentProp;
+	stickyBottomBar?: ContentProp;
+}
+
+export const WideLayout = ( {
+	topBar,
+	heading,
+	headingColumnWidth,
+	className,
+	children,
+	stickyBottomBar,
+}: WideLayoutProps ) => {
+	return (
+		<StepContainerV2>
+			{ ( context ) => {
+				const content = typeof children === 'function' ? children( context ) : children;
+
+				return (
+					<>
+						<TopBarRenderer topBar={ topBar } />
+						<ContentWrapper>
+							{ heading && <ContentRow columns={ headingColumnWidth }>{ heading }</ContentRow> }
+							<ContentRow className={ className }>{ content }</ContentRow>
+						</ContentWrapper>
+						<StickyBottomBarRenderer stickyBottomBar={ stickyBottomBar } />
+					</>
+				);
+			} }
+		</StepContainerV2>
+	);
+};

package/src/step-navigation-link/index.tsx

@@ -13,6 +13,7 @@ interface Props {
 	borderless?: boolean;
 	cssClass?: string;
 	rel?: string;
+	backUrl?: string;
 	recordClick?: () => void;
 }
 
@@ -27,6 +28,7 @@ const StepNavigationLink: React.FC< Props > = ( {
 	cssClass,
 	rel,
 	recordClick,
+	backUrl,
 } ) => {
 	const translate = useTranslate();
 
@@ -59,6 +61,7 @@ const StepNavigationLink: React.FC< Props > = ( {
 			borderless={ borderless }
 			className={ buttonClasses }
 			onClick={ onClick }
+			href={ backUrl }
 			rel={ rel }
 		>
 			{ backGridicon }

package/src/step-navigation-link/style.scss

@@ -21,6 +21,11 @@ $font-body-small: 14px !default;
 		}
 	}
 
+	&:focus {
+		border-color: var(--color-accent);
+		box-shadow: 0 0 0 2px var(--color-accent);
+	}
+
 	&.has-underline {
 		text-decoration: underline;
 	}
@@ -28,9 +33,6 @@ $font-body-small: 14px !default;
 	&.is-primary {
 		border-radius: 4px;
 		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
-		background-color: #117ac9;
-		border-color: #117ac9;
-		color: var(--color-text-inverted);
 		padding: 8px 14px;
 	}
 }

package/src/style-imports.d.ts

@@ -0,0 +1,3 @@
+// Ambient declarations for side-effect style imports (TS6 requires these; see TS2882).
+declare module '*.scss';
+declare module '*.css';

package/src/titles/styles.scss

@@ -1,5 +1,5 @@
-@import "../../styles/variables.scss";
-@import "../../styles/mixins.scss";
+@import "../../styles/variables";
+@import "../../styles/mixins";
 
 .onboarding-title {
 	@include onboarding-heading-text-mobile;

package/src/upload-and-set-site-logo.ts

@@ -1,4 +1,4 @@
-import wpcomRequest from 'wpcom-proxy-request';
+import wpcomRequest from './wpcom-request';
 
 export async function uploadAndSetSiteLogo( siteId: string | number | undefined, file: File ) {
 	const formData = [ [ 'media[]', file ] ];

package/src/utils/contrastChecker.ts

@@ -1,38 +1,3 @@
-export type RGB = {
-	r: number;
-	g: number;
-	b: number;
-};
-
-// Default background color of Lettre theme
-const LETTRE_THEME_SITE_BACKGROUND_COLOR_RGB = { r: 255, g: 255, b: 255 };
-// Minimum contrast ratio as per WCAG standards "at least 4.5:1 for normal text"
-const MIN_CONTRAST_RATIO = 1 / 4.5;
-
-const luminance = ( { r, g, b }: RGB ) => {
-	const a = [ r, g, b ].map( function ( v ) {
-		v /= 255;
-		return v <= 0.03928 ? v / 12.92 : Math.pow( ( v + 0.055 ) / 1.055, 2.4 );
-	} );
-	return a[ 0 ] * 0.2126 + a[ 1 ] * 0.7152 + a[ 2 ] * 0.0722;
-};
-
-const colorContrastRatio = ( color1luminance: number, color2luminance: number ) =>
-	color1luminance > color2luminance
-		? ( color2luminance + 0.05 ) / ( color1luminance + 0.05 )
-		: ( color1luminance + 0.05 ) / ( color2luminance + 0.05 );
-
-export const hasMinContrast = (
-	textColorRgb: RGB,
-	bgColorRgb = LETTRE_THEME_SITE_BACKGROUND_COLOR_RGB,
-	minContrastRatio = MIN_CONTRAST_RATIO
-): boolean => {
-	const textColorLuminance = luminance( textColorRgb );
-	const bgColorLuminance = luminance( bgColorRgb );
-	const contrast = colorContrastRatio( textColorLuminance, bgColorLuminance );
-	return contrast <= minContrastRatio;
-};
-
 // Works also with shorthand hex triplets such as "#03F"
 export const hexToRgb = ( hex: string ) => {
 	const rgbHex = hex

package/src/utils/flows.ts

@@ -1,93 +1,55 @@
 export const ACCOUNT_FLOW = 'account';
-export const AI_ASSEMBLER_FLOW = 'ai-assembler';
 export const NEWSLETTER_FLOW = 'newsletter';
-export const NEWSLETTER_POST_SETUP_FLOW = 'newsletter-post-setup';
 export const HOSTING_LP_FLOW = 'hosting-start';
 export const NEW_HOSTED_SITE_FLOW = 'new-hosted-site';
-export const NEW_HOSTED_SITE_FLOW_USER_INCLUDED = 'new-hosted-site-user-included';
 export const TRANSFERRING_HOSTED_SITE_FLOW = 'transferring-hosted-site';
-export const LINK_IN_BIO_FLOW = 'link-in-bio';
-export const LINK_IN_BIO_TLD_FLOW = 'link-in-bio-tld';
-export const LINK_IN_BIO_POST_SETUP_FLOW = 'link-in-bio-post-setup';
+export const DIRECT_TO_CART_FLOW = 'direct-to-cart';
 export const CONNECT_DOMAIN_FLOW = 'connect-domain';
-export const VIDEOPRESS_FLOW = 'videopress';
-export const VIDEOPRESS_ACCOUNT = 'videopress-account';
-export const VIDEOPRESS_TV_FLOW = 'videopress-tv';
-export const VIDEOPRESS_TV_PURCHASE_FLOW = 'videopress-tv-purchase';
-export const IMPORT_FOCUSED_FLOW = 'import-focused';
-export const IMPORT_HOSTED_SITE_FLOW = 'import-hosted-site';
-export const SENSEI_FLOW = 'sensei';
-export const ECOMMERCE_FLOW = 'ecommerce';
+export const DOMAIN_FLOW = 'domain';
 export const ENTREPRENEUR_FLOW = 'entrepreneur';
-export const WOOEXPRESS_FLOW = 'wooexpress';
 export const FREE_FLOW = 'free';
-export const FREE_POST_SETUP_FLOW = 'free-post-setup';
-export const MIGRATION_FLOW = 'import-focused';
 export const SITE_MIGRATION_FLOW = 'site-migration';
-export const MIGRATION_SIGNUP_FLOW = 'migration-signup';
-export const HOSTED_SITE_MIGRATION_FLOW = 'hosted-site-migration';
 export const COPY_SITE_FLOW = 'copy-site';
 export const BUILD_FLOW = 'build';
 export const WRITE_FLOW = 'write';
+export const WRITE_ON_FLOW = 'write-on';
 export const START_WRITING_FLOW = 'start-writing';
-export const DESIGN_FIRST_FLOW = 'design-first';
 export const SITE_SETUP_FLOW = 'site-setup';
 export const WITH_THEME_FLOW = 'with-theme';
-export const WITH_THEME_ASSEMBLER_FLOW = 'with-theme-assembler';
-export const ASSEMBLER_FIRST_FLOW = 'assembler-first';
+export const ECOMMERCE_FLOW = 'ecommerce';
+export const ECOMMERCE_MONTHLY_FLOW = 'ecommerce-monthly';
 
 export const READYMADE_TEMPLATE_FLOW = 'readymade-template';
 
 export const UPDATE_DESIGN_FLOW = 'update-design';
-export const DOMAIN_UPSELL_FLOW = 'domain-upsell';
+export const DOMAIN_AND_PLAN_FLOW = 'domain-and-plan';
 export const DOMAIN_TRANSFER = 'domain-transfer';
-export const GOOGLE_TRANSFER = 'google-transfer';
+export const HUNDRED_YEAR_DOMAIN_TRANSFER = 'hundred-year-domain-transfer';
+export const HUNDRED_YEAR_DOMAIN_FLOW = 'hundred-year-domain';
 export const HUNDRED_YEAR_PLAN_FLOW = 'hundred-year-plan';
+export const BLOG_FLOW = 'blog';
 export const REBLOGGING_FLOW = 'reblogging';
 export const DOMAIN_FOR_GRAVATAR_FLOW = 'domain-for-gravatar';
-export const ONBOARDING_GUIDED_FLOW = 'onboarding';
-export const EMAIL_SUBSCRIPTION_FLOW = 'email-subscription';
-
-export const isLinkInBioFlow = ( flowName: string | null | undefined ) => {
-	return Boolean(
-		flowName &&
-			[ LINK_IN_BIO_FLOW, LINK_IN_BIO_TLD_FLOW, LINK_IN_BIO_POST_SETUP_FLOW ].includes( flowName )
-	);
-};
-
-export const isNewsletterFlow = ( flowName: string | null ) => {
-	return Boolean(
-		flowName && [ NEWSLETTER_FLOW, NEWSLETTER_POST_SETUP_FLOW ].includes( flowName )
-	);
-};
-
-export const isFreeFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ FREE_FLOW, FREE_POST_SETUP_FLOW ].includes( flowName ) );
-};
-
-export const isNewsletterOrLinkInBioFlow = ( flowName: string | null ) => {
-	return Boolean(
-		flowName &&
-			[
-				NEWSLETTER_FLOW,
-				NEWSLETTER_POST_SETUP_FLOW,
-				LINK_IN_BIO_FLOW,
-				LINK_IN_BIO_TLD_FLOW,
-				LINK_IN_BIO_POST_SETUP_FLOW,
-			].includes( flowName )
-	);
+export const ONBOARDING_FLOW = 'onboarding';
+export const EXAMPLE_FLOW = 'example';
+export const DIFM_FLOW = 'do-it-for-me';
+export const DIFM_FLOW_STORE = 'do-it-for-me-store';
+export const WEBSITE_DESIGN_SERVICES = 'website-design-services';
+export const ONBOARDING_UNIFIED_FLOW = 'onboarding-unified';
+export const AI_SITE_BUILDER_FLOW = 'ai-site-builder';
+export const AI_SITE_BUILDER_SPEC_FLOW = 'ai-site-builder-spec';
+export const PLAYGROUND_FLOW = 'playground';
+export const PLAN_UPGRADE_FLOW = 'plan-upgrade';
+export const FLEX_SITE_FLOW = 'flex-site';
+export const WOO_HOSTED_PLANS_FLOW = 'woo-hosted-plans';
+export const ART_PROMO_FLOW = 'art-domain';
+
+export const isNewsletterFlow = ( flowName: string | null | undefined ) => {
+	return Boolean( flowName && NEWSLETTER_FLOW === flowName );
 };
 
 export const isTailoredSignupFlow = ( flowName: string | null ) => {
-	return Boolean(
-		flowName &&
-			( isNewsletterOrLinkInBioFlow( flowName ) ||
-				VIDEOPRESS_FLOW === flowName ||
-				VIDEOPRESS_TV_FLOW === flowName ||
-				VIDEOPRESS_TV_PURCHASE_FLOW === flowName ||
-				ECOMMERCE_FLOW === flowName ||
-				FREE_FLOW === flowName )
-	);
+	return Boolean( flowName && isNewsletterFlow( flowName ) );
 };
 
 export const isEntrepreneurSignupFlow = ( flowName: string | null ) => {
@@ -113,17 +75,6 @@ export const isAnyHostingFlow = ( flowName?: string | null ) => {
 	);
 };
 
-export const isAnyMigrationFlow = ( flowName?: string | null ) => {
-	return Boolean(
-		flowName &&
-			[ MIGRATION_FLOW, IMPORT_FOCUSED_FLOW, IMPORT_HOSTED_SITE_FLOW ].includes( flowName )
-	);
-};
-
-export const isMigrationFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ MIGRATION_FLOW ].includes( flowName ) );
-};
-
 export const isCopySiteFlow = ( flowName: string | null ) => {
 	return Boolean( flowName && [ COPY_SITE_FLOW ].includes( flowName ) );
 };
@@ -132,22 +83,14 @@ export const isEntrepreneurFlow = ( flowName: string | null ) => {
 	return Boolean( flowName && [ ENTREPRENEUR_FLOW ].includes( flowName ) );
 };
 
-export const isWooExpressFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ WOOEXPRESS_FLOW ].includes( flowName ) );
+export const isEcommerceFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ ECOMMERCE_FLOW, ECOMMERCE_MONTHLY_FLOW ].includes( flowName ) );
 };
 
 export const isNewSiteMigrationFlow = ( flowName: string | null ) => {
 	return Boolean( flowName && [ SITE_MIGRATION_FLOW ].includes( flowName ) );
 };
 
-export const isMigrationSignupFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ MIGRATION_SIGNUP_FLOW ].includes( flowName ) );
-};
-
-export const isHostedSiteMigrationFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ HOSTED_SITE_MIGRATION_FLOW ].includes( flowName ) );
-};
-
 export const isBuildFlow = ( flowName: string | null ) => {
 	return Boolean( flowName && [ BUILD_FLOW ].includes( flowName ) );
 };
@@ -164,41 +107,18 @@ export const isStartWritingFlow = ( flowName: string | null ) => {
 	return Boolean( flowName && [ START_WRITING_FLOW ].includes( flowName ) );
 };
 
-export const isDesignFirstFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ DESIGN_FIRST_FLOW ].includes( flowName ) );
+export const isOnboardingFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ ONBOARDING_FLOW ].includes( flowName ) );
 };
 
-export const isBlogOnboardingFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ START_WRITING_FLOW, DESIGN_FIRST_FLOW ].includes( flowName ) );
-};
-
-export const isOnboardingGuidedFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ ONBOARDING_GUIDED_FLOW ].includes( flowName ) );
-};
-
-export const isDomainUpsellFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && [ DOMAIN_UPSELL_FLOW ].includes( flowName ) );
-};
-
-export const isSiteAssemblerFlow = ( flowName: string | null ) => {
-	const SITE_ASSEMBLER_FLOWS = [
-		WITH_THEME_ASSEMBLER_FLOW,
-		AI_ASSEMBLER_FLOW,
-		ASSEMBLER_FIRST_FLOW,
-	];
-
-	return !! flowName && SITE_ASSEMBLER_FLOWS.includes( flowName );
+export const isDomainAndPlanFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ DOMAIN_AND_PLAN_FLOW ].includes( flowName ) );
 };
 
 export const isReadymadeFlow = ( flowName: string | null ) => flowName === READYMADE_TEMPLATE_FLOW;
 
-export const isWithThemeAssemblerFlow = ( flowName: string | null ) => {
-	return !! flowName && WITH_THEME_ASSEMBLER_FLOW === flowName;
-};
-
 export const isWithThemeFlow = ( flowName: string | null ) => {
-	const WITH_THEME_FLOWS = [ WITH_THEME_FLOW, WITH_THEME_ASSEMBLER_FLOW ];
-
+	const WITH_THEME_FLOWS = [ WITH_THEME_FLOW ];
 	return !! flowName && WITH_THEME_FLOWS.includes( flowName );
 };
 
@@ -206,10 +126,6 @@ export const isSiteSetupFlow = ( flowName: string | null ) => {
 	return !! flowName && SITE_SETUP_FLOW === flowName;
 };
 
-export const isSenseiFlow = ( flowName: string | null ) => {
-	return Boolean( flowName && SENSEI_FLOW === flowName );
-};
-
 export const ecommerceFlowRecurTypes = {
 	YEARLY: 'yearly',
 	MONTHLY: 'monthly',
@@ -217,16 +133,44 @@ export const ecommerceFlowRecurTypes = {
 	'3Y': '3Y',
 };
 
-export const isVideoPressFlow = ( flowName: string | null ) => {
-	return !! flowName && [ VIDEOPRESS_FLOW, VIDEOPRESS_ACCOUNT ].includes( flowName );
+export const isFreeFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ FREE_FLOW ].includes( flowName ) );
 };
 
-export const isVideoPressTVFlow = ( flowName: string | null | undefined ) => {
+export const isDomainForGravatarFlow = ( flowName: string | null | undefined ) => {
+	return Boolean( flowName && [ DOMAIN_FOR_GRAVATAR_FLOW ].includes( flowName ) );
+};
+
+export const isHundredYearPlanFlow = ( flowName: string | null | undefined ) => {
+	return Boolean( flowName && [ HUNDRED_YEAR_PLAN_FLOW ].includes( flowName ) );
+};
+
+export const isHundredYearDomainFlow = ( flowName: string | null | undefined ) => {
+	return Boolean( flowName && [ HUNDRED_YEAR_DOMAIN_FLOW ].includes( flowName ) );
+};
+
+export const isDIFMFlow = ( flowName: string | null ) => {
 	return Boolean(
-		flowName && [ VIDEOPRESS_TV_FLOW, VIDEOPRESS_TV_PURCHASE_FLOW ].includes( flowName )
+		flowName && [ DIFM_FLOW, DIFM_FLOW_STORE, WEBSITE_DESIGN_SERVICES ].includes( flowName )
 	);
 };
 
-export const isDomainForGravatarFlow = ( flowName: string | null | undefined ) => {
-	return Boolean( flowName && [ DOMAIN_FOR_GRAVATAR_FLOW ].includes( flowName ) );
+export const isAIBuilderFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ AI_SITE_BUILDER_FLOW ].includes( flowName ) );
+};
+
+export const isAIBuilderSpecFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ AI_SITE_BUILDER_SPEC_FLOW ].includes( flowName ) );
+};
+
+export const isPlaygroundFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ PLAYGROUND_FLOW ].includes( flowName ) );
+};
+
+export const isDomainFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ DOMAIN_FLOW ].includes( flowName ) );
+};
+
+export const isWooHostedPlansFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ WOO_HOSTED_PLANS_FLOW ].includes( flowName ) );
 };

package/src/wpcom-request.ts

@@ -0,0 +1,26 @@
+import wpcomProxyRequest, {
+	type WpcomRequestParams,
+	canAccessWpcomApis as originalCanAccessWpcomApis,
+} from 'wpcom-proxy-request';
+
+type WpcomRequester = < T >( params: WpcomRequestParams ) => Promise< T >;
+
+let customRequester: WpcomRequester | null = null;
+
+export function setRequester( requester: WpcomRequester ): void {
+	customRequester = requester;
+}
+
+export default function wpcomRequest< T >( params: WpcomRequestParams ): Promise< T > {
+	if ( customRequester ) {
+		return customRequester( params );
+	}
+	return wpcomProxyRequest( params );
+}
+
+export function canAccessWpcomApis(): boolean {
+	if ( customRequester ) {
+		return true;
+	}
+	return originalCanAccessWpcomApis();
+}

package/styles/mixins.scss

@@ -9,19 +9,19 @@
 
 @mixin onboarding-heading-text {
 	@include onboarding-font-recoleta;
-	font-size: 42px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	font-size: 42px;
 	line-height: 57px;
 }
 
 @mixin onboarding-heading-text-tablet {
 	@include onboarding-font-recoleta;
-	font-size: 36px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	font-size: 36px;
 	line-height: 40px;
 }
 
 @mixin onboarding-heading-text-mobile {
 	@include onboarding-font-recoleta;
-	font-size: 32px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	font-size: 32px;
 	line-height: 40px;
 }
 
@@ -39,7 +39,7 @@
 }
 
 @mixin onboarding-large-text {
-	font-size: 16px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	font-size: 16px;
 	line-height: 24px;
 }