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

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

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

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

24
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' 'woocommerce-paypal-payments'
) } ) }
showDescriptionFirst={ true } showDescriptionFirst={ true }
actionProps={ { // Input field props.
value: settings.brandName, value={ settings.brandName }
callback: updateFormValue, onChange={ updateFormValue }
key: 'brandName', placeholder={ __(
placeholder: __(
'Brand name', 'Brand name',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ) }
} }
/> />
<InputSettingsBlock <InputSettingsBlock
@ -106,15 +104,13 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
showDescriptionFirst={ true } showDescriptionFirst={ true }
actionProps={ { // Input field props.
value: settings.softDescriptor, value={ settings.softDescriptor }
callback: updateFormValue, onChange={ updateFormValue }
key: 'softDescriptor', placeholder={ __(
placeholder: __(
'Soft Descriptor', 'Soft Descriptor',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ) }
} }
/> />
<RadioSettingsBlock <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' 'woocommerce-paypal-payments'
) } ) }
description="Add a unique prefix to invoice numbers for site-specific tracking (recommended)." description="Add a unique prefix to invoice numbers for site-specific tracking (recommended)."
actionProps={ { // Input field props.
key: 'invoicePrefix', placeholder={ __( 'Input prefix', 'woocommerce-paypal-payments' ) }
callback: setInvoicePrefix, onChange={ setInvoicePrefix }
value: invoicePrefix, value={ invoicePrefix }
placeholder: __(
'Input prefix',
'woocommerce-paypal-payments'
),
} }
/> />
); );
}; };