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

Add memoizing and improve the code quality of the card change button

Browse source
This commit is contained in:
Daniel Dudzic 2024-09-06 03:21:27 +02:00
parent 67cbb83f33
commit 4b2da479f3
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
5 changed files with 120 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useEffect } from '@wordpress/element';
import { useEffect, useCallback, useMemo } from '@wordpress/element';
const cardIcons = {
VISA: 'visa-light.svg',
@ -14,46 +14,54 @@ export const Payment = ( {
fastlaneSdk,
card,
shippingAddress,
isGuestFlow,
isGuest,
onPaymentLoad,
} ) => {
const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
const { fullName } = shippingAddress?.name ?? {};
useEffect( () => {
if ( isGuestFlow ) {
( async () => {
const paymentComponent =
await fastlaneSdk.FastlaneCardComponent( {} );
paymentComponent.render( `#fastlane-card` );
onPaymentLoad( paymentComponent );
} )();
// Memoized Fastlane card rendering
const loadPaymentComponent = useCallback( async () => {
if ( isGuest ) {
const paymentComponent = await fastlaneSdk.FastlaneCardComponent(
{}
);
paymentComponent.render( `#fastlane-card` );
onPaymentLoad( paymentComponent );
}
}, [ fastlaneSdk, onPaymentLoad, isGuestFlow ] );
}, [ isGuest, fastlaneSdk, onPaymentLoad ] );
const cardLogo = cardIcons[ brand ] ? (
<img
className="wc-block-axo-block-card__meta-icon"
title={ brand }
src={ `${ window.wc_ppcp_axo.icons_directory }${ cardIcons[ brand ] }` }
alt={ brand }
/>
) : (
<span>{ brand }</span>
);
useEffect( () => {
loadPaymentComponent();
}, [ loadPaymentComponent ] );
// Memoized card logo rendering
const cardLogo = useMemo( () => {
return cardIcons[ brand ] ? (
<img
className="wc-block-axo-block-card__meta-icon"
title={ brand }
src={ `${ window.wc_ppcp_axo.icons_directory }${ cardIcons[ brand ] }` }
alt={ brand }
/>
) : (
<span>{ brand }</span>
);
}, [ brand ] );
const formattedExpiry = expiry
? `${ expiry.split( '-' )[ 1 ] }/${ expiry.split( '-' )[ 0 ] }`
: '';
return isGuestFlow ? (
return isGuest ? (
<div id="fastlane-card" key="fastlane-card" />
) : (
<div key="custom-card" className="wc-block-checkout-axo-block-card">
<div className="wc-block-checkout-axo-block-card__meta-container">
<div className="wc-block-axo-block-card__meta">
<span className="wc-block-axo-block-card__meta__digits">{ `**** **** **** ${ lastDigits }` }</span>
<span className="wc-block-axo-block-card__meta__digits">
{ `**** **** **** ${ lastDigits }` }
</span>
{ cardLogo }
</div>
<div className="wc-block-axo-block-card__meta">