@automattic/onboarding 1.0.0 → 1.0.1

package/src/flow-progress/use-flow-progress.ts

@@ -1,12 +1,4 @@
-import {
-	ECOMMERCE_FLOW,
-	LINK_IN_BIO_FLOW,
-	LINK_IN_BIO_TLD_FLOW,
-	FREE_FLOW,
-	COPY_SITE_FLOW,
-	VIDEOPRESS_TV_FLOW,
-	VIDEOPRESS_TV_PURCHASE_FLOW,
-} from '../utils/flows';
+import { COPY_SITE_FLOW } from '../utils/flows';
 
 /* eslint-disable no-restricted-imports */
 interface FlowProgress {
@@ -26,63 +18,6 @@ const flows: Record< string, { [ step: string ]: number } > = {
 		subscribers: 4,
 		launchpad: 5,
 	},
-	[ LINK_IN_BIO_FLOW ]: {
-		intro: 0,
-		user: 0,
-		patterns: 1,
-		linkInBioSetup: 2,
-		domains: 3,
-		plans: 4,
-		launchpad: 5,
-	},
-	[ LINK_IN_BIO_TLD_FLOW ]: {
-		domains: 0,
-		user: 1,
-		patterns: 2,
-		linkInBioSetup: 3,
-		plans: 4,
-		launchpad: 5,
-	},
-	[ FREE_FLOW ]: {
-		user: 0,
-		freeSetup: 0,
-		designSetup: 1,
-		launchpad: 2,
-	},
-	videopress: {
-		intro: 0,
-		videomakerSetup: 1,
-		user: 2,
-		options: 3,
-		chooseADomain: 4,
-		processing: 5,
-		launchpad: 6,
-	},
-	[ VIDEOPRESS_TV_FLOW ]: {
-		intro: 0,
-		processing: 1,
-	},
-	[ VIDEOPRESS_TV_PURCHASE_FLOW ]: {
-		processing: 0,
-	},
-	sensei: {
-		senseiSetup: 1,
-		senseiDomain: 2,
-		senseiPlan: 3,
-		senseiPurpose: 4,
-		senseiLaunch: 5,
-	},
-	[ ECOMMERCE_FLOW ]: {
-		intro: 0,
-		storeProfiler: 1,
-		designCarousel: 2,
-		domains: 3,
-		createSite: 4,
-		processing: 4,
-		waitForAtomic: 4,
-		checkPlan: 4,
-		storeAddress: 5,
-	},
 	[ COPY_SITE_FLOW ]: {
 		domains: 0,
 		'create-site': 1,

package/src/hooks/test/index.ts

@@ -0,0 +1,54 @@
+import { act, renderHook } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { useStepPersistedState } from '../use-persisted-state';
+
+describe( 'useStepPersistedState', () => {
+	test( 'Should return default value and update it on request', () => {
+		const { result, rerender } = renderHook(
+			() => useStepPersistedState( 'key', 'some-random-state' ),
+			{
+				wrapper: MemoryRouter,
+			}
+		);
+
+		const [ state, setState ] = result.current;
+
+		expect( state ).toEqual( 'some-random-state' );
+
+		act( () => setState( 'new-state' ) );
+
+		rerender();
+
+		expect( result.current[ 0 ] ).toEqual( 'new-state' );
+	} );
+
+	test( 'Instances should not collide', () => {
+		const { result: resultOne, rerender: rerenderOne } = renderHook(
+			() => useStepPersistedState( 'key2', 'some-random-state' ),
+			{
+				wrapper: MemoryRouter,
+			}
+		);
+		const { result: resultTwo, rerender: rerenderTwo } = renderHook(
+			() => useStepPersistedState( 'key3', 'some-random-state-2' ),
+			{
+				wrapper: MemoryRouter,
+			}
+		);
+
+		const [ state1, setState1 ] = resultOne.current;
+		const [ state2, setState2 ] = resultTwo.current;
+
+		expect( state1 ).toEqual( 'some-random-state' );
+		expect( state2 ).toEqual( 'some-random-state-2' );
+
+		act( () => setState1( 'new-state-one' ) );
+		act( () => setState2( 'new-state-two' ) );
+
+		rerenderOne();
+		rerenderTwo();
+
+		expect( resultOne.current[ 0 ] ).toEqual( 'new-state-one' );
+		expect( resultTwo.current[ 0 ] ).toEqual( 'new-state-two' );
+	} );
+} );

package/src/hooks/use-persisted-state.ts

@@ -0,0 +1,85 @@
+import { useCallback, useState } from 'react';
+import { useMatch } from 'react-router';
+
+const TWENTY_MINUTES = 20 * 60 * 1000;
+const VERSION = 1;
+const KEY = '@automattic/persisted-state';
+
+function setPersistedState( key: string, state: unknown, storage: Storage ) {
+	storage.setItem( key, JSON.stringify( state ) );
+	storage.setItem( key + 'time', Date.now().toString() );
+}
+
+function getPersistedState( key: string, storage: Storage, TTL: number ) {
+	const state = storage.getItem( key );
+	if ( state ) {
+		const time = parseInt( storage.getItem( key + 'time' ) || '0' );
+		if ( Date.now() - time > TTL ) {
+			storage.removeItem( key );
+			storage.removeItem( key + 'time' );
+		} else {
+			return JSON.parse( state );
+		}
+	}
+}
+
+function getPersistedStateKey( flow?: string, step?: string, lang?: string, cacheKey?: string ) {
+	return [ VERSION, KEY, flow, step, lang, cacheKey ].filter( Boolean ).join( '-' );
+}
+
+/**
+ * Clears all persisted state created by useStepPersistedState
+ * @param flow The desired flow to clear
+ * @param storage The storage to clear (defaults to localStorage)
+ */
+export function clearStepPersistedState( flow?: string, storage: Storage = localStorage ): void {
+	const keys = Object.keys( storage );
+	const persistedKeys = keys.filter( ( key ) => key.startsWith( getPersistedStateKey( flow ) ) );
+
+	persistedKeys.forEach( ( key ) => {
+		storage.removeItem( key );
+		storage.removeItem( key + 'time' );
+	} );
+}
+
+type Options = {
+	/**
+	 * The used storage, defaults to sessionStorage.
+	 */
+	storage: Storage;
+	/**
+	 * Time to live in milliseconds. Defaults to 20 minutes. If the date is older, it will be deleted.
+	 */
+	TTL: number;
+};
+
+/**
+ * A hook similar to useState, but persists the state. Uses `flow`, `step` and `lang`, and the passed key in the tree as keys.
+ * @param cacheKey the cache key. It will be concatenated with the flow, step and lang.
+ * @param defaultValue the initial value of the state.
+ * @param options the options for the hook.
+ * @returns a tuple with the state and a function to update it.
+ */
+export function useStepPersistedState< T >(
+	cacheKey: string,
+	defaultValue?: T,
+	options: Options = { storage: localStorage, TTL: TWENTY_MINUTES }
+): [ T, ( newState: T ) => void ] {
+	const match = useMatch( '/:flow/:step?/:lang?' );
+	const { flow = 'flow', step = 'step', lang = 'lang' } = match?.params || {};
+	const key = [ VERSION, KEY, flow, step, lang, cacheKey ].join( '-' );
+
+	const [ state, _setState ] = useState< T >(
+		getPersistedState( key, options.storage, options.TTL ) || defaultValue
+	);
+
+	const setState = useCallback(
+		( newState: T ) => {
+			_setState( newState );
+			setPersistedState( key, newState, options.storage );
+		},
+		[ _setState, key, options.storage ]
+	);
+
+	return [ state, setState ];
+}

package/src/hooray/index.tsx

@@ -19,7 +19,7 @@ const Hooray: React.FunctionComponent< Props > = ( {
 	return (
 		<div
 			className={ clsx(
-				`onboarding-hooray`,
+				'onboarding-hooray',
 				{ 'onboarding-hooray__animate': animate },
 				className
 			) }

package/src/index.ts

@@ -1,22 +1,15 @@
 export { Title, SubTitle } from './titles';
 export { useFlowProgress } from './flow-progress/use-flow-progress';
+export { default as ActionButtons, BackButton, NextButton } from './action-buttons';
 export {
-	default as ActionButtons,
-	BackButton,
-	NextButton,
-	SkipButton,
-	ArrowButton,
-} from './action-buttons';
-export {
-	createSiteWithCart,
-	addPlanToCart,
+	createSite,
+	getNewSiteParams,
 	addProductsToCart,
 	replaceProductsInCart,
 	setThemeOnSite,
 } from './cart';
 export { setupSiteAfterCreation, base64ImageToBlob } from './setup-tailored-site-after-creation';
 export { uploadAndSetSiteLogo } from './upload-and-set-site-logo';
-export { default as FeatureIcon } from './feature-icon';
 export { default as Progress } from './progress';
 export { default as Hooray } from './hooray';
 export { default as Confetti } from './confetti';
@@ -24,13 +17,15 @@ export { default as IntentScreen } from './intent-screen';
 export { default as SelectItems } from './select-items';
 export { default as SelectItemsAlt } from './select-items-alt';
 export { default as StepContainer } from './step-container';
+export * as Step from './step-container-v2';
 export { default as StepNavigationLink } from './step-navigation-link';
 export { default as MShotsImage } from './mshots-image';
+export { useStepPersistedState, clearStepPersistedState } from './hooks/use-persisted-state';
 export * from './navigator';
-export { default as Notice } from './notice';
 export { default as SelectCardCheckbox } from './select-card-checkbox';
+export { default as SelectCardCheckboxV2 } from './select-card-checkbox-v2';
 export * from './utils';
-export * from './select-card-radio';
 export type { SelectItem } from './select-items';
 export type { SelectItemAlt } from './select-items-alt';
 export type { MShotsOptions } from './mshots-image';
+export { setRequester } from './wpcom-request';

package/src/intent-screen/test/index.tsx

@@ -78,7 +78,7 @@ const intentsAlt: SelectItemAlt< string >[] = [
 describe( 'IntentScreen', () => {
 	describe( 'SelectItem', () => {
 		it( 'should render H2 titles', () => {
-			render(
+			const { container } = render(
 				<IntentScreen
 					intents={ intents }
 					intentsAlt={ intentsAlt }
@@ -87,13 +87,13 @@ describe( 'IntentScreen', () => {
 				/>
 			);
 
-			expect( screen.getAllByRole( 'heading', { level: 2 } ) ).toHaveLength( 2 );
+			const titles = container.querySelectorAll( '.select-items__item-title' );
+			expect( titles ).toHaveLength( 2 );
 		} );
 
 		it( 'should render a working button', async () => {
 			const user = userEvent.setup();
-
-			render(
+			const { container } = render(
 				<IntentScreen
 					intents={ intents }
 					intentsAlt={ intentsAlt }
@@ -102,11 +102,14 @@ describe( 'IntentScreen', () => {
 				/>
 			);
 
-			const button = screen.getAllByRole( 'button', { name: 'Action Text' } )[ 0 ];
-
+			const button = container.querySelector( '.select-items__item-button' );
+			expect( button ).not.toBeNull();
 			expect( button ).toBeVisible();
+			expect( button ).toHaveTextContent( 'Action Text' );
 
-			await user.click( button );
+			if ( button ) {
+				await user.click( button );
+			}
 
 			expect( onSelect ).toHaveBeenCalledTimes( 1 );
 			expect( onSelect ).toHaveBeenCalledWith( 'value' );

package/src/mshots-image/index.tsx

@@ -11,6 +11,7 @@ interface MShotsImageProps {
 	'aria-labelledby': string;
 	options: MShotsOptions;
 	scrollable?: boolean;
+	loading?: 'lazy' | 'eager';
 }
 
 export type MShotsOptions = {
@@ -141,7 +142,8 @@ const useMshotsImg = (
 // Temporary for A/B test.
 const useMshotsImgTreatment = (
 	src: string,
-	options: MShotsOptions
+	options: MShotsOptions,
+	shouldShowImage: boolean
 ): HTMLImageElement | undefined => {
 	const [ loadedImg, setLoadedImg ] = useState< HTMLImageElement >();
 	const [ count, setCount ] = useState( 0 );
@@ -160,6 +162,10 @@ const useMshotsImgTreatment = (
 	// to browser caching. Getting this wrong looks like the url resolving
 	// before the image is ready.
 	useEffect( () => {
+		if ( ! shouldShowImage ) {
+			return;
+		}
+
 		// If there's been a "props" change we need to reset everything:
 		if (
 			options !== previousOptions.current ||
@@ -221,7 +227,7 @@ const useMshotsImgTreatment = (
 			}
 			clearTimeout( timeoutIdRef.current );
 		};
-	}, [ src, count, options ] );
+	}, [ src, count, options, shouldShowImage ] );
 
 	return loadedImg;
 };
@@ -232,6 +238,7 @@ const MShotsImageControl = ( {
 	alt,
 	options,
 	scrollable = false,
+	loading = 'lazy',
 }: MShotsImageProps ) => {
 	const imgRef = useRef< HTMLImageElement | null >( null );
 	const currentlyLoadedUrl = useMshotsImg( url, options, imgRef );
@@ -258,31 +265,22 @@ const MShotsImageControl = ( {
 		visible ? 'mshots-image-visible' : 'mshots-image__loader'
 	);
 
-	if ( options?.oldHighResImageLoading ) {
-		return scrollable ? (
-			<div className={ className } style={ style } aria-labelledby={ labelledby }>
-				<img ref={ imgRef } className="mshots-dummy-image" aria-hidden="true" alt="" />
-			</div>
-		) : (
+	return scrollable ? (
+		<div className={ className } style={ style } aria-labelledby={ labelledby }>
 			<img
 				ref={ imgRef }
-				{ ...{ className, style, src, alt } }
-				aria-labelledby={ labelledby }
-				alt={ alt }
+				loading={ loading }
+				className="mshots-dummy-image"
+				aria-hidden="true"
+				alt=""
 			/>
-		);
-	} // else, prettier doesn't like having an else after a return
-	return scrollable ? (
-		<div className={ className } style={ style } aria-labelledby={ labelledby }>
-			<img ref={ imgRef } loading="lazy" className="mshots-dummy-image" aria-hidden="true" alt="" />
 		</div>
 	) : (
 		<img
-			loading="lazy"
+			loading={ loading }
 			ref={ imgRef }
 			{ ...{ className, style, src, alt } }
 			aria-labelledby={ labelledby }
-			alt={ alt }
 		/>
 	);
 };
@@ -294,12 +292,37 @@ const MShotsImageTreatment = ( {
 	alt,
 	options,
 	scrollable = false,
+	loading = 'lazy',
 }: MShotsImageProps ) => {
-	const maybeImage = useMshotsImgTreatment( url, options );
+	const [ shouldShowImage, setShouldShowImage ] = useState( loading === 'eager' );
+	const divRef = useRef< HTMLDivElement | null >( null );
+	const imgRef = useRef< HTMLImageElement | null >( null );
+
+	const maybeImage = useMshotsImgTreatment( url, options, shouldShowImage );
 	const src: string = maybeImage?.src || '';
 	const visible = !! src;
 	const backgroundImage = maybeImage?.src && `url( ${ maybeImage?.src } )`;
 
+	useEffect( () => {
+		if ( loading === 'lazy' && ! shouldShowImage ) {
+			const observer = new IntersectionObserver( ( entries ) => {
+				if ( entries[ 0 ]?.isIntersecting ) {
+					setShouldShowImage( true );
+					observer.disconnect();
+				}
+			} );
+
+			const elementToObserve = scrollable || ! visible ? divRef.current : imgRef.current;
+			if ( elementToObserve ) {
+				observer.observe( elementToObserve );
+			}
+
+			return () => {
+				observer.disconnect();
+			};
+		}
+	}, [ loading, shouldShowImage, scrollable, visible ] );
+
 	const animationScrollSpeedInPixelsPerSecond = 400;
 	const animationDuration =
 		( maybeImage?.naturalHeight || 600 ) / animationScrollSpeedInPixelsPerSecond;
@@ -323,9 +346,13 @@ const MShotsImageTreatment = ( {
 	// rule effecting the placeholder while loading static images:
 	// '.design-picker .design-picker__image-frame img { ..., height: auto }'
 	return scrollable || ! visible ? (
-		<div className={ className } style={ style } aria-labelledby={ labelledby } />
+		<div ref={ divRef } className={ className } style={ style } aria-labelledby={ labelledby } />
 	) : (
-		<img { ...{ className, style, src, alt } } aria-labelledby={ labelledby } alt={ alt } />
+		<img
+			ref={ imgRef }
+			{ ...{ className, style, src, alt, loading } }
+			aria-labelledby={ labelledby }
+		/>
 	);
 };
 
@@ -341,6 +368,7 @@ const MShotsImage = ( {
 	alt,
 	options,
 	scrollable = false,
+	loading = 'lazy',
 }: MShotsImageProps ) => {
 	// Return MShotsImageControl or MShotsImageTreatment depending on options.oldHighResImageLoading
 	if ( options?.oldHighResImageLoading ) {
@@ -351,9 +379,11 @@ const MShotsImage = ( {
 				alt={ alt }
 				options={ options }
 				scrollable={ scrollable }
+				loading={ loading }
 			/>
 		);
 	}
+
 	return (
 		<MShotsImageControl
 			url={ url }
@@ -361,6 +391,7 @@ const MShotsImage = ( {
 			alt={ alt }
 			options={ options }
 			scrollable={ scrollable }
+			loading={ loading }
 		/>
 	);
 };

package/src/mshots-image/style.scss

@@ -5,6 +5,7 @@
 }
 
 .mshots-image__container {
+	cursor: pointer;
 	height: 100%;
 }
 

package/src/navigator/navigator-buttons/index.tsx

@@ -7,6 +7,7 @@ import {
 import { isRTL } from '@wordpress/i18n';
 import { Icon, chevronLeft, chevronRight, check } from '@wordpress/icons';
 import clsx from 'clsx';
+import type { JSX } from 'react';
 import './style.scss';
 
 interface NavigatorItemProps {

package/src/navigator/navigator-header/index.tsx

@@ -4,6 +4,7 @@ import {
 	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { useTranslate, TranslateResult } from 'i18n-calypso';
+import type { JSX } from 'react';
 import './style.scss';
 
 interface Props {

package/src/navigator/navigator-screens/hooks/use-navigator-screens.tsx

@@ -23,7 +23,11 @@ const useNavigatorScreens = ( screens: NavigatorScreenObject[] ) => {
 			onSubmit,
 			onBack,
 		} ) => (
-			<NavigatorScreen key={ path } path={ path } style={ { animationDuration: '0s' } }>
+			<NavigatorScreen
+				key={ path }
+				path={ path }
+				style={ { animationDuration: '0s', transitionDuration: '0s' } }
+			>
 				<>
 					<NavigatorHeader
 						title={ <>{ title ?? label }</> }

package/src/navigator/navigator-screens/navigator-screens.tsx

@@ -1,16 +1,31 @@
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
+	useNavigator,
 } from '@wordpress/components';
+import { Navigator } from '@wordpress/components/build-types/navigator/types';
+import { type JSX, MutableRefObject } from 'react';
 import NavigatorListener from '../navigator-listener';
 import { useNavigatorScreens } from './hooks';
 import type { NavigatorScreenObject } from './types';
 import './navigator-screens.scss';
 
+const NavigatorRefSetter = ( {
+	navigatorRef,
+}: {
+	navigatorRef: MutableRefObject< Navigator | null >;
+} ) => {
+	const navigator = useNavigator();
+	navigatorRef.current = navigator;
+
+	return null;
+};
+
 interface Props {
 	children: JSX.Element;
 	screens: NavigatorScreenObject[];
 	initialPath?: string;
+	navigatorRef: MutableRefObject< Navigator | null >;
 	onNavigatorPathChange?: ( path?: string ) => void;
 }
 
@@ -18,6 +33,7 @@ const NavigatorScreens = ( {
 	children,
 	screens,
 	initialPath = '/',
+	navigatorRef,
 	onNavigatorPathChange,
 }: Props ) => {
 	const navigatorScreens = useNavigatorScreens( screens );
@@ -31,6 +47,7 @@ const NavigatorScreens = ( {
 		<NavigatorProvider initialPath={ initialPath }>
 			<NavigatorScreen path={ initialPath }>{ children }</NavigatorScreen>
 			{ navigatorScreens }
+			<NavigatorRefSetter navigatorRef={ navigatorRef } />
 			{ onNavigatorPathChange && (
 				<NavigatorListener onNavigatorPathChange={ onNavigatorPathChange } />
 			) }

package/src/navigator/navigator-screens/types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type NavigatorScreenObject = {
 	slug: string;
 	checked?: boolean;

package/src/select-card-checkbox/index.tsx

@@ -10,6 +10,9 @@ type SelectCardCheckboxProps = {
 	checked: boolean;
 };
 
+/**
+ * @deprecated Use SelectCardCheckboxV2 instead because it triggers onChange event twice and has accessibility issues
+ */
 const SelectCardCheckbox = ( {
 	children,
 	className,
@@ -21,13 +24,16 @@ const SelectCardCheckbox = ( {
 
 	return (
 		<div
-			className={ clsx( 'select-card-checkbox__container', className, {
-				'is-checked': checked,
-			} ) }
+			className={ clsx( 'select-card-checkbox__container', className ) }
 			onClick={ () => onChange( ! checked ) }
 			role="presentation"
 		>
-			<CheckboxControl checked={ checked } id={ id } onChange={ onChange } />
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				checked={ checked }
+				id={ id }
+				onChange={ onChange }
+			/>
 			<label className="select-card-checkbox__label" htmlFor={ id }>
 				{ children }
 			</label>

package/src/select-card-checkbox/style.scss

@@ -1,12 +1,17 @@
 .select-card-checkbox__container {
-	border: 1px solid #dcdcde;
+	border: 1px solid var(--color-surface-backdrop);
+	background: var(--color-surface-backdrop);
 	border-radius: 4px;
-	padding: 17px 25px;
+	padding: 16px;
 	font-size: 0.875rem;
 	cursor: pointer;
 	display: flex;
 	align-items: center;
 
+	.components-checkbox-control {
+		--checkbox-input-margin: 16px;
+	}
+
 	.select-card-checkbox__label {
 		pointer-events: none;
 		user-select: none;
@@ -14,17 +19,9 @@
 		align-items: center;
 	}
 
-	&.is-checked {
-		border: 2px solid #0675c4;
-		background: #f9fbfd;
-		padding: 16px 24px;
-	}
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-
-	.components-checkbox-control__input[type="checkbox"] {
-		border-color: #a7aaad;
+	&:hover,
+	&:has(:checked) {
+		background: var(--color-accent-5);
+		border-color: var(--color-accent);
 	}
 }