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 );
// 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();
};