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

🚧 Start to simplify component structure

Browse source
This commit is contained in:
Philipp Stracker 2025-01-21 18:21:07 +01:00
parent c8261cf62c
commit a567ce7b51
No known key found for this signature in database
12 changed files with 200 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

35
modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js
View file

@ -1,35 +0,0 @@
import { __ } from '@wordpress/i18n';
import { CommonHooks } from '../../data';
const ConnectionInfo = () => {
const { merchant } = CommonHooks.useMerchantInfo();
return (
<div className="ppcp-r-connection-status__data">
<StatusRow
label={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
value={ merchant.id }
/>
<StatusRow
label={ __( 'Email address', 'woocommerce-paypal-payments' ) }
value={ merchant.email }
/>
<StatusRow
label={ __( 'Client ID', 'woocommerce-paypal-payments' ) }
value={ merchant.clientId }
/>
</div>
);
};
export default ConnectionInfo;
const StatusRow = ( { label, value } ) => (
<div className="ppcp-r-connection-status__status-row">
<span className="ppcp-r-connection-status__status-label">
{ label }
</span>
<span className="ppcp-r-connection-status__status-value">
{ value }
</span>
</div>
);

68
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/CommonSettings.js
View file

@ -1,68 +0,0 @@
import { __ } from '@wordpress/i18n';
import {
InputSettingsBlock,
ToggleSettingsBlock,
} from '../../../ReusableComponents/SettingsBlocks';
import SettingsCard from '../../../ReusableComponents/SettingsCard';
import OrderIntent from './Blocks/OrderIntent';
import SavePaymentMethods from './Blocks/SavePaymentMethods';
const CommonSettings = ( { updateFormValue, settings } ) => {
return (
<SettingsCard
icon="icon-settings-common.svg"
title={ __( 'Common settings', 'woocommerce-paypal-payments' ) }
className="ppcp-r-settings-card ppcp-r-settings-card--common-settings"
description={ __(
'Customize key features to tailor your PayPal experience.',
'woocommerce-paypal-payments'
) }
>
<InputSettingsBlock
title="Invoice Prefix"
supplementaryLabel={ __(
'(Recommended)',
'woocommerce-paypal-payments'
) }
description="Add a unique prefix to invoice numbers for site-specific tracking (recommended)."
actionProps={ {
callback: updateFormValue,
key: 'invoicePrefix',
value: settings.invoicePrefix,
placeholder: __(
'Input prefix',
'woocommerce-paypal-payments'
),
} }
/>
<OrderIntent
settings={ settings }
updateFormValue={ updateFormValue }
/>
<SavePaymentMethods
updateFormValue={ updateFormValue }
settings={ settings }
/>
<ToggleSettingsBlock
title={ __(
'Pay Now Experience',
'woocommerce-paypal-payments'
) }
description={ __(
'Let PayPal customers skip the Order Review page by selecting shipping options directly within PayPal.',
'woocommerce-paypal-payments'
) }
actionProps={ {
callback: updateFormValue,
key: 'payNowExperience',
value: settings.payNowExperience,
} }
/>
</SettingsCard>
);
};
export default CommonSettings;

49
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js
View file

@ -1,49 +0,0 @@
import { __ } from '@wordpress/i18n';
import SettingsCard from '../../../ReusableComponents/SettingsCard';
import { CommonHooks } from '../../../../data';
import TitleBadge, {
TITLE_BADGE_NEGATIVE,
TITLE_BADGE_POSITIVE,
} from '../../../ReusableComponents/TitleBadge';
import ConnectionInfo from '../../../ReusableComponents/ConnectionInfo';
const ConnectionStatus = () => {
const { merchant } = CommonHooks.useMerchantInfo();
return (
<SettingsCard
className="ppcp-r-tab-overview-support"
title={ __( 'Connection status', 'woocommerce-paypal-payments' ) }
description={ __(
'Your PayPal account connection details',
'woocommerce-paypal-payments'
) }
>
<div className="ppcp-r-connection-status">
<div className="ppcp-r-connection-status__status">
<div className="ppcp-r-connection-status__status-status">
{ merchant.isConnected ? (
<TitleBadge
type={ TITLE_BADGE_POSITIVE }
text={ __(
'Active',
'woocommerce-paypal-payments'
) }
/>
) : (
<TitleBadge
type={ TITLE_BADGE_NEGATIVE }
text={ __(
'Not Activated',
'woocommerce-paypal-payments'
) }
/>
) }
</div>
</div>
{ merchant.isConnected && (
<ConnectionInfo connectionStatusDataDefault={ merchant } />
) }
</div>
</SettingsCard>
);
};
export default ConnectionStatus;

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

@ -0,0 +1,29 @@
import { __ } from '@wordpress/i18n';
import { InputSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data';
const InvoicePrefix = () => {
const { invoicePrefix, setInvoicePrefix } = SettingsHooks.useSettings();
return (
<InputSettingsBlock
title="Invoice Prefix"
supplementaryLabel={ __(
'(Recommended)',
'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'
),
} }
/>
);
};
export default InvoicePrefix;

20
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OrderIntent.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js
View file

@ -5,9 +5,17 @@ import {
Title,
Description,
ToggleSettingsBlock,
} from '../../../../ReusableComponents/SettingsBlocks';
} from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data';
const OrderIntent = () => {
const {
authorizeOnly,
setAuthorizeOnly,
captureVirtualOnlyOrders,
setCaptureVirtualOnlyOrders,
} = SettingsHooks.useSettings();
const OrderIntent = ( { updateFormValue, settings } ) => {
return (
<SettingsBlock>
<Header>
@ -25,9 +33,9 @@ const OrderIntent = ( { updateFormValue, settings } ) => {
<ToggleSettingsBlock
title={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) }
actionProps={ {
callback: updateFormValue,
callback: setAuthorizeOnly,
key: 'authorizeOnly',
value: settings.authorizeOnly,
value: authorizeOnly,
} }
/>
@ -37,9 +45,9 @@ const OrderIntent = ( { updateFormValue, settings } ) => {
'woocommerce-paypal-payments'
) }
actionProps={ {
callback: updateFormValue,
callback: setCaptureVirtualOnlyOrders,
key: 'captureVirtualOnlyOrders',
value: settings.captureVirtualOnlyOrders,
value: captureVirtualOnlyOrders,
} }
/>
</SettingsBlock>

25
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/PayNowExperience.js Normal file
View file

@ -0,0 +1,25 @@
import { __ } from '@wordpress/i18n';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data';
const PayNowExperience = () => {
const { payNowExperience, setPayNowExperience } =
SettingsHooks.useSettings();
return (
<ToggleSettingsBlock
title={ __( 'Pay Now Experience', 'woocommerce-paypal-payments' ) }
description={ __(
'Let PayPal customers skip the Order Review page by selecting shipping options directly within PayPal.',
'woocommerce-paypal-payments'
) }
actionProps={ {
key: 'payNowExperience',
callback: setPayNowExperience,
value: payNowExperience,
} }
/>
);
};
export default PayNowExperience;

20
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/SavePaymentMethods.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SavePaymentMethods.js
View file

@ -5,9 +5,17 @@ import {
ToggleSettingsBlock,
Title,
Description,
} from '../../../../ReusableComponents/SettingsBlocks';
} from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data';
const SavePaymentMethods = () => {
const {
savePaypalAndVenmo,
setSavePaypalAndVenmo,
saveCardDetails,
setSaveCardDetails,
} = SettingsHooks.useSettings();
const SavePaymentMethods = ( { updateFormValue, settings } ) => {
return (
<SettingsBlock className="ppcp-r-settings-block--save-payment-methods">
<Header>
@ -46,8 +54,8 @@ const SavePaymentMethods = ( { updateFormValue, settings } ) => {
/>
}
actionProps={ {
value: settings.savePaypalAndVenmo,
callback: updateFormValue,
value: savePaypalAndVenmo,
callback: setSavePaypalAndVenmo,
key: 'savePaypalAndVenmo',
} }
/>
@ -62,9 +70,9 @@ const SavePaymentMethods = ( { updateFormValue, settings } ) => {
'woocommerce-paypal-payments'
) }
actionProps={ {
callback: updateFormValue,
callback: setSaveCardDetails,
key: 'saveCreditCardAndDebitCard',
value: settings.saveCreditCardAndDebitCard,
value: saveCardDetails,
} }
/>
</SettingsBlock>

26
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/CommonSettings.js Normal file
View file

@ -0,0 +1,26 @@
import { __ } from '@wordpress/i18n';
import SettingsCard from '../../../../ReusableComponents/SettingsCard';
import OrderIntent from './Blocks/OrderIntent';
import SavePaymentMethods from './Blocks/SavePaymentMethods';
import InvoicePrefix from './Blocks/InvoicePrefix';
import PayNowExperience from './Blocks/PayNowExperience';
const CommonSettings = () => (
<SettingsCard
icon="icon-settings-common.svg"
title={ __( 'Common settings', 'woocommerce-paypal-payments' ) }
className="ppcp-r-settings-card ppcp-r-settings-card--common-settings"
description={ __(
'Customize key features to tailor your PayPal experience.',
'woocommerce-paypal-payments'
) }
>
<InvoicePrefix />
<OrderIntent />
<SavePaymentMethods />
<PayNowExperience />
</SettingsCard>
);
export default CommonSettings;

49
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js Normal file
View file

@ -0,0 +1,49 @@
import { __ } from '@wordpress/i18n';
import SettingsCard from '../../../../ReusableComponents/SettingsCard';
import { CommonHooks } from '../../../../../data';
import SettingValueRow from './Parts/SettingValueRow';
import ConnectionStatusBadge from './Parts/ConnectionStatusBadge';
const ConnectionStatus = () => {
const { merchant } = CommonHooks.useMerchantInfo();
return (
<SettingsCard
className="ppcp-r-tab-connection-details"
title={ __( 'Connection status', 'woocommerce-paypal-payments' ) }
description={ __(
'Your PayPal account connection details',
'woocommerce-paypal-payments'
) }
>
<div className="ppcp-r-setting-value-rows">
<SettingValueRow
value={
<ConnectionStatusBadge
isActive={ merchant.isConnected }
isSandbox={ merchant.isSandbox }
/>
}
/>
<SettingValueRow
label={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
value={ merchant.id }
/>
<SettingValueRow
label={ __(
'Email address',
'woocommerce-paypal-payments'
) }
value={ merchant.email }
/>
<SettingValueRow
label={ __( 'Client ID', 'woocommerce-paypal-payments' ) }
value={ merchant.clientId }
/>
</div>
</SettingsCard>
);
};
export default ConnectionStatus;

17
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js
View file

@ -1,15 +1,18 @@
import { __ } from '@wordpress/i18n';
import SettingsCard from '../../../ReusableComponents/SettingsCard';
import SettingsCard from '../../../../ReusableComponents/SettingsCard';
import {
Content,
ContentWrapper,
} from '../../../ReusableComponents/SettingsBlocks';
import ConnectionDetails from './Blocks/ConnectionDetails';
import Troubleshooting from './Blocks/Troubleshooting/Troubleshooting';
import PaypalSettings from './Blocks/PaypalSettings';
import OtherSettings from './Blocks/OtherSettings';
} from '../../../../ReusableComponents/SettingsBlocks';
import ConnectionDetails from '../../../Overview/TabSettingsElements/Blocks/ConnectionDetails';
import Troubleshooting from '../../../Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting';
import PaypalSettings from '../../../Overview/TabSettingsElements/Blocks/PaypalSettings';
import OtherSettings from '../../../Overview/TabSettingsElements/Blocks/OtherSettings';
const ExpertSettings = () => {
const settings = {}; // dummy object
const updateFormValue = () => {}; // dummy function
const ExpertSettings = ( { updateFormValue, settings } ) => {
return (
<SettingsCard
icon="icon-settings-expert.svg"

25
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/ConnectionStatusBadge.js Normal file
View file

@ -0,0 +1,25 @@
import { __ } from '@wordpress/i18n';
import TitleBadge, {
TITLE_BADGE_NEGATIVE,
TITLE_BADGE_POSITIVE,
} from '../../../../../ReusableComponents/TitleBadge';
const ConnectionStatusBadge = ( { isActive, isSandbox } ) => {
if ( isActive ) {
const label = isSandbox
? __( 'Sandbox Mode', 'woocommerce-paypal-payments' )
: __( 'Active', 'woocommerce-paypal-payments' );
return <TitleBadge type={ TITLE_BADGE_POSITIVE } text={ label } />;
}
return (
<TitleBadge
type={ TITLE_BADGE_NEGATIVE }
text={ __( 'Not Connected', 'woocommerce-paypal-payments' ) }
/>
);
};
export default ConnectionStatusBadge;

8
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/SettingValueRow.js Normal file
View file

@ -0,0 +1,8 @@
const SettingValueRow = ( { label, value } ) => (
<div className="ppcp-r-setting-value-row">
{ label && <span className="ppcp-r-setting-label">{ label }</span> }
<span className="ppcp-r-setting-value">{ value }</span>
</div>
);
export default SettingValueRow;