Fix back from CYS via LYS goes to Home, not LYS (#46665)

* Add goBack action to customize-store

* Add changelog

* Add __experimentLocationStack to history

* Update customize-store goBack action

* Rename __experimentalLocationStack

packages/js/navigation/changelog/update-coming-soon-page-style

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add __experimentalLocationStack prop to history

packages/js/navigation/src/history.ts

@@ -7,13 +7,16 @@ import { parse } from 'qs';
 // See https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
 // ^ This is a bit outdated but there's no newer documentation - the replacement for this is to use <unstable_HistoryRouter /> https://reactrouter.com/docs/en/v6/routers/history-router
 
+interface WooLocation extends Location {
+	pathname: string;
+}
+
 /**
  * Extension of history.BrowserHistory but also adds { pathname: string } to the location object.
  */
 export interface WooBrowserHistory extends BrowserHistory {
-	location: Location & {
-		pathname: string;
-	};
+	location: WooLocation;
+	readonly __experimentalLocationStack: WooLocation[];
 }
 
 let _history: WooBrowserHistory;
@@ -35,6 +38,31 @@ let _history: WooBrowserHistory;
 function getHistory(): WooBrowserHistory {
 	if ( ! _history ) {
 		const browserHistory = createBrowserHistory();
+		let locationStack: WooLocation[] = [ browserHistory.location ];
+
+		const updateNextLocationStack = (
+			action: WooBrowserHistory[ 'action' ],
+			location: WooBrowserHistory[ 'location' ]
+		) => {
+			switch ( action ) {
+				case 'POP':
+					locationStack = locationStack.slice(
+						0,
+						locationStack.length - 1
+					);
+					break;
+				case 'PUSH':
+					locationStack = [ ...locationStack, location ];
+					break;
+				case 'REPLACE':
+					locationStack = [
+						...locationStack.slice( 0, locationStack.length - 1 ),
+						location,
+					];
+					break;
+			}
+		};
+
 		_history = {
 			get action() {
 				return browserHistory.action;
@@ -65,6 +93,9 @@ function getHistory(): WooBrowserHistory {
 					pathname,
 				};
 			},
+			get __experimentalLocationStack() {
+				return [ ...locationStack ];
+			},
 			createHref: browserHistory.createHref,
 			push: browserHistory.push,
 			replace: browserHistory.replace,
@@ -81,6 +112,10 @@ function getHistory(): WooBrowserHistory {
 				} );
 			},
 		};
+
+		browserHistory.listen( () =>
+			updateNextLocationStack( _history.action, _history.location )
+		);
 	}
 	return _history;
 }

plugins/woocommerce-admin/client/customize-store/index.tsx

@@ -11,6 +11,7 @@ import {
 	getNewPath,
 	getQuery,
 	updateQueryString,
+	getHistory,
 } from '@woocommerce/navigation';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { dispatch, resolveSelect } from '@wordpress/data';
@@ -84,6 +85,22 @@ const redirectToWooHome = () => {
 	navigateOrParent( window, url );
 };
 
+const goBack = () => {
+	const history = getHistory();
+	if (
+		history.__experimentalLocationStack.length >= 2 &&
+		! history.__experimentalLocationStack[
+			history.__experimentalLocationStack.length - 2
+		].search.includes( 'customize-store' )
+	) {
+		// If the previous location is not a customize-store step, go back in history.
+		history.back();
+		return;
+	}
+
+	redirectToWooHome();
+};
+
 const redirectToThemes = ( _context: customizeStoreStateMachineContext ) => {
 	if ( isWooExpress() ) {
 		window.location.href =
@@ -130,6 +147,7 @@ export const machineActions = {
 	updateQueryStep,
 	redirectToWooHome,
 	redirectToThemes,
+	goBack,
 };
 
 export const customizeStoreStateMachineActions = {
@@ -330,7 +348,7 @@ export const customizeStoreStateMachineDefinition = createMachine( {
 			},
 			on: {
 				CLICKED_ON_BREADCRUMB: {
-					actions: 'redirectToWooHome',
+					actions: 'goBack',
 				},
 				DESIGN_WITH_AI: {
 					actions: [ 'recordTracksDesignWithAIClicked' ],

plugins/woocommerce/changelog/fix-back-from-cys-via-lys

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix back from CYS via LYS goes to Home, not LYS