From 3531a8bb20ccc13451d4e0039921991a255dbf78 Mon Sep 17 00:00:00 2001
From: Jan Keromnes <janx@linux.com>
Date: Fri, 24 Jun 2022 15:01:58 +0000
Subject: [PATCH] [dashboard] Start showing a pending Stripe subscription
 before the API call completes

---
 .../dashboard/src/teams/TeamUsageBasedBilling.tsx    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
index 9035b089562461..93669ed06a492b 100644
--- a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
+++ b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
@@ -68,13 +68,20 @@ export default function TeamUsageBasedBilling() {
         (async () => {
             const setupIntentId = params.get("setup_intent")!;
             window.history.replaceState({}, "", window.location.pathname);
-            await getGitpodService().server.subscribeTeamToStripe(team.id, setupIntentId, currency);
             const pendingSubscription = { pendingSince: Date.now() };
             setPendingStripeSubscription(pendingSubscription);
             window.localStorage.setItem(
                 `pendingStripeSubscriptionForTeam${team.id}`,
                 JSON.stringify(pendingSubscription),
             );
+            try {
+                await getGitpodService().server.subscribeTeamToStripe(team.id, setupIntentId, currency);
+            } catch (error) {
+                console.error("Could not subscribe team to Stripe", error);
+                window.localStorage.removeItem(`pendingStripeSubscriptionForTeam${team.id}`);
+                clearTimeout(pollStripeSubscriptionTimeout!);
+                setPendingStripeSubscription(undefined);
+            }
         })();
     }, [location.search, team]);
 
@@ -122,9 +129,6 @@ export default function TeamUsageBasedBilling() {
             }, 5000);
             setPollStripeSubscriptionTimeout(timeout);
         }
-        return function cleanup() {
-            clearTimeout(pollStripeSubscriptionTimeout!);
-        };
     }, [pendingStripeSubscription, pollStripeSubscriptionTimeout, stripeSubscriptionId, team]);
 
     if (!showUsageBasedUI) {