mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 18:16:38 +08:00
Merge pull request #2966 from woocommerce/PCP-4078-create-connect-live-account-block-to-switch-to-live-account
Create the component for live account connection (4078)
This commit is contained in:
Philipp Stracker
GitHub
commit
d338b82b7b
5 changed files with 222 additions and 205 deletions
|
|
@ -18,7 +18,7 @@ const ButtonSettingsBlock = ( { title, description, ...props } ) => (
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{ props.actionProps.value }
|
{ props?.actionProps?.value }
|
||||||
</Button>
|
</Button>
|
||||||
</Action>
|
</Action>
|
||||||
</SettingsBlock>
|
</SettingsBlock>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import { __, sprintf } from '@wordpress/i18n';
|
||||||
|
import { Button } from '@wordpress/components';
|
||||||
|
import {
|
||||||
|
AccordionSettingsBlock,
|
||||||
|
RadioSettingsBlock,
|
||||||
|
InputSettingsBlock,
|
||||||
|
} from '../../../../ReusableComponents/SettingsBlocks';
|
||||||
|
import {
|
||||||
|
sandboxData,
|
||||||
|
productionData,
|
||||||
|
} from '../../../../../data/settings/connection-details-data';
|
||||||
|
|
||||||
|
const ConnectionDetails = ( { settings, updateFormValue } ) => {
|
||||||
|
const isSandbox = settings.sandboxConnected;
|
||||||
|
|
||||||
|
const modeConfig = isSandbox
|
||||||
|
? productionData( { settings, updateFormValue } )
|
||||||
|
: sandboxData( { settings, updateFormValue } );
|
||||||
|
|
||||||
|
const modeKey = isSandbox ? 'productionMode' : 'sandboxMode';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AccordionSettingsBlock
|
||||||
|
title={ modeConfig.title }
|
||||||
|
description={ modeConfig.description }
|
||||||
|
>
|
||||||
|
<RadioSettingsBlock
|
||||||
|
title={ modeConfig.connectTitle }
|
||||||
|
description={ modeConfig.connectDescription }
|
||||||
|
options={ modeConfig.options }
|
||||||
|
actionProps={ {
|
||||||
|
key: modeKey,
|
||||||
|
currentValue: settings[ modeKey ],
|
||||||
|
callback: updateFormValue,
|
||||||
|
} }
|
||||||
|
/>
|
||||||
|
</AccordionSettingsBlock>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ConnectionDetails;
|
||||||
|
|
@ -1,202 +0,0 @@
|
||||||
import { __, sprintf } from '@wordpress/i18n';
|
|
||||||
import { Button } from '@wordpress/components';
|
|
||||||
import {
|
|
||||||
AccordionSettingsBlock,
|
|
||||||
ButtonSettingsBlock,
|
|
||||||
RadioSettingsBlock,
|
|
||||||
ToggleSettingsBlock,
|
|
||||||
InputSettingsBlock,
|
|
||||||
} from '../../../../ReusableComponents/SettingsBlocks';
|
|
||||||
import TitleBadge, {
|
|
||||||
TITLE_BADGE_POSITIVE,
|
|
||||||
} from '../../../../ReusableComponents/TitleBadge';
|
|
||||||
import ConnectionInfo, {
|
|
||||||
connectionStatusDataDefault,
|
|
||||||
} from '../../../../ReusableComponents/ConnectionInfo';
|
|
||||||
|
|
||||||
const Sandbox = ( { settings, updateFormValue } ) => {
|
|
||||||
const className = settings.sandboxConnected
|
|
||||||
? 'ppcp-r-settings-block--sandbox-connected'
|
|
||||||
: 'ppcp-r-settings-block--sandbox-disconnected';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AccordionSettingsBlock
|
|
||||||
title={ __( 'Sandbox', 'woocommerce-paypal-payments' ) }
|
|
||||||
className={ className }
|
|
||||||
description={ __(
|
|
||||||
"Test your site in PayPal's Sandbox environment.",
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
actionProps={ {
|
|
||||||
callback: updateFormValue,
|
|
||||||
key: 'payNowExperience',
|
|
||||||
value: settings.payNowExperience,
|
|
||||||
} }
|
|
||||||
>
|
|
||||||
{ settings.sandboxConnected && (
|
|
||||||
<ButtonSettingsBlock
|
|
||||||
title={ __(
|
|
||||||
'Sandbox account credentials',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
description={ __(
|
|
||||||
'Your account is connected to sandbox, no real charging takes place. To accept live payments, turn off sandbox mode and connect your live PayPal account.',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
tag={
|
|
||||||
<TitleBadge
|
|
||||||
type={ TITLE_BADGE_POSITIVE }
|
|
||||||
text={ __(
|
|
||||||
'Connected',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="ppcp-r-settings-block--sandbox">
|
|
||||||
<ToggleSettingsBlock
|
|
||||||
title={ __(
|
|
||||||
'Enable sandbox mode',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
actionProps={ {
|
|
||||||
callback: updateFormValue,
|
|
||||||
key: 'sandboxEnabled',
|
|
||||||
value: settings.sandboxEnabled,
|
|
||||||
} }
|
|
||||||
/>
|
|
||||||
<ConnectionInfo
|
|
||||||
connectionStatusDataDefault={
|
|
||||||
connectionStatusDataDefault
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={ () =>
|
|
||||||
updateFormValue( 'sandboxConnected', false )
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{ __(
|
|
||||||
'Disconnect Sandbox',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</ButtonSettingsBlock>
|
|
||||||
) }
|
|
||||||
{ ! settings.sandboxConnected && (
|
|
||||||
<RadioSettingsBlock
|
|
||||||
title={ __(
|
|
||||||
'Connect Sandbox Account',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
description={ __(
|
|
||||||
'Connect a PayPal Sandbox account in order to test your website. Transactions made will not result in actual money movement. Do not fulfil orders completed in Sandbox mode.',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
options={ [
|
|
||||||
{
|
|
||||||
id: 'sandbox_mode',
|
|
||||||
value: 'sandbox_mode',
|
|
||||||
label: __(
|
|
||||||
'Sandbox Mode',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
),
|
|
||||||
description: __(
|
|
||||||
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
),
|
|
||||||
additionalContent: (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={ () =>
|
|
||||||
updateFormValue(
|
|
||||||
'sandboxConnected',
|
|
||||||
true
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{ __(
|
|
||||||
'Connect Sandbox Account',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'manual_connect',
|
|
||||||
value: 'manual_connect',
|
|
||||||
label: __(
|
|
||||||
'Manual Connect',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
),
|
|
||||||
description: sprintf(
|
|
||||||
__(
|
|
||||||
'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
),
|
|
||||||
'#'
|
|
||||||
),
|
|
||||||
additionalContent: (
|
|
||||||
<>
|
|
||||||
<InputSettingsBlock
|
|
||||||
title={ __(
|
|
||||||
'Sandbox Client ID',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
actionProps={ {
|
|
||||||
value: settings.sandboxClientId, // Add this to settings if not present
|
|
||||||
callback: updateFormValue,
|
|
||||||
key: 'sandboxClientId',
|
|
||||||
placeholder: __(
|
|
||||||
'Enter Client ID',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
),
|
|
||||||
} }
|
|
||||||
/>
|
|
||||||
<InputSettingsBlock
|
|
||||||
title={ __(
|
|
||||||
'Sandbox Secret Key',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
actionProps={ {
|
|
||||||
value: settings.sandboxSecretKey, // Add this to settings if not present
|
|
||||||
callback: updateFormValue,
|
|
||||||
key: 'sandboxSecretKey',
|
|
||||||
placeholder: __(
|
|
||||||
'Enter Secret Key',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
),
|
|
||||||
} }
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={ () =>
|
|
||||||
updateFormValue(
|
|
||||||
'sandboxManuallyConnected',
|
|
||||||
true
|
|
||||||
)
|
|
||||||
} // Add this handler if needed
|
|
||||||
>
|
|
||||||
{ __(
|
|
||||||
'Connect Account',
|
|
||||||
'woocommerce-paypal-payments'
|
|
||||||
) }
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
] }
|
|
||||||
actionProps={ {
|
|
||||||
name: 'paypal_connect_sandbox',
|
|
||||||
key: 'sandboxMode',
|
|
||||||
currentValue: settings.sandboxMode,
|
|
||||||
callback: updateFormValue,
|
|
||||||
} }
|
|
||||||
/>
|
|
||||||
) }
|
|
||||||
</AccordionSettingsBlock>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Sandbox;
|
|
||||||
|
|
@ -4,7 +4,7 @@ import {
|
||||||
Content,
|
Content,
|
||||||
ContentWrapper,
|
ContentWrapper,
|
||||||
} from '../../../ReusableComponents/SettingsBlocks';
|
} from '../../../ReusableComponents/SettingsBlocks';
|
||||||
import Sandbox from './Blocks/Sandbox';
|
import ConnectionDetails from './Blocks/ConnectionDetails';
|
||||||
import Troubleshooting from './Blocks/Troubleshooting/Troubleshooting';
|
import Troubleshooting from './Blocks/Troubleshooting/Troubleshooting';
|
||||||
import PaypalSettings from './Blocks/PaypalSettings';
|
import PaypalSettings from './Blocks/PaypalSettings';
|
||||||
import OtherSettings from './Blocks/OtherSettings';
|
import OtherSettings from './Blocks/OtherSettings';
|
||||||
|
|
@ -27,7 +27,7 @@ const ExpertSettings = ( { updateFormValue, settings } ) => {
|
||||||
>
|
>
|
||||||
<ContentWrapper>
|
<ContentWrapper>
|
||||||
<Content>
|
<Content>
|
||||||
<Sandbox
|
<ConnectionDetails
|
||||||
updateFormValue={ updateFormValue }
|
updateFormValue={ updateFormValue }
|
||||||
settings={ settings }
|
settings={ settings }
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
import { __, sprintf } from '@wordpress/i18n';
|
||||||
|
import { InputSettingsBlock } from '../../Components/ReusableComponents/SettingsBlocks';
|
||||||
|
import { Button } from '@wordpress/components';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates options for the environment mode settings.
|
||||||
|
*
|
||||||
|
* @param {Object} config - Configuration for the mode.
|
||||||
|
* @param {Object} settings - Current settings.
|
||||||
|
* @param {Function} updateFormValue - Callback to update settings.
|
||||||
|
* @return {Array} Options array.
|
||||||
|
*/
|
||||||
|
const generateOptions = ( config, settings, updateFormValue ) => [
|
||||||
|
{
|
||||||
|
id: `${ config.mode }_mode`,
|
||||||
|
value: `${ config.mode }_mode`,
|
||||||
|
label: config.labelTitle,
|
||||||
|
description: config.labelDescription,
|
||||||
|
additionalContent: (
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
onClick={ () => {
|
||||||
|
updateFormValue( `${ config.mode }Connected`, true );
|
||||||
|
if ( config.mode === 'production' ) {
|
||||||
|
global.ppcpSettings.startOnboarding();
|
||||||
|
}
|
||||||
|
} }
|
||||||
|
>
|
||||||
|
{ config.buttonText }
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'manual_connect',
|
||||||
|
value: 'manual_connect',
|
||||||
|
label: __( 'Manual Connect', 'woocommerce-paypal-payments' ),
|
||||||
|
description: sprintf(
|
||||||
|
__(
|
||||||
|
'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
'#'
|
||||||
|
),
|
||||||
|
additionalContent: (
|
||||||
|
<>
|
||||||
|
<InputSettingsBlock
|
||||||
|
title={ config.clientIdTitle }
|
||||||
|
actionProps={ {
|
||||||
|
value: settings[ `${ config.mode }ClientId` ],
|
||||||
|
callback: updateFormValue,
|
||||||
|
key: `${ config.mode }ClientId`,
|
||||||
|
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'
|
||||||
|
),
|
||||||
|
} }
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
onClick={ () =>
|
||||||
|
updateFormValue(
|
||||||
|
`${ config.mode }ManuallyConnected`,
|
||||||
|
true
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates data for a given mode (sandbox or production).
|
||||||
|
*
|
||||||
|
* @param {Object} config - Configuration for the mode.
|
||||||
|
* @param {Object} settings - Current settings.
|
||||||
|
* @param {Function} updateFormValue - Callback to update settings.
|
||||||
|
* @return {Object} Mode configuration.
|
||||||
|
*/
|
||||||
|
const generateModeData = ( config, settings, updateFormValue ) => ( {
|
||||||
|
title: config.title,
|
||||||
|
description: config.description,
|
||||||
|
connectTitle: __(
|
||||||
|
`Connect ${ config.label } Account`,
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
connectDescription: config.connectDescription,
|
||||||
|
options: generateOptions( config, settings, updateFormValue ),
|
||||||
|
} );
|
||||||
|
|
||||||
|
export const sandboxData = ( { settings = {}, updateFormValue = () => {} } ) =>
|
||||||
|
generateModeData(
|
||||||
|
{
|
||||||
|
mode: 'sandbox',
|
||||||
|
label: 'Sandbox',
|
||||||
|
title: __( 'Sandbox', 'woocommerce-paypal-payments' ),
|
||||||
|
description: __(
|
||||||
|
"Test your site in PayPal's Sandbox environment.",
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
connectDescription: __(
|
||||||
|
'Connect a PayPal Sandbox account in order to test your website. Transactions made will not result in actual money movement. Do not fulfil orders completed in Sandbox mode.',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
labelTitle: __( 'Sandbox Mode', 'woocommerce-paypal-payments' ),
|
||||||
|
labelDescription: __(
|
||||||
|
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
buttonText: __(
|
||||||
|
'Connect Sandbox Account',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
clientIdTitle: __(
|
||||||
|
'Sandbox Client ID',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
secretKeyTitle: __(
|
||||||
|
'Sandbox Secret Key',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
settings,
|
||||||
|
updateFormValue
|
||||||
|
);
|
||||||
|
|
||||||
|
export const productionData = ( {
|
||||||
|
settings = {},
|
||||||
|
updateFormValue = () => {},
|
||||||
|
} ) =>
|
||||||
|
generateModeData(
|
||||||
|
{
|
||||||
|
mode: 'production',
|
||||||
|
label: 'Live',
|
||||||
|
title: __( 'Live Payments', 'woocommerce-paypal-payments' ),
|
||||||
|
description: __(
|
||||||
|
'Your site is currently configured in Sandbox mode to test payments. When you are ready, launch your site and receive live payments via PayPal.',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
connectDescription: __(
|
||||||
|
'Connect a live PayPal account to launch your site and receive live payments via PayPal. PayPal will guide you through the setup process.',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
labelTitle: __( 'Production Mode', 'woocommerce-paypal-payments' ),
|
||||||
|
labelDescription: __(
|
||||||
|
'Activate Production mode to connect your live account and receive live payments via PayPal. Stay connected in Sandbox mode to continue testing payments before going live.',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
buttonText: __(
|
||||||
|
'Set up and connect live PayPal Account',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
clientIdTitle: __(
|
||||||
|
'Live Account Client ID',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
secretKeyTitle: __(
|
||||||
|
'Live Account Secret Key',
|
||||||
|
'woocommerce-paypal-payments'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
settings,
|
||||||
|
updateFormValue
|
||||||
|
);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue
