♻️ Consolidate payment-method hooks

woocommerce · Jan 27, 2025 · 7274623 · 7274623
1 parent 9c1803e
commit 7274623
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 73 deletions.
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js
@@ -7,13 +7,7 @@ import { useActiveModal } from '../../../../data/common/hooks';
 import Modal from '../Components/Payment/Modal';
 
 const TabPaymentMethods = () => {
-	const { paymentMethodsPayPalCheckout } =
-		PaymentHooks.usePaymentMethodsPayPalCheckout();
-	const { paymentMethodsOnlineCardPayments } =
-		PaymentHooks.usePaymentMethodsOnlineCardPayments();
-	const { paymentMethodsAlternative } =
-		PaymentHooks.usePaymentMethodsAlternative();
-
+	const methods = PaymentHooks.usePaymentMethods();
 	const { setPersistent, changePaymentSettings } = PaymentHooks.useStore();
 
 	const { activeModal, setActiveModal } = useActiveModal();
@@ -23,13 +17,7 @@ const TabPaymentMethods = () => {
 			return null;
 		}
 
-		const allMethods = [
-			...paymentMethodsPayPalCheckout,
-			...paymentMethodsOnlineCardPayments,
-			...paymentMethodsAlternative,
-		];
-
-		return allMethods.find( ( method ) => method.id === activeModal );
+		return methods.all.find( ( method ) => method.id === activeModal );
 	};
 
 	return (
@@ -45,7 +33,7 @@ const TabPaymentMethods = () => {
 				contentContainer={ false }
 			>
 				<PaymentMethodsBlock
-					paymentMethods={ paymentMethodsPayPalCheckout }
+					paymentMethods={ methods.paypal }
 					onTriggerModal={ setActiveModal }
 				/>
 			</SettingsCard>
@@ -63,7 +51,7 @@ const TabPaymentMethods = () => {
 				contentContainer={ false }
 			>
 				<PaymentMethodsBlock
-					paymentMethods={ paymentMethodsOnlineCardPayments }
+					paymentMethods={ methods.cardPayment }
 					onTriggerModal={ setActiveModal }
 				/>
 			</SettingsCard>
@@ -81,7 +69,7 @@ const TabPaymentMethods = () => {
 				contentContainer={ false }
 			>
 				<PaymentMethodsBlock
-					paymentMethods={ paymentMethodsAlternative }
+					paymentMethods={ methods.apm }
 					onTriggerModal={ setActiveModal }
 				/>
 			</SettingsCard>

diff --git a/modules/ppcp-settings/resources/js/data/payment/hooks.js b/modules/ppcp-settings/resources/js/data/payment/hooks.js
@@ -95,14 +95,19 @@ export const useStore = () => {
 
 export const usePaymentMethods = () => {
 	const {
+		// PayPal Checkout.
 		paypal,
 		venmo,
 		payLater,
 		creditCard,
+
+		// Online card payments.
 		advancedCreditCard,
 		fastlane,
 		applePay,
 		googlePay,
+
+		// Local APMs.
 		bancontact,
 		blik,
 		eps,
@@ -115,6 +120,25 @@ export const usePaymentMethods = () => {
 		oxxo,
 	} = useHooks();
 
+	const payPalCheckout = [ paypal, venmo, payLater, creditCard ];
+	const onlineCardPayments = [
+		advancedCreditCard,
+		fastlane,
+		applePay,
+		googlePay,
+	];
+	const alternative = [
+		bancontact,
+		blik,
+		eps,
+		ideal,
+		mybank,
+		p24,
+		trustly,
+		multibanco,
+		pui,
+		oxxo,
+	];
 	const paymentMethods = [
 		paypal,
 		venmo,
@@ -136,7 +160,12 @@ export const usePaymentMethods = () => {
 		oxxo,
 	];
 
-	return { paymentMethods };
+	return {
+		all: paymentMethods,
+		paypal: payPalCheckout,
+		cardPayment: onlineCardPayments,
+		apm: alternative,
+	};
 };
 
 export const usePaymentMethodsModal = () => {
@@ -154,58 +183,3 @@ export const usePaymentMethodsModal = () => {
 		fastlaneDisplayWatermark,
 	};
 };
-
-export const usePaymentMethodsPayPalCheckout = () => {
-	const { paypal, venmo, payLater, creditCard } = useHooks();
-
-	const paymentMethodsPayPalCheckout = [
-		paypal,
-		venmo,
-		payLater,
-		creditCard,
-	].filter( ( item ) => Object.keys( item ).length !== 0 );
-
-	return { paymentMethodsPayPalCheckout };
-};
-
-export const usePaymentMethodsOnlineCardPayments = () => {
-	const { advancedCreditCard, fastlane, applePay, googlePay } = useHooks();
-	const paymentMethodsOnlineCardPayments = [
-		advancedCreditCard,
-		fastlane,
-		applePay,
-		googlePay,
-	].filter( ( item ) => Object.keys( item ).length !== 0 );
-
-	return { paymentMethodsOnlineCardPayments };
-};
-
-export const usePaymentMethodsAlternative = () => {
-	const {
-		bancontact,
-		blik,
-		eps,
-		ideal,
-		mybank,
-		p24,
-		trustly,
-		multibanco,
-		pui,
-		oxxo,
-	} = useHooks();
-
-	const paymentMethodsAlternative = [
-		bancontact,
-		blik,
-		eps,
-		ideal,
-		mybank,
-		p24,
-		trustly,
-		multibanco,
-		pui,
-		oxxo,
-	].filter( ( item ) => Object.keys( item ).length !== 0 );
-
-	return { paymentMethodsAlternative };
-};