Add a catch-all return to LYS hub after user exits essential task (#4…

…7606) * Add redirect to LYS on homescreen when lysTaskOpen is present * Typos * Fix lint issues * Fix lint issues * Add changelog * Fix lint issues * Fix lint issues * Use isDashboardShown in effect This required adding a check to ensure query is not an empty object * Imporve the jankiness by moving catch-all logic to layout * use an effect to set the session value to no * lint * lint * Fix tests * Try preventing redirects from WP menu click * Revert "Try preventing redirects from WP menu click" This reverts commit 8ef6dcf.
woocommerce · May 22, 2024 · 501272c · 501272c
1 parent 6c136e4
commit 501272c
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js
@@ -73,7 +73,7 @@ export const Layout = ( {
 	const shouldShowWCPayFeature = taskListComplete || isTaskListHidden;
 	const hasTwoColumnContent =
 		shouldShowStoreLinks || window.wcAdminFeatures.analytics;
-	const isDashboardShown = ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
+	const isDashboardShown = Object.keys( query ).length > 0 && ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
 	const activeSetupTaskList = useActiveSetupTasklist();
 
 	const twoColumns =

diff --git a/plugins/woocommerce-admin/client/homescreen/test/index.js b/plugins/woocommerce-admin/client/homescreen/test/index.js
@@ -48,7 +48,7 @@ describe( 'Homescreen Layout', () => {
 				requestingTaskList={ false }
 				taskListComplete
 				hasTaskList={ true }
-				query={ {} }
+				query={ { page: 'wc-admin' } }
 				updateOptions={ () => {} }
 			/>
 		);
@@ -92,7 +92,7 @@ describe( 'Homescreen Layout', () => {
 			<Layout
 				requestingTaskList={ false }
 				hasTaskList={ false }
-				query={ {} }
+				query={ { page: 'wc-admin' } }
 				updateOptions={ () => {} }
 			/>
 		);
@@ -107,7 +107,7 @@ describe( 'Homescreen Layout', () => {
 				requestingTaskList={ false }
 				hasTaskList={ true }
 				taskListComplete
-				query={ {} }
+				query={ { page: 'wc-admin' } }
 				updateOptions={ () => {} }
 			/>
 		);
@@ -195,7 +195,7 @@ describe( 'Homescreen Layout', () => {
 				requestingTaskList={ false }
 				taskListComplete
 				hasTaskList={ true }
-				query={ {} }
+				query={ { page: 'wc-admin' } }
 				updateOptions={ () => {} }
 			/>
 		);
@@ -238,7 +238,7 @@ describe( 'Homescreen Layout', () => {
 				taskListComplete
 				hasTaskList={ true }
 				isTaskListHidden={ true }
-				query={ {} }
+				query={ { page: 'wc-admin' } }
 				updateOptions={ () => {} }
 			/>
 		);

diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useMachine } from '@xstate5/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -34,6 +34,9 @@ export type LaunchYourStoreComponentProps = {
 
 const LaunchStoreController = () => {
 	useFullScreen( [ 'woocommerce-launch-your-store' ] );
+	useEffect( () => {
+		window.sessionStorage.setItem( 'lysWaiting', 'no' );
+	}, [] );
 	const { xstateV5Inspector: inspect } = useXStateInspect( 'V5' );
 
 	const [ mainContentState, sendToMainContent, mainContentMachineService ] =

diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/tasklist.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/tasklist.tsx
@@ -88,6 +88,7 @@ export function taskClickedAction( event: {
 } ) {
 	const recentlyActionedTasks = getRecentlyActionedTasks() ?? [];
 	saveRecentlyActionedTask( [ ...recentlyActionedTasks, event.task.id ] );
+	window.sessionStorage.setItem( 'lysWaiting', 'yes' );
 
 	const { setWithExpiry: saveTaskReferral } = accessTaskReferralStorage(
 		{ taskId: event.task.id, referralLifetime: 60 * 60 * 24 } // 24 hours

diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js
@@ -20,7 +20,12 @@ import {
 	CustomerEffortScoreModalContainer,
 	triggerExitPageCesSurvey,
 } from '@woocommerce/customer-effort-score';
-import { getHistory, getQuery } from '@woocommerce/navigation';
+import {
+	getHistory,
+	getQuery,
+	getNewPath,
+	navigateTo,
+} from '@woocommerce/navigation';
 import {
 	PLUGINS_STORE_NAME,
 	useUser,
@@ -192,6 +197,19 @@ function _Layout( {
 		}
 	}, [ showHeader ] );
 
+	const isDashboardShown =
+		query.page && query.page === 'wc-admin' && ! query.path && ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
+	useEffect( () => {
+		// Catch-all to redirect to LYS hub when it was previously opened.
+		const isLYSWaiting =
+			window.sessionStorage.getItem( 'lysWaiting' ) === 'yes';
+		if ( isDashboardShown && isLYSWaiting ) {
+			navigateTo( {
+				url: getNewPath( {}, '/launch-your-store' ),
+			} );
+		}
+	}, [ isDashboardShown ] );
+
 	return (
 		<LayoutContextProvider
 			value={ getLayoutContextValue( [

diff --git a/plugins/woocommerce/changelog/try-lys-return-catch-all b/plugins/woocommerce/changelog/try-lys-return-catch-all
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Return users to LYS after completing essential task