♻️ Greatly improve Navigation component

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

@@ -4,108 +4,60 @@ import { __ } from '@wordpress/i18n';
 
 import { OnboardingHooks } from '../../../../data';
 
-const Navigation = ( {
+const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
-	setStep,
+	const { title, isFirst, percentage, showNext, canProceed } = stepDetails;
-	setCompleted,
-	currentStep,
-	stepperOrder,
-	title,
-} ) => {
-	const isLastStep = () => currentStep + 1 === stepperOrder.length;
-	const isFistStep = () => currentStep === 0;
-	const navigateBy = ( stepDirection ) => {
-		let newStep = currentStep + stepDirection;
 
-		if ( isNaN( newStep ) || newStep < 0 ) {
+	const state = OnboardingHooks.useNavigationState();
-			console.warn( 'Invalid next step:', newStep );
+	const isDisabled = ! canProceed( state );
-			newStep = 0;
-		}
-
-		if ( newStep >= stepperOrder.length ) {
-			setCompleted( true );
-		} else {
-			setStep( newStep );
-		}
-	};
-
-	const { products } = OnboardingHooks.useProducts();
-	const { isCasualSeller } = OnboardingHooks.useBusiness();
-
-	let disabled = false;
-
-	switch ( currentStep ) {
-		case 1:
-			disabled = isCasualSeller === null;
-			break;
-		case 2:
-			disabled = products.length < 1;
-			break;
-	}
 
 	return (
 		<div className="ppcp-r-navigation-container">
 			<div className="ppcp-r-navigation">
 				<div className="ppcp-r-navigation--left">
 					<Icon icon={ chevronLeft } />
-					{ ! isFistStep() ? (
 					<Button
 						variant="tertiary"
-							onClick={ () => navigateBy( -1 ) }
+						onClick={ isFirst ? onExit : onPrev }
 					>
 						{ title }
 					</Button>
-					) : (
-						<a
-							className="ppcp-r-navigation--left__link"
-							href={ global.ppcpSettings.wcPaymentsTabUrl }
-							aria-label={ __(
-								'Return to payments',
-								'woocommerce-paypal-payments'
-							) }
-						>
-							{ title }
-						</a>
-					) }
 				</div>
-				{ ! isFistStep() && (
+				{ ! isFirst &&
-					<div className="ppcp-r-navigation--right">
+					NextButton( { showNext, isDisabled, onNext, onExit } ) }
-						<a
+				<ProgressBar percent={ percentage } />
-							href={ global.ppcpSettings.wcPaymentsTabUrl }
-							aria-label={ __(
-								'Return to payments',
-								'woocommerce-paypal-payments'
-							) }
-						>
-							{ __(
-								'Save and exit',
-								'woocommerce-paypal-payments'
-							) }
-						</a>
-						{ ! isLastStep() && (
-							<Button
-								variant="primary"
-								disabled={ disabled }
-								onClick={ () => navigateBy( 1 ) }
-							>
-								{ __(
-									'Continue',
-									'woocommerce-paypal-payments'
-								) }
-							</Button>
-						) }
-					</div>
-				) }
-				<div
-					className="ppcp-r-navigation--progress-bar"
-					style={ {
-						width: `${
-							( currentStep / ( stepperOrder.length - 1 ) ) * 90
-						}%`,
-					} }
-				></div>
 			</div>
 		</div>
 	);
 };
 
+const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => {
+	return (
+		<div className="ppcp-r-navigation--right">
+			<Button onClick={ onExit }>
+				{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
+			</Button>
+			{ showNext && (
+				<Button
+					variant="primary"
+					disabled={ isDisabled }
+					onClick={ onNext }
+				>
+					{ __( 'Continue', 'woocommerce-paypal-payments' ) }
+				</Button>
+			) }
+		</div>
+	);
+};
+
+const ProgressBar = ( { percent } ) => {
+	percent = Math.min( Math.max( percent, 0 ), 100 );
+
+	return (
+		<div
+			className="ppcp-r-navigation--progress-bar"
+			style={ { width: `${ percent * 0.9 }%` } }
+		/>
+	);
+};
+
 export default Navigation;

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

@@ -8,20 +8,26 @@ const Onboarding = () => {
 	const { step, setStep, setCompleted, flags } = OnboardingHooks.useSteps();
 
 	const Steps = getSteps( flags );
-	const { StepComponent, title } = getCurrentStep( step, Steps );
+	const currentStep = getCurrentStep( step, Steps );
+
+	const handleNext = () => setStep( currentStep.nextStep );
+	const handlePrev = () => setStep( currentStep.prevStep );
+	const handleExit = () => {
+		window.location.href = window.ppcpSettings.wcPaymentsTabUrl;
+	};
 
 	return (
 		<>
 			<Navigation
-				setStep={ setStep }
+				stepDetails={ currentStep }
-				currentStep={ step }
+				onNext={ handleNext }
-				setCompleted={ setCompleted }
+				onPrev={ handlePrev }
-				stepperOrder={ Steps }
+				onExit={ handleExit }
-				title={ title }
 			/>
+
 			<Container page="onboarding">
 				<div className="ppcp-r-card">
-					<StepComponent
+					<currentStep.StepComponent
 						setStep={ setStep }
 						currentStep={ step }
 						setCompleted={ setCompleted }

modules/ppcp-settings/resources/js/data/onboarding/hooks.js

@@ -113,3 +113,13 @@ export const useSteps = () => {
 
 	return { flags, isReady, step, setStep, completed, setCompleted };
 };
+
+export const useNavigationState = () => {
+	const products = useProducts();
+	const business = useBusiness();
+
+	return {
+		products,
+		business,
+	};
+};