From 956d09c34b2afb097721dd270a3971f87cee03a9 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Wed, 10 May 2023 13:01:37 +0800
Subject: [PATCH] Fix shipping tour layout context error (#38183)

* Add LayoutContextProvider to embedded body layout to fix shipping tour error

* Show an error notice and record track when failing to update shipping option

* Add changelog

* Update error message

* Remove unused import
---
 .../embedded-body-layout.tsx                  | 22 ++++++++++++-------
 .../client/guided-tours/shipping-tour.tsx     | 19 ++++++++++++++--
 .../woocommerce/changelog/fix-shipping-tour   |  4 ++++
 3 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-shipping-tour

diff --git a/plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx b/plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx
index 4e6110b85a4..4a69d546df7 100644
--- a/plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx
+++ b/plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx
@@ -4,6 +4,10 @@
 import { applyFilters } from '@wordpress/hooks';
 import { useEffect } from '@wordpress/element';
 import { triggerExitPageCesSurvey } from '@woocommerce/customer-effort-score';
+import {
+	LayoutContextProvider,
+	getLayoutContextValue,
+} from '@woocommerce/admin-layout';
 
 /**
  * Internal dependencies
@@ -56,13 +60,15 @@ export const EmbeddedBodyLayout = () => {
 	) as React.ElementType< EmbeddedBodyProps >[];
 
 	return (
-		<div
-			className="woocommerce-embedded-layout__primary"
-			id="woocommerce-embedded-layout__primary"
-		>
-			{ componentList.map( ( Comp, index ) => {
-				return <Comp key={ index } { ...queryParams } />;
-			} ) }
-		</div>
+		<LayoutContextProvider value={ getLayoutContextValue( [ 'page' ] ) }>
+			<div
+				className="woocommerce-embedded-layout__primary"
+				id="woocommerce-embedded-layout__primary"
+			>
+				{ componentList.map( ( Comp, index ) => {
+					return <Comp key={ index } { ...queryParams } />;
+				} ) }
+			</div>
+		</LayoutContextProvider>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/guided-tours/shipping-tour.tsx b/plugins/woocommerce-admin/client/guided-tours/shipping-tour.tsx
index 0a45234d301..769ca692158 100644
--- a/plugins/woocommerce-admin/client/guided-tours/shipping-tour.tsx
+++ b/plugins/woocommerce-admin/client/guided-tours/shipping-tour.tsx
@@ -205,6 +205,7 @@ export const ShippingTour: React.FC< {
 	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
 	const { show: showTour } = useShowShippingTour();
 	const [ step, setStepNumber ] = useState( 0 );
+	const { createNotice } = useDispatch( 'core/notices' );
 
 	const tourConfig: TourKitTypes.WooConfig = {
 		placement: 'auto',
@@ -282,10 +283,24 @@ export const ShippingTour: React.FC< {
 				},
 			},
 		],
-		closeHandler: ( steps, stepIndex, source ) => {
-			updateOptions( {
+		closeHandler: async ( steps, stepIndex, source ) => {
+			const update = await updateOptions( {
 				[ REVIEWED_DEFAULTS_OPTION ]: 'yes',
 			} );
+
+			if ( ! update.success ) {
+				createNotice(
+					'error',
+					__(
+						'There was a problem marking the shipping tour as completed.',
+						'woocommerce'
+					)
+				);
+				recordEvent(
+					'walkthrough_settings_shipping_updated_option_error'
+				);
+			}
+
 			if ( source === 'close-btn' ) {
 				recordEvent( 'walkthrough_settings_shipping_dismissed', {
 					step_name: steps[ stepIndex ].meta.name,
diff --git a/plugins/woocommerce/changelog/fix-shipping-tour b/plugins/woocommerce/changelog/fix-shipping-tour
new file mode 100644
index 00000000000..17123952fb4
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-shipping-tour
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix shipping tour layout context error