✨ Add React logic for final ISU authentication

modules/ppcp-settings/resources/js/data/common/action-types.js

@@ -20,6 +20,7 @@ export default {
 	// Controls - always start with "DO_".
 	DO_PERSIST_DATA: 'COMMON:DO_PERSIST_DATA',
 	DO_MANUAL_AUTHENTICATION: 'COMMON:DO_MANUAL_AUTHENTICATION',
+	DO_ISU_AUTHENTICATION: 'COMMON:DO_ISU_AUTHENTICATION',
 	DO_GENERATE_ONBOARDING_URL: 'COMMON:DO_GENERATE_ONBOARDING_URL',
 	DO_REFRESH_MERCHANT: 'COMMON:DO_REFRESH_MERCHANT',
 	DO_REFRESH_FEATURES: 'DO_REFRESH_FEATURES',

modules/ppcp-settings/resources/js/data/common/actions.js

@@ -189,6 +189,34 @@ export const connectViaSecret = function* () {
 	};
 };
 
+/**
+ * Side effect. Completes the ISU login by authenticating the user via the one time sharedId and
+ * authCode provided by PayPal.
+ *
+ * This action accepts parameters instead of fetching data from the Redux state because all
+ * parameters are dynamically generated during the authentication process, and not managed by our
+ * Redux store.
+ *
+ * @param {string} sharedId    - One-time authentication ID that PayPal "shares" with us.
+ * @param {string} authCode    - Matching one-time authentication code to validate the login.
+ * @param {string} environment - [production|sandbox].
+ * @return {Action} The action.
+ */
+export const connectViaAuthCode = function* (
+	sharedId,
+	authCode,
+	environment
+) {
+	const useSandbox = 'sandbox' === environment;
+
+	return yield {
+		type: ACTION_TYPES.DO_ISU_AUTHENTICATION,
+		sharedId,
+		authCode,
+		useSandbox,
+	};
+};
+
 /**
  * Side effect. Clears and refreshes the merchant data via a REST request.
  *

modules/ppcp-settings/resources/js/data/common/controls.js

@@ -15,6 +15,7 @@ import {
 	REST_CONNECTION_URL_PATH,
 	REST_HYDRATE_MERCHANT_PATH,
 	REST_REFRESH_FEATURES_PATH,
+	REST_ISU_AUTHENTICATION_PATH,
 } from './constants';
 import ACTION_TYPES from './action-types';
 
@@ -72,6 +73,29 @@ export const controls = {
 		}
 	},
 
+	async [ ACTION_TYPES.DO_ISU_AUTHENTICATION ]( {
+		sharedId,
+		authCode,
+		useSandbox,
+	} ) {
+		try {
+			return await apiFetch( {
+				path: REST_ISU_AUTHENTICATION_PATH,
+				method: 'POST',
+				data: {
+					sharedId,
+					authCode,
+					useSandbox,
+				},
+			} );
+		} catch ( e ) {
+			return {
+				success: false,
+				error: e,
+			};
+		}
+	},
+
 	async [ ACTION_TYPES.DO_REFRESH_MERCHANT ]() {
 		try {
 			return await apiFetch( { path: REST_HYDRATE_MERCHANT_PATH } );

modules/ppcp-settings/resources/js/data/common/hooks.js

@@ -34,6 +34,7 @@ const useHooks = () => {
 		sandboxOnboardingUrl,
 		productionOnboardingUrl,
 		connectViaSecret,
+		connectViaAuthCode,
 	} = useDispatch( STORE_NAME );
 
 	// Transient accessors.
@@ -80,6 +81,7 @@ const useHooks = () => {
 		sandboxOnboardingUrl,
 		productionOnboardingUrl,
 		connectViaSecret,
+		connectViaAuthCode,
 		merchant,
 		wooSettings,
 	};
@@ -106,6 +108,7 @@ export const useAuthentication = () => {
 		clientSecret,
 		setClientSecret,
 		connectViaSecret,
+		connectViaAuthCode,
 	} = useHooks();
 
 	return {
@@ -116,6 +119,7 @@ export const useAuthentication = () => {
 		clientSecret,
 		setClientSecret,
 		connectViaSecret,
+		connectViaAuthCode,
 	};
 };
 

modules/ppcp-settings/resources/js/hooks/useHandleConnections.js

@@ -44,6 +44,7 @@ export const useHandleOnboardingButton = ( isSandbox ) => {
 	const { productionOnboardingUrl } = CommonHooks.useProduction();
 	const products = OnboardingHooks.useDetermineProducts();
 	const { withActivity } = CommonHooks.useBusyState();
+	const { connectViaAuthCode } = CommonHooks.useAuthentication();
 	const [ onboardingUrl, setOnboardingUrl ] = useState( '' );
 	const [ scriptLoaded, setScriptLoaded ] = useState( false );
 	const timerRef = useRef( null );
@@ -112,7 +113,7 @@ export const useHandleOnboardingButton = ( isSandbox ) => {
 
 	const setCompleteHandler = useCallback(
 		( environment ) => {
-			const onComplete = async ( authCode, shareId ) => {
+			const onComplete = async ( authCode, sharedId ) => {
 				/**
 				 * Until now, the full page is blocked by PayPal's semi-transparent, black overlay.
 				 * But at this point, the overlay is removed, while we process the sharedId and
@@ -126,14 +127,10 @@ export const useHandleOnboardingButton = ( isSandbox ) => {
 					ACTIVITIES.CONNECT_ISU,
 					'Validating the connection details',
 					async () => {
-						// TODO -- finish this!
-						console.log(
-							`${ environment }-boarding complete - AUTH: `,
-							authCode
-						);
-						console.log(
-							`${ environment }-boarding complete - SHARE:`,
-							shareId
+						await connectViaAuthCode(
+							authCode,
+							sharedId,
+							environment
 						);
 					}
 				);