From 6021ef6db2c47bd56f69f2bcf40432294260e66f Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 24 Mar 2025 14:52:31 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Move=20icon-selection=20to?=
 =?UTF-8?q?=20the=20payment-config=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reason: Business logic (icon choice) should be kept in a single place, instead of letting the rendering component decide which icons to use.
---
 .../Components/Screens/Onboarding/Steps/StepWelcome.js   | 8 +++-----
 .../Screens/Onboarding/hooks/usePaymentConfig.js         | 9 ++++-----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js
index c5da38383..3fb800da2 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js
@@ -12,10 +12,10 @@ import AdvancedOptionsForm from '../Components/AdvancedOptionsForm';
 import { usePaymentConfig } from '../hooks/usePaymentConfig';
 
 const StepWelcome = ( { setStep, currentStep } ) => {
-	const { storeCountry } = CommonHooks.useWooSettings();
+	const { storeCountry, isBranded } = CommonHooks.useWooSettings();
 	const { canUseCardPayments, canUseFastlane } = OnboardingHooks.useFlags();
 
-	const { acdcIcons, bcdcIcons } = usePaymentConfig(
+	const { icons } = usePaymentConfig(
 		storeCountry,
 		canUseCardPayments,
 		canUseFastlane
@@ -42,9 +42,7 @@ const StepWelcome = ( { setStep, currentStep } ) => {
 			/>
 			<div className="ppcp-r-inner-container">
 				<WelcomeFeatures />
-				<PaymentMethodIcons
-					icons={ canUseCardPayments ? acdcIcons : bcdcIcons }
-				/>
+				<PaymentMethodIcons icons={ icons } />
 				<p className="ppcp-r-button__description">
 					{ __(
 						'Click the button below to be guided through connecting your existing PayPal account or creating a new one. You will be able to choose the payment options that are right for your store.',
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js
index b4524fd0c..e14b0f21c 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js
@@ -131,14 +131,14 @@ const filterMethods = ( methods, conditions ) => {
 	);
 };
 
-export const usePaymentConfig = ( country, useAcdc, isFastlane ) => {
+export const usePaymentConfig = ( country, canUseCardPayments, isFastlane ) => {
 	return useMemo( () => {
 		const countryConfig = countrySpecificConfigs[ country ] || {};
 		const config = { ...defaultConfig, ...countryConfig };
 		const learnMoreConfig = learnMoreLinks[ country ] || {};
 
 		// Determine the "right side" items: Either BCDC or ACDC items.
-		const optionalMethods = useAcdc
+		const optionalMethods = canUseCardPayments
 			? config.extendedMethods
 			: config.basicMethods;
 
@@ -151,8 +151,7 @@ export const usePaymentConfig = ( country, useAcdc, isFastlane ) => {
 			...config,
 			optionalMethods: availableOptionalMethods,
 			learnMoreConfig,
-			acdcIcons: config.acdcIcons,
-			bcdcIcons: config.bcdcIcons,
+			icons: canUseCardPayments ? config.acdcIcons : config.bcdcIcons,
 		};
-	}, [ country, useAcdc, isFastlane ] );
+	}, [ country, canUseCardPayments, isFastlane ] );
 };