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

♻️ Refactor InputSettingsBlock for Redux usage

Browse source
This commit is contained in:
Philipp Stracker 2025-01-21 19:06:53 +01:00
parent b958fe597c
commit bd2af4fd64
No known key found for this signature in database
4 changed files with 39 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

15
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
View file

@ -8,13 +8,14 @@ const InputSettingsBlock = ( {
description,
supplementaryLabel,
showDescriptionFirst = false,
actionProps = {},
...props
value,
onChange,
placeholder = '',
} ) => {
const TheDescription = <Description>{ description }</Description>;
return (
<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
<SettingsBlock className="ppcp-r-settings-block__input">
<Title>
{ title }
{ supplementaryLabel && (
@ -27,11 +28,9 @@ const InputSettingsBlock = ( {
<Action>
<TextControl
className="ppcp-r-vertical-text-control"
placeholder={ actionProps.placeholder }
value={ actionProps.value }
onChange={ ( newValue ) =>
actionProps.callback( actionProps.key, newValue )
}
placeholder={ placeholder }
value={ value }
onChange={ onChange }
/>
</Action>
{ ! showDescriptionFirst && TheDescription }

32
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
View file

@ -82,27 +82,23 @@ const generateOptions = ( config, settings, updateFormValue ) => [
<>
<InputSettingsBlock
title={ config.clientIdTitle }
actionProps={ {
value: settings[ `${ config.mode }ClientId` ],
callback: updateFormValue,
key: `${ config.mode }ClientId`,
placeholder: __(
'Enter Client ID',
'woocommerce-paypal-payments'
),
} }
// Input field props.
value={ settings[ `${ config.mode }ClientId` ] }
onChange={ updateFormValue }
placeholder={ __(
'Enter Client ID',
'woocommerce-paypal-payments'
) }
/>
<InputSettingsBlock
title={ config.secretKeyTitle }
actionProps={ {
value: settings[ `${ config.mode }SecretKey` ],
callback: updateFormValue,
key: `${ config.mode }SecretKey`,
placeholder: __(
'Enter Secret Key',
'woocommerce-paypal-payments'
),
} }
// Input field props.
value={ settings[ `${ config.mode }SecretKey` ] }
onChange={ updateFormValue }
placeholder={ __(
'Enter Secret Key',
'woocommerce-paypal-payments'
) }
/>
<Button
variant="primary"

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

@ -88,15 +88,13 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
'woocommerce-paypal-payments'
) }
showDescriptionFirst={ true }
actionProps={ {
value: settings.brandName,
callback: updateFormValue,
key: 'brandName',
placeholder: __(
'Brand name',
'woocommerce-paypal-payments'
),
} }
// Input field props.
value={ settings.brandName }
onChange={ updateFormValue }
placeholder={ __(
'Brand name',
'woocommerce-paypal-payments'
) }
/>
<InputSettingsBlock
@ -106,15 +104,13 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
'woocommerce-paypal-payments'
) }
showDescriptionFirst={ true }
actionProps={ {
value: settings.softDescriptor,
callback: updateFormValue,
key: 'softDescriptor',
placeholder: __(
'Soft Descriptor',
'woocommerce-paypal-payments'
),
} }
// Input field props.
value={ settings.softDescriptor }
onChange={ updateFormValue }
placeholder={ __(
'Soft Descriptor',
'woocommerce-paypal-payments'
) }
/>
<RadioSettingsBlock

13
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js
View file

@ -13,15 +13,10 @@ const InvoicePrefix = () => {
'woocommerce-paypal-payments'
) }
description="Add a unique prefix to invoice numbers for site-specific tracking (recommended)."
actionProps={ {
key: 'invoicePrefix',
callback: setInvoicePrefix,
value: invoicePrefix,
placeholder: __(
'Input prefix',
'woocommerce-paypal-payments'
),
} }
// Input field props.
placeholder={ __( 'Input prefix', 'woocommerce-paypal-payments' ) }
onChange={ setInvoicePrefix }
value={ invoicePrefix }
/>
);
};