mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
♻️ Migrate RadioBlock to ControlRadioGroup
This commit is contained in:
Philipp Stracker
parent
f721d991e8
commit
420437d55a
5 changed files with 98 additions and 137 deletions
|
|
@ -0,0 +1,19 @@
|
|||
import { PayPalRdbWithContent } from '../Fields';
|
||||
import { Action } from '../Elements';
|
||||
|
||||
const ControlRadioGroup = ( { options, value, onChange } ) => (
|
||||
<Action>
|
||||
{ options.map( ( { value: optionValue, label, description } ) => (
|
||||
<PayPalRdbWithContent
|
||||
key={ optionValue }
|
||||
value={ optionValue }
|
||||
currentValue={ value }
|
||||
handleRdbState={ onChange }
|
||||
label={ label }
|
||||
description={ description }
|
||||
/>
|
||||
) ) }
|
||||
</Action>
|
||||
);
|
||||
|
||||
export default ControlRadioGroup;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import SettingsBlock from '../SettingsBlock';
|
||||
import { Header, Title, Description } from '../Elements';
|
||||
import { PayPalRdbWithContent } from '../Fields';
|
||||
|
||||
const RadioSettingsBlock = ( {
|
||||
title,
|
||||
description,
|
||||
options = [],
|
||||
...props
|
||||
} ) => (
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__radio ppcp-r-settings-block--expert-rdb"
|
||||
>
|
||||
<Header>
|
||||
<Title>{ title }</Title>
|
||||
<Description>{ description }</Description>
|
||||
</Header>
|
||||
{ options.map( ( option ) => (
|
||||
<PayPalRdbWithContent
|
||||
key={ option.id }
|
||||
id={ option.id }
|
||||
name={ props.actionProps?.name }
|
||||
value={ option.value }
|
||||
currentValue={ props.actionProps?.currentValue }
|
||||
handleRdbState={ ( newValue ) =>
|
||||
props.actionProps?.callback(
|
||||
props.actionProps?.key,
|
||||
newValue
|
||||
)
|
||||
}
|
||||
label={ option.label }
|
||||
description={ option.description }
|
||||
toggleAdditionalContent={ true }
|
||||
>
|
||||
{ option.additionalContent }
|
||||
</PayPalRdbWithContent>
|
||||
) ) }
|
||||
</SettingsBlock>
|
||||
);
|
||||
|
||||
export default RadioSettingsBlock;
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
export { default as SelectSettingsBlock } from './SelectSettingsBlock';
|
||||
export { default as RadioSettingsBlock } from './RadioSettingsBlock';
|
||||
export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
|
||||
export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
|
||||
|
||||
|
|
@ -7,3 +6,4 @@ export { default as ControlStaticValue } from './ControlStaticValue';
|
|||
export { default as ControlTextInput } from './ControlTextInput';
|
||||
export { default as ControlToggleButton } from './ControlToggleButton';
|
||||
export { default as ControlButton } from './ControlButton';
|
||||
export { default as ControlRadioGroup } from './ControlRadioGroup';
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@ import { Button } from '@wordpress/components';
|
|||
|
||||
import {
|
||||
ControlTextInput,
|
||||
RadioSettingsBlock,
|
||||
ControlRadioGroup,
|
||||
} from '../../../../ReusableComponents/SettingsBlocks';
|
||||
import Accordion from '../../../../ReusableComponents/AccordionSection';
|
||||
import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
|
||||
|
||||
const ConnectionDetails = ( { settings, updateFormValue } ) => {
|
||||
const isSandbox = settings.sandboxConnected;
|
||||
|
|
@ -21,16 +22,16 @@ const ConnectionDetails = ( { settings, updateFormValue } ) => {
|
|||
title={ modeConfig.title }
|
||||
description={ modeConfig.description }
|
||||
>
|
||||
<RadioSettingsBlock
|
||||
<SettingsBlock
|
||||
title={ modeConfig.connectTitle }
|
||||
description={ modeConfig.connectDescription }
|
||||
options={ modeConfig.options }
|
||||
actionProps={ {
|
||||
key: modeKey,
|
||||
currentValue: settings[ modeKey ],
|
||||
callback: updateFormValue,
|
||||
} }
|
||||
/>
|
||||
>
|
||||
<ControlRadioGroup
|
||||
options={ modeConfig.options }
|
||||
value={ settings[ modeKey ] }
|
||||
onChange={ updateFormValue }
|
||||
/>
|
||||
</SettingsBlock>
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
RadioSettingsBlock,
|
||||
ControlRadioGroup,
|
||||
ControlToggleButton,
|
||||
ControlTextInput,
|
||||
SelectSettingsBlock,
|
||||
|
|
@ -34,44 +34,19 @@ const PaypalSettings = () => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<SettingsBlock>
|
||||
<RadioSettingsBlock
|
||||
title={ __(
|
||||
'Subtotal mismatch fallback',
|
||||
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Due to differences in how WooCommerce and PayPal calculates taxes, some transactions may fail due to a rounding error. This settings determines the fallback behavior.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
options={ [
|
||||
{
|
||||
id: 'add_a_correction',
|
||||
value: 'add_a_correction',
|
||||
label: __(
|
||||
'Add a correction',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Adds an additional line item with the missing amount.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'skip_details',
|
||||
value: 'skip_details',
|
||||
label: __(
|
||||
'Do not send line items',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Resubmit the transaction without line item details.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
] }
|
||||
currentValue={ subtotalAdjustment }
|
||||
<SettingsBlock
|
||||
title={ __(
|
||||
'Subtotal mismatch fallback',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Due to differences in how WooCommerce and PayPal calculates taxes, some transactions may fail due to a rounding error. This settings determines the fallback behavior.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<ControlRadioGroup
|
||||
options={ subtotalAdjustmentChoices }
|
||||
value={ subtotalAdjustment }
|
||||
onChange={ setSubtotalAdjustment }
|
||||
/>
|
||||
</SettingsBlock>
|
||||
|
|
@ -125,7 +100,7 @@ const PaypalSettings = () => {
|
|||
/>
|
||||
</SettingsBlock>
|
||||
|
||||
<RadioSettingsBlock
|
||||
<SettingsBlock
|
||||
title={ __(
|
||||
'PayPal landing page',
|
||||
'woocommerce-paypal-payments'
|
||||
|
|
@ -134,51 +109,13 @@ const PaypalSettings = () => {
|
|||
'Determine which experience a buyer sees when they click the PayPal button.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
options={ [
|
||||
{
|
||||
id: 'any',
|
||||
value: 'any',
|
||||
label: __(
|
||||
'No preference',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Shows the buyer the PayPal login for a recognized PayPal buyer.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'login',
|
||||
value: 'login',
|
||||
label: __(
|
||||
'Login page',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Always show the buyer the PayPal login screen.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'guest_checkout',
|
||||
value: 'guest_checkout',
|
||||
label: __(
|
||||
'Guest checkout page',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Always show the buyer the guest checkout fields first.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
] }
|
||||
actionProps={ {
|
||||
name: 'paypal_settings_landing',
|
||||
key: 'landingPage',
|
||||
currentValue: landingPage,
|
||||
callback: setLandingPage,
|
||||
} }
|
||||
/>
|
||||
>
|
||||
<ControlRadioGroup
|
||||
options={ landingPageChoices }
|
||||
value={ landingPage }
|
||||
onChange={ setLandingPage }
|
||||
/>
|
||||
</SettingsBlock>
|
||||
|
||||
<SettingsBlock
|
||||
title={ __( 'Button Language', 'woocommerce-paypal-payments' ) }
|
||||
|
|
@ -211,4 +148,50 @@ const languagesExample = [
|
|||
{ value: 'it', label: 'Italian' },
|
||||
];
|
||||
|
||||
const subtotalAdjustmentChoices = [
|
||||
{
|
||||
value: 'correction',
|
||||
label: __( 'Add a correction', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Adds an additional line item with the missing amount.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'no_details',
|
||||
label: __( 'Do not send line items', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Resubmit the transaction without line item details.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const landingPageChoices = [
|
||||
{
|
||||
value: 'any',
|
||||
label: __( 'No preference', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Shows the buyer the PayPal login for a recognized PayPal buyer.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'login',
|
||||
label: __( 'Login page', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Always show the buyer the PayPal login screen.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'guest_checkout',
|
||||
label: __( 'Guest checkout page', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Always show the buyer the guest checkout fields first.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default PaypalSettings;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
