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

Move Card markup to a separate component

Browse source
This commit is contained in:
Daniel Dudzic 2024-09-06 13:06:37 +02:00
parent 522b27aea0
commit db449b5d70
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
4 changed files with 112 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

60
modules/ppcp-axo-block/resources/js/components/CreditCard.js Normal file
View file

@ -0,0 +1,60 @@
import { useMemo } from '@wordpress/element';
import { FastlaneWatermark } from './FastlaneWatermark';
const cardIcons = {
VISA: 'visa-light.svg',
MASTER_CARD: 'mastercard-light.svg',
AMEX: 'amex-light.svg',
DISCOVER: 'discover-light.svg',
DINERS: 'dinersclub-light.svg',
JCB: 'jcb-light.svg',
UNIONPAY: 'unionpay-light.svg',
};
export const CreditCard = ( { card, shippingAddress, fastlaneSdk } ) => {
const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
const { fullName } = shippingAddress?.name ?? {};
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 (
<div className="wc-block-checkout-axo-block-card">
<div className="wc-block-checkout-axo-block-card__inner">
<div className="wc-block-checkout-axo-block-card__content">
<div className="wc-block-checkout-axo-block-card__meta">
<span className="wc-block-checkout-axo-block-card__meta-digits">
{ `**** **** **** ${ lastDigits }` }
</span>
{ cardLogo }
</div>
<div className="wc-block-checkout-axo-block-card__meta">
<span>{ fullName }</span>
<span>{ formattedExpiry }</span>{ ' ' }
</div>
</div>
<div className="wc-block-checkout-axo-block-card__watermark">
<FastlaneWatermark
fastlaneSdk={ fastlaneSdk }
name="wc-block-checkout-axo-card-watermark"
includeAdditionalInfo={ false }
/>
</div>
</div>
</div>
);
};

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

@ -1,14 +1,5 @@
import { useEffect, useCallback, useMemo } from '@wordpress/element';
const cardIcons = {
VISA: 'visa-light.svg',
MASTER_CARD: 'mastercard-light.svg',
AMEX: 'amex-light.svg',
DISCOVER: 'discover-light.svg',
DINERS: 'dinersclub-light.svg',
JCB: 'jcb-light.svg',
UNIONPAY: 'unionpay-light.svg',
};
import { useEffect, useCallback } from '@wordpress/element';
import { CreditCard } from './CreditCard';
export const Payment = ( {
fastlaneSdk,
@ -17,9 +8,6 @@ export const Payment = ( {
isGuest,
onPaymentLoad,
} ) => {
const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
const { fullName } = shippingAddress?.name ?? {};
// Memoized Fastlane card rendering
const loadPaymentComponent = useCallback( async () => {
if ( isGuest ) {
@ -35,40 +23,14 @@ export const Payment = ( {
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 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>
{ cardLogo }
</div>
<div className="wc-block-axo-block-card__meta">
<span>{ fullName }</span>
<span>{ formattedExpiry }</span>{ ' ' }
</div>
</div>
</div>
<CreditCard
key="custom-card"
card={ card }
shippingAddress={ shippingAddress }
fastlaneSdk={ fastlaneSdk }
/>
);
};