mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-07 19:54:15 +08:00
🚧 Start to simplify component structure
This commit is contained in:
Philipp Stracker
parent
c8261cf62c
commit
a567ce7b51
12 changed files with 200 additions and 171 deletions
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
Header,
|
||||
SettingsBlock,
|
||||
Title,
|
||||
Description,
|
||||
ToggleSettingsBlock,
|
||||
} from '../../../../../ReusableComponents/SettingsBlocks';
|
||||
import { SettingsHooks } from '../../../../../../data';
|
||||
|
||||
const OrderIntent = () => {
|
||||
const {
|
||||
authorizeOnly,
|
||||
setAuthorizeOnly,
|
||||
captureVirtualOnlyOrders,
|
||||
setCaptureVirtualOnlyOrders,
|
||||
} = SettingsHooks.useSettings();
|
||||
|
||||
return (
|
||||
<SettingsBlock>
|
||||
<Header>
|
||||
<Title>
|
||||
{ __( 'Order Intent', 'woocommerce-paypal-payments' ) }
|
||||
</Title>
|
||||
<Description>
|
||||
{ __(
|
||||
'Choose between immediate capture or authorization-only, with manual capture in the Order section.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Description>
|
||||
</Header>
|
||||
|
||||
<ToggleSettingsBlock
|
||||
title={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) }
|
||||
actionProps={ {
|
||||
callback: setAuthorizeOnly,
|
||||
key: 'authorizeOnly',
|
||||
value: authorizeOnly,
|
||||
} }
|
||||
/>
|
||||
|
||||
<ToggleSettingsBlock
|
||||
title={ __(
|
||||
'Capture Virtual-Only Orders',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
actionProps={ {
|
||||
callback: setCaptureVirtualOnlyOrders,
|
||||
key: 'captureVirtualOnlyOrders',
|
||||
value: captureVirtualOnlyOrders,
|
||||
} }
|
||||
/>
|
||||
</SettingsBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderIntent;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import {
|
||||
Header,
|
||||
SettingsBlock,
|
||||
ToggleSettingsBlock,
|
||||
Title,
|
||||
Description,
|
||||
} from '../../../../../ReusableComponents/SettingsBlocks';
|
||||
import { SettingsHooks } from '../../../../../../data';
|
||||
|
||||
const SavePaymentMethods = () => {
|
||||
const {
|
||||
savePaypalAndVenmo,
|
||||
setSavePaypalAndVenmo,
|
||||
saveCardDetails,
|
||||
setSaveCardDetails,
|
||||
} = SettingsHooks.useSettings();
|
||||
|
||||
return (
|
||||
<SettingsBlock className="ppcp-r-settings-block--save-payment-methods">
|
||||
<Header>
|
||||
<Title>
|
||||
{ __(
|
||||
'Save payment methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Title>
|
||||
<Description>
|
||||
{ __(
|
||||
"Securely store customers' payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.",
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Description>
|
||||
</Header>
|
||||
|
||||
<ToggleSettingsBlock
|
||||
title={ __(
|
||||
'Save PayPal and Venmo',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={
|
||||
<div
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: sprintf(
|
||||
/* translators: 1: URL to Pay Later documentation, 2: URL to Alternative Payment Methods documentation */
|
||||
__(
|
||||
'Securely store your customers\' PayPal accounts for a seamless checkout experience. <br />This will disable all <a target="_blank" rel="noreferrer" href="%1$s">Pay Later</a> features and <a target="_blank" rel="noreferrer" href="%2$s">Alternative Payment Methods</a> on your site.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later',
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#alternative-payment-methods'
|
||||
),
|
||||
} }
|
||||
/>
|
||||
}
|
||||
actionProps={ {
|
||||
value: savePaypalAndVenmo,
|
||||
callback: setSavePaypalAndVenmo,
|
||||
key: 'savePaypalAndVenmo',
|
||||
} }
|
||||
/>
|
||||
|
||||
<ToggleSettingsBlock
|
||||
title={ __(
|
||||
'Save Credit and Debit Cards',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
"Securely store your customer's credit card.",
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
actionProps={ {
|
||||
callback: setSaveCardDetails,
|
||||
key: 'saveCreditCardAndDebitCard',
|
||||
value: saveCardDetails,
|
||||
} }
|
||||
/>
|
||||
</SettingsBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default SavePaymentMethods;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import SettingsCard from '../../../../ReusableComponents/SettingsCard';
|
||||
import {
|
||||
Content,
|
||||
ContentWrapper,
|
||||
} 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
|
||||
|
||||
return (
|
||||
<SettingsCard
|
||||
icon="icon-settings-expert.svg"
|
||||
className="ppcp-r-settings-card ppcp-r-settings-card--expert-settings"
|
||||
title={ __( 'Expert Settings', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Fine-tune your PayPal experience with advanced options.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
actionProps={ {
|
||||
callback: updateFormValue,
|
||||
key: 'payNowExperience',
|
||||
} }
|
||||
contentContainer={ false }
|
||||
>
|
||||
<ContentWrapper>
|
||||
<Content>
|
||||
<ConnectionDetails
|
||||
updateFormValue={ updateFormValue }
|
||||
settings={ settings }
|
||||
/>
|
||||
</Content>
|
||||
|
||||
<Content>
|
||||
<Troubleshooting
|
||||
updateFormValue={ updateFormValue }
|
||||
settings={ settings }
|
||||
/>
|
||||
</Content>
|
||||
|
||||
<Content>
|
||||
<PaypalSettings
|
||||
updateFormValue={ updateFormValue }
|
||||
settings={ settings }
|
||||
/>
|
||||
</Content>
|
||||
|
||||
<Content>
|
||||
<OtherSettings
|
||||
updateFormValue={ updateFormValue }
|
||||
settings={ settings }
|
||||
/>
|
||||
</Content>
|
||||
</ContentWrapper>
|
||||
</SettingsCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpertSettings;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue
