mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 09:08:09 +08:00
Move Card markup to a separate component
This commit is contained in:
Daniel Dudzic
parent
522b27aea0
commit
db449b5d70
4 changed files with 112 additions and 76 deletions
|
|
@ -14,7 +14,48 @@
|
|||
.wc-block-checkout-axo-block-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wc-block-checkout-axo-block-card__inner {
|
||||
display: flex;
|
||||
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 {
|
||||
|
|
@ -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 {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
|
|||
60
modules/ppcp-axo-block/resources/js/components/CreditCard.js
Normal file
60
modules/ppcp-axo-block/resources/js/components/CreditCard.js
Normal 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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 }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const snapshotFields = ( shippingAddress, billingAddress ) => {
|
|||
const originalData = { shippingAddress, billingAddress };
|
||||
console.log( 'Snapshot data:', originalData );
|
||||
localStorage.setItem(
|
||||
'originalCheckoutFields',
|
||||
'axoOriginalCheckoutFields',
|
||||
JSON.stringify( originalData )
|
||||
);
|
||||
console.log( 'Original fields saved to localStorage', originalData );
|
||||
|
|
@ -19,7 +19,7 @@ export const restoreOriginalFields = (
|
|||
updateShippingAddress,
|
||||
updateBillingAddress
|
||||
) => {
|
||||
const savedData = localStorage.getItem( 'originalCheckoutFields' );
|
||||
const savedData = localStorage.getItem( 'axoOriginalCheckoutFields' );
|
||||
console.log( 'Data retrieved from localStorage:', savedData );
|
||||
|
||||
if ( savedData ) {
|
||||
|
|
@ -33,7 +33,7 @@ export const restoreOriginalFields = (
|
|||
console.log( 'Original fields restored from localStorage', parsedData );
|
||||
} else {
|
||||
console.warn(
|
||||
'No data found in localStorage under originalCheckoutFields'
|
||||
'No data found in localStorage under axoOriginalCheckoutFields'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
