From 838fd6a1a041ad6f958a3ce152324f0515c5fce5 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 14 Feb 2025 17:45:05 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Apply=20new=20hook-pattern?=
 =?UTF-8?q?=20to=20payment=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/data/payment/hooks.js        | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/data/payment/hooks.js b/modules/ppcp-settings/resources/js/data/payment/hooks.js
index 253710580..7cbd81382 100644
--- a/modules/ppcp-settings/resources/js/data/payment/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/payment/hooks.js
@@ -7,21 +7,38 @@
  * @file
  */
 
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 import { STORE_NAME } from './constants';
 import { createHooksForStore } from '../utils';
+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 );
-	const { persist, setPersistent, changePaymentSettings } =
-		useDispatch( STORE_NAME );
-
-	// Read-only flags and derived state.
-	// Nothing here yet.
-
-	// Transient accessors.
-	const [ isReady ] = useTransient( 'isReady' );
+	const { usePersistent } = useStoreData();
 
 	// PayPal checkout.
 	const [ paypal ] = usePersistent( 'ppcp-gateway' );
@@ -58,10 +75,6 @@ const useHooks = () => {
 	);
 
 	return {
-		persist,
-		isReady,
-		setPersistent,
-		changePaymentSettings,
 		paypal,
 		venmo,
 		payLater,
@@ -88,9 +101,16 @@ const useHooks = () => {
 };
 
 export const useStore = () => {
-	const { persist, isReady, setPersistent, changePaymentSettings } =
-		useHooks();
-	return { persist, isReady, setPersistent, changePaymentSettings };
+	const { useTransient, dispatch } = useStoreData();
+	const { persist, setPersistent, changePaymentSettings } = dispatch;
+	const [ isReady ] = useTransient( 'isReady' );
+
+	return {
+		persist,
+		setPersistent,
+		changePaymentSettings,
+		isReady,
+	};
 };
 
 export const usePaymentMethods = () => {