From 4112c97d13f882f0c48aa8b72d44ba2afe5adec5 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 13 Jun 2024 12:42:30 +0800 Subject: [PATCH] Handle core profiler get countries error (#48317) * Handle core profiler get countries error * Update style * Add changefile(s) from automation for the following project(s): woocommerce * Update button and code style * Address feedback * Fix lint * Record skip step track and rename event --------- Co-authored-by: github-actions --- .../client/core-profiler/actions/tracks.tsx | 2 +- .../client/core-profiler/events.tsx | 29 +++++---- .../client/core-profiler/index.tsx | 26 +++++++- .../core-profiler/pages/BusinessInfo.tsx | 46 ++++++++++++++ .../client/core-profiler/style.scss | 61 ++++++++++++++----- .../48317-update-handle-get-countries-error | 4 ++ 6 files changed, 139 insertions(+), 29 deletions(-) create mode 100644 plugins/woocommerce/changelog/48317-update-handle-get-countries-error diff --git a/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx b/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx index 40ceaa5e13f..38a38f6d38a 100644 --- a/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx @@ -72,7 +72,7 @@ const recordTracksIsEmailChanged = ( { event, }: { context: CoreProfilerStateMachineContext; - event: BusinessInfoEvent; + event: Extract< BusinessInfoEvent, { type: 'BUSINESS_INFO_COMPLETED' } >; } ) => { let emailSource, isEmailChanged; if ( context.onboardingProfile.store_email ) { diff --git a/plugins/woocommerce-admin/client/core-profiler/events.tsx b/plugins/woocommerce-admin/client/core-profiler/events.tsx index 424690113f2..84c717d17bf 100644 --- a/plugins/woocommerce-admin/client/core-profiler/events.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/events.tsx @@ -42,17 +42,24 @@ export type UserProfileEvent = payload: { userProfile: { skipped: true } }; }; -export type BusinessInfoEvent = { - type: 'BUSINESS_INFO_COMPLETED'; - payload: { - storeName?: string; - industry?: IndustryChoice; - storeLocation: CountryStateOption[ 'key' ]; - geolocationOverruled: boolean; - isOptInMarketing: boolean; - storeEmailAddress: string; - }; -}; +export type BusinessInfoEvent = + | { + type: 'BUSINESS_INFO_COMPLETED'; + payload: { + storeName?: string; + industry?: IndustryChoice; + storeLocation: CountryStateOption[ 'key' ]; + geolocationOverruled: boolean; + isOptInMarketing: boolean; + storeEmailAddress: string; + }; + } + | { + type: 'RETRY_PRE_BUSINESS_INFO'; + } + | { + type: 'SKIP_BUSINESS_INFO_STEP'; + }; export type BusinessLocationEvent = { type: 'BUSINESS_LOCATION_COMPLETED'; diff --git a/plugins/woocommerce-admin/client/core-profiler/index.tsx b/plugins/woocommerce-admin/client/core-profiler/index.tsx index b20a8290754..02cce7e4abf 100644 --- a/plugins/woocommerce-admin/client/core-profiler/index.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/index.tsx @@ -427,11 +427,18 @@ const assignUserProfile = assign( { event.payload.userProfile, } ); +type BusinessInfoPayload = Extract< + BusinessInfoEvent, + { type: 'BUSINESS_INFO_COMPLETED' } +>[ 'payload' ]; + const updateBusinessInfo = fromPromise( async ( { input, }: { - input: { payload: BusinessInfoEvent[ 'payload' ] }; + input: { + payload: BusinessInfoPayload; + }; } ) => { const refreshedOnboardingProfile = ( await resolveSelect( OPTIONS_STORE_NAME @@ -590,6 +597,10 @@ export const getJetpackIsConnected = fromPromise( async () => { return resolveSelect( PLUGINS_STORE_NAME ).isJetpackConnected(); } ); +const reloadPage = () => { + window.location.reload(); +}; + export const preFetchActions = { preFetchIsJetpackConnected, preFetchJetpackAuthUrl, @@ -615,6 +626,7 @@ const coreProfilerMachineActions = { redirectToWooHome, redirectToJetpackAuthPage, updateLoaderProgressWithPluginInstall, + reloadPage, }; const coreProfilerMachineActors = { @@ -1096,6 +1108,18 @@ export const coreProfilerStateMachineDefinition = createMachine( { 'recordTracksIsEmailChanged', ], }, + RETRY_PRE_BUSINESS_INFO: { + actions: [ 'reloadPage' ], + }, + SKIP_BUSINESS_INFO_STEP: { + target: '#plugins', + actions: [ + { + type: 'recordTracksStepSkipped', + params: { step: 'business_info' }, + }, + ], + }, }, }, postBusinessInfo: { diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx index 91df0cdd7f1..aff41d5d3b9 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx @@ -330,6 +330,52 @@ export const BusinessInfo = ( { showAllOnFocus isSearchable /> + { countries.length === 0 && ( + + { createInterpolateElement( + __( + 'Oops! We encountered a problem while fetching the list of countries to choose from. or ', + 'woocommerce' + ), + { + retryButton: ( + + ), + skipButton: ( + + ), + } + ) } + + ) } { /* woocommerce-profiler-select-control__country-spacer exists purely because the select-control above has an unremovable and unstyleable div and that's preventing margin collapse */ }
{ geolocationOverruled && ! dismissedGeolocationNotice && ( diff --git a/plugins/woocommerce-admin/client/core-profiler/style.scss b/plugins/woocommerce-admin/client/core-profiler/style.scss index 6af69a42995..c8457f55fb2 100644 --- a/plugins/woocommerce-admin/client/core-profiler/style.scss +++ b/plugins/woocommerce-admin/client/core-profiler/style.scss @@ -1,7 +1,7 @@ @import "./shared.scss"; .woocommerce-layout .woocommerce-layout__main { - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { padding-top: 0 !important; } } @@ -26,14 +26,14 @@ --color-error: #cc1818; // used by some @automattic/components - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { padding: 0 20px; } .woocommerce-profiler-button-container { width: 100%; max-width: 404px; - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { position: absolute; bottom: 20px; padding: 0 20px; @@ -133,7 +133,7 @@ padding-top: 110px; flex: 1; - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { padding-top: 70px; } @@ -148,10 +148,10 @@ background: url(./assets/images/welcome-desktop.svg) no-repeat center center; - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { margin-bottom: 40px; - background: url(./assets/images/welcome-mobile.svg) no-repeat - center center; + background: url(./assets/images/welcome-mobile.svg) no-repeat center + center; width: 222px; height: 144px; } @@ -167,7 +167,7 @@ font-size: 14px; font-weight: normal; - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { width: 100%; margin-top: auto; } @@ -178,7 +178,7 @@ display: flex; justify-content: center; - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { margin: 16px auto 20px; } @@ -229,10 +229,8 @@ #woocommerce-select-control__listbox-0 { top: 40px !important; } - } - .woocommerce-profiler-business-location { display: flex; flex-direction: column; @@ -285,7 +283,11 @@ } } - .woocommerce-experimental-select-control .components-popover .components-popover__content ul li:hover { + .woocommerce-experimental-select-control + .components-popover + .components-popover__content + ul + li:hover { background-color: #f6f7f7 !important; // Gray-0 color: $gray-900; } @@ -338,7 +340,7 @@ } .woocommerce-profiler-heading__subtitle { margin: 12px 0 48px 0 !important; - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { margin-top: 12px !important; } } @@ -384,12 +386,12 @@ } .woocommerce-profiler-plugins-continue-button-container { - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { width: 100%; } .woocommerce-profiler-plugins-continue-button { - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { width: 100%; } } @@ -419,7 +421,7 @@ width: 100%; &:has(.woocommerce-profiler-geolocation-notice) { - @include breakpoint( "<782px" ) { + @include breakpoint("<782px") { margin-bottom: 82px; } } @@ -513,6 +515,33 @@ margin: 0; } + .woocommerce-profiler-select-control__country-error { + background: #fce2e4; + padding: $gap-small; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 24px; + color: $gray-900; + margin: 12px 0; + + .components-notice__content { + margin: 0; + } + + .components-button { + padding: 0; + height: initial; + min-width: 24px; + min-height: 24px; + + svg { + width: 16px; + fill: $gray-900; + } + } + } + .woocommerce-profiler-select-control__country-spacer { margin: auto auto 12px auto; } diff --git a/plugins/woocommerce/changelog/48317-update-handle-get-countries-error b/plugins/woocommerce/changelog/48317-update-handle-get-countries-error new file mode 100644 index 00000000000..dd1c952f3fc --- /dev/null +++ b/plugins/woocommerce/changelog/48317-update-handle-get-countries-error @@ -0,0 +1,4 @@ +Significance: patch +Type: enhancement + +Handle core profiler get countries error \ No newline at end of file