Update Woo Express site provisioning loading messages (#77051)

* Update loading messages * Fix letter spacing, bold initial words, fix responsive view
Automattic · May 19, 2023 · 807306d · 807306d
1 parent ab82e52
commit 807306d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss
@@ -395,14 +395,24 @@ button {
 	}
 	.loading-bar {
 		background-color: var(--studio-woocommerce-purple-5);
-		width: 520px;
+		width: 590px;
 		max-width: 100%;
 		margin-left: auto;
 		margin-right: auto;
+
+		@media screen and (max-width: 640px) {
+			width: 100%;
+		}
+	}
+	.processing-step {
+		width: 100%;
+		max-width: 640px;
+		box-sizing: border-box;
 	}
 	p.processing-step__subtitle {
 		font-family: "SF Pro Text", $sans;
 		font-weight: 400;
+		letter-spacing: initial;
 
 		.woo-inline-purple-heart {
 			width: 18px;

diff --git a/...t/landing/stepper/declarative-flow/internals/steps-repository/assign-trial-plan/index.tsx b/...t/landing/stepper/declarative-flow/internals/steps-repository/assign-trial-plan/index.tsx
@@ -63,8 +63,13 @@ const AssignTrialPlanStep: Step = function AssignTrialPlanStep( { navigation, da
 	};
 
 	const getSubTitle = () => {
-		return __(
-			'#FunWooFact: Did you know that Woo powers almost 4 million stores worldwide? You’re in good company.'
+		return (
+			<>
+				<strong>{ __( '#FunWooFact: ' ) }</strong>
+				{ __(
+					'Did you know that Woo powers almost 4 million stores worldwide? You’re in good company.'
+				) }
+			</>
 		);
 	};
 

diff --git a/...flow/internals/steps-repository/processing-step/hooks/use-processing-loading-messages.tsx b/...flow/internals/steps-repository/processing-step/hooks/use-processing-loading-messages.tsx
@@ -35,10 +35,8 @@ export function useProcessingLoadingMessages( flow?: string | null ): LoadingMes
 						title: __( "Woo! We're creating your store" ),
 						subtitle: (
 							<>
-								<strong>{ __( '#FunWooFact: ' ) }</strong>
-								{ __(
-									"Did you know that Woo powers almost 4 million stores worldwide? You're in good company."
-								) }
+								<strong>{ __( 'Hang tight! ' ) }</strong>
+								{ __( 'Your free trial is currently being set up and may take a few minutes.' ) }
 							</>
 						),
 						duration: 15000,
@@ -56,7 +54,19 @@ export function useProcessingLoadingMessages( flow?: string | null ): LoadingMes
 								) }
 							</>
 						),
-						duration: 15000,
+						duration: 8000,
+					},
+					{
+						title: __( 'Organizing the stock room' ),
+						subtitle: (
+							<>
+								<strong>{ __( '#FunWooFact: ' ) }</strong>
+								{ __(
+									"Did you know that Woo powers almost 4 million stores worldwide? You're in good company."
+								) }
+							</>
+						),
+						duration: 6000,
 					},
 					{
 						title: __( 'Organizing the stock room' ),
@@ -66,11 +76,8 @@ export function useProcessingLoadingMessages( flow?: string | null ): LoadingMes
 								{ __( 'Are you Team Cat or Team Dog? The Woo team is split 50/50!' ) }
 							</>
 						),
-						duration: 15000,
+						duration: 6000,
 					},
-				];
-			default:
-				return [
 					{
 						title: __( 'Applying the finishing touches' ),
 						subtitle: (
@@ -81,7 +88,7 @@ export function useProcessingLoadingMessages( flow?: string | null ): LoadingMes
 								) }
 							</>
 						),
-						duration: 10000,
+						duration: 8000,
 					},
 					{
 						title: __( 'Turning on the lights' ),
@@ -93,10 +100,10 @@ export function useProcessingLoadingMessages( flow?: string | null ): LoadingMes
 								) }
 							</>
 						),
-						duration: 15000,
+						duration: 8000,
 					},
 					{
-						title: __( 'Opening the doors' ),
+						title: __( 'Turning on the lights' ),
 						subtitle: (
 							<>
 								<strong>{ __( '#FunWooFact: ' ) }</strong>
@@ -112,6 +119,20 @@ export function useProcessingLoadingMessages( flow?: string | null ): LoadingMes
 						duration: 150000,
 					},
 				];
+			default:
+				return [
+					{
+						title: __( 'Opening the doors' ),
+						subtitle: (
+							<>
+								<strong>{ __( "We're almost there! " ) }</strong>
+								{ __( 'Your free trial will be ready in just a moment.' ) }
+							</>
+						),
+						// Set a very long duration to make sure it shows until the step is completed
+						duration: 150000,
+					},
+				];
 		}
 	}