[dashboard] Show error messages in the UI when upgrading with Stripe fails

Author: jankeromnes

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -13,6 +13,7 @@ import { PaymentContext } from "../payment-context";
 import { getGitpodService } from "../service/service";
 import DropDown from "../components/DropDown";
 import Modal from "../components/Modal";
+import Alert from "./Alert";
 
 interface Props {
     userOrTeamId: string;
@@ -150,12 +151,14 @@ function CreditCardInputForm(props: { id: string }) {
     const elements = useElements();
     const { currency, setCurrency } = useContext(PaymentContext);
     const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [billingError, setBillingError] = useState<string | undefined>();
 
     const handleSubmit = async (event: React.FormEvent) => {
         event.preventDefault();
         if (!stripe || !elements) {
             return;
         }
+        setBillingError(undefined);
         setIsLoading(true);
         try {
             // Create Stripe customer for team & currency (or update currency)
@@ -176,14 +179,19 @@ function CreditCardInputForm(props: { id: string }) {
             }
         } catch (error) {
             console.error(error);
-            alert(error?.message || "Failed to submit form. See console for error message.");
+            setBillingError(`Failed to submit form. ${error?.message || String(error)}`);
         } finally {
             setIsLoading(false);
         }
     };
 
     return (
         <form className="mt-4 flex-grow flex flex-col" onSubmit={handleSubmit}>
+            {billingError && (
+                <Alert className="mb-4" closable={false} showIcon={true} type="error">
+                    {billingError}
+                </Alert>
+            )}
             <PaymentElement />
             <div className="mt-4 flex-grow flex justify-end items-end">
                 <div className="flex-grow flex space-x-1">

components/dashboard/src/teams/TeamUsageBasedBilling.tsx

@@ -10,6 +10,7 @@ import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
 import { getGitpodService } from "../service/service";
 import UsageBasedBillingConfig from "../components/UsageBasedBillingConfig";
+import Alert from "../components/Alert";
 
 type PendingStripeSubscription = { pendingSince: number };
 
@@ -24,6 +25,7 @@ export default function TeamUsageBasedBilling() {
     const [pollStripeSubscriptionTimeout, setPollStripeSubscriptionTimeout] = useState<NodeJS.Timeout | undefined>();
     const [stripePortalUrl, setStripePortalUrl] = useState<string | undefined>();
     const [usageLimit, setUsageLimit] = useState<number | undefined>();
+    const [billingError, setBillingError] = useState<string | undefined>();
 
     useEffect(() => {
         if (!team) {
@@ -85,6 +87,7 @@ export default function TeamUsageBasedBilling() {
                 window.localStorage.removeItem(`pendingStripeSubscriptionForTeam${team.id}`);
                 clearTimeout(pollStripeSubscriptionTimeout!);
                 setPendingStripeSubscription(undefined);
+                setBillingError(`Could not subscribe team to Stripe. ${error?.message || String(error)}`);
             }
         })();
     }, [location.search, team]);
@@ -160,6 +163,11 @@ export default function TeamUsageBasedBilling() {
 
     return (
         <>
+            {billingError && (
+                <Alert className="max-w-xl mb-4" closable={false} showIcon={true} type="error">
+                    {billingError}
+                </Alert>
+            )}
             <h3>Usage-Based Billing</h3>
             <UsageBasedBillingConfig
                 userOrTeamId={team?.id || ""}