From 75358b9362905b2629ee53578651323d1381c933 Mon Sep 17 00:00:00 2001
From: "Aidar Shaikhutdin @makeweb.space" <makeweb.space@gmail.com>
Date: Tue, 20 Jun 2023 14:30:43 +0300
Subject: [PATCH] fix: pay btn mountins state

---
 .../PaymentPage/methods/ApplePay/Button.tsx       | 15 ++++++++++-----
 .../PaymentPage/methods/GooglePay/Button.tsx      | 15 ++++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/PaymentPage/methods/ApplePay/Button.tsx b/src/components/PaymentPage/methods/ApplePay/Button.tsx
index 99f3db7..a6af2b8 100644
--- a/src/components/PaymentPage/methods/ApplePay/Button.tsx
+++ b/src/components/PaymentPage/methods/ApplePay/Button.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PaymentIntent } from '@chargebee/chargebee-js-types'
 import { useApi, useApiCall, extractErrorMessage, SubscriptionReceipts } from '../../../../api'
@@ -21,6 +21,7 @@ export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX
   const { i18n } = useTranslation()
   const { token } = useAuth()
   const { applePay } = usePayment()
+  const [isMounting, setIsMounting] = useState<boolean>(true)
   const loadData = useCallback(() => {
     return api.createPaymentIntent({ token, paymentMethod, currencyCode })
       .then(({ payment_intent }) => payment_intent)
@@ -38,6 +39,7 @@ export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX
     }
     applePay?.setPaymentIntent(data)
     applePay?.mountPaymentButton(`#${buttonId}`, buttonOptions)
+      .then(() => setIsMounting(false))
       .then(() => applePay?.handlePayment())
       .then((paymentIntent) => {
         return api.createSubscriptionReceipt({
@@ -48,9 +50,12 @@ export function ApplePayButton({ onSuccess, onError }: ApplePayButtonProps): JSX
       .catch((error: Error) => onError(error))
   }, [data, applePay, buttonId, i18n.language, api, token, onSuccess, onError])
 
-  return isPending ? <Loader /> : (
-    <div id={buttonId} className='pay-btn'>{
-      error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null
-    }</div>
+  return (
+    <>
+      {isPending || isMounting ? <Loader /> : null}
+      <div id={buttonId} className='pay-btn'>
+        {error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null}
+      </div>
+    </>
   )
 }
diff --git a/src/components/PaymentPage/methods/GooglePay/Button.tsx b/src/components/PaymentPage/methods/GooglePay/Button.tsx
index 5f8f291..2931e7b 100644
--- a/src/components/PaymentPage/methods/GooglePay/Button.tsx
+++ b/src/components/PaymentPage/methods/GooglePay/Button.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PaymentIntent } from '@chargebee/chargebee-js-types'
 import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '../../../../api'
@@ -21,6 +21,7 @@ export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): J
   const { i18n } = useTranslation()
   const { token } = useAuth()
   const { googlePay } = usePayment()
+  const [isMounting, setIsMounting] = useState<boolean>(true)
   const loadData = useCallback(() => {
     return api.createPaymentIntent({ token, paymentMethod, currencyCode })
       .then(({ payment_intent }) => payment_intent)
@@ -39,6 +40,7 @@ export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): J
     }
     googlePay?.setPaymentIntent(data)
     googlePay?.mountPaymentButton(`#${buttonId}`, buttonOptions)
+      .then(() => setIsMounting(false))
       .then(() => googlePay?.handlePayment())
       .then((result) => {
         console.log('Success payment by GooglePay', result)
@@ -48,9 +50,12 @@ export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): J
       .catch((error: Error) => onError(error))
   }, [data, googlePay, buttonId, i18n.language, onSuccess, onError])
 
-  return isPending ? <Loader /> : (
-    <div id={buttonId} className='pay-btn'>{
-      error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null
-    }</div>
+  return (
+    <>
+      {isPending || isMounting ? <Loader /> : null}
+      <div id={buttonId} className='pay-btn'>
+        {error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null}
+      </div>
+    </>
   )
 }