Assembler: Add interaction in the Pages screen (#83501)

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts

@@ -71,3 +71,5 @@ export const ORDERED_PATTERN_CATEGORIES = [
 ];
 
 export const INITIAL_CATEGORY = ORDERED_PATTERN_CATEGORIES[ 0 ];
+
+export const ORDERED_PAGES = [ 'about', 'contact', 'portfolio', 'services', 'blog' ];

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/events.ts

@@ -44,6 +44,12 @@ export const PATTERN_ASSEMBLER_EVENTS = {
 	SCREEN_UPSELL_UPGRADE_LATER_BUTTON_CLICK:
 		'calypso_signup_pattern_assembler_screen_upsell_upgrade_later_button_click',
 
+	/*
+	 * Screen Pages
+	 */
+	SCREEN_PAGES_ADD_PAGE: 'calypso_signup_pattern_assembler_screen_pages_add_page',
+	SCREEN_PAGES_REMOVE_PAGE: 'calypso_signup_pattern_assembler_screen_pages_remove_page',
+
 	/**
 	 * Pattern Panels
 	 */

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/hooks/index.ts

@@ -4,6 +4,7 @@ export { default as useCustomStyles } from './use-custom-styles';
 export { default as useDotcomPatterns } from './use-dotcom-patterns';
 export { default as useGlobalStylesUpgradeProps } from './use-global-styles-upgrade-props';
 export { default as useInitialPath } from './use-initial-path';
+export { default as usePages } from './use-pages';
 export { default as usePatternCategories } from './use-pattern-categories';
 export { default as usePatternCountMapByCategory } from './use-pattern-count-map-by-category';
 export { default as usePatternsMapByCategory } from './use-patterns-map-by-category';

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/hooks/use-pages.ts

@@ -0,0 +1,27 @@
+import { useSearchParams } from 'react-router-dom';
+
+const usePages = () => {
+	const [ searchParams, setSearchParams ] = useSearchParams();
+	const page_slugs = ( searchParams.get( 'page_slugs' ) || '' ).split( ',' ).filter( Boolean );
+
+	const pages = page_slugs || [];
+
+	const setPages = ( pages: string[] ) => {
+		setSearchParams(
+			( currentSearchParams ) => {
+				if ( pages.length === 0 ) {
+					currentSearchParams.delete( 'page_slugs' );
+				} else {
+					currentSearchParams.set( 'page_slugs', pages.join( ',' ) );
+				}
+
+				return currentSearchParams;
+			},
+			{ replace: true }
+		);
+	};
+
+	return { pages, setPages };
+};
+
+export default usePages;

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx

@@ -30,6 +30,7 @@ import {
 	useDotcomPatterns,
 	useGlobalStylesUpgradeProps,
 	useInitialPath,
+	usePages,
 	usePatternCategories,
 	usePatternsMapByCategory,
 	useRecipe,
@@ -144,6 +145,8 @@ const PatternAssembler = ( props: StepProps & NoticesProps ) => {
 		[ colorVariation, fontVariation ]
 	);
 
+	const { pages, setPages } = usePages();
+
 	const syncedGlobalStylesUserConfig = useSyncGlobalStylesUserConfig( selectedVariations );
 
 	useSyncNavigatorScreen();
@@ -511,6 +514,16 @@ const PatternAssembler = ( props: StepProps & NoticesProps ) => {
 		} );
 	};
 
+	const onScreenPagesSelect = ( page: string ) => {
+		if ( pages.includes( page ) ) {
+			setPages( pages.filter( ( item ) => item !== page ) );
+			recordTracksEvent( PATTERN_ASSEMBLER_EVENTS.SCREEN_PAGES_REMOVE_PAGE, { page } );
+		} else {
+			setPages( [ ...pages, page ] );
+			recordTracksEvent( PATTERN_ASSEMBLER_EVENTS.SCREEN_PAGES_ADD_PAGE, { page } );
+		}
+	};
+
 	if ( ! site?.ID || ! selectedDesign ) {
 		return null;
 	}
@@ -552,7 +565,12 @@ const PatternAssembler = ( props: StepProps & NoticesProps ) => {
 				</NavigatorScreen>
 
 				<NavigatorScreen path={ NAVIGATOR_PATHS.PAGES } partialMatch>
-					<ScreenPages onContinueClick={ onContinue } recordTracksEvent={ recordTracksEvent } />
+					<ScreenPages
+						selectedPages={ pages }
+						onSelect={ onScreenPagesSelect }
+						onContinueClick={ onContinue }
+						recordTracksEvent={ recordTracksEvent }
+					/>
 				</NavigatorScreen>
 
 				<NavigatorScreen path={ NAVIGATOR_PATHS.ACTIVATION } className="screen-activation">

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/page-list.scss

@@ -0,0 +1,59 @@
+.page-list {
+	button {
+		border-radius: 2px;
+
+		&:focus-visible:not(:disabled) {
+			border-color: var(--color-primary-light);
+			box-shadow: 0 0 0 2px var(--color-primary-light);
+		}
+	}
+}
+
+.page-list-item {
+	cursor: pointer;
+	padding: 10px 8px;
+	transition: background-color 0.2s;
+
+	&:hover {
+		&__label {
+			color: var(--studio-blue-50);
+		}
+	}
+
+
+	&--selected &__icon {
+		background-color: var(--studio-blue-50);
+		border-color: var(--studio-blue-50);
+	}
+
+	&--disabled {
+		cursor: default;
+	}
+
+	&--disabled &__icon {
+		background-color: var(--studio-gray-20);
+	}
+
+	&--disabled &__label {
+		color: var(--studio-gray-100);
+	}
+
+	&__icon {
+		align-items: center;
+		border-radius: 16px; /* stylelint-disable-line scales/radii */
+		border: 1px solid var(--studio-gray-20);
+		box-sizing: border-box;
+		color: #fff;
+		display: flex;
+		height: 16px;
+		justify-content: center;
+		width: 16px;
+		transition: background-color 0.2s;
+	}
+
+	&__label {
+		color: var(--studio-gray-100);
+		text-transform: capitalize;
+	}
+}
+

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/page-list.tsx

@@ -0,0 +1,78 @@
+import { Gridicon } from '@automattic/components';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+	__unstableCompositeItem as CompositeItem,
+	FlexItem,
+} from '@wordpress/components';
+import classnames from 'classnames';
+import { useTranslate } from 'i18n-calypso';
+import { ORDERED_PAGES } from './constants';
+import './page-list.scss';
+
+interface PageListItemProps {
+	label: string;
+	isSelected?: boolean;
+	isDisabled?: boolean;
+}
+
+const PageListItem = ( { label, isSelected, isDisabled }: PageListItemProps ) => {
+	return (
+		<HStack
+			className={ classnames( 'page-list-item', {
+				'page-list-item--selected': isSelected,
+				'page-list-item--disabled': isDisabled,
+			} ) }
+			justify="flex-start"
+			spacing={ 3 }
+		>
+			<FlexItem className="page-list-item__icon" display="flex">
+				{ /* eslint-disable wpcalypso/jsx-gridicon-size */ }
+				<Gridicon icon="checkmark" size={ 10 } />
+			</FlexItem>
+			<FlexItem className="page-list-item__label">{ label }</FlexItem>
+		</HStack>
+	);
+};
+
+interface PageListProps {
+	selectedPages: string[];
+	onSelectPage: ( selectedPage: string ) => void;
+}
+
+const PageList = ( { selectedPages, onSelectPage }: PageListProps ) => {
+	const translate = useTranslate();
+	const composite = useCompositeState( { orientation: 'vertical' } );
+
+	return (
+		<Composite
+			{ ...composite }
+			role="listbox"
+			className="page-list"
+			aria-label={ translate( 'Pages' ) }
+		>
+			<VStack spacing={ 0 }>
+				<CompositeItem { ...composite } role="option" as="button" disabled>
+					<PageListItem label={ translate( 'Homepage' ) } isDisabled />
+				</CompositeItem>
+				{ ORDERED_PAGES.map( ( page ) => {
+					return (
+						<CompositeItem
+							key={ page }
+							role="option"
+							as="button"
+							{ ...composite }
+							onClick={ () => onSelectPage( page ) }
+						>
+							<PageListItem label={ page } isSelected={ selectedPages.includes( page ) } />
+						</CompositeItem>
+					);
+				} ) }
+			</VStack>
+		</Composite>
+	);
+};
+
+export default PageList;

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/screen-pages.tsx

@@ -1,16 +1,19 @@
 import { NavigatorHeader } from '@automattic/onboarding';
-import { Button } from '@wordpress/components';
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
 import { useEffect, useState } from 'react';
 import { PATTERN_ASSEMBLER_EVENTS } from './events';
 import { useScreen } from './hooks';
 import NavigatorTitle from './navigator-title';
+import PageList from './page-list';
 
 interface Props {
+	selectedPages: string[];
+	onSelect: ( page: string ) => void;
 	onContinueClick: () => void;
 	recordTracksEvent: ( name: string, eventProperties?: any ) => void;
 }
 
-const ScreenPages = ( { onContinueClick, recordTracksEvent }: Props ) => {
+const ScreenPages = ( { selectedPages, onSelect, onContinueClick, recordTracksEvent }: Props ) => {
 	const [ disabled, setDisabled ] = useState( true );
 	const { title, description, continueLabel } = useScreen( 'pages' );
 
@@ -43,7 +46,11 @@ const ScreenPages = ( { onContinueClick, recordTracksEvent }: Props ) => {
 				description={ description }
 				hideBack
 			/>
-			<div className="screen-container__body"></div>
+			<div className="screen-container__body">
+				<VStack spacing="4">
+					<PageList selectedPages={ selectedPages } onSelectPage={ onSelect } />
+				</VStack>
+			</div>
 			<div className="screen-container__footer">
 				<Button
 					className="pattern-assembler__button"