CYS - Improve the error when a request fails due to permissions (#50211)

* Improve the error when a request fails due to permissions

* Add changefile(s) from automation for the following project(s): woocommerce

* Fix regression and copy

* Fix feedback: improve types

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts

@@ -27,8 +27,15 @@ const redirectToIntroWithError = sendParent<
 	DesignWithoutAIStateMachineContext,
 	DesignWithoutAIStateMachineEvents,
 	DesignWithoutAIStateMachineEvents
->( {
-	type: 'NO_AI_FLOW_ERROR',
+>( ( context, event ) => {
+	const errorEvent = event as {
+		type: string;
+		data?: { data?: { status: number } };
+	};
+	return {
+		type: 'NO_AI_FLOW_ERROR',
+		errorStatus: errorEvent?.data?.data?.status,
+	};
 } );
 
 const redirectToAssemblerHubSection = (

plugins/woocommerce-admin/client/customize-store/intro/actions.ts

@@ -130,8 +130,13 @@ export const assignNoAIFlowError = assign<
 	customizeStoreStateMachineContext,
 	customizeStoreStateMachineEvents
 >( {
-	intro: ( context ) => {
-		return { ...context.intro, hasErrors: true };
+	intro: ( context, event: unknown ) => {
+		const { errorStatus } = event as { errorStatus: number | undefined };
+		return {
+			...context.intro,
+			hasErrors: true,
+			errorStatus,
+		};
 	},
 } );
 

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

@@ -277,6 +277,17 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 		context.flowType === FlowType.noAI && context.intro.hasErrors
 	);
 
+	const errorMessage =
+		context.intro.errorStatus === 403
+			? __(
+					"Sorry, you don't have permission to update the theme.",
+					'woocommerce'
+			  )
+			: __(
+					'Oops! We encountered a problem while setting up the foundations. {{anchor}}Please try again{{/anchor}} or start with a theme.',
+					'woocommerce'
+			  );
+
 	const [ openDesignChangeWarningModal, setOpenDesignChangeWarningModal ] =
 		useState( false );
 
@@ -403,10 +414,7 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 							status="error"
 						>
 							{ interpolateComponents( {
-								mixedString: __(
-									'Oops! We encountered a problem while setting up the foundations. {{anchor}}Please try again{{/anchor}} or start with a theme.',
-									'woocommerce'
-								),
+								mixedString: errorMessage,
 								components: {
 									anchor: (
 										// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid

plugins/woocommerce-admin/client/customize-store/intro/tests/intro-banner.test.tsx

@@ -38,6 +38,7 @@ describe( 'Intro Banners', () => {
 				context={ {
 					intro: {
 						hasErrors: false,
+						errorStatus: undefined,
 						activeTheme: '',
 						themeData: {
 							themes: [],
@@ -78,6 +79,7 @@ describe( 'Intro Banners', () => {
 				context={ {
 					intro: {
 						hasErrors: false,
+						errorStatus: undefined,
 						activeTheme: '',
 						themeData: {
 							themes: [],
@@ -124,6 +126,7 @@ describe( 'Intro Banners', () => {
 				context={ {
 					intro: {
 						hasErrors: false,
+						errorStatus: undefined,
 						activeTheme: '',
 						themeData: {
 							themes: [],

plugins/woocommerce-admin/client/customize-store/intro/tests/intro-modal.test.tsx

@@ -36,6 +36,7 @@ describe( 'Intro Modals', () => {
 				context={ {
 					intro: {
 						hasErrors: false,
+						errorStatus: undefined,
 						activeTheme: '',
 						themeData: {
 							themes: [],
@@ -93,6 +94,7 @@ describe( 'Intro Modals', () => {
 				context={ {
 					intro: {
 						hasErrors: false,
+						errorStatus: undefined,
 						activeTheme: '',
 						themeData: {
 							themes: [],
@@ -148,6 +150,7 @@ describe( 'Intro Modals', () => {
 				context={ {
 					intro: {
 						hasErrors: false,
+						errorStatus: undefined,
 						activeTheme: '',
 						themeData: {
 							themes: [],

plugins/woocommerce-admin/client/customize-store/types.ts

@@ -48,6 +48,7 @@ export type customizeStoreStateMachineContext = {
 	themeConfiguration: Record< string, unknown >; // placeholder for theme configuration until we know what it looks like
 	intro: {
 		hasErrors: boolean;
+		errorStatus: number | undefined;
 		themeData: RecommendThemesAPIResponse;
 		activeTheme: string;
 		customizeStoreTaskCompleted: boolean;

plugins/woocommerce/changelog/50211-48657-add-better-error-message

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS - Improve the error when a request fails due to permissions