From a0adeaaeec7ec30006175577e3ff45b79dc63620 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 4 May 2022 16:49:42 +0800
Subject: [PATCH] Display errors and block form if any error coming from
 creating set up intent

---
 .../AddNewPaymentMethodModal.tsx                    | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 6f4a927ea84..955c03ae1c5 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -30,6 +30,15 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     setIntent(undefined)
     const orgSlug = ui.selectedOrganization?.slug ?? ''
     const intent = await post(`${API_URL}/organizations/${orgSlug}/payments/setup-intent`, {})
+
+    if (intent.error) {
+      return ui.setNotification({
+        category: 'error',
+        message: intent.error.message,
+        error: intent.error,
+      })
+    }
+
     setIntent(intent)
   }
 
@@ -47,13 +56,13 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       onCancel={onCancel}
       className="PAYMENT"
     >
-      <div className="py-4 space-y-4">
+      <div className="space-y-4 py-4">
         {intent !== undefined ? (
           <Elements stripe={stripePromise} options={options}>
             <AddPaymentMethodForm returnUrl={returnUrl} onCancel={onCancel} />
           </Elements>
         ) : (
-          <div className="w-full flex items-center justify-center py-20">
+          <div className="flex w-full items-center justify-center py-20">
             <IconLoader size={16} className="animate-spin" />
           </div>
         )}