From af9eca7ef60c885f6c8baecb9b005e26f5dd7858 Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Fri, 4 Oct 2024 11:34:19 +0200
Subject: [PATCH] Axo Block: Display card fields when the profile is missing a
 card

---
 .../js/components/Payment/Payment.js          | 68 ++++++++++++++-----
 1 file changed, 50 insertions(+), 18 deletions(-)

diff --git a/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
index e1191c8ce..2fcb7e0f4 100644
--- a/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
+++ b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
@@ -16,17 +16,29 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
 	const [ isCardElementReady, setIsCardElementReady ] = useState( false );
 
 	// Select relevant states from the AXO store
-	const { isGuest, isEmailLookupCompleted } = useSelect(
+	const { isGuest, isEmailLookupCompleted, cardDetails } = useSelect(
 		( select ) => ( {
 			isGuest: select( STORE_NAME ).getIsGuest(),
 			isEmailLookupCompleted:
 				select( STORE_NAME ).getIsEmailLookupCompleted(),
+			cardDetails: select( STORE_NAME ).getCardDetails(),
 		} ),
 		[]
 	);
 
+	/**
+	 * Loads and renders the Fastlane card fields component when necessary.
+	 * This function is called for:
+	 * 1. Guest users who have completed email lookup
+	 * 2. Authenticated users who are missing card details
+	 *
+	 * The component allows users to enter new card details for payment.
+	 */
 	const loadPaymentComponent = useCallback( async () => {
-		if ( isGuest && isEmailLookupCompleted && isCardElementReady ) {
+		if (
+			( isGuest && isEmailLookupCompleted && isCardElementReady ) ||
+			( ! isGuest && ! cardDetails )
+		) {
 			const paymentComponent = await fastlaneSdk.FastlaneCardComponent(
 				{}
 			);
@@ -37,6 +49,7 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
 		isGuest,
 		isEmailLookupCompleted,
 		isCardElementReady,
+		cardDetails,
 		fastlaneSdk,
 		onPaymentLoad,
 	] );
@@ -53,22 +66,41 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
 		loadPaymentComponent();
 	}, [ loadPaymentComponent ] );
 
-	// Conditional rendering based on user state:
-	// 1. If authenticated: Render the Card component
-	// 2. If guest with completed email lookup: Render the card fields
-	// 3. If guest without completed email lookup: Render a message to enter email
-	if ( isGuest ) {
-		if ( isEmailLookupCompleted ) {
+	/**
+	 * Determines which component to render based on the current state.
+	 *
+	 * Rendering logic:
+	 * 1. For guests without completed email lookup: Show message to enter email
+	 * 2. For guests with completed email lookup: Render Fastlane card fields
+	 * 3. For authenticated users without card details: Render Fastlane card fields
+	 * 4. For authenticated users with card details: Render Card component
+	 *
+	 * @return {JSX.Element} The appropriate component based on the current state
+	 */
+	const renderPaymentComponent = () => {
+		// Case 1: Guest user without completed email lookup
+		if ( isGuest && ! isEmailLookupCompleted ) {
+			return (
+				<div id="ppcp-axo-block-radio-content">
+					{ __(
+						'Enter your email address above to continue.',
+						'woocommerce-paypal-payments'
+					) }
+				</div>
+			);
+		}
+
+		// Case 2 & 3: Guest with completed email lookup or authenticated user without card details
+		if (
+			( isGuest && isEmailLookupCompleted ) ||
+			( ! isGuest && ! cardDetails )
+		) {
 			return <div id="fastlane-card" key="fastlane-card" />;
 		}
-		return (
-			<div id="ppcp-axo-block-radio-content">
-				{ __(
-					'Enter your email address above to continue.',
-					'woocommerce-paypal-payments'
-				) }
-			</div>
-		);
-	}
-	return <Card fastlaneSdk={ fastlaneSdk } showWatermark={ ! isGuest } />;
+
+		// Case 4: Authenticated user with card details
+		return <Card fastlaneSdk={ fastlaneSdk } showWatermark={ ! isGuest } />;
+	};
+
+	return renderPaymentComponent();
 };