mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +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
|
||||
}
|
||||
>
|
||||
{ props.actionProps.value }
|
||||
{ props?.actionProps?.value }
|
||||
</Button>
|
||||
</Action>
|
||||
</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,
|
||||
ContentWrapper,
|
||||
} from '../../../ReusableComponents/SettingsBlocks';
|
||||
import Sandbox from './Blocks/Sandbox';
|
||||
import ConnectionDetails from './Blocks/ConnectionDetails';
|
||||
import Troubleshooting from './Blocks/Troubleshooting/Troubleshooting';
|
||||
import PaypalSettings from './Blocks/PaypalSettings';
|
||||
import OtherSettings from './Blocks/OtherSettings';
|
||||
|
|
@ -27,7 +27,7 @@ const ExpertSettings = ( { updateFormValue, settings } ) => {
|
|||
>
|
||||
<ContentWrapper>
|
||||
<Content>
|
||||
<Sandbox
|
||||
<ConnectionDetails
|
||||
updateFormValue={ updateFormValue }
|
||||
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
