♻️ Move icon-selection to the payment-config hook

Reason: Business logic (icon choice) should be kept in a single place, instead of letting the rendering component decide which icons to use.
This commit is contained in:
Philipp Stracker 2025-03-24 14:52:31 +01:00
parent 822086e64c
commit 6021ef6db2
No known key found for this signature in database
2 changed files with 7 additions and 10 deletions

View file

@ -12,10 +12,10 @@ import AdvancedOptionsForm from '../Components/AdvancedOptionsForm';
import { usePaymentConfig } from '../hooks/usePaymentConfig'; import { usePaymentConfig } from '../hooks/usePaymentConfig';
const StepWelcome = ( { setStep, currentStep } ) => { const StepWelcome = ( { setStep, currentStep } ) => {
const { storeCountry } = CommonHooks.useWooSettings(); const { storeCountry, isBranded } = CommonHooks.useWooSettings();
const { canUseCardPayments, canUseFastlane } = OnboardingHooks.useFlags(); const { canUseCardPayments, canUseFastlane } = OnboardingHooks.useFlags();
const { acdcIcons, bcdcIcons } = usePaymentConfig( const { icons } = usePaymentConfig(
storeCountry, storeCountry,
canUseCardPayments, canUseCardPayments,
canUseFastlane canUseFastlane
@ -42,9 +42,7 @@ const StepWelcome = ( { setStep, currentStep } ) => {
/> />
<div className="ppcp-r-inner-container"> <div className="ppcp-r-inner-container">
<WelcomeFeatures /> <WelcomeFeatures />
<PaymentMethodIcons <PaymentMethodIcons icons={ icons } />
icons={ canUseCardPayments ? acdcIcons : bcdcIcons }
/>
<p className="ppcp-r-button__description"> <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.', '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.',

View file

@ -131,14 +131,14 @@ const filterMethods = ( methods, conditions ) => {
); );
}; };
export const usePaymentConfig = ( country, useAcdc, isFastlane ) => { export const usePaymentConfig = ( country, canUseCardPayments, isFastlane ) => {
return useMemo( () => { return useMemo( () => {
const countryConfig = countrySpecificConfigs[ country ] || {}; const countryConfig = countrySpecificConfigs[ country ] || {};
const config = { ...defaultConfig, ...countryConfig }; const config = { ...defaultConfig, ...countryConfig };
const learnMoreConfig = learnMoreLinks[ country ] || {}; const learnMoreConfig = learnMoreLinks[ country ] || {};
// Determine the "right side" items: Either BCDC or ACDC items. // Determine the "right side" items: Either BCDC or ACDC items.
const optionalMethods = useAcdc const optionalMethods = canUseCardPayments
? config.extendedMethods ? config.extendedMethods
: config.basicMethods; : config.basicMethods;
@ -151,8 +151,7 @@ export const usePaymentConfig = ( country, useAcdc, isFastlane ) => {
...config, ...config,
optionalMethods: availableOptionalMethods, optionalMethods: availableOptionalMethods,
learnMoreConfig, learnMoreConfig,
acdcIcons: config.acdcIcons, icons: canUseCardPayments ? config.acdcIcons : config.bcdcIcons,
bcdcIcons: config.bcdcIcons,
}; };
}, [ country, useAcdc, isFastlane ] ); }, [ country, canUseCardPayments, isFastlane ] );
}; };