Improve Stripe error handling (#4456)

Co-authored-by: jusrhee <justin@porter.run>

dashboard/src/lib/hooks/useStripe.tsx

@@ -14,7 +14,7 @@ import { Context } from "shared/Context";
 type TUsePaymentMethod = {
   paymentMethodList: PaymentMethodList;
   refetchPaymentMethods: any;
-  isDeleting: boolean;
+  deletingIds: string[];
   deletePaymentMethod: (paymentMethodId: string) => Promise<void>;
 };
 
@@ -43,7 +43,7 @@ export const usePaymentMethods = (): TUsePaymentMethod => {
   const [paymentMethodList, setPaymentMethodList] = useState<PaymentMethodList>(
     []
   );
-  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+  const [deletingIds, setDeletingIds] = useState<string[]>([]);
 
   // Fetch list of payment methods
   const paymentMethodReq = useQuery(
@@ -73,7 +73,7 @@ export const usePaymentMethods = (): TUsePaymentMethod => {
     if (!paymentMethodId) {
       throw new Error("Payment Method ID is missing");
     }
-    setIsDeleting(true);
+    deletingIds.push(paymentMethodId);
 
     const resp = await api.deletePaymentMethod(
       "<token>",
@@ -89,13 +89,15 @@ export const usePaymentMethods = (): TUsePaymentMethod => {
         (paymentMethod) => paymentMethod.id !== paymentMethodId
       )
     );
-    setIsDeleting(false);
+    setDeletingIds(
+      deletingIds.filter((deleteId) => deleteId !== paymentMethodId)
+    );
   };
 
   return {
     paymentMethodList,
     refetchPaymentMethods: paymentMethodReq.refetch,
-    isDeleting,
+    deletingIds,
     deletePaymentMethod,
   };
 };

dashboard/src/main/home/modals/PaymentSetupForm.tsx

@@ -50,6 +50,8 @@ const PaymentSetupForm = ({ onCreate }: { onCreate: () => Promise<void> }) => {
 
     if (error) {
       setErrorMessage(error.message);
+      setLoading(false);
+      return;
     }
 
     // Confirm the setup and set as default

dashboard/src/main/home/project-settings/BillingPage.tsx

@@ -31,7 +31,7 @@ function BillingPage(): JSX.Element {
     paymentMethodList,
     refetchPaymentMethods,
     deletePaymentMethod,
-    isDeleting,
+    deletingIds,
   } = usePaymentMethods();
   const { setDefaultPaymentMethod } = useSetDefaultPaymentMethod();
   checkBillingCustomerExists();
@@ -78,8 +78,8 @@ function BillingPage(): JSX.Element {
       <Spacer y={1} />
       {paymentMethodList.map((paymentMethod, idx) => {
         return (
-          <>
-            <Fieldset key={idx}>
+          <div key={idx}>
+            <Fieldset>
               <Container row spaced>
                 <Container row>
                   <Icon src={cardIcon} height={"14px"} />
@@ -94,7 +94,7 @@ function BillingPage(): JSX.Element {
                   <Spacer inline x={1} />
                 </Container>
                 <DeleteButtonContainer>
-                  {isDeleting ? (
+                  {deletingIds.includes(paymentMethod.id) ? (
                     <Loading />
                   ) : !paymentMethod.is_default ? (
                     <Container row={true}>
@@ -131,7 +131,7 @@ function BillingPage(): JSX.Element {
               </Container>
             </Fieldset>
             <Spacer y={1} />
-          </>
+          </div>
         );
       })}
       <Button