woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 13:44:42 +08:00
Code Issues Projects Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

8
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js
View file

@ -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.',

9
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/hooks/usePaymentConfig.js
View file

@ -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 ] );
};