woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

♻️ Improve TabPaymentMethods structure

Browse source
This commit is contained in:
Philipp Stracker 2025-01-27 22:28:27 +01:00
parent 26bd9f2d05
commit 41afaafa5f
No known key found for this signature in database
1 changed files with 62 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

125
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js
View file

@ -1,4 +1,5 @@
import { __ } from '@wordpress/i18n';
import { useCallback } from '@wordpress/element';
import SettingsCard from '../../../ReusableComponents/SettingsCard';
import { PaymentMethodsBlock } from '../../../ReusableComponents/SettingsBlocks';
@ -9,20 +10,44 @@ import Modal from '../Components/Payment/Modal';
const TabPaymentMethods = () => {
const methods = PaymentHooks.usePaymentMethods();
const { setPersistent, changePaymentSettings } = PaymentHooks.useStore();
const { activeModal, setActiveModal } = useActiveModal();
const getActiveMethod = () => {
if ( ! activeModal ) {
return null;
}
return methods.all.find( ( method ) => method.id === activeModal );
};
const handleSave = useCallback(
( methodId, settings ) => {
changePaymentSettings( methodId, {
title: settings.checkoutPageTitle,
description: settings.checkoutPageDescription,
} );
const persistentSettings = [
'paypalShowLogo',
'threeDSecure',
'fastlaneCardholderName',
'fastlaneDisplayWatermark',
];
persistentSettings.forEach( ( setting ) => {
if ( setting in settings ) {
// TODO: Create a dedicated setter for those values.
setPersistent( setting, settings[ setting ] );
}
} );
setActiveModal( null );
},
[ changePaymentSettings, setActiveModal, setPersistent ]
);
return (
<div className="ppcp-r-payment-methods">
<SettingsCard
<PaymentMethodCard
id="ppcp-paypal-checkout-card"
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
description={ __(
@ -30,14 +55,10 @@ const TabPaymentMethods = () => {
'woocommerce-paypal-payments'
) }
icon="icon-checkout-standard.svg"
contentContainer={ false }
>
<PaymentMethodsBlock
paymentMethods={ methods.paypal }
onTriggerModal={ setActiveModal }
/>
</SettingsCard>
<SettingsCard
methods={ methods.paypal }
onTriggerModal={ setActiveModal }
/>
<PaymentMethodCard
id="ppcp-card-payments-card"
title={ __(
'Online Card Payments',
@ -48,14 +69,10 @@ const TabPaymentMethods = () => {
'woocommerce-paypal-payments'
) }
icon="icon-checkout-online-methods.svg"
contentContainer={ false }
>
<PaymentMethodsBlock
paymentMethods={ methods.cardPayment }
onTriggerModal={ setActiveModal }
/>
</SettingsCard>
<SettingsCard
methods={ methods.cardPayment }
onTriggerModal={ setActiveModal }
/>
<PaymentMethodCard
id="ppcp-alternative-payments-card"
title={ __(
'Alternative Payment Methods',
@ -66,55 +83,15 @@ const TabPaymentMethods = () => {
'woocommerce-paypal-payments'
) }
icon="icon-checkout-alternative-methods.svg"
contentContainer={ false }
>
<PaymentMethodsBlock
paymentMethods={ methods.apm }
onTriggerModal={ setActiveModal }
/>
</SettingsCard>
methods={ methods.apm }
onTriggerModal={ setActiveModal }
/>
{ activeModal && (
<Modal
method={ getActiveMethod() }
setModalIsVisible={ () => setActiveModal( null ) }
onSave={ ( methodId, settings ) => {
changePaymentSettings( methodId, {
title: settings.checkoutPageTitle,
description: settings.checkoutPageDescription,
} );
if ( 'paypalShowLogo' in settings ) {
// TODO: Create a dedicated setter for this value.
setPersistent(
'paypalShowLogo',
settings.paypalShowLogo
);
}
if ( 'threeDSecure' in settings ) {
// TODO: Create a dedicated setter for this value.
setPersistent(
'threeDSecure',
settings.threeDSecure
);
}
if ( 'fastlaneCardholderName' in settings ) {
// TODO: Create a dedicated setter for this value.
setPersistent(
'fastlaneCardholderName',
settings.fastlaneCardholderName
);
}
if ( 'fastlaneDisplayWatermark' in settings ) {
// TODO: Create a dedicated setter for this value.
setPersistent(
'fastlaneDisplayWatermark',
settings.fastlaneDisplayWatermark
);
}
setActiveModal( null );
} }
onSave={ handleSave }
/>
) }
</div>
@ -122,3 +99,25 @@ const TabPaymentMethods = () => {
};
export default TabPaymentMethods;
const PaymentMethodCard = ( {
id,
title,
description,
icon,
methods,
onTriggerModal,
} ) => (
<SettingsCard
id={ id }
title={ title }
description={ description }
icon={ icon }
contentContainer={ false }
>
<PaymentMethodsBlock
paymentMethods={ methods }
onTriggerModal={ onTriggerModal }
/>
</SettingsCard>
);