From 5ad4cce8f7dcd223587cf304185d82c2e430b0f8 Mon Sep 17 00:00:00 2001
From: "Alex P." <alex.pantec@gmail.com>
Date: Thu, 31 Oct 2024 09:47:06 +0200
Subject: [PATCH] Perform manual connection request

---
 .../Screens/Onboarding/StepWelcome.js         | 30 +++++++++++++++----
 .../resources/js/data/onboarding/hooks.js     | 21 ++++++++++++-
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
index b99caca25..1aab910fd 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
@@ -4,10 +4,10 @@ import { Button, TextControl } from '@wordpress/components';
 import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
 import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
 import Separator from '../../ReusableComponents/Separator';
-import { useOnboardingDetails } from '../../../data';
+import { useManualConnect, useOnboardingDetails } from '../../../data';
 import DataStoreControl from '../../ReusableComponents/DataStoreControl';
 
-const StepWelcome = ( { setStep, currentStep } ) => {
+const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 	return (
 		<div className="ppcp-r-page-welcome">
 			<OnboardingHeader
@@ -37,7 +37,7 @@ const StepWelcome = ( { setStep, currentStep } ) => {
 					className="ppcp-r-page-welcome-or-separator"
 					text={ __( 'or', 'woocommerce-paypal-payments' ) }
 				/>
-				<WelcomeForm />
+				<WelcomeForm setCompleted={ setCompleted } />
 			</div>
 		</div>
 	);
@@ -74,7 +74,7 @@ const WelcomeFeatures = () => {
 	);
 };
 
-const WelcomeForm = () => {
+const WelcomeForm = ( { setCompleted } ) => {
 	const {
 		isSandboxMode,
 		setSandboxMode,
@@ -86,6 +86,26 @@ const WelcomeForm = () => {
 		setClientSecret,
 	} = 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(
 		// translators: %s: Link to PayPal REST application guide
 		__(
@@ -156,7 +176,7 @@ const WelcomeForm = () => {
 					onChange={ setClientSecret }
 					type="password"
 				/>
-				<Button variant="secondary">
+				<Button variant="secondary" onClick={ handleConnect }>
 					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
 				</Button>
 			</SettingsToggleBlock>
diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
index 66bfec24a..909f9b66b 100644
--- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js
@@ -1,5 +1,6 @@
 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 = () => {
 	const {
@@ -82,3 +83,21 @@ export const useOnboardingStep = () => {
 		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,
+	};
+};