From 426230bee9033c2f9ce65d95bdd1ed00ca276740 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 31 Oct 2024 15:03:25 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Add=20conditional=20rou?=
 =?UTF-8?q?ting=20to=20onboarding=20steps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/Components/Screens/Onboarding/Onboarding.js | 11 +++++------
 .../Screens/Onboarding/availableSteps.js           | 14 ++++++++++++++
 .../resources/js/data/onboarding/hooks.js          | 11 +++++++++--
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js

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 712b17f86..212776a0a 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
@@ -1,11 +1,9 @@
 import Container from '../../ReusableComponents/Container';
-import StepWelcome from './StepWelcome';
-import StepBusiness from './StepBusiness';
-import StepProducts from './StepProducts';
 import { useOnboardingStep } from '../../../data';
+import { getSteps } from './availableSteps';
 
 const Onboarding = () => {
-	const { step, setStep, setCompleted } = useOnboardingStep();
+	const { step, setStep, setCompleted, flags } = useOnboardingStep();
 
 	return (
 		<Container page="onboarding">
@@ -14,14 +12,15 @@ const Onboarding = () => {
 					currentStep={ step }
 					setStep={ setStep }
 					setCompleted={ setCompleted }
+					flags={ flags }
 				/>
 			</div>
 		</Container>
 	);
 };
 
-const OnboardingStep = ( { currentStep, setStep, setCompleted } ) => {
-	const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ];
+const OnboardingStep = ( { currentStep, setStep, setCompleted, flags } ) => {
+	const stepperOrder = getSteps( flags );
 
 	const isValidStep = ( step ) =>
 		typeof step === 'number' &&
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js
new file mode 100644
index 000000000..dbb25f57e
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js
@@ -0,0 +1,14 @@
+import StepWelcome from './StepWelcome';
+import StepBusiness from './StepBusiness';
+import StepProducts from './StepProducts';
+
+export const getSteps = ( flags ) => {
+	console.log( 'Step Flags:', flags );
+	const allSteps = [ StepWelcome, StepBusiness, StepProducts ];
+
+	if ( ! flags.canUseCasualSelling ) {
+		return allSteps.filter( ( step ) => step !== StepBusiness );
+	}
+
+	return allSteps;
+};
diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
index 9481e047d..e21cc5016 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
@@ -1,5 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PRODUCT_TYPES, STORE_NAME } from '../constants';
+import { getFlags } from './selectors';
 
 const useOnboardingDetails = () => {
 	const {
@@ -23,6 +24,11 @@ const useOnboardingDetails = () => {
 		return select( STORE_NAME ).getTransientData().isReady;
 	} );
 
+	// Read-only flags.
+	const flags = useSelect( ( select ) => {
+		return select( STORE_NAME ).getFlags();
+	} );
+
 	// Persistent accessors.
 	const step = useSelect( ( select ) => {
 		return select( STORE_NAME ).getPersistentData().step || 0;
@@ -91,6 +97,7 @@ const useOnboardingDetails = () => {
 			setDetailAndPersist( setIsCasualSeller, value ),
 		products,
 		toggleProduct,
+		flags,
 	};
 };
 
@@ -133,8 +140,8 @@ export const useOnboardingStepProducts = () => {
 };
 
 export const useOnboardingStep = () => {
-	const { isReady, step, setStep, completed, setCompleted } =
+	const { isReady, step, setStep, completed, setCompleted, flags } =
 		useOnboardingDetails();
 
-	return { isReady, step, setStep, completed, setCompleted };
+	return { isReady, step, setStep, completed, setCompleted, flags };
 };