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 SelectBlock to ControlSelect

Browse source
This commit is contained in:
Philipp Stracker 2025-01-23 13:33:35 +01:00
parent 00b720088a
commit d24adbfe2f
No known key found for this signature in database
5 changed files with 57 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

9
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js → modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlSelect.js
View file

@ -1,7 +1,6 @@
import Select, { components } from 'react-select';
import data from '../../../utils/data';
import SettingsBlock from '../SettingsBlock';
import { Title, Action, Description } from '../Elements';
const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];
@ -30,13 +29,13 @@ const ELEMENT_RENDERERS = {
),
};
const SelectSettingsBlock = ( {
const ControlSelect = ( {
title,
description,
order = DEFAULT_ELEMENT_ORDER,
...props
} ) => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__select">
<Action>
{ order.map( ( elementKey ) => {
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
return RenderElement ? (
@ -48,7 +47,7 @@ const SelectSettingsBlock = ( {
/>
) : null;
} ) }
</SettingsBlock>
</Action>
);
export default SelectSettingsBlock;
export default ControlSelect;

1
modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/index.js
View file

@ -3,3 +3,4 @@ export { default as ControlTextInput } from './ControlTextInput';
export { default as ControlToggleButton } from './ControlToggleButton';
export { default as ControlButton } from './ControlButton';
export { default as ControlRadioGroup } from './ControlRadioGroup';
export { default as ControlSelect } from './ControlSelect';

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

@ -1,4 +1,3 @@
export { default as SelectSettingsBlock } from './SelectSettingsBlock';
export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
export { default as TodoSettingsBlock } from './TodoSettingsBlock';

82
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js
View file

@ -1,8 +1,48 @@
import { __ } from '@wordpress/i18n';
import { SelectSettingsBlock } from '../../../../ReusableComponents/SettingsBlocks';
import Accordion from '../../../../ReusableComponents/AccordionSection';
const creditCardExamples = [
import { ControlSelect } from '@wordpress/components';
import Accordion from '../../../../ReusableComponents/AccordionSection';
import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
import { SettingsHooks } from '../../../../../data';
const OtherSettings = () => {
const { disabledCards, setDisabledCards } = SettingsHooks.useSettings();
return (
<Accordion
title={ __(
'Other payment method settings',
'woocommerce-paypal-payments'
) }
description={ __(
'Modify the checkout experience for alternative payment methods, credit cards, and digital wallets.',
'woocommerce-paypal-payments'
) }
>
<SettingsBlock
title={ __(
'Disable specific credit cards',
'woocommerce-paypal-payments'
) }
description={ __(
"If left blank, PayPal and other buttons will present in the user's detected language. Enter a language here to force all buttons to display in that language.",
'woocommerce-paypal-payments'
) }
>
<ControlSelect
options={ disabledCardChoices }
value={ disabledCards }
onChange={ setDisabledCards }
isMulti={ true }
/>
</SettingsBlock>
</Accordion>
);
};
export default OtherSettings;
const disabledCardChoices = [
{ value: '', label: __( 'Select', 'woocommerce-paypal-payments' ) },
{
value: 'mastercard',
@ -19,39 +59,3 @@ const creditCardExamples = [
label: __( 'Diners Club', 'woocommerce-paypal-payments' ),
},
];
const OtherSettings = ( { settings, updateFormValue } ) => {
return (
<Accordion
title={ __(
'Other payment method settings',
'woocommerce-paypal-payments'
) }
description={ __(
'Modify the checkout experience for alternative payment methods, credit cards, and digital wallets.',
'woocommerce-paypal-payments'
) }
>
<SelectSettingsBlock
title={ __(
'Disable specific credit cards',
'woocommerce-paypal-payments'
) }
description={ __(
"If left blank, PayPal and other buttons will present in the user's detected language. Enter a language here to force all buttons to display in that language.",
'woocommerce-paypal-payments'
) }
actionProps={ {
options: creditCardExamples,
value: settings.buttonLanguage,
callback: updateFormValue,
key: 'buttonLanguage',
isMulti: true,
} }
order={ [ 'title', 'description', 'action' ] }
/>
</Accordion>
);
};
export default OtherSettings;

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

@ -1,9 +1,9 @@
import { __ } from '@wordpress/i18n';
import { SelectSettingsBlock } from '../../../../ReusableComponents/SettingsBlocks';
import {
ControlRadioGroup,
ControlToggleButton,
ControlTextInput,
ControlSelect,
} from '../../../../ReusableComponents/Controls';
import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
import Accordion from '../../../../ReusableComponents/AccordionSection';
@ -124,17 +124,14 @@ const PaypalSettings = () => {
'woocommerce-paypal-payments'
) }
>
<SelectSettingsBlock
actionProps={ {
value: buttonLanguage,
callback: setButtonLanguage,
options: languagesExample,
key: 'buttonLanguage',
placeholder: __(
<ControlSelect
options={ languagesExample }
value={ buttonLanguage }
onChange={ setButtonLanguage }
placeholder={ __(
'Browser language',
'woocommerce-paypal-payments'
),
} }
) }
/>
</SettingsBlock>
</Accordion>