Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/core-profiler/actions/tracks.tsx
View File

@ -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 ) {

29
plugins/woocommerce-admin/client/core-profiler/events.tsx
View File

@ -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';

26
plugins/woocommerce-admin/client/core-profiler/index.tsx
View File

@ -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: {

46
plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx
View File

@ -330,6 +330,52 @@ export const BusinessInfo = ( {
showAllOnFocus
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 */ }
<div className="woocommerce-profiler-select-control__country-spacer" />
{ geolocationOverruled && ! dismissedGeolocationNotice && (

61
plugins/woocommerce-admin/client/core-profiler/style.scss
View File

@ -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;
}

4
plugins/woocommerce/changelog/48317-update-handle-get-countries-error Normal file
View File

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