From 284ce90b1767524dbada3d2fb49f7d0ace7010fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 20 Dec 2022 14:32:16 +0100
Subject: [PATCH] move captcha outside of modal

---
 .../AddNewPaymentMethodModal.tsx              | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 0883d871175..065027c7847 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -94,14 +94,9 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
   }
 
   return (
-    <Modal
-      hideFooter
-      size="medium"
-      visible={visible}
-      header="Add new payment method"
-      onCancel={onLocalCancel}
-      className="PAYMENT"
-    >
+    // We cant display the hCaptcha in the modal, as the modal auto-closes when clicking the captcha
+    // So we only show the modal if the captcha has been executed successfully (intent loaded)
+    <>
       <HCaptcha
         ref={captchaRefCallback}
         sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
@@ -113,18 +108,22 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
           setCaptchaToken(null)
         }}
       />
-      <div className="space-y-4 py-4">
-        {intent !== undefined ? (
+
+      <Modal
+        hideFooter
+        size="medium"
+        visible={visible && intent !== undefined}
+        header="Add new payment method"
+        onCancel={onLocalCancel}
+        className="PAYMENT"
+      >
+        <div className="space-y-4 py-4">
           <Elements stripe={stripePromise} options={options}>
             <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onLocalCancel} />
           </Elements>
-        ) : (
-          <div className="flex w-full items-center justify-center py-20">
-            <IconLoader size={16} className="animate-spin" />
-          </div>
-        )}
-      </div>
-    </Modal>
+        </div>
+      </Modal>
+    </>
   )
 }