From af9eca7ef60c885f6c8baecb9b005e26f5dd7858 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 4 Oct 2024 11:34:19 +0200 Subject: [PATCH 1/3] 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 ( +
+ { __( + 'Enter your email address above to continue.', + 'woocommerce-paypal-payments' + ) } +
+ ); + } + + // Case 2 & 3: Guest with completed email lookup or authenticated user without card details + if ( + ( isGuest && isEmailLookupCompleted ) || + ( ! isGuest && ! cardDetails ) + ) { return
; } - return ( -
- { __( - 'Enter your email address above to continue.', - 'woocommerce-paypal-payments' - ) } -
- ); - } - return ; + + // Case 4: Authenticated user with card details + return ; + }; + + return renderPaymentComponent(); }; From 12fc44eaa777ed49d31ac2694f98a7f0cdb42403 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 4 Oct 2024 15:13:12 +0200 Subject: [PATCH 2/3] Axo Block: Make sure the container exists before trying to render the Card component --- .../resources/js/components/Payment/Payment.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 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 2fcb7e0f4..0e217f25f 100644 --- a/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js +++ b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js @@ -42,8 +42,12 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => { const paymentComponent = await fastlaneSdk.FastlaneCardComponent( {} ); - paymentComponent.render( `#fastlane-card` ); - onPaymentLoad( paymentComponent ); + // Check if the container exists before rendering + const cardContainer = document.querySelector( '#fastlane-card' ); + if ( cardContainer ) { + paymentComponent.render( `#fastlane-card` ); + onPaymentLoad( paymentComponent ); + } } }, [ isGuest, From 769cd3c3f7a6700d7121183441a2028277748db6 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 4 Oct 2024 16:13:05 +0200 Subject: [PATCH 3/3] Axo Block: Correctly reset setIsEmailLookupCompleted state when a different payment method gets selected --- .../js/components/Payment/Payment.js | 31 ++++++++++++------- .../resources/js/hooks/useAxoCleanup.js | 4 ++- 2 files changed, 22 insertions(+), 13 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 0e217f25f..0043db639 100644 --- a/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js +++ b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js @@ -1,6 +1,7 @@ import { useEffect, useCallback, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { log } from '../../../../../ppcp-axo/resources/js/Helper/Debug'; import { Card } from '../Card'; import { STORE_NAME } from '../../stores/axoStore'; @@ -39,14 +40,18 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => { ( isGuest && isEmailLookupCompleted && isCardElementReady ) || ( ! isGuest && ! cardDetails ) ) { - const paymentComponent = await fastlaneSdk.FastlaneCardComponent( - {} - ); - // Check if the container exists before rendering - const cardContainer = document.querySelector( '#fastlane-card' ); - if ( cardContainer ) { - paymentComponent.render( `#fastlane-card` ); - onPaymentLoad( paymentComponent ); + try { + const paymentComponent = + await fastlaneSdk.FastlaneCardComponent( {} ); + // Check if the container exists before rendering + const cardContainer = + document.querySelector( '#fastlane-card' ); + if ( cardContainer ) { + paymentComponent.render( '#fastlane-card' ); + onPaymentLoad( paymentComponent ); + } + } catch ( error ) { + log( `Error loading payment component: ${ error }`, 'error' ); } } }, [ @@ -65,10 +70,12 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => { } }, [ isGuest, isEmailLookupCompleted ] ); - // Load payment component when dependencies change + // Load payment component when card element is ready useEffect( () => { - loadPaymentComponent(); - }, [ loadPaymentComponent ] ); + if ( isCardElementReady ) { + loadPaymentComponent(); + } + }, [ isCardElementReady, loadPaymentComponent ] ); /** * Determines which component to render based on the current state. @@ -99,7 +106,7 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => { ( isGuest && isEmailLookupCompleted ) || ( ! isGuest && ! cardDetails ) ) { - return
; + return
; } // Case 4: Authenticated user with card details diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js b/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js index 871197722..1da3cca85 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js @@ -18,7 +18,8 @@ import useCustomerData from './useCustomerData'; */ const useAxoCleanup = () => { // Get dispatch functions from the AXO store - const { setIsAxoActive, setIsGuest } = useDispatch( STORE_NAME ); + const { setIsAxoActive, setIsGuest, setIsEmailLookupCompleted } = + useDispatch( STORE_NAME ); // Get functions to update WooCommerce shipping and billing addresses const { @@ -45,6 +46,7 @@ const useAxoCleanup = () => { // Reset AXO state setIsAxoActive( false ); setIsGuest( true ); + setIsEmailLookupCompleted( false ); // Remove AXO UI elements removeShippingChangeButton();