mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-01 07:02:48 +08:00
Merge branch 'trunk' into PCP-3834-update-onboarding-wizard-screens-with-new-design
# Conflicts: # modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
This commit is contained in:
Narek Zakarian
commit
e4453030be
116 changed files with 30423 additions and 62928 deletions
|
|
@ -49,31 +49,31 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
|||
};
|
||||
|
||||
const WelcomeFeatures = () => {
|
||||
return (
|
||||
<div className="ppcp-r-welcome-features">
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>{__('Deposits', 'woocommerce-paypal-payments')}</span>
|
||||
<p>{__('Instant', 'woocommerce-paypal-payments')}</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
return (
|
||||
<div className="ppcp-r-welcome-features">
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>{ __( 'Deposits', 'woocommerce-paypal-payments' ) }</span>
|
||||
<p>{ __( 'Instant', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{__('Payment Capture', 'woocommerce-paypal-payments')}
|
||||
{ __( 'Payment Capture', 'woocommerce-paypal-payments' ) }
|
||||
</span>
|
||||
<p>
|
||||
{__(
|
||||
'Authorize only or Capture',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<p>
|
||||
{ __(
|
||||
'Authorize only or Capture',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{__(
|
||||
'Recurring payments',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
{ __(
|
||||
'Recurring payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</span>
|
||||
<p>{__('Supported', 'woocommerce-paypal-payments')}</p>
|
||||
<p>{ __( 'Supported', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -228,114 +228,116 @@ const WelcomeDocs = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const WelcomeForm = ({setCompleted}) => {
|
||||
const {
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingStepWelcome();
|
||||
const WelcomeForm = ( { setCompleted } ) => {
|
||||
const {
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingStepWelcome();
|
||||
|
||||
const {connectManual} = useManualConnect();
|
||||
const { connectManual } = useManualConnect();
|
||||
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
const res = await connectManual(
|
||||
clientId,
|
||||
clientSecret,
|
||||
isSandboxMode
|
||||
);
|
||||
if (!res.success) {
|
||||
throw new Error('Request failed.');
|
||||
}
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
const res = await connectManual(
|
||||
clientId,
|
||||
clientSecret,
|
||||
isSandboxMode
|
||||
);
|
||||
if ( ! res.success ) {
|
||||
throw new Error( 'Request failed.' );
|
||||
}
|
||||
|
||||
setCompleted(true);
|
||||
} catch (exc) {
|
||||
console.error(exc);
|
||||
alert('Connection failed.');
|
||||
}
|
||||
};
|
||||
console.log(`Merchant ID: ${res.merchantId}, email: ${res.email}`);
|
||||
|
||||
const advancedUsersDescription = sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'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'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
);
|
||||
setCompleted( true );
|
||||
} catch ( exc ) {
|
||||
console.error( exc );
|
||||
alert( 'Connection failed.' );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsToggleBlock
|
||||
label={__(
|
||||
'Enable 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'
|
||||
)}
|
||||
isToggled={!!isSandboxMode}
|
||||
setToggled={setSandboxMode}
|
||||
>
|
||||
<Button variant="secondary">
|
||||
{__('Connect Account', 'woocommerce-paypal-payments')}
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<SettingsToggleBlock
|
||||
label={__(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
description={advancedUsersDescription}
|
||||
isToggled={!!isManualConnectionMode}
|
||||
setToggled={setManualConnectionMode}
|
||||
>
|
||||
<DataStoreControl
|
||||
control={TextControl}
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={clientId}
|
||||
onChange={setClientId}
|
||||
/>
|
||||
<DataStoreControl
|
||||
control={TextControl}
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={clientSecret}
|
||||
onChange={setClientSecret}
|
||||
type="password"
|
||||
/>
|
||||
<Button variant="secondary" onClick={handleConnect}>
|
||||
{__('Connect Account', 'woocommerce-paypal-payments')}
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</>
|
||||
);
|
||||
const advancedUsersDescription = sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'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'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Enable 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'
|
||||
) }
|
||||
isToggled={ !! isSandboxMode }
|
||||
setToggled={ setSandboxMode }
|
||||
>
|
||||
<Button variant="secondary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ advancedUsersDescription }
|
||||
isToggled={ !! isManualConnectionMode }
|
||||
setToggled={ setManualConnectionMode }
|
||||
>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientId }
|
||||
onChange={ setClientId }
|
||||
/>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientSecret }
|
||||
onChange={ setClientSecret }
|
||||
type="password"
|
||||
/>
|
||||
<Button variant="secondary" onClick={ handleConnect }>
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepWelcome;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
