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

♻️ Migrate ToggleSetting to ControlToggleButton

Browse source
This commit is contained in:
Philipp Stracker 2025-01-22 16:48:49 +01:00
parent 0ca45eef53
commit 8bd29e921f
No known key found for this signature in database
8 changed files with 87 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

19
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ControlToggleButton.js Normal file
View file

@ -0,0 +1,19 @@
import { ToggleControl } from '@wordpress/components';
import { Action, Description } from '../Elements';
const ControlToggleButton = ( { label, description, value, onChange } ) => {
return (
<Action>
<ToggleControl
className="ppcp-r-settings-block__toggle-control"
__nextHasNoMarginBottom={ true }
checked={ value }
onChange={ onChange }
label={ label }
help={ <Description>{ description }</Description> }
/>
</Action>
);
};
export default ControlToggleButton;

27
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
View file

@ -1,27 +0,0 @@
import { ToggleControl } from '@wordpress/components';
import SettingsBlock from '../SettingsBlock';
import { Header, Title, Action, Description } from '../Elements';
const ToggleSettingsBlock = ( { title, description, ...props } ) => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__toggle">
<Action>
<ToggleControl
className="ppcp-r-settings-block__toggle-control"
__nextHasNoMarginBottom={ true }
checked={ props.actionProps?.value }
onChange={ ( newValue ) =>
props.actionProps?.callback(
props.actionProps?.key,
newValue
)
}
/>
</Action>
<Header>
{ title && <Title>{ title }</Title> }
{ description && <Description>{ description }</Description> }
</Header>
</SettingsBlock>
);
export default ToggleSettingsBlock;

2
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
View file

@ -1,10 +1,10 @@
export { default as ButtonSettingsBlock } from './ButtonSettingsBlock';
export { default as SelectSettingsBlock } from './SelectSettingsBlock';
export { default as AccordionSettingsBlock } from './AccordionSettingsBlock';
export { default as ToggleSettingsBlock } from './ToggleSettingsBlock';
export { default as RadioSettingsBlock } from './RadioSettingsBlock';
export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
export { default as ControlStaticValue } from './ControlStaticValue';
export { default as ControlTextInput } from './ControlTextInput';
export { default as ControlToggleButton } from './ControlToggleButton';

4
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js
View file

@ -2,7 +2,7 @@ import { __ } from '@wordpress/i18n';
import {
AccordionSettingsBlock,
RadioSettingsBlock,
ToggleSettingsBlock,
ControlToggleButton,
ControlTextInput,
SelectSettingsBlock,
} from '../../../../ReusableComponents/SettingsBlocks';
@ -66,7 +66,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
} }
/>
<ToggleSettingsBlock
<ControlToggleButton
title={ __(
'Instant payments only',
'woocommerce-paypal-payments'

4
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js
View file

@ -7,7 +7,7 @@ import {
} from '../../../../../ReusableComponents/Elements';
import {
AccordionSettingsBlock,
ToggleSettingsBlock,
ControlToggleButton,
} from '../../../../../ReusableComponents/SettingsBlocks';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
@ -30,7 +30,7 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
value: settings.payNowExperience,
} }
>
<ToggleSettingsBlock
<ControlToggleButton
title={ __( 'Logging', 'woocommerce-paypal-payments' ) }
description={ __(
'Log additional debugging information in the WooCommerce logs that can assist technical staff to determine issues.',

44
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js
View file

@ -1,10 +1,6 @@
import { __ } from '@wordpress/i18n';
import {
Header,
Title,
Description,
} from '../../../../../ReusableComponents/Elements';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { ControlToggleButton } from '../../../../../ReusableComponents/SettingsBlocks';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import { SettingsHooks } from '../../../../../../data';
@ -17,38 +13,26 @@ const OrderIntent = () => {
} = SettingsHooks.useSettings();
return (
<SettingsBlock>
<Header>
<Title>
{ __( 'Order Intent', 'woocommerce-paypal-payments' ) }
</Title>
<Description>
{ __(
<SettingsBlock
title={ __( 'Order Intent', 'woocommerce-paypal-payments' ) }
description={ __(
'Choose between immediate capture or authorization-only, with manual capture in the Order section.',
'woocommerce-paypal-payments'
) }
</Description>
</Header>
<ToggleSettingsBlock
title={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) }
actionProps={ {
callback: setAuthorizeOnly,
key: 'authorizeOnly',
value: authorizeOnly,
} }
>
<ControlToggleButton
label={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) }
onChange={ setAuthorizeOnly }
value={ authorizeOnly }
/>
<ToggleSettingsBlock
title={ __(
<ControlToggleButton
label={ __(
'Capture Virtual-Only Orders',
'woocommerce-paypal-payments'
) }
actionProps={ {
callback: setCaptureVirtualOnlyOrders,
key: 'captureVirtualOnlyOrders',
value: captureVirtualOnlyOrders,
} }
onChange={ setCaptureVirtualOnlyOrders }
value={ captureVirtualOnlyOrders }
/>
</SettingsBlock>
);

20
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/PayNowExperience.js
View file

@ -1,24 +1,28 @@
import { __ } from '@wordpress/i18n';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { ControlToggleButton } from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
const PayNowExperience = () => {
const { payNowExperience, setPayNowExperience } =
SettingsHooks.useSettings();
return (
<ToggleSettingsBlock
title={ __( 'Pay Now Experience', 'woocommerce-paypal-payments' ) }
<SettingsBlock>
<ControlToggleButton
label={ __(
'Pay Now Experience',
'woocommerce-paypal-payments'
) }
description={ __(
'Let PayPal customers skip the Order Review page by selecting shipping options directly within PayPal.',
'woocommerce-paypal-payments'
) }
actionProps={ {
key: 'payNowExperience',
callback: setPayNowExperience,
value: payNowExperience,
} }
onChange={ setPayNowExperience }
value={ payNowExperience }
/>
</SettingsBlock>
);
};

49
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SavePaymentMethods.js
View file

@ -5,7 +5,7 @@ import {
Description,
} from '../../../../../ReusableComponents/Elements';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { ControlToggleButton } from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data';
const SavePaymentMethods = () => {
@ -17,31 +17,23 @@ const SavePaymentMethods = () => {
} = SettingsHooks.useSettings();
return (
<SettingsBlock className="ppcp-r-settings-block--save-payment-methods">
<Header>
<Title>
{ __(
<SettingsBlock
title={ __(
'Save payment methods',
'woocommerce-paypal-payments'
) }
</Title>
<Description>
{ __(
description={ __(
"Securely store customers' payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.",
'woocommerce-paypal-payments'
) }
</Description>
</Header>
<ToggleSettingsBlock
title={ __(
className="ppcp--save-payment-methods"
>
<ControlToggleButton
label={ __(
'Save PayPal and Venmo',
'woocommerce-paypal-payments'
) }
description={
<div
dangerouslySetInnerHTML={ {
__html: sprintf(
description={ sprintf(
/* translators: 1: URL to Pay Later documentation, 2: URL to Alternative Payment Methods documentation */
__(
'Securely store your customers\' PayPal accounts for a seamless checkout experience. <br />This will disable all <a target="_blank" rel="noreferrer" href="%1$s">Pay Later</a> features and <a target="_blank" rel="noreferrer" href="%2$s">Alternative Payment Methods</a> on your site.',
@ -49,19 +41,13 @@ const SavePaymentMethods = () => {
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later',
'https://woocommerce.com/document/woocommerce-paypal-payments/#alternative-payment-methods'
),
} }
/>
}
actionProps={ {
value: savePaypalAndVenmo,
callback: setSavePaypalAndVenmo,
key: 'savePaypalAndVenmo',
} }
) }
value={ savePaypalAndVenmo }
onChange={ setSavePaypalAndVenmo }
/>
<ToggleSettingsBlock
title={ __(
<ControlToggleButton
label={ __(
'Save Credit and Debit Cards',
'woocommerce-paypal-payments'
) }
@ -69,11 +55,8 @@ const SavePaymentMethods = () => {
"Securely store your customer's credit card.",
'woocommerce-paypal-payments'
) }
actionProps={ {
callback: setSaveCardDetails,
key: 'saveCreditCardAndDebitCard',
value: saveCardDetails,
} }
onChange={ setSaveCardDetails }
value={ saveCardDetails }
/>
</SettingsBlock>
);