From 30ff337c0695c05d8feeac6f64e5c59f31532246 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 13 Feb 2025 15:22:21 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Reuse=20existing=20gateway?=
 =?UTF-8?q?-IDs=20for=20styling=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Styling/Content/PaymentMethods.js         | 11 +++-------
 .../js/data/styling/configuration.js          | 21 +++++++------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js
index 785d6f08c..9b2d28cfb 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js
@@ -7,16 +7,11 @@ const SectionPaymentMethods = ( { location } ) => {
 	const { paymentMethods, setPaymentMethods, choices } =
 		StylingHooks.usePaymentMethodProps( location );
 
-	const methods = PaymentHooks.usePaymentMethods();
-	const methodIds = [];
-	methods.all.forEach( ( method ) => {
-		if ( method.enabled === true ) {
-			methodIds.push( method.id );
-		}
-	} );
+	const { all: allMethods } = PaymentHooks.usePaymentMethods();
 
 	const filteredChoices = choices.filter( ( choice ) => {
-		return methodIds.includes( choice.paymentMethod );
+		const methodConfig = allMethods.find( ( i ) => i.id === choice.value );
+		return methodConfig?.enabled;
 	} );
 
 	return (
diff --git a/modules/ppcp-settings/resources/js/data/styling/configuration.js b/modules/ppcp-settings/resources/js/data/styling/configuration.js
index f6e3feddb..366ecbd33 100644
--- a/modules/ppcp-settings/resources/js/data/styling/configuration.js
+++ b/modules/ppcp-settings/resources/js/data/styling/configuration.js
@@ -104,33 +104,28 @@ export const STYLING_SHAPES = {
 };
 
 export const STYLING_PAYMENT_METHODS = {
-	paypal: {
-		value: '',
+	'ppcp-gateway': {
+		value: 'ppcp-gateway',
 		label: __( 'PayPal', 'woocommerce-paypal-payments' ),
 		checked: true,
 		disabled: true,
-		paymentMethod: 'ppcp-gateway',
 	},
 	venmo: {
 		value: 'venmo',
 		label: __( 'Venmo', 'woocommerce-paypal-payments' ),
 		isFunding: true,
-		paymentMethod: 'venmo',
 	},
-	paylater: {
-		value: 'paylater',
+	'pay-later': {
+		value: 'pay-later',
 		label: __( 'Pay Later', 'woocommerce-paypal-payments' ),
 		isFunding: true,
-		paymentMethod: 'pay-later',
 	},
-	googlepay: {
-		value: 'googlepay',
+	'ppcp-googlepay': {
+		value: 'ppcp-googlepay',
 		label: __( 'Google Pay', 'woocommerce-paypal-payments' ),
-		paymentMethod: 'ppcp-googlepay',
 	},
-	applepay: {
-		value: 'applepay',
+	'ppcp-applepay': {
+		value: 'ppcp-applepay',
 		label: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
-		paymentMethod: 'ppcp-applepay',
 	},
 };