mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
♻️ Split the advanced form into 2 sub-components
This commit is contained in:
Philipp Stracker
parent
54b174e447
commit
0752436f00
3 changed files with 197 additions and 199 deletions
|
|
@ -1,204 +1,13 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Button, TextControl } from '@wordpress/components';
|
||||
import {
|
||||
useRef,
|
||||
useState,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useCallback,
|
||||
} from '@wordpress/element';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock';
|
||||
import Separator from '../../../ReusableComponents/Separator';
|
||||
import DataStoreControl from '../../../ReusableComponents/DataStoreControl';
|
||||
import {
|
||||
useSandboxConnection,
|
||||
useDirectAuthentication,
|
||||
} from '../../../../hooks/useHandleConnections';
|
||||
import ConnectionButton from './ConnectionButton';
|
||||
import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
|
||||
|
||||
const FORM_ERRORS = {
|
||||
noClientId: __(
|
||||
'Please enter your Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
noClientSecret: __(
|
||||
'Please enter your Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
invalidClientId: __(
|
||||
'Please enter a valid Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
};
|
||||
import SandboxConnectionForm from './SandboxConnectionForm';
|
||||
import ManualConnectionForm from './ManualConnectionForm';
|
||||
|
||||
const AdvancedOptionsForm = () => {
|
||||
const [ clientValid, setClientValid ] = useState( false );
|
||||
const [ secretValid, setSecretValid ] = useState( false );
|
||||
|
||||
const { isSandboxMode, setSandboxMode } = useSandboxConnection();
|
||||
const {
|
||||
handleDirectAuthentication,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useDirectAuthentication();
|
||||
|
||||
const refClientId = useRef( null );
|
||||
const refClientSecret = useRef( null );
|
||||
|
||||
const validateManualConnectionForm = useCallback( () => {
|
||||
const checks = [
|
||||
{
|
||||
ref: refClientId,
|
||||
valid: () => clientId,
|
||||
errorMessage: FORM_ERRORS.noClientId,
|
||||
},
|
||||
{
|
||||
ref: refClientId,
|
||||
valid: () => clientValid,
|
||||
errorMessage: FORM_ERRORS.invalidClientId,
|
||||
},
|
||||
{
|
||||
ref: refClientSecret,
|
||||
valid: () => clientSecret && secretValid,
|
||||
errorMessage: FORM_ERRORS.noClientSecret,
|
||||
},
|
||||
];
|
||||
|
||||
for ( const { ref, valid, errorMessage } of checks ) {
|
||||
if ( valid() ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
ref?.current?.focus();
|
||||
throw new Error( errorMessage );
|
||||
}
|
||||
}, [ clientId, clientSecret, clientValid, secretValid ] );
|
||||
|
||||
const handleManualConnect = useCallback(
|
||||
() =>
|
||||
handleDirectAuthentication( {
|
||||
validation: validateManualConnectionForm,
|
||||
} ),
|
||||
[ handleDirectAuthentication, validateManualConnectionForm ]
|
||||
);
|
||||
|
||||
useEffect( () => {
|
||||
setClientValid( ! clientId || /^A[\w-]{79}$/.test( clientId ) );
|
||||
setSecretValid( clientSecret && clientSecret.length > 0 );
|
||||
}, [ clientId, clientSecret ] );
|
||||
|
||||
const clientIdLabel = useMemo(
|
||||
() =>
|
||||
isSandboxMode
|
||||
? __( 'Sandbox Client ID', 'woocommerce-paypal-payments' )
|
||||
: __( 'Live Client ID', 'woocommerce-paypal-payments' ),
|
||||
[ isSandboxMode ]
|
||||
);
|
||||
|
||||
const secretKeyLabel = useMemo(
|
||||
() =>
|
||||
isSandboxMode
|
||||
? __( 'Sandbox Secret Key', 'woocommerce-paypal-payments' )
|
||||
: __( 'Live Secret Key', 'woocommerce-paypal-payments' ),
|
||||
[ isSandboxMode ]
|
||||
);
|
||||
|
||||
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 (
|
||||
<>
|
||||
<BusyStateWrapper>
|
||||
<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 }
|
||||
>
|
||||
<ConnectionButton
|
||||
title={ __(
|
||||
'Connect Account',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
showIcon={ false }
|
||||
variant="secondary"
|
||||
className="small-button"
|
||||
isSandbox={
|
||||
true /* This button always connects to sandbox */
|
||||
}
|
||||
/>
|
||||
</SettingsToggleBlock>
|
||||
</BusyStateWrapper>
|
||||
<SandboxConnectionForm />
|
||||
<Separator withLine={ false } />
|
||||
<BusyStateWrapper
|
||||
onBusy={ ( props ) => ( {
|
||||
disabled: true,
|
||||
label: props.label + ' ...',
|
||||
} ) }
|
||||
>
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ advancedUsersDescription }
|
||||
isToggled={ !! isManualConnectionMode }
|
||||
setToggled={ setManualConnectionMode }
|
||||
>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
ref={ refClientId }
|
||||
label={ clientIdLabel }
|
||||
value={ clientId }
|
||||
onChange={ setClientId }
|
||||
className={ classNames( {
|
||||
'has-error': ! clientValid,
|
||||
} ) }
|
||||
/>
|
||||
{ clientValid || (
|
||||
<p className="client-id-error">
|
||||
{ FORM_ERRORS.invalidClientId }
|
||||
</p>
|
||||
) }
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
ref={ refClientSecret }
|
||||
label={ secretKeyLabel }
|
||||
value={ clientSecret }
|
||||
onChange={ setClientSecret }
|
||||
type="password"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="small-button"
|
||||
onClick={ handleManualConnect }
|
||||
>
|
||||
{ __(
|
||||
'Connect Account',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</BusyStateWrapper>
|
||||
<ManualConnectionForm />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,188 @@
|
|||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from '@wordpress/element';
|
||||
import { Button, TextControl } from '@wordpress/components';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock';
|
||||
import DataStoreControl from '../../../ReusableComponents/DataStoreControl';
|
||||
import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
|
||||
import {
|
||||
useDirectAuthentication,
|
||||
useSandboxConnection,
|
||||
} from '../../../../hooks/useHandleConnections';
|
||||
import { OnboardingHooks } from '../../../../data';
|
||||
|
||||
const FORM_ERRORS = {
|
||||
noClientId: __(
|
||||
'Please enter your Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
noClientSecret: __(
|
||||
'Please enter your Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
invalidClientId: __(
|
||||
'Please enter a valid Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
};
|
||||
|
||||
const ManualConnectionForm = () => {
|
||||
const [ clientValid, setClientValid ] = useState( false );
|
||||
const [ secretValid, setSecretValid ] = useState( false );
|
||||
const { isSandboxMode } = useSandboxConnection();
|
||||
const {
|
||||
manualClientId,
|
||||
setManualClientId,
|
||||
manualClientSecret,
|
||||
setManualClientSecret,
|
||||
} = OnboardingHooks.useManualConnectionForm();
|
||||
const {
|
||||
handleDirectAuthentication,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
} = useDirectAuthentication();
|
||||
const refClientId = useRef( null );
|
||||
const refClientSecret = useRef( null );
|
||||
|
||||
// Form data validation and sanitation.
|
||||
const getManualConnectionDetails = useCallback( () => {
|
||||
const checks = [
|
||||
{
|
||||
ref: refClientId,
|
||||
valid: () => manualClientId,
|
||||
errorMessage: FORM_ERRORS.noClientId,
|
||||
},
|
||||
{
|
||||
ref: refClientId,
|
||||
valid: () => clientValid,
|
||||
errorMessage: FORM_ERRORS.invalidClientId,
|
||||
},
|
||||
{
|
||||
ref: refClientSecret,
|
||||
valid: () => manualClientSecret && secretValid,
|
||||
errorMessage: FORM_ERRORS.noClientSecret,
|
||||
},
|
||||
];
|
||||
|
||||
for ( const { ref, valid, errorMessage } of checks ) {
|
||||
if ( valid() ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
ref?.current?.focus();
|
||||
throw new Error( errorMessage );
|
||||
}
|
||||
|
||||
return {
|
||||
clientId: manualClientId,
|
||||
clientSecret: manualClientSecret,
|
||||
isSandbox: isSandboxMode,
|
||||
};
|
||||
}, [
|
||||
manualClientId,
|
||||
manualClientSecret,
|
||||
isSandboxMode,
|
||||
clientValid,
|
||||
secretValid,
|
||||
] );
|
||||
|
||||
// On-the-fly form validation.
|
||||
useEffect( () => {
|
||||
setClientValid(
|
||||
! manualClientId || /^A[\w-]{79}$/.test( manualClientId )
|
||||
);
|
||||
setSecretValid( manualClientSecret && manualClientSecret.length > 0 );
|
||||
}, [ manualClientId, manualClientSecret ] );
|
||||
|
||||
// Environment-specific field labels.
|
||||
const clientIdLabel = useMemo(
|
||||
() =>
|
||||
isSandboxMode
|
||||
? __( 'Sandbox Client ID', 'woocommerce-paypal-payments' )
|
||||
: __( 'Live Client ID', 'woocommerce-paypal-payments' ),
|
||||
[ isSandboxMode ]
|
||||
);
|
||||
|
||||
const secretKeyLabel = useMemo(
|
||||
() =>
|
||||
isSandboxMode
|
||||
? __( 'Sandbox Secret Key', 'woocommerce-paypal-payments' )
|
||||
: __( 'Live Secret Key', 'woocommerce-paypal-payments' ),
|
||||
[ isSandboxMode ]
|
||||
);
|
||||
|
||||
// Translations with placeholders.
|
||||
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'
|
||||
);
|
||||
|
||||
// Button click handler.
|
||||
const handleManualConnect = useCallback(
|
||||
() => handleDirectAuthentication( getManualConnectionDetails ),
|
||||
[ handleDirectAuthentication, getManualConnectionDetails ]
|
||||
);
|
||||
|
||||
return (
|
||||
<BusyStateWrapper
|
||||
onBusy={ ( props ) => ( {
|
||||
disabled: true,
|
||||
label: props.label + ' ...',
|
||||
} ) }
|
||||
>
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ advancedUsersDescription }
|
||||
isToggled={ !! isManualConnectionMode }
|
||||
setToggled={ setManualConnectionMode }
|
||||
>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
ref={ refClientId }
|
||||
label={ clientIdLabel }
|
||||
value={ manualClientId }
|
||||
onChange={ setManualClientId }
|
||||
className={ classNames( {
|
||||
'has-error': ! clientValid,
|
||||
} ) }
|
||||
/>
|
||||
{ clientValid || (
|
||||
<p className="client-id-error">
|
||||
{ FORM_ERRORS.invalidClientId }
|
||||
</p>
|
||||
) }
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
ref={ refClientSecret }
|
||||
label={ secretKeyLabel }
|
||||
value={ manualClientSecret }
|
||||
onChange={ setManualClientSecret }
|
||||
type="password"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="small-button"
|
||||
onClick={ handleManualConnect }
|
||||
>
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</BusyStateWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManualConnectionForm;
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
|
||||
import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import ConnectionButton from './ConnectionButton';
|
||||
import { useSandboxConnection } from '../../../../hooks/useHandleConnections';
|
||||
import ConnectionButton from './ConnectionButton';
|
||||
|
||||
const SandboxLoginSection = () => {
|
||||
const SandboxConnectionForm = () => {
|
||||
const { isSandboxMode, setSandboxMode } = useSandboxConnection();
|
||||
|
||||
return (
|
||||
|
|
@ -38,4 +39,4 @@ const SandboxLoginSection = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default SandboxLoginSection;
|
||||
export default SandboxConnectionForm;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
