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
woocommerce · May 10, 2023 · 956d09c · 956d09c
1 parent 378b297
commit 956d09c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix shipping tour layout context error