Assembler: Redirect back to the previous screen after the checkout (A…

…utomattic#81069)

* Assembler: Sync screen to search parameters

* Handle initial path

* Handle goBack from the intermediate screen

* Refactor

* Resolve conflicts

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

@@ -11,11 +11,14 @@ export const NAVIGATOR_PATHS = {
 	STYLES_COLORS: '/styles/colors',
 	STYLES_FONTS: '/styles/fonts',
 	ACTIVATION: '/activation',
+	CONFIRMATION: '/confirmation',
 };
 
 export const INITIAL_PATH = NAVIGATOR_PATHS.MAIN_HEADER;
 export const INITIAL_CATEGORY = 'posts';
 
+export const INITIAL_SCREEN = 'main';
+
 /* Category list of the patterns fetched via PTK API from Dotcompatterns
  *
  * The categories that are commented are not fetched because they

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

@@ -0,0 +1,11 @@
+export { default as useCategoriesOrder } from './use-categories-order';
+export { default as useCurrentScreen } from './use-current-screen';
+export { default as useDotcomPatterns } from './use-dotcom-patterns';
+export { default as useGlobalStylesUpgradeModal } from './use-global-styles-upgrade-modal';
+export { default as useInitialPath } from './use-initial-path';
+export { default as usePatternCategories } from './use-pattern-categories';
+export { default as usePatternsMapByCategory } from './use-patterns-map-by-category';
+export * from './use-prefetch-images';
+export { default as useRecipe } from './use-recipe';
+export { default as useScreen } from './use-screen';
+export { default as useSyncNavigatorScreen } from './use-sync-navigator-screen';

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/hooks/use-current-screen.tsx

@@ -0,0 +1,14 @@
+import { useSearchParams } from 'react-router-dom';
+import { INITIAL_SCREEN } from '../constants';
+import useScreen from './use-screen';
+import type { ScreenName } from '../types';
+
+const useCurrentScreen = () => {
+	const [ searchParams ] = useSearchParams();
+	const currentScreenName = ( searchParams.get( 'screen' ) ?? INITIAL_SCREEN ) as ScreenName;
+	const currentScreen = useScreen( currentScreenName );
+
+	return currentScreen;
+};
+
+export default useCurrentScreen;

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

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { INITIAL_PATH } from '../constants';
+
+const useInitialPath = () => {
+	const [ searchParams ] = useSearchParams();
+
+	return useMemo( () => {
+		const screen = searchParams.get( 'screen' );
+		const screenParameter = searchParams.get( 'screen_parameter' );
+		if ( ! screen ) {
+			return INITIAL_PATH;
+		}
+
+		return [ screen, screenParameter ]
+			.filter( Boolean )
+			.map( ( path ) => `/${ path }` )
+			.join( '' );
+	}, [] );
+};
+
+export default useInitialPath;

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

@@ -0,0 +1,53 @@
+import { useHasEnTranslation } from '@automattic/i18n-utils';
+import { useTranslate } from 'i18n-calypso';
+import { NAVIGATOR_PATHS } from '../constants';
+import type { ScreenName } from '../types';
+
+const useScreen = ( screenName: ScreenName ) => {
+	const translate = useTranslate();
+	const hasEnTranslation = useHasEnTranslation();
+	const screens = {
+		main: {
+			name: 'main',
+			title: translate( 'Design your own' ),
+			initialPath: NAVIGATOR_PATHS.MAIN_HEADER,
+		},
+		styles: {
+			name: 'styles',
+			title: hasEnTranslation( 'Pick your style' )
+				? translate( 'Pick your style' )
+				: translate( 'Styles' ),
+			initialPath: NAVIGATOR_PATHS.STYLES_COLORS,
+		},
+		upsell: {
+			name: 'upsell',
+			title: translate( 'Custom styles' ),
+		},
+		activation: {
+			name: 'activation',
+			title: translate( 'Activate this theme' ),
+			initialPath: NAVIGATOR_PATHS.ACTIVATION,
+		},
+		confirmation: {
+			name: 'confirmation',
+			title: translate( 'Great job!' ),
+			initialPath: NAVIGATOR_PATHS.CONFIRMATION,
+		},
+	};
+
+	/** @todo Handle the upsell screen in the following PR */
+	const previousScreens = {
+		main: null,
+		styles: screens.main,
+		upsell: screens.styles,
+		activation: screens.styles,
+		confirmation: screens.styles,
+	};
+
+	return {
+		...screens[ screenName ],
+		previousScreen: previousScreens[ screenName ],
+	};
+};
+
+export default useScreen;

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

@@ -0,0 +1,30 @@
+import { useNavigatorListener } from '@automattic/onboarding';
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { INITIAL_SCREEN } from '../constants';
+
+const useSyncNavigatorScreen = () => {
+	const [ , setSearchParams ] = useSearchParams();
+	const handleNavigatorPathChange = useCallback(
+		( path = '' ) => {
+			setSearchParams(
+				( currentSearchParams ) => {
+					const [ screen, screenParameter ] = path.split( '/' ).slice( 1 );
+					currentSearchParams.set( 'screen', screen ?? INITIAL_SCREEN );
+					if ( screenParameter ) {
+						currentSearchParams.set( 'screen_parameter', screenParameter );
+					} else {
+						currentSearchParams.delete( 'screen_parameter' );
+					}
+					return currentSearchParams;
+				},
+				{ replace: true }
+			);
+		},
+		[ setSearchParams ]
+	);
+
+	useNavigatorListener( handleNavigatorPathChange );
+};
+
+export default useSyncNavigatorScreen;

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

@@ -29,14 +29,19 @@ import { useSiteIdParam } from '../../../../hooks/use-site-id-param';
 import { useSiteSlugParam } from '../../../../hooks/use-site-slug-param';
 import { SITE_STORE, ONBOARD_STORE } from '../../../../stores';
 import { recordSelectedDesign, getAssemblerSource } from '../../analytics/record-design';
-import { SITE_TAGLINE, NAVIGATOR_PATHS, INITIAL_PATH } from './constants';
+import { SITE_TAGLINE, NAVIGATOR_PATHS, INITIAL_SCREEN } from './constants';
 import { PATTERN_ASSEMBLER_EVENTS } from './events';
-import useDotcomPatterns from './hooks/use-dotcom-patterns';
-import useGlobalStylesUpgradeModal from './hooks/use-global-styles-upgrade-modal';
-import usePatternCategories from './hooks/use-pattern-categories';
-import usePatternsMapByCategory from './hooks/use-patterns-map-by-category';
-import { usePrefetchImages } from './hooks/use-prefetch-images';
-import useRecipe from './hooks/use-recipe';
+import {
+	useCurrentScreen,
+	useDotcomPatterns,
+	useGlobalStylesUpgradeModal,
+	useInitialPath,
+	usePatternCategories,
+	usePatternsMapByCategory,
+	usePrefetchImages,
+	useRecipe,
+	useSyncNavigatorScreen,
+} from './hooks';
 import withNotices, { NoticesProps } from './notices/notices';
 import PatternAssemblerContainer from './pattern-assembler-container';
 import PatternLargePreview from './pattern-large-preview';
@@ -138,6 +143,9 @@ const PatternAssembler = ( {
 
 	const syncedGlobalStylesUserConfig = useSyncGlobalStylesUserConfig( selectedVariations );
 
+	const currentScreen = useCurrentScreen();
+
+	useSyncNavigatorScreen();
 	usePrefetchImages();
 
 	const siteInfo = {
@@ -322,12 +330,31 @@ const PatternAssembler = ( {
 		}
 	};
 
+	const getBackLabel = () => {
+		if ( ! currentScreen.previousScreen ) {
+			return undefined;
+		}
+
+		// Commit the following string for the translation
+		// translate( 'Back to %(pageTitle)s' );
+		return translate( 'Back to %(clientTitle)s', {
+			args: {
+				clientTitle: currentScreen.previousScreen.title,
+			},
+		} );
+	};
+
 	const onBack = () => {
-		if ( navigator.location.path === NAVIGATOR_PATHS.ACTIVATION ) {
-			navigator.goBack();
+		if ( currentScreen.previousScreen ) {
+			if ( navigator.location.isInitial && currentScreen.name !== INITIAL_SCREEN ) {
+				navigator.goTo( currentScreen.previousScreen.initialPath, { replace: true } );
+			} else {
+				navigator.goBack();
+			}
+
 			recordTracksEvent( PATTERN_ASSEMBLER_EVENTS.SCREEN_BACK_CLICK, {
-				screen_from: 'activation',
-				screen_to: 'styles',
+				screen_from: currentScreen.name,
+				screen_to: currentScreen.previousScreen.name,
 			} );
 			return;
 		}
@@ -567,14 +594,10 @@ const PatternAssembler = ( {
 		<StepContainer
 			className="pattern-assembler__sidebar-revamp"
 			stepName="pattern-assembler"
-			hideBack={
-				navigator.location.path !== NAVIGATOR_PATHS.ACTIVATION &&
-				! navigator.location.path?.startsWith( NAVIGATOR_PATHS.MAIN )
-			}
 			backLabelText={
 				isSiteAssemblerFlow( flow ) && navigator.location.path?.startsWith( NAVIGATOR_PATHS.MAIN )
 					? translate( 'Back to themes' )
-					: undefined
+					: getBackLabel()
 			}
 			goBack={ onBack }
 			goNext={ goNext }
@@ -597,11 +620,15 @@ const PatternAssembler = ( {
 	);
 };
 
-const PatternAssemblerStep = ( props: StepProps & NoticesProps ) => (
-	<NavigatorProvider initialPath={ INITIAL_PATH } tabIndex={ -1 }>
-		<PatternAssembler { ...props } />
-	</NavigatorProvider>
-);
+const PatternAssemblerStep = ( props: StepProps & NoticesProps ) => {
+	const initialPath = useInitialPath();
+
+	return (
+		<NavigatorProvider initialPath={ initialPath } tabIndex={ -1 }>
+			<PatternAssembler { ...props } />
+		</NavigatorProvider>
+	);
+};
 
 export default compose(
 	withGlobalStylesProvider,

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

@@ -6,7 +6,7 @@ import {
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
-import useCategoriesOrder from './hooks/use-categories-order';
+import { useCategoriesOrder } from './hooks';
 import type { Pattern, Category } from './types';
 import './pattern-category-list.scss';
 

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

@@ -4,6 +4,7 @@ import { NavigatorHeader } from '@automattic/onboarding';
 import { CheckboxControl } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
+import { useScreen } from './hooks';
 import NavigatorTitle from './navigator-title';
 import './screen-activation.scss';
 
@@ -13,13 +14,14 @@ interface Props {
 
 const ScreenActivation = ( { onActivate }: Props ) => {
 	const translate = useTranslate();
+	const { title } = useScreen( 'activation' );
 	const [ isConfirmed, setIsConfirmed ] = useState( false );
 	const toggleConfirm = () => setIsConfirmed( ( value ) => ! value );
 
 	return (
 		<>
 			<NavigatorHeader
-				title={ <NavigatorTitle title={ translate( 'Activate this theme' ) } /> }
+				title={ <NavigatorTitle title={ title } /> }
 				description={ translate( 'Activating this theme will result in the following changes.' ) }
 				hideBack
 			/>

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

@@ -10,6 +10,7 @@ import i18n, { useTranslate } from 'i18n-calypso';
 import { useRef } from 'react';
 import { NAVIGATOR_PATHS, INITIAL_CATEGORY } from './constants';
 import { PATTERN_ASSEMBLER_EVENTS } from './events';
+import { useScreen } from './hooks';
 import NavigatorTitle from './navigator-title';
 import PatternCategoryList from './pattern-category-list';
 import Survey from './survey';
@@ -40,6 +41,7 @@ const ScreenMain = ( {
 	patternsMapByCategory,
 }: Props ) => {
 	const translate = useTranslate();
+	const { title } = useScreen( 'main' );
 	const isEnglishLocale = useIsEnglishLocale();
 	const wrapperRef = useRef< HTMLDivElement | null >( null );
 	const { location, params, goTo } = useNavigator();
@@ -81,7 +83,7 @@ const ScreenMain = ( {
 	return (
 		<>
 			<NavigatorHeader
-				title={ <NavigatorTitle title={ translate( 'Design your own' ) } /> }
+				title={ <NavigatorTitle title={ title } /> }
 				description={ translate(
 					'Create your homepage by first adding patterns and then choosing a color palette and font style.'
 				) }

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

@@ -1,15 +1,15 @@
-import { useIsEnglishLocale } from '@automattic/i18n-utils';
 import { NavigatorItem, NavigatorHeader, NavigatorItemGroup } from '@automattic/onboarding';
 import {
 	Button,
 	__experimentalVStack as VStack,
 	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { color, typography } from '@wordpress/icons';
-import i18n, { useTranslate } from 'i18n-calypso';
+import { useTranslate } from 'i18n-calypso';
 import { useEffect, useState } from 'react';
 import { NAVIGATOR_PATHS } from './constants';
 import { PATTERN_ASSEMBLER_EVENTS } from './events';
+import { useScreen } from './hooks';
 import NavigatorTitle from './navigator-title';
 
 interface Props {
@@ -28,24 +28,16 @@ const ScreenStyles = ( {
 	hasFont,
 }: Props ) => {
 	const translate = useTranslate();
-	const isEnglishLocale = useIsEnglishLocale();
 	const [ disabled, setDisabled ] = useState( true );
-	const { location, goTo, goBack } = useNavigator();
+	const { location, goTo } = useNavigator();
+	const { title } = useScreen( 'styles' );
 
 	const handleNavigatorItemSelect = ( type: string, path: string ) => {
 		const nextPath = path !== location.path ? path : NAVIGATOR_PATHS.STYLES;
 		goTo( nextPath, { replace: true } );
 		onMainItemSelect( type );
 	};
 
-	const handleBackClick = () => {
-		goBack();
-		recordTracksEvent( PATTERN_ASSEMBLER_EVENTS.SCREEN_BACK_CLICK, {
-			screen_from: 'styles',
-			screen_to: 'main',
-		} );
-	};
-
 	const handleContinueClick = () => {
 		if ( ! disabled ) {
 			onContinueClick();
@@ -71,19 +63,11 @@ const ScreenStyles = ( {
 	return (
 		<>
 			<NavigatorHeader
-				title={
-					<NavigatorTitle
-						title={
-							isEnglishLocale || i18n.hasTranslation( 'Pick your style' )
-								? translate( 'Pick your style' )
-								: translate( 'Styles' )
-						}
-					/>
-				}
+				title={ <NavigatorTitle title={ title } /> }
 				description={ translate(
 					'Create your homepage by first adding patterns and then choosing a color palette and font style.'
 				) }
-				onBack={ handleBackClick }
+				hideBack
 			/>
 			<div className="screen-container__body">
 				<VStack spacing="4">

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

@@ -32,3 +32,5 @@ export type PanelObject = {
 	selectedPattern: Pattern | null;
 	selectedPatterns?: Pattern[];
 };
+
+export type ScreenName = 'main' | 'styles' | 'confirmation' | 'activation' | 'upsell';

packages/onboarding/src/navigator/hooks/index.tsx

@@ -0,0 +1 @@
+export { default as useNavigatorListener } from './use-navigator-listener';