From ef60cca6066c7fe3654569e93aa351eecda3ac2e Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 28 Oct 2024 18:27:12 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Integrate=20Redux=20store=20to=20on?=
 =?UTF-8?q?boarding=20naviagtion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReusableComponents/Navigation.js          | 22 +++++++++++++------
 .../Screens/Onboarding/Onboarding.js          | 13 +++++++----
 .../Screens/Onboarding/StepBusiness.js        |  8 ++++++-
 .../Screens/Onboarding/StepProducts.js        |  8 ++++++-
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
index d4e5fae4b..05950f13d 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
+++ b/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>
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
index 767f1c304..deddb5e6f 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
+++ b/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>
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js
index dda0f39a4..9ac7de1c2 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js
+++ b/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>
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js
index f155dab62..6ceaf0f4d 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js
+++ b/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>