mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +08:00
♻️ Extract connection logic to new hook
# Conflicts: # modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
This commit is contained in:
Philipp Stracker
parent
a3f900b298
commit
c79b1196fb
3 changed files with 202 additions and 85 deletions
|
|
@ -1,95 +1,70 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Button, TextControl } from '@wordpress/components';
|
||||
import { useRef, useMemo } from '@wordpress/element';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { store as noticesStore } from '@wordpress/notices';
|
||||
import { useRef } from '@wordpress/element';
|
||||
|
||||
import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock';
|
||||
import Separator from '../../../ReusableComponents/Separator';
|
||||
import DataStoreControl from '../../../ReusableComponents/DataStoreControl';
|
||||
import { CommonHooks } from '../../../../data';
|
||||
import { openPopup } from '../../../../utils/window';
|
||||
import {
|
||||
useSandboxConnection,
|
||||
useManualConnection,
|
||||
} from '../../../../hooks/useHandleConnections';
|
||||
|
||||
const AdvancedOptionsForm = ( { setCompleted } ) => {
|
||||
import ConnectionButton from './ConnectionButton';
|
||||
|
||||
const AdvancedOptionsForm = () => {
|
||||
const { isBusy } = CommonHooks.useBusyState();
|
||||
const { isSandboxMode, setSandboxMode, connectViaSandbox } =
|
||||
CommonHooks.useSandbox();
|
||||
const { isSandboxMode, setSandboxMode } = useSandboxConnection();
|
||||
const {
|
||||
handleConnectViaIdAndSecret,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
connectViaIdAndSecret,
|
||||
} = CommonHooks.useManualConnection();
|
||||
} = useManualConnection();
|
||||
|
||||
const { createSuccessNotice, createErrorNotice } =
|
||||
useDispatch( noticesStore );
|
||||
const refClientId = useRef( null );
|
||||
const refClientSecret = useRef( null );
|
||||
|
||||
const isValidClientId = useMemo( () => {
|
||||
return /^A[\w-]{79}$/.test( clientId );
|
||||
}, [ clientId ] );
|
||||
|
||||
const isFormValid = useMemo( () => {
|
||||
return isValidClientId && clientId && clientSecret;
|
||||
}, [ isValidClientId, clientId, clientSecret ] );
|
||||
|
||||
const handleServerError = ( res, genericMessage ) => {
|
||||
console.error( 'Connection error', res );
|
||||
createErrorNotice( res?.message ?? genericMessage );
|
||||
};
|
||||
|
||||
const handleServerSuccess = () => {
|
||||
createSuccessNotice(
|
||||
__( 'Connected to PayPal', 'woocommerce-paypal-payments' )
|
||||
);
|
||||
setCompleted( true );
|
||||
};
|
||||
|
||||
const handleSandboxConnect = async () => {
|
||||
const res = await connectViaSandbox();
|
||||
|
||||
if ( ! res.success || ! res.data ) {
|
||||
handleServerError(
|
||||
res,
|
||||
__(
|
||||
'Could not generate a Sandbox login link.',
|
||||
const validateManualConnectionForm = () => {
|
||||
const fields = [
|
||||
{
|
||||
ref: refClientId,
|
||||
value: clientId,
|
||||
errorMessage: __(
|
||||
'Please enter your Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
);
|
||||
return;
|
||||
),
|
||||
},
|
||||
{
|
||||
ref: refClientSecret,
|
||||
value: clientSecret,
|
||||
errorMessage: __(
|
||||
'Please enter your Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
for ( const { ref, value, errorMessage } of fields ) {
|
||||
if ( value ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
ref?.current?.focus();
|
||||
throw new Error( errorMessage );
|
||||
}
|
||||
|
||||
const connectionUrl = res.data;
|
||||
const popup = openPopup( connectionUrl );
|
||||
|
||||
if ( ! popup ) {
|
||||
createErrorNotice(
|
||||
__(
|
||||
'Popup blocked. Please allow popups for this site to connect to PayPal.',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
);
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleManualConnect = async () => {
|
||||
const res = await connectViaIdAndSecret();
|
||||
|
||||
if ( res.success ) {
|
||||
handleServerSuccess();
|
||||
} else {
|
||||
handleServerError(
|
||||
res,
|
||||
__(
|
||||
'Could not connect to PayPal. Please make sure your Client ID and Secret Key are correct.',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
);
|
||||
}
|
||||
await handleConnectViaIdAndSecret( {
|
||||
validation: validateManualConnectionForm,
|
||||
} );
|
||||
};
|
||||
|
||||
const advancedUsersDescription = sprintf(
|
||||
|
|
@ -116,9 +91,17 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
|
|||
setToggled={ setSandboxMode }
|
||||
isLoading={ isBusy }
|
||||
>
|
||||
<Button onClick={ handleSandboxConnect } variant="secondary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
<ConnectionButton
|
||||
title={ __(
|
||||
'Connect Account',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
showIcon={ false }
|
||||
variant="secondary"
|
||||
isSandbox={
|
||||
true /* This button always connects to sandbox */
|
||||
}
|
||||
/>
|
||||
</SettingsToggleBlock>
|
||||
<Separator withLine={ false } />
|
||||
<SettingsToggleBlock
|
||||
|
|
@ -147,18 +130,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
|
|||
}
|
||||
value={ clientId }
|
||||
onChange={ setClientId }
|
||||
className={
|
||||
clientId && ! isValidClientId ? 'has-error' : ''
|
||||
}
|
||||
/>
|
||||
{ clientId && ! isValidClientId && (
|
||||
<p className="client-id-error">
|
||||
{ __(
|
||||
'Please enter a valid Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
) }
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
ref={ refClientSecret }
|
||||
|
|
@ -177,11 +149,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
|
|||
onChange={ setClientSecret }
|
||||
type="password"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={ handleManualConnect }
|
||||
disabled={ ! isFormValid }
|
||||
>
|
||||
<Button variant="secondary" onClick={ handleManualConnect }>
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import { Button } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { openSignup } from '../../../ReusableComponents/Icons';
|
||||
import { useSandboxConnection } from '../../../../hooks/useHandleConnections';
|
||||
|
||||
const ConnectionButton = ( {
|
||||
title,
|
||||
isSandbox = false,
|
||||
variant = 'primary',
|
||||
showIcon = true,
|
||||
} ) => {
|
||||
const className = 'ppcp-r-connection-button';
|
||||
const { handleSandboxConnect } = useSandboxConnection();
|
||||
|
||||
const handleConnectClick = () => {
|
||||
if ( isSandbox ) {
|
||||
handleSandboxConnect();
|
||||
} else {
|
||||
// Handle live connection logic here
|
||||
console.warn( 'Live connection not implemented yet' );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={ className }
|
||||
variant={ variant }
|
||||
icon={ showIcon ? openSignup : null }
|
||||
onClick={ handleConnectClick }
|
||||
>
|
||||
<span className="button-title">{ title }</span>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConnectionButton;
|
||||
113
modules/ppcp-settings/resources/js/hooks/useHandleConnections.js
Normal file
113
modules/ppcp-settings/resources/js/hooks/useHandleConnections.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
import { store as noticesStore } from '@wordpress/notices';
|
||||
|
||||
import { CommonHooks, OnboardingHooks } from '../data';
|
||||
import { openPopup } from '../utils/window';
|
||||
|
||||
const useCommonConnectionLogic = () => {
|
||||
const { setCompleted } = OnboardingHooks.useSteps();
|
||||
const { createSuccessNotice, createErrorNotice } =
|
||||
useDispatch( noticesStore );
|
||||
|
||||
const handleServerError = ( res, genericMessage ) => {
|
||||
console.error( 'Connection error', res );
|
||||
createErrorNotice( res?.message ?? genericMessage );
|
||||
};
|
||||
|
||||
const handleServerSuccess = () => {
|
||||
createSuccessNotice(
|
||||
__( 'Connected to PayPal', 'woocommerce-paypal-payments' )
|
||||
);
|
||||
setCompleted( true );
|
||||
};
|
||||
|
||||
return { handleServerError, handleServerSuccess, createErrorNotice };
|
||||
};
|
||||
|
||||
export const useSandboxConnection = () => {
|
||||
const { connectViaSandbox, isSandboxMode, setSandboxMode } =
|
||||
CommonHooks.useSandbox();
|
||||
const { handleServerError, createErrorNotice } = useCommonConnectionLogic();
|
||||
|
||||
const handleSandboxConnect = async () => {
|
||||
const res = await connectViaSandbox();
|
||||
|
||||
if ( ! res.success || ! res.data ) {
|
||||
handleServerError(
|
||||
res,
|
||||
__(
|
||||
'Could not generate a Sandbox login link.',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const connectionUrl = res.data;
|
||||
const popup = openPopup( connectionUrl );
|
||||
|
||||
if ( ! popup ) {
|
||||
createErrorNotice(
|
||||
__(
|
||||
'Popup blocked. Please allow popups for this site to connect to PayPal.',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
handleSandboxConnect,
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
};
|
||||
};
|
||||
|
||||
export const useManualConnection = () => {
|
||||
const {
|
||||
connectViaIdAndSecret,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = CommonHooks.useManualConnection();
|
||||
const { handleServerError, handleServerSuccess, createErrorNotice } =
|
||||
useCommonConnectionLogic();
|
||||
|
||||
const handleConnectViaIdAndSecret = async ( { validation } = {} ) => {
|
||||
if ( 'function' === typeof validation ) {
|
||||
try {
|
||||
validation();
|
||||
} catch ( exception ) {
|
||||
createErrorNotice( exception.message );
|
||||
return;
|
||||
}
|
||||
}
|
||||
const res = await connectViaIdAndSecret();
|
||||
|
||||
if ( res.success ) {
|
||||
handleServerSuccess();
|
||||
} else {
|
||||
handleServerError(
|
||||
res,
|
||||
__(
|
||||
'Could not connect to PayPal. Please make sure your Client ID and Secret Key are correct.',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
handleConnectViaIdAndSecret,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
};
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue
