woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

Perform manual connection request

Browse source
This commit is contained in:
Alex P. 2024-10-31 09:47:06 +02:00
parent 2ec94b1113
commit 5ad4cce8f7
No known key found for this signature in database
GPG key ID: 54487A734A204D71
2 changed files with 45 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

30
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
View file

@ -4,10 +4,10 @@ import { Button, TextControl } from '@wordpress/components';
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock'; import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
import Separator from '../../ReusableComponents/Separator'; import Separator from '../../ReusableComponents/Separator';
import { useOnboardingDetails } from '../../../data'; import { useManualConnect, useOnboardingDetails } from '../../../data';
import DataStoreControl from '../../ReusableComponents/DataStoreControl'; import DataStoreControl from '../../ReusableComponents/DataStoreControl';
const StepWelcome = ( { setStep, currentStep } ) => { const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
return ( return (
<div className="ppcp-r-page-welcome"> <div className="ppcp-r-page-welcome">
<OnboardingHeader <OnboardingHeader
@ -37,7 +37,7 @@ const StepWelcome = ( { setStep, currentStep } ) => {
className="ppcp-r-page-welcome-or-separator" className="ppcp-r-page-welcome-or-separator"
text={ __( 'or', 'woocommerce-paypal-payments' ) } text={ __( 'or', 'woocommerce-paypal-payments' ) }
/> />
<WelcomeForm /> <WelcomeForm setCompleted={ setCompleted } />
</div> </div>
</div> </div>
); );
@ -74,7 +74,7 @@ const WelcomeFeatures = () => {
); );
}; };
const WelcomeForm = () => { const WelcomeForm = ( { setCompleted } ) => {
const { const {
isSandboxMode, isSandboxMode,
setSandboxMode, setSandboxMode,
@ -86,6 +86,26 @@ const WelcomeForm = () => {
setClientSecret, setClientSecret,
} = useOnboardingDetails(); } = useOnboardingDetails();
const { connectManual } = useManualConnect();
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.' );
}
};
const advancedUsersDescription = sprintf( const advancedUsersDescription = sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
@ -156,7 +176,7 @@ const WelcomeForm = () => {
onChange={ setClientSecret } onChange={ setClientSecret }
type="password" type="password"
/> />
<Button variant="secondary"> <Button variant="secondary" onClick={ handleConnect }>
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) } { __( 'Connect Account', 'woocommerce-paypal-payments' ) }
</Button> </Button>
</SettingsToggleBlock> </SettingsToggleBlock>

21
modules/ppcp-settings/resources/js/data/onboarding/hooks.js
View file

@ -1,5 +1,6 @@
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { STORE_NAME } from '../constants'; import { NAMESPACE, STORE_NAME } from '../constants';
import apiFetch from '@wordpress/api-fetch';
export const useOnboardingDetails = () => { export const useOnboardingDetails = () => {
const { const {
@ -82,3 +83,21 @@ export const useOnboardingStep = () => {
setCompleted: ( state ) => setDetailAndPersist( setCompleted, state ), setCompleted: ( state ) => setDetailAndPersist( setCompleted, state ),
}; };
}; };
export const useManualConnect = () => {
const connectManual = async ( clientId, clientSecret, isSandboxMode ) => {
return await apiFetch( {
path: `${ NAMESPACE }/connect_manual`,
method: 'POST',
data: {
clientId,
clientSecret,
useSandbox: isSandboxMode,
},
} );
};
return {
connectManual,
};
};