From c4be260d8920133151b8d5602a2b8e318e0fbcec Mon Sep 17 00:00:00 2001 From: Daniil Chemerkin Date: Wed, 26 Feb 2025 18:39:57 +0000 Subject: [PATCH] develop --- .../pages/TrialPayment/styles.module.scss | 1 + .../pages/TrialPayment/styles.module.scss | 1 + src/hooks/payment/nmi/usePayment.ts | 146 +++++++++++------- .../Compatibility/v2/index.tsx | 4 +- src/routerComponents/Palmistry/v1/index.tsx | 4 +- 5 files changed, 94 insertions(+), 62 deletions(-) diff --git a/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss b/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss index 73ea61d..994c145 100644 --- a/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss +++ b/src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss @@ -26,6 +26,7 @@ font-size: 20px; font-weight: 500; margin-top: 22px; + line-height: 1 !important; } .as-seen-in { diff --git a/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss b/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss index be96acf..3bb9d66 100644 --- a/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss +++ b/src/components/PalmistryV1/pages/TrialPayment/styles.module.scss @@ -26,6 +26,7 @@ font-size: 20px; font-weight: 500; margin-top: 22px; + line-height: 1 !important; } .as-seen-in { diff --git a/src/hooks/payment/nmi/usePayment.ts b/src/hooks/payment/nmi/usePayment.ts index c943ca9..56d9bf7 100644 --- a/src/hooks/payment/nmi/usePayment.ts +++ b/src/hooks/payment/nmi/usePayment.ts @@ -51,6 +51,7 @@ export const usePayment = ({ ccexp: { isValid: false, message: '' }, cvv: { isValid: false, message: '' } }); + const [isCollectJSLoaded, setIsCollectJSLoaded] = useState(false); const { anonymousAuthorization } = useAuthentication(); @@ -84,66 +85,89 @@ export const usePayment = ({ }, [products, activeProduct]); useEffect(() => { - if ((!activeProduct || !token) && !isAnonymous) return; - - const config: any = { - variant: paymentFormType, - callback: (token: any) => { - finishSubmit(token); - }, - paymentSelector: '#customPayButton', - primaryColor: '#066fde', - theme: "material", - price: formPrice, - styleSniffer: true, - customCss: { - "background-color": "#F0F5FF", - "height": "51px", - "padding": "11px 0", - "letter-spacing": "6px", - "border": "none", - "font-size": "18px", - "margin-right": "auto", - "margin-left": "auto" - }, - focusCss: { - "border": "none", - }, - placeholderCss: { - "letter-spacing": "6px", - "font-size": "18px", - }, - fields: { - ccnumber: { - placeholder: '____ ____ ____ ____', - selector: '#card-number', - title: "Card Number", - // enableCardBrandPreviews: true - }, - ccexp: { - placeholder: '__ / __', - selector: '#card-expiry', - title: "Card Expiry" - }, - cvv: { - placeholder: 'CVC', - selector: '#card-cvv', - title: "Card CVC", - // display: "hide" - } - }, - validationCallback: (field: string, status: boolean, message: string) => { - setFormValidation(prev => ({ - ...prev, - [field]: { - isValid: status, - message: status ? '' : message - } - })); - }, + const checkCollectJSLoaded = () => { + if (window.CollectJS) { + setIsCollectJSLoaded(true); + return true; + } + return false; }; - window.CollectJS?.configure(config); + const configureCollectJS = () => { + if (!checkCollectJSLoaded()) { + console.warn('CollectJS not loaded yet, retrying...'); + return false; + } + + const config: any = { + variant: paymentFormType, + callback: (token: any) => { + finishSubmit(token); + }, + paymentSelector: '#customPayButton', + primaryColor: '#066fde', + theme: "material", + price: formPrice, + styleSniffer: true, + customCss: { + "background-color": "#F0F5FF", + "height": "51px", + "padding": "11px 0", + "letter-spacing": "6px", + "border": "none", + "font-size": "18px", + "margin-right": "auto", + "margin-left": "auto" + }, + focusCss: { + "border": "none", + }, + placeholderCss: { + "letter-spacing": "6px", + "font-size": "18px", + }, + fields: { + ccnumber: { + placeholder: '____ ____ ____ ____', + selector: '#card-number', + title: "Card Number", + // enableCardBrandPreviews: true + }, + ccexp: { + placeholder: '__ / __', + selector: '#card-expiry', + title: "Card Expiry" + }, + cvv: { + placeholder: 'CVC', + selector: '#card-cvv', + title: "Card CVC", + // display: "hide" + } + }, + validationCallback: (field: string, status: boolean, message: string) => { + setFormValidation(prev => ({ + ...prev, + [field]: { + isValid: status, + message: status ? '' : message + } + })); + }, + }; + window.CollectJS?.configure(config); + return true; + }; + + if ((!activeProduct || !token) && !isAnonymous) return; + + const retryInterval = setInterval(() => { + if (configureCollectJS()) { + clearInterval(retryInterval); + } + }, 1000); + + return () => clearInterval(retryInterval); }, [placementId, paywallId, activeProduct, token]); const finishSubmit = async (response: any) => { @@ -227,7 +251,8 @@ export const usePayment = ({ submitInlineForm, closeModal, formValidation, - isFormValid + isFormValid, + isCollectJSLoaded }), [ isLoading, paymentResponse, @@ -239,6 +264,7 @@ export const usePayment = ({ submitInlineForm, closeModal, formValidation, - isFormValid + isFormValid, + isCollectJSLoaded ]) } \ No newline at end of file diff --git a/src/routerComponents/Compatibility/v2/index.tsx b/src/routerComponents/Compatibility/v2/index.tsx index d9a64ee..2598082 100644 --- a/src/routerComponents/Compatibility/v2/index.tsx +++ b/src/routerComponents/Compatibility/v2/index.tsx @@ -170,7 +170,9 @@ function CompatibilityV2Routes() { } - /> + > + } /> + } diff --git a/src/routerComponents/Palmistry/v1/index.tsx b/src/routerComponents/Palmistry/v1/index.tsx index b1a6288..fe53984 100644 --- a/src/routerComponents/Palmistry/v1/index.tsx +++ b/src/routerComponents/Palmistry/v1/index.tsx @@ -164,7 +164,9 @@ function PalmistryV1Routes() { } - /> + > + } /> + }