♻️ Consolidate navigation logic

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js

@@ -4,7 +4,13 @@ import { __ } from '@wordpress/i18n';
 import { OnboardingHooks } from '../../../../data';
 import data from '../../../../utils/data';
 
-const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
+const Navigation = ( {
+	setStep,
+	setCompleted,
+	currentStep,
+	stepperOrder,
+	title,
+} ) => {
 	const isLastStep = () => currentStep + 1 === stepperOrder.length;
 	const isFistStep = () => currentStep === 0;
 	const navigateBy = ( stepDirection ) => {
@@ -25,41 +31,15 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
 	const { products } = OnboardingHooks.useProducts();
 	const { isCasualSeller } = OnboardingHooks.useBusiness();
 
-	let navigationTitle = '';
 	let disabled = false;
 
 	switch ( currentStep ) {
 		case 1:
-			navigationTitle = __(
-				'Set up store type',
-				'woocommerce-paypal-payments'
-			);
 			disabled = isCasualSeller === null;
 			break;
 		case 2:
-			navigationTitle = __(
-				'Select product types',
-				'woocommerce-paypal-payments'
-			);
 			disabled = products.length < 1;
 			break;
-		case 3:
-			navigationTitle = __(
-				'Choose checkout options',
-				'woocommerce-paypal-payments'
-			);
-			break;
-		case 4:
-			navigationTitle = __(
-				'Connect your PayPal account',
-				'woocommerce-paypal-payments'
-			);
-			break;
-		default:
-			navigationTitle = __(
-				'PayPal Payments',
-				'woocommerce-paypal-payments'
-			);
 	}
 
 	return (
@@ -72,7 +52,7 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
 							variant="tertiary"
 							onClick={ () => navigateBy( -1 ) }
 						>
-							{ navigationTitle }
+							{ title }
 						</Button>
 					) : (
 						<a
@@ -83,7 +63,7 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
 								'woocommerce-paypal-payments'
 							) }
 						>
-							{ navigationTitle }
+							{ title }
 						</a>
 					) }
 				</div>

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js

@@ -8,7 +8,7 @@ const Onboarding = () => {
 	const { step, setStep, setCompleted, flags } = OnboardingHooks.useSteps();
 
 	const Steps = getSteps( flags );
-	const CurrentStepComponent = getCurrentStep( step, Steps );
+	const { StepComponent, title } = getCurrentStep( step, Steps );
 
 	return (
 		<>
@@ -17,10 +17,11 @@ const Onboarding = () => {
 				currentStep={ step }
 				setCompleted={ setCompleted }
 				stepperOrder={ Steps }
+				title={ title }
 			/>
 			<Container page="onboarding">
 				<div className="ppcp-r-card">
-					<CurrentStepComponent
+					<StepComponent
 						setStep={ setStep }
 						currentStep={ step }
 						setCompleted={ setCompleted }

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js

@@ -1,25 +1,64 @@
+import { __ } from '@wordpress/i18n';
+
 import StepWelcome from './StepWelcome';
 import StepBusiness from './StepBusiness';
 import StepProducts from './StepProducts';
 import StepPaymentMethods from './StepPaymentMethods';
 import StepCompleteSetup from './StepCompleteSetup';
 
-export const getSteps = ( flags ) => {
-	const allSteps = [
-		StepWelcome,
-		StepBusiness,
-		StepProducts,
-		StepPaymentMethods,
-		StepCompleteSetup,
-	];
+/**
+ * List of all onboarding screens that are available.
+ *
+ * The screens are displayed in the order in which they appear in this array
+ *
+ * @type {[{id, StepComponent, title}]}
+ */
+const ALL_STEPS = [
+	{
+		id: 'welcome',
+		title: __( 'PayPal Payments', 'woocommerce-paypal-payments' ),
+		StepComponent: StepWelcome,
+	},
+	{
+		id: 'business',
+		title: __( 'Set up store type', 'woocommerce-paypal-payments' ),
+		StepComponent: StepBusiness,
+	},
+	{
+		id: 'products',
+		title: __( 'Select product types', 'woocommerce-paypal-payments' ),
+		StepComponent: StepProducts,
+	},
+	{
+		id: 'methods',
+		title: __( 'Choose checkout options', 'woocommerce-paypal-payments' ),
+		StepComponent: StepPaymentMethods,
+	},
+	{
+		id: 'complete',
+		title: __(
+			'Connect your PayPal account',
+			'woocommerce-paypal-payments'
+		),
+		StepComponent: StepCompleteSetup,
+	},
+];
 
+export const getSteps = ( flags ) => {
 	if ( ! flags.canUseCasualSelling ) {
-		return allSteps.filter( ( step ) => step !== StepBusiness );
+		return ALL_STEPS.filter( ( step ) => 'business' !== step.id );
 	}
 
-	return allSteps;
+	return ALL_STEPS;
 };
 
+/**
+ * Returns the screen-details of the current step, based on the numeric step-index.
+ *
+ * @param {number} requestedStep Index of the screen to display.
+ * @param {[]}     steps         List of all available steps (see `getSteps()`)
+ * @return {{id, StepComponent, title}} The requested screen details, or the first welcome screen.
+ */
 export const getCurrentStep = ( requestedStep, steps ) => {
 	const isValidStep = ( step ) =>
 		typeof step === 'number' &&