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 <github-actions@github.com>
This commit is contained in:
Chi-Hsuan Huang 2024-06-13 12:42:30 +08:00 committed by GitHub
parent ab1789afd2
commit 4112c97d13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 139 additions and 29 deletions

View File

@ -72,7 +72,7 @@ const recordTracksIsEmailChanged = ( {
event, event,
}: { }: {
context: CoreProfilerStateMachineContext; context: CoreProfilerStateMachineContext;
event: BusinessInfoEvent; event: Extract< BusinessInfoEvent, { type: 'BUSINESS_INFO_COMPLETED' } >;
} ) => { } ) => {
let emailSource, isEmailChanged; let emailSource, isEmailChanged;
if ( context.onboardingProfile.store_email ) { if ( context.onboardingProfile.store_email ) {

View File

@ -42,17 +42,24 @@ export type UserProfileEvent =
payload: { userProfile: { skipped: true } }; payload: { userProfile: { skipped: true } };
}; };
export type BusinessInfoEvent = { export type BusinessInfoEvent =
type: 'BUSINESS_INFO_COMPLETED'; | {
payload: { type: 'BUSINESS_INFO_COMPLETED';
storeName?: string; payload: {
industry?: IndustryChoice; storeName?: string;
storeLocation: CountryStateOption[ 'key' ]; industry?: IndustryChoice;
geolocationOverruled: boolean; storeLocation: CountryStateOption[ 'key' ];
isOptInMarketing: boolean; geolocationOverruled: boolean;
storeEmailAddress: string; isOptInMarketing: boolean;
}; storeEmailAddress: string;
}; };
}
| {
type: 'RETRY_PRE_BUSINESS_INFO';
}
| {
type: 'SKIP_BUSINESS_INFO_STEP';
};
export type BusinessLocationEvent = { export type BusinessLocationEvent = {
type: 'BUSINESS_LOCATION_COMPLETED'; type: 'BUSINESS_LOCATION_COMPLETED';

View File

@ -427,11 +427,18 @@ const assignUserProfile = assign( {
event.payload.userProfile, event.payload.userProfile,
} ); } );
type BusinessInfoPayload = Extract<
BusinessInfoEvent,
{ type: 'BUSINESS_INFO_COMPLETED' }
>[ 'payload' ];
const updateBusinessInfo = fromPromise( const updateBusinessInfo = fromPromise(
async ( { async ( {
input, input,
}: { }: {
input: { payload: BusinessInfoEvent[ 'payload' ] }; input: {
payload: BusinessInfoPayload;
};
} ) => { } ) => {
const refreshedOnboardingProfile = ( await resolveSelect( const refreshedOnboardingProfile = ( await resolveSelect(
OPTIONS_STORE_NAME OPTIONS_STORE_NAME
@ -590,6 +597,10 @@ export const getJetpackIsConnected = fromPromise( async () => {
return resolveSelect( PLUGINS_STORE_NAME ).isJetpackConnected(); return resolveSelect( PLUGINS_STORE_NAME ).isJetpackConnected();
} ); } );
const reloadPage = () => {
window.location.reload();
};
export const preFetchActions = { export const preFetchActions = {
preFetchIsJetpackConnected, preFetchIsJetpackConnected,
preFetchJetpackAuthUrl, preFetchJetpackAuthUrl,
@ -615,6 +626,7 @@ const coreProfilerMachineActions = {
redirectToWooHome, redirectToWooHome,
redirectToJetpackAuthPage, redirectToJetpackAuthPage,
updateLoaderProgressWithPluginInstall, updateLoaderProgressWithPluginInstall,
reloadPage,
}; };
const coreProfilerMachineActors = { const coreProfilerMachineActors = {
@ -1096,6 +1108,18 @@ export const coreProfilerStateMachineDefinition = createMachine( {
'recordTracksIsEmailChanged', 'recordTracksIsEmailChanged',
], ],
}, },
RETRY_PRE_BUSINESS_INFO: {
actions: [ 'reloadPage' ],
},
SKIP_BUSINESS_INFO_STEP: {
target: '#plugins',
actions: [
{
type: 'recordTracksStepSkipped',
params: { step: 'business_info' },
},
],
},
}, },
}, },
postBusinessInfo: { postBusinessInfo: {

View File

@ -330,6 +330,52 @@ export const BusinessInfo = ( {
showAllOnFocus showAllOnFocus
isSearchable isSearchable
/> />
{ countries.length === 0 && (
<Notice
className="woocommerce-profiler-select-control__country-error"
isDismissible={ false }
status="error"
>
{ createInterpolateElement(
__(
'Oops! We encountered a problem while fetching the list of countries to choose from. <retryButton/> or <skipButton/>',
'woocommerce'
),
{
retryButton: (
<Button
onClick={ () => {
sendEvent( {
type: 'RETRY_PRE_BUSINESS_INFO',
} );
} }
variant="tertiary"
>
{ __(
'Please try again',
'woocommerce'
) }
</Button>
),
skipButton: (
<Button
onClick={ () => {
sendEvent( {
type: 'SKIP_BUSINESS_INFO_STEP',
} );
} }
variant="tertiary"
>
{ __(
'skip this step',
'woocommerce'
) }
</Button>
),
}
) }
</Notice>
) }
{ /* 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 */ } { /* 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 */ }
<div className="woocommerce-profiler-select-control__country-spacer" /> <div className="woocommerce-profiler-select-control__country-spacer" />
{ geolocationOverruled && ! dismissedGeolocationNotice && ( { geolocationOverruled && ! dismissedGeolocationNotice && (

View File

@ -1,7 +1,7 @@
@import "./shared.scss"; @import "./shared.scss";
.woocommerce-layout .woocommerce-layout__main { .woocommerce-layout .woocommerce-layout__main {
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
padding-top: 0 !important; padding-top: 0 !important;
} }
} }
@ -26,14 +26,14 @@
--color-error: #cc1818; // used by some @automattic/components --color-error: #cc1818; // used by some @automattic/components
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
padding: 0 20px; padding: 0 20px;
} }
.woocommerce-profiler-button-container { .woocommerce-profiler-button-container {
width: 100%; width: 100%;
max-width: 404px; max-width: 404px;
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
padding: 0 20px; padding: 0 20px;
@ -133,7 +133,7 @@
padding-top: 110px; padding-top: 110px;
flex: 1; flex: 1;
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
padding-top: 70px; padding-top: 70px;
} }
@ -148,10 +148,10 @@
background: url(./assets/images/welcome-desktop.svg) no-repeat center background: url(./assets/images/welcome-desktop.svg) no-repeat center
center; center;
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
margin-bottom: 40px; margin-bottom: 40px;
background: url(./assets/images/welcome-mobile.svg) no-repeat background: url(./assets/images/welcome-mobile.svg) no-repeat center
center center; center;
width: 222px; width: 222px;
height: 144px; height: 144px;
} }
@ -167,7 +167,7 @@
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
width: 100%; width: 100%;
margin-top: auto; margin-top: auto;
} }
@ -178,7 +178,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
margin: 16px auto 20px; margin: 16px auto 20px;
} }
@ -229,10 +229,8 @@
#woocommerce-select-control__listbox-0 { #woocommerce-select-control__listbox-0 {
top: 40px !important; top: 40px !important;
} }
} }
.woocommerce-profiler-business-location { .woocommerce-profiler-business-location {
display: flex; display: flex;
flex-direction: column; 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 background-color: #f6f7f7 !important; // Gray-0
color: $gray-900; color: $gray-900;
} }
@ -338,7 +340,7 @@
} }
.woocommerce-profiler-heading__subtitle { .woocommerce-profiler-heading__subtitle {
margin: 12px 0 48px 0 !important; margin: 12px 0 48px 0 !important;
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
margin-top: 12px !important; margin-top: 12px !important;
} }
} }
@ -384,12 +386,12 @@
} }
.woocommerce-profiler-plugins-continue-button-container { .woocommerce-profiler-plugins-continue-button-container {
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
width: 100%; width: 100%;
} }
.woocommerce-profiler-plugins-continue-button { .woocommerce-profiler-plugins-continue-button {
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
width: 100%; width: 100%;
} }
} }
@ -419,7 +421,7 @@
width: 100%; width: 100%;
&:has(.woocommerce-profiler-geolocation-notice) { &:has(.woocommerce-profiler-geolocation-notice) {
@include breakpoint( "<782px" ) { @include breakpoint("<782px") {
margin-bottom: 82px; margin-bottom: 82px;
} }
} }
@ -513,6 +515,33 @@
margin: 0; 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 { .woocommerce-profiler-select-control__country-spacer {
margin: auto auto 12px auto; margin: auto auto 12px auto;
} }

View File

@ -0,0 +1,4 @@
Significance: patch
Type: enhancement
Handle core profiler get countries error