woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Axo Block: Display card fields when the profile is missing a card

Browse source
This commit is contained in:
Daniel Dudzic 2024-10-04 11:34:19 +02:00
parent 1ca98a10bc
commit af9eca7ef6
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
1 changed files with 50 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

68
modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
View file

@ -16,17 +16,29 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
const [ isCardElementReady, setIsCardElementReady ] = useState( false ); const [ isCardElementReady, setIsCardElementReady ] = useState( false );
// Select relevant states from the AXO store // Select relevant states from the AXO store
const { isGuest, isEmailLookupCompleted } = useSelect( const { isGuest, isEmailLookupCompleted, cardDetails } = useSelect(
( select ) => ( { ( select ) => ( {
isGuest: select( STORE_NAME ).getIsGuest(), isGuest: select( STORE_NAME ).getIsGuest(),
isEmailLookupCompleted: isEmailLookupCompleted:
select( STORE_NAME ).getIsEmailLookupCompleted(), 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 () => { const loadPaymentComponent = useCallback( async () => {
if ( isGuest && isEmailLookupCompleted && isCardElementReady ) { if (
( isGuest && isEmailLookupCompleted && isCardElementReady ) ||
( ! isGuest && ! cardDetails )
) {
const paymentComponent = await fastlaneSdk.FastlaneCardComponent( const paymentComponent = await fastlaneSdk.FastlaneCardComponent(
{} {}
); );
@ -37,6 +49,7 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
isGuest, isGuest,
isEmailLookupCompleted, isEmailLookupCompleted,
isCardElementReady, isCardElementReady,
cardDetails,
fastlaneSdk, fastlaneSdk,
onPaymentLoad, onPaymentLoad,
] ); ] );
@ -53,22 +66,41 @@ export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
loadPaymentComponent(); loadPaymentComponent();
}, [ loadPaymentComponent ] ); }, [ loadPaymentComponent ] );
// Conditional rendering based on user state: /**
// 1. If authenticated: Render the Card component * Determines which component to render based on the current state.
// 2. If guest with completed email lookup: Render the card fields *
// 3. If guest without completed email lookup: Render a message to enter email * Rendering logic:
if ( isGuest ) { * 1. For guests without completed email lookup: Show message to enter email
if ( isEmailLookupCompleted ) { * 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="fastlane-card" key="fastlane-card" />;
} }
return (
<div id="ppcp-axo-block-radio-content"> // Case 4: Authenticated user with card details
{ __( return <Card fastlaneSdk={ fastlaneSdk } showWatermark={ ! isGuest } />;
'Enter your email address above to continue.', };
'woocommerce-paypal-payments'
) } return renderPaymentComponent();
</div>
);
}
return <Card fastlaneSdk={ fastlaneSdk } showWatermark={ ! isGuest } />;
}; };