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 ButtonSettingsBlock } from './ButtonSettingsBlock';
export { default as SelectSettingsBlock } from './SelectSettingsBlock'; export { default as SelectSettingsBlock } from './SelectSettingsBlock';
export { default as AccordionSettingsBlock } from './AccordionSettingsBlock'; export { default as AccordionSettingsBlock } from './AccordionSettingsBlock';
export { default as ToggleSettingsBlock } from './ToggleSettingsBlock';
export { default as RadioSettingsBlock } from './RadioSettingsBlock'; export { default as RadioSettingsBlock } from './RadioSettingsBlock';
export { default as PaymentMethodsBlock } from './PaymentMethodsBlock'; export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock'; export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
export { default as ControlStaticValue } from './ControlStaticValue'; export { default as ControlStaticValue } from './ControlStaticValue';
export { default as ControlTextInput } from './ControlTextInput'; 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 { import {
AccordionSettingsBlock, AccordionSettingsBlock,
RadioSettingsBlock, RadioSettingsBlock,
ToggleSettingsBlock, ControlToggleButton,
ControlTextInput, ControlTextInput,
SelectSettingsBlock, SelectSettingsBlock,
} from '../../../../ReusableComponents/SettingsBlocks'; } from '../../../../ReusableComponents/SettingsBlocks';
@ -66,7 +66,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
} } } }
/> />
<ToggleSettingsBlock <ControlToggleButton
title={ __( title={ __(
'Instant payments only', 'Instant payments only',
'woocommerce-paypal-payments' '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'; } from '../../../../../ReusableComponents/Elements';
import { import {
AccordionSettingsBlock, AccordionSettingsBlock,
ToggleSettingsBlock, ControlToggleButton,
} from '../../../../../ReusableComponents/SettingsBlocks'; } from '../../../../../ReusableComponents/SettingsBlocks';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock'; import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
@ -30,7 +30,7 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
value: settings.payNowExperience, value: settings.payNowExperience,
} } } }
> >
<ToggleSettingsBlock <ControlToggleButton
title={ __( 'Logging', 'woocommerce-paypal-payments' ) } title={ __( 'Logging', 'woocommerce-paypal-payments' ) }
description={ __( description={ __(
'Log additional debugging information in the WooCommerce logs that can assist technical staff to determine issues.', '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 { __ } from '@wordpress/i18n';
import {
Header, import { ControlToggleButton } from '../../../../../ReusableComponents/SettingsBlocks';
Title,
Description,
} from '../../../../../ReusableComponents/Elements';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock'; import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import { SettingsHooks } from '../../../../../../data'; import { SettingsHooks } from '../../../../../../data';
@ -17,38 +13,26 @@ const OrderIntent = () => {
} = SettingsHooks.useSettings(); } = SettingsHooks.useSettings();
return ( return (
<SettingsBlock> <SettingsBlock
<Header> title={ __( 'Order Intent', 'woocommerce-paypal-payments' ) }
<Title> description={ __(
{ __( 'Order Intent', 'woocommerce-paypal-payments' ) }
</Title>
<Description>
{ __(
'Choose between immediate capture or authorization-only, with manual capture in the Order section.', 'Choose between immediate capture or authorization-only, with manual capture in the Order section.',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
</Description> >
</Header> <ControlToggleButton
label={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) }
<ToggleSettingsBlock onChange={ setAuthorizeOnly }
title={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) } value={ authorizeOnly }
actionProps={ {
callback: setAuthorizeOnly,
key: 'authorizeOnly',
value: authorizeOnly,
} }
/> />
<ToggleSettingsBlock <ControlToggleButton
title={ __( label={ __(
'Capture Virtual-Only Orders', 'Capture Virtual-Only Orders',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
actionProps={ { onChange={ setCaptureVirtualOnlyOrders }
callback: setCaptureVirtualOnlyOrders, value={ captureVirtualOnlyOrders }
key: 'captureVirtualOnlyOrders',
value: captureVirtualOnlyOrders,
} }
/> />
</SettingsBlock> </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 { __ } from '@wordpress/i18n';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { ControlToggleButton } from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data'; import { SettingsHooks } from '../../../../../../data';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
const PayNowExperience = () => { const PayNowExperience = () => {
const { payNowExperience, setPayNowExperience } = const { payNowExperience, setPayNowExperience } =
SettingsHooks.useSettings(); SettingsHooks.useSettings();
return ( return (
<ToggleSettingsBlock <SettingsBlock>
title={ __( 'Pay Now Experience', 'woocommerce-paypal-payments' ) } <ControlToggleButton
label={ __(
'Pay Now Experience',
'woocommerce-paypal-payments'
) }
description={ __( description={ __(
'Let PayPal customers skip the Order Review page by selecting shipping options directly within PayPal.', 'Let PayPal customers skip the Order Review page by selecting shipping options directly within PayPal.',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
actionProps={ { onChange={ setPayNowExperience }
key: 'payNowExperience', value={ payNowExperience }
callback: 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, Description,
} from '../../../../../ReusableComponents/Elements'; } from '../../../../../ReusableComponents/Elements';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock'; import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks'; import { ControlToggleButton } from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data'; import { SettingsHooks } from '../../../../../../data';
const SavePaymentMethods = () => { const SavePaymentMethods = () => {
@ -17,31 +17,23 @@ const SavePaymentMethods = () => {
} = SettingsHooks.useSettings(); } = SettingsHooks.useSettings();
return ( return (
<SettingsBlock className="ppcp-r-settings-block--save-payment-methods"> <SettingsBlock
<Header> title={ __(
<Title>
{ __(
'Save payment methods', 'Save payment methods',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
</Title> description={ __(
<Description>
{ __(
"Securely store customers' payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.", "Securely store customers' payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.",
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
</Description> className="ppcp--save-payment-methods"
</Header> >
<ControlToggleButton
<ToggleSettingsBlock label={ __(
title={ __(
'Save PayPal and Venmo', 'Save PayPal and Venmo',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
description={ description={ sprintf(
<div
dangerouslySetInnerHTML={ {
__html: sprintf(
/* translators: 1: URL to Pay Later documentation, 2: URL to Alternative Payment Methods documentation */ /* 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.', '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/#pay-later',
'https://woocommerce.com/document/woocommerce-paypal-payments/#alternative-payment-methods' 'https://woocommerce.com/document/woocommerce-paypal-payments/#alternative-payment-methods'
), ) }
} } value={ savePaypalAndVenmo }
/> onChange={ setSavePaypalAndVenmo }
}
actionProps={ {
value: savePaypalAndVenmo,
callback: setSavePaypalAndVenmo,
key: 'savePaypalAndVenmo',
} }
/> />
<ToggleSettingsBlock <ControlToggleButton
title={ __( label={ __(
'Save Credit and Debit Cards', 'Save Credit and Debit Cards',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
@ -69,11 +55,8 @@ const SavePaymentMethods = () => {
"Securely store your customer's credit card.", "Securely store your customer's credit card.",
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
actionProps={ { onChange={ setSaveCardDetails }
callback: setSaveCardDetails, value={ saveCardDetails }
key: 'saveCreditCardAndDebitCard',
value: saveCardDetails,
} }
/> />
</SettingsBlock> </SettingsBlock>
); );