From db449b5d70ddcb57ab05f1d4b83451b661279022 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 6 Sep 2024 13:06:37 +0200 Subject: [PATCH] Move Card markup to a separate component --- .../ppcp-axo-block/resources/css/gateway.scss | 68 +++++++++++-------- .../resources/js/components/CreditCard.js | 60 ++++++++++++++++ .../resources/js/components/Payment.js | 54 +++------------ .../resources/js/helpers/fieldHelpers.js | 6 +- 4 files changed, 112 insertions(+), 76 deletions(-) create mode 100644 modules/ppcp-axo-block/resources/js/components/CreditCard.js diff --git a/modules/ppcp-axo-block/resources/css/gateway.scss b/modules/ppcp-axo-block/resources/css/gateway.scss index da047a72f..ac62f1b4c 100644 --- a/modules/ppcp-axo-block/resources/css/gateway.scss +++ b/modules/ppcp-axo-block/resources/css/gateway.scss @@ -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; } diff --git a/modules/ppcp-axo-block/resources/js/components/CreditCard.js b/modules/ppcp-axo-block/resources/js/components/CreditCard.js new file mode 100644 index 000000000..f3e0ce802 --- /dev/null +++ b/modules/ppcp-axo-block/resources/js/components/CreditCard.js @@ -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 ] ? ( + { + ) : ( + { brand } + ); + }, [ brand ] ); + + const formattedExpiry = expiry + ? `${ expiry.split( '-' )[ 1 ] }/${ expiry.split( '-' )[ 0 ] }` + : ''; + + return ( +
+
+
+
+ + { `**** **** **** ${ lastDigits }` } + + { cardLogo } +
+
+ { fullName } + { formattedExpiry }{ ' ' } +
+
+
+ +
+
+
+ ); +}; diff --git a/modules/ppcp-axo-block/resources/js/components/Payment.js b/modules/ppcp-axo-block/resources/js/components/Payment.js index 3c828325e..a243c9e20 100644 --- a/modules/ppcp-axo-block/resources/js/components/Payment.js +++ b/modules/ppcp-axo-block/resources/js/components/Payment.js @@ -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 ] ? ( - { - ) : ( - { brand } - ); - }, [ brand ] ); - - const formattedExpiry = expiry - ? `${ expiry.split( '-' )[ 1 ] }/${ expiry.split( '-' )[ 0 ] }` - : ''; - return isGuest ? (
) : ( -
-
-
- - { `**** **** **** ${ lastDigits }` } - - { cardLogo } -
-
- { fullName } - { formattedExpiry }{ ' ' } -
-
-
+ ); }; diff --git a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js index e87a35d0e..aa6c36e62 100644 --- a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js +++ b/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js @@ -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' ); } };