From c3a81434c4959c5b5843b4954d5add221da82e08 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 20 Feb 2025 18:32:57 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Rename=20selector=20to=20p?=
 =?UTF-8?q?repare=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/data/onboarding/hooks.js     | 35 +++++++++++++++----
 .../resources/js/data/onboarding/selectors.js |  5 +--
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
index 7c9ba1ee9..a12ecd189 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
@@ -12,6 +12,31 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { createHooksForStore } from '../utils';
 import { PRODUCT_TYPES } from './configuration';
 import { STORE_NAME } from './constants';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Single source of truth for access Redux details.
+ *
+ * This hook returns a stable API to access actions, selectors and special hooks to generate
+ * getter- and setters for transient or persistent properties.
+ *
+ * @return {{select, dispatch, useTransient, usePersistent}} Store data API.
+ */
+const useStoreData = () => {
+	const select = useSelect( ( selectors ) => selectors( STORE_NAME ), [] );
+	const dispatch = useDispatch( STORE_NAME );
+	const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
+
+	return useMemo(
+		() => ( {
+			select,
+			dispatch,
+			useTransient,
+			usePersistent,
+		} ),
+		[ select, dispatch, useTransient, usePersistent ]
+	);
+};
 
 const useHooks = () => {
 	const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
@@ -19,10 +44,6 @@ const useHooks = () => {
 
 	// Read-only flags and derived state.
 	const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
-	const determineProducts = useSelect(
-		( select ) => select( STORE_NAME ).determineProducts(),
-		[]
-	);
 
 	// Transient accessors.
 	const [ isReady ] = useTransient( 'isReady' );
@@ -80,7 +101,6 @@ const useHooks = () => {
 			);
 			return savePersistent( setProducts, validProducts );
 		},
-		determineProducts,
 	};
 };
 
@@ -141,9 +161,10 @@ export const useNavigationState = () => {
 };
 
 export const useDetermineProducts = () => {
-	const { determineProducts } = useHooks();
+	const { select } = useStoreData();
+	const { determineProductsAndCaps } = select;
 
-	return determineProducts;
+	return determineProductsAndCaps;
 };
 
 export const useFlags = () => {
diff --git a/modules/ppcp-settings/resources/js/data/onboarding/selectors.js b/modules/ppcp-settings/resources/js/data/onboarding/selectors.js
index 9f3a7f35d..e85d386e9 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/selectors.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/selectors.js
@@ -25,7 +25,8 @@ export const flags = ( state ) => {
 };
 
 /**
- * Returns the products that we use for the production login link in the last onboarding step.
+ * Returns details about products and capabilities to use for the production login link in
+ * the last onboarding step.
  *
  * This selector does not return state-values, but uses the state to derive the products-array
  * that should be returned.
@@ -33,7 +34,7 @@ export const flags = ( state ) => {
  * @param {{}} state
  * @return {string[]} The ISU products, based on choices made in the onboarding wizard.
  */
-export const determineProducts = ( state ) => {
+export const determineProductsAndCaps = ( state ) => {
 	const derivedProducts = [];
 
 	const { isCasualSeller, areOptionalPaymentMethodsEnabled } =