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>

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

plugins/woocommerce-admin/client/core-profiler/events.tsx

@@ -42,17 +42,24 @@ export type UserProfileEvent =
 			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 = {
 	type: 'BUSINESS_LOCATION_COMPLETED';

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

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

@@ -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 && (

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
+			background: url(./assets/images/welcome-mobile.svg) no-repeat center
-				center 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;
 		}

plugins/woocommerce/changelog/48317-update-handle-get-countries-error

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