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

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

68
modules/ppcp-axo-block/resources/css/gateway.scss
View file

@ -14,7 +14,48 @@
.wc-block-checkout-axo-block-card { .wc-block-checkout-axo-block-card {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 10px;
}
.wc-block-checkout-axo-block-card__inner {
display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
max-width: 300px;
width: 100%;
}
.wc-block-checkout-axo-block-card__content {
box-sizing: border-box;
aspect-ratio: 1.586;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid hsla(0,0%,7%,.11);
font-size: .875em;
font-family: monospace;
padding: 1em;
margin-bottom: 1em;
margin-top: 1em;
border-radius: 4px;
width: 100%;
}
.wc-block-checkout-axo-block-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.wc-block-checkout-axo-block-card__meta-digits {
letter-spacing: 2px;
}
.wc-block-checkout-axo-block-card__watermark {
align-self: flex-end;
} }
.wc-block-checkout-axo-block-card__edit { .wc-block-checkout-axo-block-card__edit {
@ -33,33 +74,6 @@
} }
} }
.wc-block-checkout-axo-block-card__meta-container {
width: 100%;
max-width: 300px; /* Max width for responsiveness */
aspect-ratio: 1.586; /* Enforce the credit card aspect ratio */
display: flex;
flex-direction: column;
align-self: center;
justify-content: space-between;
border: 1px solid hsla(0,0%,7%,.11);
font-size: 1em;
font-family: monospace;
padding: 1em;
margin: 1em;
border-radius: 4px;
}
.wc-block-axo-block-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.wc-block-axo-block-card__meta__digits {
letter-spacing: 2px;
}
.wc-block-axo-block-card__meta:last-child { .wc-block-axo-block-card__meta:last-child {
align-self: flex-end; align-self: flex-end;
} }

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'; import { useEffect, useCallback } from '@wordpress/element';
import { CreditCard } from './CreditCard';
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 Payment = ( { export const Payment = ( {
fastlaneSdk, fastlaneSdk,
@ -17,9 +8,6 @@ export const Payment = ( {
isGuest, isGuest,
onPaymentLoad, onPaymentLoad,
} ) => { } ) => {
const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
const { fullName } = shippingAddress?.name ?? {};
// Memoized Fastlane card rendering // Memoized Fastlane card rendering
const loadPaymentComponent = useCallback( async () => { const loadPaymentComponent = useCallback( async () => {
if ( isGuest ) { if ( isGuest ) {
@ -35,40 +23,14 @@ export const Payment = ( {
loadPaymentComponent(); loadPaymentComponent();
}, [ 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 ? ( return isGuest ? (
<div id="fastlane-card" key="fastlane-card" /> <div id="fastlane-card" key="fastlane-card" />
) : ( ) : (
<div key="custom-card" className="wc-block-checkout-axo-block-card"> <CreditCard
<div className="wc-block-checkout-axo-block-card__meta-container"> key="custom-card"
<div className="wc-block-axo-block-card__meta"> card={ card }
<span className="wc-block-axo-block-card__meta__digits"> shippingAddress={ shippingAddress }
{ `**** **** **** ${ lastDigits }` } fastlaneSdk={ fastlaneSdk }
</span> />
{ cardLogo }
</div>
<div className="wc-block-axo-block-card__meta">
<span>{ fullName }</span>
<span>{ formattedExpiry }</span>{ ' ' }
</div>
</div>
</div>
); );
}; };

6
modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js
View file

@ -9,7 +9,7 @@ export const snapshotFields = ( shippingAddress, billingAddress ) => {
const originalData = { shippingAddress, billingAddress }; const originalData = { shippingAddress, billingAddress };
console.log( 'Snapshot data:', originalData ); console.log( 'Snapshot data:', originalData );
localStorage.setItem( localStorage.setItem(
'originalCheckoutFields', 'axoOriginalCheckoutFields',
JSON.stringify( originalData ) JSON.stringify( originalData )
); );
console.log( 'Original fields saved to localStorage', originalData ); console.log( 'Original fields saved to localStorage', originalData );
@ -19,7 +19,7 @@ export const restoreOriginalFields = (
updateShippingAddress, updateShippingAddress,
updateBillingAddress updateBillingAddress
) => { ) => {
const savedData = localStorage.getItem( 'originalCheckoutFields' ); const savedData = localStorage.getItem( 'axoOriginalCheckoutFields' );
console.log( 'Data retrieved from localStorage:', savedData ); console.log( 'Data retrieved from localStorage:', savedData );
if ( savedData ) { if ( savedData ) {
@ -33,7 +33,7 @@ export const restoreOriginalFields = (
console.log( 'Original fields restored from localStorage', parsedData ); console.log( 'Original fields restored from localStorage', parsedData );
} else { } else {
console.warn( console.warn(
'No data found in localStorage under originalCheckoutFields' 'No data found in localStorage under axoOriginalCheckoutFields'
); );
} }
}; };