✨ Integrate Redux store to onboarding naviagtion

modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js

@@ -3,27 +3,35 @@ import { __ } from '@wordpress/i18n';
 
 const Navigation = ( {
 	setStep,
+	setCompleted,
 	currentStep,
 	stepperOrder,
 	canProceeedCallback = () => true,
 } ) => {
-	const setNextStep = ( nextStep ) => {
-		let newStep = currentStep + nextStep;
-		if ( newStep > stepperOrder.length - 1 ) {
-			newStep = currentStep;
+	const navigateBy = ( stepDirection ) => {
+		let newStep = currentStep + stepDirection;
+
+		if ( isNaN( newStep ) || newStep < 0 ) {
+			console.warn( 'Invalid next step:', newStep );
+			newStep = 0;
+		}
+
+		if ( newStep >= stepperOrder.length ) {
+			setCompleted( true );
+		} else {
+			setStep( newStep );
 		}
-		setStep( newStep );
 	};
 
 	return (
 		<div className="ppcp-r-navigation">
-			<Button variant="tertiary" onClick={ () => setNextStep( -1 ) }>
+			<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
 				{ __( 'Back', 'woocommerce-paypal-payments' ) }
 			</Button>
 			<Button
 				variant="primary"
 				disabled={ ! canProceeedCallback() }
-				onClick={ () => setNextStep( 1 ) }
+				onClick={ () => navigateBy( 1 ) }
 			>
 				{ __( 'Next', 'woocommerce-paypal-payments' ) }
 			</Button>

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

@@ -4,21 +4,25 @@ import Container, {
 import StepWelcome from './StepWelcome.js';
 import StepBusiness from './StepBusiness.js';
 import StepProducts from './StepProducts.js';
-import { useState } from '@wordpress/element';
+import { useOnboardingStep } from '../../../data';
 
 const Onboarding = () => {
-	const [ step, setStep ] = useState( 0 );
+	const { step, setStep, setCompleted } = useOnboardingStep();
 
 	return (
 		<Container page={ PAGE_ONBOARDING }>
 			<div className="ppcp-r-card">
-				<Stepper currentStep={ step } setStep={ setStep } />
+				<Stepper
+					currentStep={ step }
+					setStep={ setStep }
+					setCompleted={ setCompleted }
+				/>
 			</div>
 		</Container>
 	);
 };
 
-const Stepper = ( { currentStep, setStep } ) => {
+const Stepper = ( { currentStep, setStep, setCompleted } ) => {
 	const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ];
 
 	const renderSteps = () => {
@@ -31,6 +35,7 @@ const Stepper = ( { currentStep, setStep } ) => {
 					<Step
 						setStep={ setStep }
 						currentStep={ currentStep }
+						setCompleted={ setCompleted }
 						stepperOrder={ stepperOrder }
 					/>
 				</div>

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

@@ -6,7 +6,12 @@ import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
 import { useState } from '@wordpress/element';
 import Navigation from '../../ReusableComponents/Navigation';
 
-const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
+const StepBusiness = ( {
+	setStep,
+	currentStep,
+	stepperOrder,
+	setCompleted,
+} ) => {
 	const [ businessCategory, setBusinessCategory ] = useState( null );
 	const BUSINESS_RADIO_GROUP_NAME = 'business';
 	const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller';
@@ -91,6 +96,7 @@ const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
 					setStep={ setStep }
 					currentStep={ currentStep }
 					stepperOrder={ stepperOrder }
+					setCompleted={ setCompleted }
 					canProceeedCallback={ () => businessCategory !== null }
 				/>
 			</div>

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

@@ -5,7 +5,12 @@ import SelectBox from '../../ReusableComponents/SelectBox';
 import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
 import { useState } from '@wordpress/element';
 
-const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
+const StepProducts = ( {
+	setStep,
+	currentStep,
+	stepperOrder,
+	setCompleted,
+} ) => {
 	const [ products, setProducts ] = useState( [] );
 	const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
 	const VIRTUAL_CHECKBOX_VALUE = 'virtual';
@@ -118,6 +123,7 @@ const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
 					setStep={ setStep }
 					currentStep={ currentStep }
 					stepperOrder={ stepperOrder }
+					setCompleted={ setCompleted }
 					canProceeedCallback={ () => products.length > 0 }
 				/>
 			</div>