@automattic/onboarding 1.0.0 → 1.0.1

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

@@ -0,0 +1,51 @@
+import { CheckboxControl, __experimentalHStack as HStack, Spinner } from '@wordpress/components';
+import clsx from 'clsx';
+import { useId } from 'react';
+import './style.scss';
+
+type SelectCardCheckboxProps = {
+	children: React.ReactNode;
+	className?: string;
+	checked?: boolean;
+	disabled?: boolean;
+	isBusy?: boolean;
+	onChange: ( checked: boolean ) => void;
+};
+
+const SelectCardCheckboxV2 = ( {
+	children,
+	className,
+	onChange,
+	disabled = false,
+	checked = false,
+	isBusy = false,
+}: SelectCardCheckboxProps ) => {
+	const instanceId = useId();
+	const id = `select-card-checkbox-v2-${ instanceId }`;
+
+	return (
+		<HStack
+			spacing={ 2 }
+			as="label"
+			className={ clsx( 'select-card-checkbox-v2', className, { 'is-busy': isBusy } ) }
+			htmlFor={ id }
+			alignment="left"
+			aria-checked={ checked }
+			aria-labelledby={ `select-card-checkbox-v2-label-${ instanceId }` }
+		>
+			<HStack alignment="left" spacing={ 2 } as="span">
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					checked={ checked }
+					id={ id }
+					onChange={ onChange }
+					disabled={ disabled || isBusy }
+				/>
+				<span id={ `select-card-checkbox-v2-label-${ instanceId }` }>{ children }</span>
+			</HStack>
+			{ isBusy && <Spinner /> }
+		</HStack>
+	);
+};
+
+export default SelectCardCheckboxV2;

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

@@ -0,0 +1,25 @@
+@import "@wordpress/base-styles/mixins";
+
+.select-card-checkbox-v2 {
+	border: 1px solid var(--color-surface-backdrop);
+	background: var(--color-surface-backdrop);
+	border-radius: 4px;
+	padding: 16px;
+	font-size: 0.875rem;
+	cursor: pointer;
+
+	&.is-busy {
+		cursor: progress;
+	}
+
+	&:has(:checked) {
+		background: var(--color-accent-5);
+		border-color: var(--color-accent);
+	}
+
+	&:has(:focus-visible) {
+		@include button-style__focus();
+	}
+}
+
+

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

@@ -0,0 +1,49 @@
+/**
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import SelectCardCheckboxV2 from '../index';
+
+describe( 'SelectCardCheckboxV2', () => {
+	it( 'renders the elements and labels', () => {
+		render( <SelectCardCheckboxV2 onChange={ jest.fn() }>Hello</SelectCardCheckboxV2> );
+		expect( screen.getByRole( 'checkbox', { name: 'Hello' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the checked state', () => {
+		render(
+			<SelectCardCheckboxV2 onChange={ jest.fn() } checked>
+				Hello
+			</SelectCardCheckboxV2>
+		);
+		expect( screen.getByRole( 'checkbox', { name: 'Hello' } ) ).toBeChecked();
+	} );
+
+	it( 'renders the disabled state', () => {
+		render(
+			<SelectCardCheckboxV2 onChange={ jest.fn() } disabled>
+				Hello
+			</SelectCardCheckboxV2>
+		);
+		expect( screen.getByRole( 'checkbox', { name: 'Hello' } ) ).toBeDisabled();
+	} );
+
+	it( 'calls onChange when the checkbox is clicked', () => {
+		const onChange = jest.fn();
+		render( <SelectCardCheckboxV2 onChange={ onChange }>Hello</SelectCardCheckboxV2> );
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Hello' } ) );
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( true );
+	} );
+	it( 'disables the checkbox when isBusy is true', () => {
+		render(
+			<SelectCardCheckboxV2 onChange={ jest.fn() } isBusy>
+				Hello
+			</SelectCardCheckboxV2>
+		);
+		expect( screen.getByRole( 'checkbox', { name: 'Hello' } ) ).toBeDisabled();
+	} );
+} );

package/src/select-items/index.tsx

@@ -1,4 +1,5 @@
-import { Badge, Button } from '@automattic/components';
+import { Badge } from '@automattic/components';
+import { Button } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import './style.scss';
@@ -16,6 +17,7 @@ export interface SelectItem< T > {
 	hidden?: boolean;
 	isPrimary?: boolean;
 	allItemClickable?: boolean;
+	'aria-label'?: string;
 }
 
 interface Props< T > {
@@ -38,15 +40,15 @@ function SelectItems< T >( { className, items, onSelect, preventWidows }: Props<
 					titleIcon,
 					actionText,
 					value,
-					isPrimary,
 					allItemClickable,
+					'aria-label': ariaLabel,
 				} ) => (
 					<div key={ key } className="select-items__item">
 						{ ! titleIcon && (
 							<Icon className="select-items__item-icon" icon={ icon } size={ 24 } />
 						) }
 						<div className="select-items__item-info-wrapper">
-							<div className="select-items__item-info">
+							<div className="select-items__item-info" aria-hidden="true">
 								<h2 className="select-items__item-title">
 									{ titleIcon && (
 										<Icon className="select-items__item-icon" icon={ titleIcon } size={ 24 } />
@@ -66,9 +68,12 @@ function SelectItems< T >( { className, items, onSelect, preventWidows }: Props<
 							</div>
 							{ actionText && (
 								<Button
-									primary={ isPrimary }
+									label={ `${ title }. ${ actionText }` }
+									variant="secondary"
 									className="select-items__item-button"
 									onClick={ () => onSelect( value ) }
+									aria-hidden={ allItemClickable ? 'true' : 'false' }
+									tabIndex={ allItemClickable ? -1 : 0 }
 								>
 									{ actionText }
 								</Button>
@@ -78,6 +83,7 @@ function SelectItems< T >( { className, items, onSelect, preventWidows }: Props<
 							<button
 								className="select-items__item-clickable"
 								onClick={ () => onSelect( value ) }
+								aria-label={ ariaLabel || `${ title }. ${ description }` }
 							/>
 						) }
 					</div>

package/src/select-items/style.scss

@@ -76,10 +76,11 @@
 		}
 	}
 
-	button.select-items__item-button {
+	.select-items__item-button {
 		margin-top: 24px;
 		border-radius: 4px;
 		min-width: 130px;
+		background-color: var(--color-surface);
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 		border: 1px solid rgb(195, 196, 199);
 		color: #101517;

package/src/setup-tailored-site-after-creation.ts

@@ -1,26 +1,14 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
-import {
-	Onboard,
-	Site,
-	OnboardSelect,
-	SiteActions,
-	updateLaunchpadSettings,
-} from '@automattic/data-stores';
-import { select, dispatch } from '@wordpress/data';
-import wpcomRequest from 'wpcom-proxy-request';
-import {
-	isLinkInBioFlow,
-	isNewsletterFlow,
-	isNewsletterOrLinkInBioFlow,
-	LINK_IN_BIO_FLOW,
-	FREE_FLOW,
-	isFreeFlow,
-} from './utils';
-import type { ActiveTheme } from '@automattic/data-stores';
+import { Onboard, OnboardSelect, Site } from '@automattic/data-stores';
+import { select } from '@wordpress/data';
+import { isNewsletterFlow } from './utils';
+import wpcomRequest from './wpcom-request';
 
 const ONBOARD_STORE = Onboard.register();
+
+// TODO: This store registration should live somewhere else or just be called more centrally.
 // `client_id` and `client_secret` are only needed when signing up users.
-const SITE_STORE = Site.register( { client_id: '', client_secret: '' } );
+Site.register( { client_id: '', client_secret: '' } );
 
 export const base64ImageToBlob = ( base64String: string ) => {
 	// extract content type and base64 payload from original string
@@ -51,11 +39,12 @@ interface SetupOnboardingSiteOptions {
 
 export function setupSiteAfterCreation( { siteId, flowName }: SetupOnboardingSiteOptions ) {
 	// const { resetOnboardStore } = dispatch( ONBOARD_STORE );
-	const goals = ( select( ONBOARD_STORE ) as OnboardSelect ).getGoals();
-	const selectedDesign = ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDesign();
-	const siteTitle = ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedSiteTitle();
-	const siteDescription = ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedSiteDescription();
-	const siteLogo = ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedSiteLogo();
+	const goals = ( select( ONBOARD_STORE ) as unknown as OnboardSelect ).getGoals();
+	const siteTitle = ( select( ONBOARD_STORE ) as unknown as OnboardSelect ).getSelectedSiteTitle();
+	const siteDescription = (
+		select( ONBOARD_STORE ) as unknown as OnboardSelect
+	 ).getSelectedSiteDescription();
+	const siteLogo = ( select( ONBOARD_STORE ) as unknown as OnboardSelect ).getSelectedSiteLogo();
 
 	if ( siteId && flowName ) {
 		const formData: ( string | File )[][] = [];
@@ -72,30 +61,8 @@ export function setupSiteAfterCreation( { siteId, flowName }: SetupOnboardingSit
 
 		const promises = [];
 
-		if ( isNewsletterOrLinkInBioFlow( flowName ) || isFreeFlow( flowName ) ) {
-			// link-in-bio and link-in-bio-tld are considered the same intent.
-			if ( isLinkInBioFlow( flowName ) || isFreeFlow( flowName ) ) {
-				settings.site_intent = isLinkInBioFlow( flowName ) ? LINK_IN_BIO_FLOW : FREE_FLOW;
-				if ( selectedDesign && selectedDesign.is_virtual ) {
-					const { assembleSite } = dispatch( SITE_STORE ) as SiteActions;
-					promises.push(
-						wpcomRequest< ActiveTheme[] >( {
-							path: `/sites/${ encodeURIComponent( siteId ) }/themes?status=active`,
-							apiNamespace: 'wp/v2',
-						} ).then( ( activeThemes ) => {
-							assembleSite( String( siteId ), activeThemes[ 0 ].stylesheet, {
-								homeHtml: selectedDesign.recipe?.pattern_html,
-								headerHtml: selectedDesign.recipe?.header_html,
-								footerHtml: selectedDesign.recipe?.footer_html,
-								siteSetupOption: 'assembler-virtual-theme',
-							} );
-						} )
-					);
-				}
-			} else {
-				settings.site_intent = flowName;
-			}
-
+		if ( isNewsletterFlow( flowName ) ) {
+			settings.site_intent = flowName;
 			settings.launchpad_screen = 'full';
 		}
 
@@ -116,9 +83,8 @@ export function setupSiteAfterCreation( { siteId, flowName }: SetupOnboardingSit
 		promises.push(
 			wpcomRequest< { updated: object } >( {
 				path: `/sites/${ siteId }/onboarding-customization`,
-				method: 'POST',
 				apiNamespace: 'wpcom/v2',
-				apiVersion: '2',
+				method: 'POST',
 				formData,
 			} ).then( () => {
 				recordTracksEvent( 'calypso_signup_site_options_submit', {
@@ -134,16 +100,6 @@ export function setupSiteAfterCreation( { siteId, flowName }: SetupOnboardingSit
 			} )
 		);
 
-		if ( isFreeFlow( flowName ) ) {
-			if ( siteTitle || siteDescription || siteLogo ) {
-				promises.push(
-					updateLaunchpadSettings( siteId, {
-						checklist_statuses: { setup_free: true },
-					} )
-				);
-			}
-		}
-
 		return Promise.all( promises );
 	}
 }

package/src/step-container/index.tsx

@@ -1,11 +1,9 @@
-import { WordPressLogo, JetpackLogo, WooCommerceWooLogo } from '@automattic/components';
+import { JetpackLogo, WooCommerceWooLogo } from '@automattic/components';
 import clsx from 'clsx';
 import { TranslateResult, useTranslate } from 'i18n-calypso';
 import { ReactElement } from 'react';
 import ActionButtons from '../action-buttons';
-import SenseiLogo from '../sensei-logo';
 import StepNavigationLink from '../step-navigation-link';
-import VideoPressLogo from '../videopress-logo';
 import './style.scss';
 
 interface Props {
@@ -13,7 +11,6 @@ interface Props {
 	stepSectionName?: string;
 	stepContent: ReactElement;
 	shouldHideNavButtons?: boolean;
-	shouldStickyNavButtons?: boolean;
 	hasStickyNavButtonsPadding?: boolean;
 	hideBack?: boolean;
 	hideSkip?: boolean;
@@ -23,6 +20,7 @@ interface Props {
 	backLabelText?: TranslateResult;
 	skipLabelText?: TranslateResult;
 	nextLabelText?: TranslateResult;
+	notice?: ReactElement;
 	formattedHeader?: ReactElement;
 	hideFormattedHeader?: boolean;
 	headerImageUrl?: string;
@@ -37,23 +35,21 @@ interface Props {
 	isFullLayout?: boolean;
 	isHorizontalLayout?: boolean;
 	goBack?: () => void;
+	onSkip?: () => void;
 	goNext?: () => void;
 	flowName?: string;
 	intent?: string;
 	recordTracksEvent: ( eventName: string, eventProperties: object ) => void;
 	showHeaderJetpackPowered?: boolean;
 	showJetpackPowered?: boolean;
-	showHeaderWooCommercePowered?: boolean;
 	showFooterWooCommercePowered?: boolean;
-	showSenseiPowered?: boolean;
-	showVideoPressPowered?: boolean;
+	backUrl?: string;
 }
 
 const StepContainer: React.FC< Props > = ( {
 	stepContent,
 	stepName,
 	shouldHideNavButtons,
-	shouldStickyNavButtons,
 	hasStickyNavButtonsPadding,
 	hideBack,
 	backLabelText,
@@ -63,6 +59,7 @@ const StepContainer: React.FC< Props > = ( {
 	skipHeadingText,
 	hideNext = true,
 	nextLabelText,
+	notice,
 	formattedHeader,
 	headerImageUrl,
 	headerButton,
@@ -75,17 +72,16 @@ const StepContainer: React.FC< Props > = ( {
 	isExternalBackUrl,
 	isLargeSkipLayout,
 	customizedActionButtons,
+	backUrl,
 	goBack,
+	onSkip,
 	goNext,
 	flowName,
 	intent,
 	stepSectionName,
 	recordTracksEvent,
 	showHeaderJetpackPowered,
-	showHeaderWooCommercePowered,
 	showJetpackPowered,
-	showSenseiPowered,
-	showVideoPressPowered,
 	showFooterWooCommercePowered,
 } ) => {
 	const translate = useTranslate();
@@ -107,15 +103,16 @@ const StepContainer: React.FC< Props > = ( {
 		}
 	};
 
-	function BackButton() {
+	function renderBackButton() {
 		// Hide back button if goBack is falsy, it won't do anything in that case.
-		if ( shouldHideNavButtons || ! goBack ) {
+		if ( shouldHideNavButtons || ( ! goBack && ! backUrl ) ) {
 			return null;
 		}
 		return (
 			<StepNavigationLink
 				direction="back"
 				handleClick={ goBack }
+				backUrl={ backUrl }
 				label={ backLabelText }
 				hasBackIcon
 				rel={ isExternalBackUrl ? 'external' : '' }
@@ -124,8 +121,10 @@ const StepContainer: React.FC< Props > = ( {
 		);
 	}
 
-	function SkipButton() {
-		if ( shouldHideNavButtons || ! goNext ) {
+	function renderSkipButton() {
+		const skipAction = onSkip ?? goNext;
+
+		if ( shouldHideNavButtons || ! skipAction ) {
 			return null;
 		}
 
@@ -136,7 +135,7 @@ const StepContainer: React.FC< Props > = ( {
 				) }
 				<StepNavigationLink
 					direction="forward"
-					handleClick={ goNext }
+					handleClick={ skipAction }
 					label={ skipLabelText }
 					cssClass={ clsx( 'step-container__navigation-link', 'has-underline', {
 						'has-skip-heading': skipHeadingText,
@@ -148,7 +147,7 @@ const StepContainer: React.FC< Props > = ( {
 		);
 	}
 
-	function NextButton() {
+	function renderNextButton() {
 		if ( shouldHideNavButtons || ! goNext ) {
 			return null;
 		}
@@ -179,20 +178,17 @@ const StepContainer: React.FC< Props > = ( {
 			<ActionButtons
 				className={ clsx( 'step-container__navigation', {
 					'should-hide-nav-buttons': shouldHideNavButtons,
-					'should-sticky-nav-buttons': shouldStickyNavButtons,
 					'has-sticky-nav-buttons-padding': hasStickyNavButtonsPadding,
 				} ) }
 			>
-				{ shouldStickyNavButtons && (
-					<WordPressLogo className="step-container__navigation-logo" size={ 24 } />
-				) }
-				{ ! hideBack && <BackButton /> }
-				{ ! hideSkip && skipButtonAlign === 'top' && <SkipButton /> }
-				{ ! hideNext && <NextButton /> }
+				{ ! hideBack && renderBackButton() }
+				{ ! hideSkip && skipButtonAlign === 'top' && renderSkipButton() }
+				{ ! hideNext && renderNextButton() }
 				{ customizedActionButtons }
 			</ActionButtons>
 			{ ! hideFormattedHeader && (
 				<div className="step-container__header">
+					{ notice }
 					{ formattedHeader }
 					{ headerImageUrl && (
 						<div className="step-container__header-image">
@@ -205,11 +201,6 @@ const StepContainer: React.FC< Props > = ( {
 							<JetpackLogo monochrome size={ 18 } /> <span>{ translate( 'Jetpack powered' ) }</span>
 						</div>
 					) }
-					{ showHeaderWooCommercePowered && (
-						<div className="step-container__header-woocommerce-powered">
-							<WooCommerceWooLogo /> <span>{ translate( 'WooCommerce powered' ) }</span>
-						</div>
-					) }
 				</div>
 			) }
 
@@ -218,7 +209,7 @@ const StepContainer: React.FC< Props > = ( {
 			{ ! hideSkip && skipButtonAlign === 'bottom' && (
 				<div className="step-container__buttons">
 					{ isLargeSkipLayout && <hr className="step-container__skip-hr" /> }
-					<SkipButton />
+					{ renderSkipButton() }
 				</div>
 			) }
 			{ showJetpackPowered && (
@@ -232,18 +223,6 @@ const StepContainer: React.FC< Props > = ( {
 					<WooCommerceWooLogo /> <span>{ translate( 'WooCommerce powered' ) }</span>
 				</div>
 			) }
-
-			{ showSenseiPowered && (
-				<div className="step-container__sensei-powered">
-					<SenseiLogo /> <span>{ translate( 'Powered by Sensei' ) }</span>
-				</div>
-			) }
-
-			{ showVideoPressPowered && (
-				<div className="step-container__videopress-powered">
-					<VideoPressLogo size={ 24 } /> <span>{ translate( 'Powered by VideoPress' ) }</span>
-				</div>
-			) }
 		</div>
 	);
 };

package/src/step-container/style.scss

@@ -1,6 +1,6 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
-@import "../../styles/mixins.scss";
+@import "../../styles/mixins";
 
 /**
  *	General
@@ -41,6 +41,12 @@
 				padding-inline-end: 20px;
 			}
 		}
+
+		@include break-xlarge {
+			.step-container__header .formatted-header {
+				margin-top: 0;
+			}
+		}
 	}
 
 	.step-container__buttons {
@@ -71,44 +77,34 @@
 	 *	Header
 	 */
 	.step-container__header {
-		margin-bottom: 32px;
-		margin-top: 0;
+		margin-top: 32px;
+		margin-bottom: 48px;
 		display: block;
 		justify-content: space-between;
 		align-items: center;
 
 		.formatted-header {
 			margin: 0;
-			flex-grow: 1;
+
+			@include break-xlarge {
+				margin-top: 88px; // 56px + 32px
+			}
 
 			.formatted-header__title {
-				@include onboarding-font-recoleta;
-				color: var(--studio-gray-100);
-				letter-spacing: 0.2px;
-				font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */
-				font-weight: 400;
-				padding: 0;
 				margin: 0;
 
+				@include onboarding-font-recoleta;
+				color: var(--color-neutral-100);
+				font-size: 2rem;
+
 				@include break-xlarge {
 					font-size: 2.75rem;
 				}
 			}
 
 			.formatted-header__subtitle {
-				padding: 0;
-				text-align: start;
-				color: var(--studio-gray-60);
-				font-size: 1rem;
-				margin-top: 16px;
-				line-height: 24px;
-
-				&.is-center-align {
-					text-align: center;
-				}
-
-				@include break-small {
-					margin-top: 8px;
+				@include break-xlarge {
+					font-size: 1rem;
 				}
 			}
 		}
@@ -133,11 +129,6 @@
 				}
 			}
 		}
-
-		@include break-small {
-			flex-wrap: wrap;
-			margin-top: 24px;
-		}
 	}
 
 	/**
@@ -150,21 +141,28 @@
 		}
 	}
 	.step-container__navigation.action-buttons {
-		background-color: $white;
 		height: 60px;
 		align-items: center;
 		justify-content: space-between;
 		display: flex;
 		font-size: 0.875rem;
-		position: fixed;
-		z-index: 30;
-		inset-inline-start: 0;
-		inset-inline-end: 0;
 		bottom: 0;
-		padding: 0 20px;
 		margin: 0;
 		border-top: none;
-		box-shadow: inset 0 1px 0 #e2e4e7;
+
+		position: absolute;
+		top: 8px;
+		inset-inline-start: 72px;
+		inset-inline-end: 24px;
+		// Align with wordpress logo in signup-header
+		padding: 1px 0 0;
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+
+		&.has-sticky-nav-buttons-padding {
+			padding-bottom: 48px;
+		}
 
 		&:empty {
 			display: none;
@@ -215,31 +213,6 @@
 				display: block;
 			}
 		}
-
-		@include break-small {
-			position: absolute;
-			top: 8px;
-			inset-inline-start: 72px;
-			inset-inline-end: 24px;
-			// Align with wordpress logo in signup-header
-			padding: 1px 0 0;
-			background-color: transparent;
-			border: none;
-			box-shadow: none;
-
-			&.should-sticky-nav-buttons {
-				position: fixed;
-				inset-inline-start: 0;
-				inset-inline-end: 0;
-				padding-inline-start: 24px;
-				padding-inline-end: 24px;
-				background-color: $white;
-			}
-
-			&.has-sticky-nav-buttons-padding {
-				padding-bottom: 48px;
-			}
-		}
 	}
 
 	/**
@@ -248,22 +221,15 @@
 	.step-container__content {
 		margin-top: 0;
 		display: block;
-		min-height: 65vh;
-
-		@supports ( min-height: 65svh ) {
-			min-height: calc(65svh - 50px);
-		}
 	}
 
 	/**
-	 * Jetpack, Sensei and VideoPress Powered
+	 * Jetpack and WooCommerce Powered
 	 */
 	.step-container__jetpack-powered,
 	.step-container__header-jetpack-powered,
 	.step-container__woocommerce-powered,
-	.step-container__header-woocommerce-powered,
-	.step-container__sensei-powered,
-	.step-container__videopress-powered {
+	.step-container__header-woocommerce-powered {
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -293,12 +259,4 @@
 			visibility: visible;
 		}
 	}
-
-	.step-container__sensei-powered {
-		padding-bottom: 24px;
-
-		svg {
-			margin-inline-end: 8px;
-		}
-	}
 }