From f8854e0a4f24995bc418c79bfee60fcc5223a789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Fri, 2 Aug 2024 17:50:13 +0200 Subject: [PATCH] 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 --- .../customize-store/design-without-ai/actions.ts | 11 +++++++++-- .../client/customize-store/intro/actions.ts | 9 +++++++-- .../client/customize-store/intro/index.tsx | 16 ++++++++++++---- .../intro/tests/intro-banner.test.tsx | 3 +++ .../intro/tests/intro-modal.test.tsx | 3 +++ .../client/customize-store/types.ts | 1 + .../50211-48657-add-better-error-message | 4 ++++ 7 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 plugins/woocommerce/changelog/50211-48657-add-better-error-message diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts b/plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts index eb7640df22f..b334a996ce3 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts +++ b/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 = ( diff --git a/plugins/woocommerce-admin/client/customize-store/intro/actions.ts b/plugins/woocommerce-admin/client/customize-store/intro/actions.ts index 4cfb4198c94..025c54ebc62 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/actions.ts +++ b/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, + }; }, } ); diff --git a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx b/plugins/woocommerce-admin/client/customize-store/intro/index.tsx index 73d7a9609ec..3afc70114e9 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/index.tsx +++ b/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 diff --git a/plugins/woocommerce-admin/client/customize-store/intro/tests/intro-banner.test.tsx b/plugins/woocommerce-admin/client/customize-store/intro/tests/intro-banner.test.tsx index 9487a743c83..55153043ab6 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/tests/intro-banner.test.tsx +++ b/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: [], diff --git a/plugins/woocommerce-admin/client/customize-store/intro/tests/intro-modal.test.tsx b/plugins/woocommerce-admin/client/customize-store/intro/tests/intro-modal.test.tsx index d60c4689445..b6e78895832 100644 --- a/plugins/woocommerce-admin/client/customize-store/intro/tests/intro-modal.test.tsx +++ b/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: [], diff --git a/plugins/woocommerce-admin/client/customize-store/types.ts b/plugins/woocommerce-admin/client/customize-store/types.ts index 603354f9472..aaecb53c265 100644 --- a/plugins/woocommerce-admin/client/customize-store/types.ts +++ b/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; diff --git a/plugins/woocommerce/changelog/50211-48657-add-better-error-message b/plugins/woocommerce/changelog/50211-48657-add-better-error-message new file mode 100644 index 00000000000..9914447da0f --- /dev/null +++ b/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 \ No newline at end of file