From 4bcdb445d4f4c1d0fe7ee3fa8ddd69791943c87f Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 20 Nov 2024 16:54:53 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Adjust=20hooks=20to=20new?=
 =?UTF-8?q?=20code,=20rename=20a=20flag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/data/onboarding/hooks.js     | 96 +++++++------------
 .../resources/js/data/onboarding/reducer.js   |  3 +-
 2 files changed, 36 insertions(+), 63 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
index 9e5f1d179..547a1eaa1 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
@@ -3,19 +3,31 @@
  *
  * These encapsulate store interactions, offering a consistent interface.
  * Hooks simplify data access and manipulation for components.
- * Exported hooks must have unique names across all store modules.
  *
  * @file
  */
 
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import { PRODUCT_TYPES, STORE_NAME } from '../constants';
+import { PRODUCT_TYPES } from '../constants';
+import { STORE_NAME } from './constants';
+
+const useTransient = ( key ) =>
+	useSelect(
+		( select ) => select( STORE_NAME ).transientData()?.[ key ],
+		[ key ]
+	);
+
+const usePersistent = ( key ) =>
+	useSelect(
+		( select ) => select( STORE_NAME ).persistentData()?.[ key ],
+		[ key ]
+	);
 
 const useOnboardingDetails = () => {
 	const {
 		persist,
-		setOnboardingStep,
+		setStep,
 		setCompleted,
 		setSandboxMode,
 		setManualConnectionMode,
@@ -25,61 +37,23 @@ const useOnboardingDetails = () => {
 		setProducts,
 	} = useDispatch( STORE_NAME );
 
-	const transientData = ( select ) =>
-		select( STORE_NAME ).onboardingTransientData();
-	const persistentData = ( select ) =>
-		select( STORE_NAME ).onboardingPersistentData();
-
 	// Read-only flags.
-	const flags = useSelect( ( select ) => {
-		return select( STORE_NAME ).onboardingFlags();
-	} );
+	const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
 
 	// Transient accessors.
-	const isSaving = useSelect( ( select ) => {
-		return transientData( select ).isSaving;
-	}, [] );
-
-	const isReady = useSelect( ( select ) => {
-		return transientData( select ).isReady;
-	} );
-
-	const isManualConnectionBusy = useSelect( ( select ) => {
-		return transientData( select ).isManualConnectionBusy;
-	}, [] );
+	const isSaving = useTransient( 'isSaving' );
+	const isReady = useTransient( 'isReady' );
+	const isBusy = useTransient( 'isBusy' );
 
 	// Persistent accessors.
-	const step = useSelect( ( select ) => {
-		return persistentData( select ).step || 0;
-	} );
-
-	const completed = useSelect( ( select ) => {
-		return persistentData( select ).completed;
-	} );
-
-	const clientId = useSelect( ( select ) => {
-		return persistentData( select ).clientId;
-	}, [] );
-
-	const clientSecret = useSelect( ( select ) => {
-		return persistentData( select ).clientSecret;
-	}, [] );
-
-	const isSandboxMode = useSelect( ( select ) => {
-		return persistentData( select ).useSandbox;
-	}, [] );
-
-	const isManualConnectionMode = useSelect( ( select ) => {
-		return persistentData( select ).useManualConnection;
-	}, [] );
-
-	const isCasualSeller = useSelect( ( select ) => {
-		return persistentData( select ).isCasualSeller;
-	}, [] );
-
-	const products = useSelect( ( select ) => {
-		return persistentData( select ).products || [];
-	}, [] );
+	const step = usePersistent( 'step' );
+	const completed = usePersistent( 'completed' );
+	const clientId = usePersistent( 'clientId' );
+	const clientSecret = usePersistent( 'clientSecret' );
+	const isSandboxMode = usePersistent( 'useSandbox' );
+	const isManualConnectionMode = usePersistent( 'useManualConnection' );
+	const isCasualSeller = usePersistent( 'isCasualSeller' );
+	const products = usePersistent( 'products' );
 
 	const toggleProduct = ( list ) => {
 		const validProducts = list.filter( ( item ) =>
@@ -96,9 +70,9 @@ const useOnboardingDetails = () => {
 	return {
 		isSaving,
 		isReady,
-		isManualConnectionBusy,
+		isBusy,
 		step,
-		setStep: ( value ) => setDetailAndPersist( setOnboardingStep, value ),
+		setStep: ( value ) => setDetailAndPersist( setStep, value ),
 		completed,
 		setCompleted: ( state ) => setDetailAndPersist( setCompleted, state ),
 		isSandboxMode,
@@ -121,10 +95,10 @@ const useOnboardingDetails = () => {
 	};
 };
 
-export const useOnboardingStepWelcome = () => {
+export const useConnection = () => {
 	const {
 		isSaving,
-		isManualConnectionBusy,
+		isBusy,
 		isSandboxMode,
 		setSandboxMode,
 		isManualConnectionMode,
@@ -137,7 +111,7 @@ export const useOnboardingStepWelcome = () => {
 
 	return {
 		isSaving,
-		isManualConnectionBusy,
+		isBusy,
 		isSandboxMode,
 		setSandboxMode,
 		isManualConnectionMode,
@@ -149,19 +123,19 @@ export const useOnboardingStepWelcome = () => {
 	};
 };
 
-export const useOnboardingStepBusiness = () => {
+export const useBusiness = () => {
 	const { isCasualSeller, setIsCasualSeller } = useOnboardingDetails();
 
 	return { isCasualSeller, setIsCasualSeller };
 };
 
-export const useOnboardingStepProducts = () => {
+export const useProducts = () => {
 	const { products, toggleProduct } = useOnboardingDetails();
 
 	return { products, toggleProduct };
 };
 
-export const useOnboardingStep = () => {
+export const useSteps = () => {
 	const { isReady, step, setStep, completed, setCompleted, flags } =
 		useOnboardingDetails();
 
diff --git a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js
index 6264c7e83..0ca7dc646 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js
@@ -2,7 +2,6 @@
  * Reducer: Defines store structure and state updates for this module.
  *
  * Manages both transient (temporary) and persistent (saved) state.
- * Each module uses isolated memory objects to prevent conflicts.
  * The initial state must define all properties, as dynamic additions are not supported.
  *
  * @file
@@ -16,7 +15,7 @@ import ACTION_TYPES from './action-types';
 const defaultTransient = {
 	isReady: false,
 	isSaving: false,
-	isManualConnectionBusy: false,
+	isBusy: false,
 
 	// Read only values, provided by the server.
 	flags: {