🔀 Merge branch 'PCP-3380’

modules/ppcp-axo-block/resources/css/gateway.scss

@@ -172,7 +172,7 @@ $fast-transition-duration: 0.5s;
 	}
 
 	// 4.7 Validation Error
-	.wc-block-components-validation-error {
+	.wc-block-components-address-form__email .wc-block-components-validation-error {
 		grid-area: error;
 		width: 100%;
 		margin-top: 4px;

modules/ppcp-axo-block/resources/js/components/Payment/Payment.js

@@ -8,24 +8,35 @@ export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
 		select( STORE_NAME ).getIsGuest()
 	);
 
-	// Memoized Fastlane card rendering
+	const isEmailLookupCompleted = useSelect( ( select ) =>
+		select( STORE_NAME ).getIsEmailLookupCompleted()
+	);
+
 	const loadPaymentComponent = useCallback( async () => {
-		if ( isGuest ) {
+		if ( isGuest && isEmailLookupCompleted ) {
 			const paymentComponent = await fastlaneSdk.FastlaneCardComponent(
 				{}
 			);
 			paymentComponent.render( `#fastlane-card` );
 			onPaymentLoad( paymentComponent );
 		}
-	}, [ isGuest, fastlaneSdk, onPaymentLoad ] );
+	}, [ isGuest, isEmailLookupCompleted, fastlaneSdk, onPaymentLoad ] );
 
 	useEffect( () => {
 		loadPaymentComponent();
 	}, [ loadPaymentComponent ] );
 
-	return isGuest ? (
-		<div id="fastlane-card" key="fastlane-card" />
-	) : (
+	if ( isGuest ) {
+		if ( isEmailLookupCompleted ) {
+			return <div id="fastlane-card" key="fastlane-card" />;
+		}
+		return (
+			<div id="ppcp-axo-block-radio-content">
+				Enter your email address above to continue.
+			</div>
+		);
+	}
+	return (
 		<Card
 			card={ card }
 			fastlaneSdk={ fastlaneSdk }

modules/ppcp-axo-block/resources/js/hooks/useHandlePaymentSetup.js

@@ -17,9 +17,15 @@ const useHandlePaymentSetup = (
 		}
 
 		if ( ! cardToken ) {
+			let reason = 'tokenization error';
+
+			if ( ! paymentComponent ) {
+				reason = 'initialization error';
+			}
+
 			return {
 				type: emitResponse.responseTypes.ERROR,
-				message: 'Could not process the payment (tokenization error)',
+				message: `Could not process the payment (${ reason })`,
 			};
 		}
 
@@ -32,11 +38,7 @@ const useHandlePaymentSetup = (
 				},
 			},
 		};
-	}, [
-		card,
-		paymentComponent,
-		tokenizedCustomerData,
-	] );
+	}, [ card, paymentComponent, tokenizedCustomerData ] );
 };
 
 export default useHandlePaymentSetup;

modules/ppcp-axo-block/resources/js/hooks/usePaymentSetup.js

@@ -1,27 +0,0 @@
-import { useEffect } from '@wordpress/element';
-
-const usePaymentSetup = ( onPaymentSetup, emitResponse, card ) => {
-	useEffect( () => {
-		const unsubscribe = onPaymentSetup( async () => {
-			return {
-				type: emitResponse.responseTypes.SUCCESS,
-				meta: {
-					paymentMethodData: {
-						axo_nonce: card?.id,
-					},
-				},
-			};
-		} );
-
-		return () => {
-			unsubscribe();
-		};
-	}, [
-		emitResponse.responseTypes.ERROR,
-		emitResponse.responseTypes.SUCCESS,
-		onPaymentSetup,
-		card,
-	] );
-};
-
-export default usePaymentSetup;

modules/ppcp-axo-block/resources/js/hooks/usePaymentSetupEffect.js

@@ -1,6 +1,10 @@
 import { useEffect, useCallback } from '@wordpress/element';
 
-const usePaymentSetupEffect = ( onPaymentSetup, handlePaymentSetup ) => {
+const usePaymentSetupEffect = (
+	onPaymentSetup,
+	handlePaymentSetup,
+	setPaymentComponent
+) => {
 	/**
 	 * `onPaymentSetup()` fires when we enter the "PROCESSING" state in the checkout flow.
 	 * It pre-processes the payment details and returns data for server-side processing.
@@ -13,10 +17,12 @@ const usePaymentSetupEffect = ( onPaymentSetup, handlePaymentSetup ) => {
 		};
 	}, [ onPaymentSetup, handlePaymentSetup ] );
 
-	const handlePaymentLoad = useCallback( ( component ) => {
-		// We'll return this function instead of calling setPaymentComponent directly
-		return component;
-	}, [] );
+	const handlePaymentLoad = useCallback(
+		( component ) => {
+			setPaymentComponent( component );
+		},
+		[ setPaymentComponent ]
+	);
 
 	return { handlePaymentLoad };
 };

modules/ppcp-axo-block/resources/js/index.js

@@ -6,7 +6,6 @@ import useFastlaneSdk from './hooks/useFastlaneSdk';
 import useTokenizeCustomerData from './hooks/useTokenizeCustomerData';
 import useCardChange from './hooks/useCardChange';
 import useAxoSetup from './hooks/useAxoSetup';
-import usePaymentSetup from './hooks/usePaymentSetup';
 import useAxoCleanup from './hooks/useAxoCleanup';
 import useHandlePaymentSetup from './hooks/useHandlePaymentSetup';
 
@@ -49,11 +48,11 @@ const Axo = ( props ) => {
 		setCard,
 		setWooPhone
 	);
-	usePaymentSetup( onPaymentSetup, emitResponse, card );
 
 	const { handlePaymentLoad } = usePaymentSetupEffect(
 		onPaymentSetup,
-		handlePaymentSetup
+		handlePaymentSetup,
+		setPaymentComponent
 	);
 
 	useAxoCleanup();