From e2381bba745917dca54786cf71c9770ecca04b43 Mon Sep 17 00:00:00 2001
From: Jan Keromnes <janx@linux.com>
Date: Tue, 30 Aug 2022 08:12:37 +0000
Subject: [PATCH 1/5] [gitpod-db] Increase "before each" timeout of
 AccountingDBSpec and AuthProviderEntryDBSpec

---
 components/gitpod-db/src/accounting-db.spec.db.ts       | 1 +
 components/gitpod-db/src/auth-provider-entry.spec.db.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/gitpod-db/src/accounting-db.spec.db.ts b/components/gitpod-db/src/accounting-db.spec.db.ts
index 0002a93b93b35a..758ab0d6aaa883 100644
--- a/components/gitpod-db/src/accounting-db.spec.db.ts
+++ b/components/gitpod-db/src/accounting-db.spec.db.ts
@@ -26,6 +26,7 @@ export class AccountingDBSpec {
     db: AccountingDB;
     queryRunner: QueryRunner;
 
+    @timeout(10000)
     async before() {
         const connection = await this.typeORM.getConnection();
         const manager = connection.manager;
diff --git a/components/gitpod-db/src/auth-provider-entry.spec.db.ts b/components/gitpod-db/src/auth-provider-entry.spec.db.ts
index 86d29f6e390e9d..a1f5d4955d7688 100644
--- a/components/gitpod-db/src/auth-provider-entry.spec.db.ts
+++ b/components/gitpod-db/src/auth-provider-entry.spec.db.ts
@@ -19,6 +19,7 @@ export class AuthProviderEntryDBSpec {
     typeORM = testContainer.get<TypeORM>(TypeORM);
     db = testContainer.get<AuthProviderEntryDB>(AuthProviderEntryDB);
 
+    @timeout(10000)
     async before() {
         await this.clear();
     }

From fded9fc4c608027e2e01ef58f79924257328fbe2 Mon Sep 17 00:00:00 2001
From: Jan Keromnes <janx@linux.com>
Date: Mon, 29 Aug 2022 15:11:06 +0000
Subject: [PATCH 2/5] [dashboard] Fix Stripe credit card input modal overflow
 on error state

---
 components/dashboard/src/teams/TeamUsageBasedBilling.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
index 3d015c3fda52ee..e39002b0a4c584 100644
--- a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
+++ b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
@@ -297,7 +297,12 @@ function BillingSetupModal(props: { onClose: () => void }) {
     return (
         <Modal visible={true} onClose={props.onClose}>
             <h3 className="flex">Upgrade Billing</h3>
-            <div className="border-t border-gray-200 dark:border-gray-800 mt-4 pt-2 h-96 -mx-6 px-6 flex flex-col">
+            <div className="border-t border-gray-200 dark:border-gray-800 mt-4 pt-2 -mx-6 px-6 flex flex-col">
+                {(!stripePromise || !stripeSetupIntentClientSecret) && (
+                    <div className="h-80 flex items-center justify-center">
+                        <Spinner className="h-5 w-5 animate-spin" />
+                    </div>
+                )}
                 {!!stripePromise && !!stripeSetupIntentClientSecret && (
                     <Elements
                         stripe={stripePromise}

From 428226d4cd17416786b60e5cafe0a4eb10ec6a8f Mon Sep 17 00:00:00 2001
From: Jan Keromnes <janx@linux.com>
Date: Thu, 25 Aug 2022 10:07:35 +0000
Subject: [PATCH 3/5] [server][dashboard] Allow new Stripe customers to select
 their preferred billing currency

---
 .../src/teams/TeamUsageBasedBilling.tsx       | 39 +++++++++++++++----
 .../gitpod-protocol/src/gitpod-service.ts     |  4 +-
 .../server/ee/src/user/stripe-service.ts      | 38 ++++++++----------
 .../ee/src/workspace/gitpod-server-impl.ts    | 35 ++++++++++++-----
 components/server/src/auth/rate-limiter.ts    |  1 +
 components/server/src/config.ts               |  2 +-
 .../src/workspace/gitpod-server-impl.ts       | 11 ++----
 7 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
index e39002b0a4c584..76d7f1b790917f 100644
--- a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
+++ b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
@@ -6,15 +6,16 @@
 
 import React, { useContext, useEffect, useState } from "react";
 import { useLocation } from "react-router";
+import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { Appearance, loadStripe, Stripe } from "@stripe/stripe-js";
 import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
+import DropDown from "../components/DropDown";
 import Modal from "../components/Modal";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 import { PaymentContext } from "../payment-context";
 import { getGitpodService } from "../service/service";
 import { ThemeContext } from "../theme-context";
-import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 
 type PendingStripeSubscription = { pendingSince: number };
 
@@ -22,7 +23,6 @@ export default function TeamUsageBasedBilling() {
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
-    const { currency } = useContext(PaymentContext);
     const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
     const [stripeSubscriptionId, setStripeSubscriptionId] = useState<string | undefined>();
     const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -87,7 +87,7 @@ export default function TeamUsageBasedBilling() {
                 JSON.stringify(pendingSubscription),
             );
             try {
-                await getGitpodService().server.subscribeTeamToStripe(team.id, setupIntentId, currency);
+                await getGitpodService().server.subscribeTeamToStripe(team.id, setupIntentId);
             } catch (error) {
                 console.error("Could not subscribe team to Stripe", error);
                 window.localStorage.removeItem(`pendingStripeSubscriptionForTeam${team.id}`);
@@ -214,7 +214,9 @@ export default function TeamUsageBasedBilling() {
                     </div>
                 )}
             </div>
-            {showBillingSetupModal && <BillingSetupModal onClose={() => setShowBillingSetupModal(false)} />}
+            {showBillingSetupModal && (
+                <BillingSetupModal teamId={team?.id || ""} onClose={() => setShowBillingSetupModal(false)} />
+            )}
             {showUpdateLimitModal && (
                 <UpdateLimitModal
                     currentValue={spendingLimit}
@@ -281,7 +283,7 @@ function UpdateLimitModal(props: {
     );
 }
 
-function BillingSetupModal(props: { onClose: () => void }) {
+function BillingSetupModal(props: { teamId: string; onClose: () => void }) {
     const { isDark } = useContext(ThemeContext);
     const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | undefined>();
     const [stripeSetupIntentClientSecret, setStripeSetupIntentClientSecret] = useState<string | undefined>();
@@ -311,7 +313,7 @@ function BillingSetupModal(props: { onClose: () => void }) {
                             clientSecret: stripeSetupIntentClientSecret,
                         }}
                     >
-                        <CreditCardInputForm />
+                        <CreditCardInputForm teamId={props.teamId} />
                     </Elements>
                 )}
             </div>
@@ -319,9 +321,10 @@ function BillingSetupModal(props: { onClose: () => void }) {
     );
 }
 
-function CreditCardInputForm() {
+function CreditCardInputForm(props: { teamId: string }) {
     const stripe = useStripe();
     const elements = useElements();
+    const { currency, setCurrency } = useContext(PaymentContext);
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
     const handleSubmit = async (event: React.FormEvent) => {
@@ -331,6 +334,8 @@ function CreditCardInputForm() {
         }
         setIsLoading(true);
         try {
+            // Create Stripe customer for team & currency (or update currency)
+            await getGitpodService().server.createOrUpdateStripeCustomerForTeam(props.teamId, currency);
             const result = await stripe.confirmSetup({
                 elements,
                 confirmParams: {
@@ -356,7 +361,25 @@ function CreditCardInputForm() {
     return (
         <form className="mt-4 flex-grow flex flex-col" onSubmit={handleSubmit}>
             <PaymentElement />
-            <div className="mt-4 flex-grow flex flex-col justify-end items-end">
+            <div className="mt-4 flex-grow flex justify-end items-end">
+                <div className="flex-grow flex space-x-1">
+                    <span>Currency:</span>
+                    <DropDown
+                        customClasses="w-32"
+                        renderAsLink={true}
+                        activeEntry={currency}
+                        entries={[
+                            {
+                                title: "EUR",
+                                onClick: () => setCurrency("EUR"),
+                            },
+                            {
+                                title: "USD",
+                                onClick: () => setCurrency("USD"),
+                            },
+                        ]}
+                    />
+                </div>
                 <button className="my-0 flex items-center space-x-2" disabled={!stripe || isLoading}>
                     <span>Add Payment Method</span>
                     {isLoading && <Spinner className="h-5 w-5 animate-spin filter brightness-150" />}
diff --git a/components/gitpod-protocol/src/gitpod-service.ts b/components/gitpod-protocol/src/gitpod-service.ts
index f46c49b99b23f7..5d78db0c5fedae 100644
--- a/components/gitpod-protocol/src/gitpod-service.ts
+++ b/components/gitpod-protocol/src/gitpod-service.ts
@@ -60,7 +60,6 @@ import {
 import { RemotePageMessage, RemoteTrackMessage, RemoteIdentifyMessage } from "./analytics";
 import { IDEServer } from "./ide-protocol";
 import { InstallationAdminSettings, TelemetryData } from "./installation-admin-protocol";
-import { Currency } from "./plans";
 import { ListBilledUsageResponse, ListBilledUsageRequest } from "./usage";
 import { SupportedWorkspaceClass } from "./workspace-class";
 import { BillingMode } from "./billing-mode";
@@ -292,7 +291,8 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getStripePublishableKey(): Promise<string>;
     getStripeSetupIntentClientSecret(): Promise<string>;
     findStripeSubscriptionIdForTeam(teamId: string): Promise<string | undefined>;
-    subscribeTeamToStripe(teamId: string, setupIntentId: string, currency: Currency): Promise<void>;
+    createOrUpdateStripeCustomerForTeam(teamId: string, currency: string): Promise<void>;
+    subscribeTeamToStripe(teamId: string, setupIntentId: string): Promise<void>;
     getStripePortalUrlForTeam(teamId: string): Promise<string>;
     getSpendingLimitForTeam(teamId: string): Promise<number | undefined>;
     setSpendingLimitForTeam(teamId: string, spendingLimit: number): Promise<void>;
diff --git a/components/server/ee/src/user/stripe-service.ts b/components/server/ee/src/user/stripe-service.ts
index c231ef3d484353..79eb2542c13001 100644
--- a/components/server/ee/src/user/stripe-service.ts
+++ b/components/server/ee/src/user/stripe-service.ts
@@ -7,7 +7,6 @@
 import { inject, injectable } from "inversify";
 import Stripe from "stripe";
 import { Team, User } from "@gitpod/gitpod-protocol";
-import { Currency } from "@gitpod/gitpod-protocol/lib/plans";
 import { Config } from "../../../src/config";
 
 @injectable()
@@ -50,14 +49,10 @@ export class StripeService {
         return result.data[0];
     }
 
-    async createCustomerForUser(user: User, setupIntentId: string): Promise<Stripe.Customer> {
+    async createCustomerForUser(user: User): Promise<Stripe.Customer> {
         if (await this.findCustomerByUserId(user.id)) {
             throw new Error(`A Stripe customer already exists for user '${user.id}'`);
         }
-        const setupIntent = await this.getStripe().setupIntents.retrieve(setupIntentId);
-        if (typeof setupIntent.payment_method !== "string") {
-            throw new Error("The provided Stripe SetupIntent does not have a valid payment method attached");
-        }
         // Create the customer in Stripe
         const customer = await this.getStripe().customers.create({
             email: User.getPrimaryEmail(user),
@@ -66,24 +61,13 @@ export class StripeService {
                 userId: user.id,
             },
         });
-        // Attach the provided payment method to the customer
-        await this.getStripe().paymentMethods.attach(setupIntent.payment_method, {
-            customer: customer.id,
-        });
-        await this.getStripe().customers.update(customer.id, {
-            invoice_settings: { default_payment_method: setupIntent.payment_method },
-        });
         return customer;
     }
 
-    async createCustomerForTeam(user: User, team: Team, setupIntentId: string): Promise<Stripe.Customer> {
+    async createCustomerForTeam(user: User, team: Team): Promise<Stripe.Customer> {
         if (await this.findCustomerByTeamId(team.id)) {
             throw new Error(`A Stripe customer already exists for team '${team.id}'`);
         }
-        const setupIntent = await this.getStripe().setupIntents.retrieve(setupIntentId);
-        if (typeof setupIntent.payment_method !== "string") {
-            throw new Error("The provided Stripe SetupIntent does not have a valid payment method attached");
-        }
         // Create the customer in Stripe
         const userName = User.getName(user);
         const customer = await this.getStripe().customers.create({
@@ -93,6 +77,18 @@ export class StripeService {
                 teamId: team.id,
             },
         });
+        return customer;
+    }
+
+    async setPreferredCurrencyForCustomer(customer: Stripe.Customer, currency: string): Promise<void> {
+        await this.getStripe().customers.update(customer.id, { metadata: { preferredCurrency: currency } });
+    }
+
+    async setDefaultPaymentMethodForCustomer(customer: Stripe.Customer, setupIntentId: string): Promise<void> {
+        const setupIntent = await this.getStripe().setupIntents.retrieve(setupIntentId);
+        if (typeof setupIntent.payment_method !== "string") {
+            throw new Error("The provided Stripe SetupIntent does not have a valid payment method attached");
+        }
         // Attach the provided payment method to the customer
         await this.getStripe().paymentMethods.attach(setupIntent.payment_method, {
             customer: customer.id,
@@ -100,7 +96,6 @@ export class StripeService {
         await this.getStripe().customers.update(customer.id, {
             invoice_settings: { default_payment_method: setupIntent.payment_method },
         });
-        return customer;
     }
 
     async getPortalUrlForTeam(team: Team): Promise<string> {
@@ -129,7 +124,8 @@ export class StripeService {
         await this.getStripe().subscriptions.del(subscriptionId);
     }
 
-    async createSubscriptionForCustomer(customerId: string, currency: Currency): Promise<void> {
+    async createSubscriptionForCustomer(customer: Stripe.Customer): Promise<void> {
+        const currency = customer.metadata.preferredCurrency || "USD";
         const priceId = this.config?.stripeConfig?.usageProductPriceIds[currency];
         if (!priceId) {
             throw new Error(`No Stripe Price ID configured for currency '${currency}'`);
@@ -137,7 +133,7 @@ export class StripeService {
         const startOfNextMonth = new Date(new Date().toISOString().slice(0, 7) + "-01"); // First day of this month (YYYY-MM-01)
         startOfNextMonth.setMonth(startOfNextMonth.getMonth() + 1); // Add one month
         await this.getStripe().subscriptions.create({
-            customer: customerId,
+            customer: customer.id,
             items: [{ price: priceId }],
             billing_cycle_anchor: Math.round(startOfNextMonth.getTime() / 1000),
         });
diff --git a/components/server/ee/src/workspace/gitpod-server-impl.ts b/components/server/ee/src/workspace/gitpod-server-impl.ts
index 53c56af4b53018..70f3e302599460 100644
--- a/components/server/ee/src/workspace/gitpod-server-impl.ts
+++ b/components/server/ee/src/workspace/gitpod-server-impl.ts
@@ -80,7 +80,7 @@ import {
     TeamSubscriptionSlot,
     TeamSubscriptionSlotResolved,
 } from "@gitpod/gitpod-protocol/lib/team-subscription-protocol";
-import { Currency, Plans } from "@gitpod/gitpod-protocol/lib/plans";
+import { Plans } from "@gitpod/gitpod-protocol/lib/plans";
 import * as pThrottle from "p-throttle";
 import { formatDate } from "@gitpod/gitpod-protocol/lib/util/date-time";
 import { FindUserByIdentityStrResult, UserService } from "../../../src/user/user-service";
@@ -2054,22 +2054,37 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         }
     }
 
+    async createOrUpdateStripeCustomerForTeam(ctx: TraceContext, teamId: string, currency: string): Promise<void> {
+        const user = this.checkAndBlockUser("createOrUpdateStripeCustomerForTeam");
+        const team = await this.guardTeamOperation(teamId, "update");
+        await this.ensureStripeApiIsAllowed({ team });
+        try {
+            let customer = await this.stripeService.findCustomerByTeamId(team!.id);
+            if (!customer) {
+                customer = await this.stripeService.createCustomerForTeam(user, team!);
+            }
+            await this.stripeService.setPreferredCurrencyForCustomer(customer, currency);
+        } catch (error) {
+            log.error(`Failed to update Stripe customer profile for team '${teamId}'`, error);
+            throw new ResponseError(
+                ErrorCodes.INTERNAL_SERVER_ERROR,
+                `Failed to update Stripe customer profile for team '${teamId}'`,
+            );
+        }
+    }
+
     protected defaultSpendingLimit = 100;
-    async subscribeTeamToStripe(
-        ctx: TraceContext,
-        teamId: string,
-        setupIntentId: string,
-        currency: Currency,
-    ): Promise<void> {
-        const user = this.checkAndBlockUser("subscribeUserToStripe");
+    async subscribeTeamToStripe(ctx: TraceContext, teamId: string, setupIntentId: string): Promise<void> {
+        this.checkAndBlockUser("subscribeUserToStripe");
         const team = await this.guardTeamOperation(teamId, "update");
         await this.ensureStripeApiIsAllowed({ team });
         try {
             let customer = await this.stripeService.findCustomerByTeamId(team!.id);
             if (!customer) {
-                customer = await this.stripeService.createCustomerForTeam(user, team!, setupIntentId);
+                throw new Error(`No Stripe customer profile for team '${team.id}'`);
             }
-            await this.stripeService.createSubscriptionForCustomer(customer.id, currency);
+            await this.stripeService.setDefaultPaymentMethodForCustomer(customer, setupIntentId);
+            await this.stripeService.createSubscriptionForCustomer(customer);
 
             const attributionId = AttributionId.render({ kind: "team", teamId });
 
diff --git a/components/server/src/auth/rate-limiter.ts b/components/server/src/auth/rate-limiter.ts
index e041213b794017..39bbcf011ac8d9 100644
--- a/components/server/src/auth/rate-limiter.ts
+++ b/components/server/src/auth/rate-limiter.ts
@@ -214,6 +214,7 @@ function getConfig(config: RateLimiterConfig): RateLimiterConfig {
         getStripePublishableKey: { group: "default", points: 1 },
         getStripeSetupIntentClientSecret: { group: "default", points: 1 },
         findStripeSubscriptionIdForTeam: { group: "default", points: 1 },
+        createOrUpdateStripeCustomerForTeam: { group: "default", points: 1 },
         subscribeTeamToStripe: { group: "default", points: 1 },
         getStripePortalUrlForTeam: { group: "default", points: 1 },
         listBilledUsage: { group: "default", points: 1 },
diff --git a/components/server/src/config.ts b/components/server/src/config.ts
index 662e2d09b5dd2f..2d92148653c3de 100644
--- a/components/server/src/config.ts
+++ b/components/server/src/config.ts
@@ -27,7 +27,7 @@ export type Config = Omit<
     workspaceDefaults: WorkspaceDefaults;
     chargebeeProviderOptions?: ChargebeeProviderOptions;
     stripeSecrets?: { publishableKey: string; secretKey: string };
-    stripeConfig?: { usageProductPriceIds: { EUR: string; USD: string } };
+    stripeConfig?: { usageProductPriceIds: { [currency: string]: string } };
     builtinAuthProvidersConfigured: boolean;
     inactivityPeriodForRepos?: number;
 };
diff --git a/components/server/src/workspace/gitpod-server-impl.ts b/components/server/src/workspace/gitpod-server-impl.ts
index 462106eddb109d..85a20058c8e61a 100644
--- a/components/server/src/workspace/gitpod-server-impl.ts
+++ b/components/server/src/workspace/gitpod-server-impl.ts
@@ -171,7 +171,6 @@ import { Deferred } from "@gitpod/gitpod-protocol/lib/util/deferred";
 import { InstallationAdminTelemetryDataProvider } from "../installation-admin/telemetry-data-provider";
 import { LicenseEvaluator } from "@gitpod/licensor/lib";
 import { Feature } from "@gitpod/licensor/lib/api";
-import { Currency } from "@gitpod/gitpod-protocol/lib/plans";
 import { getExperimentsClientForBackend } from "@gitpod/gitpod-protocol/lib/experiments/configcat-server";
 import { ListBilledUsageRequest, ListBilledUsageResponse } from "@gitpod/gitpod-protocol/lib/usage";
 import { WorkspaceClusterImagebuilderClientProvider } from "./workspace-cluster-imagebuilder-client-provider";
@@ -3215,12 +3214,10 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
     async findStripeSubscriptionIdForTeam(ctx: TraceContext, teamId: string): Promise<string | undefined> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
-    async subscribeTeamToStripe(
-        ctx: TraceContext,
-        teamId: string,
-        setupIntentId: string,
-        currency: Currency,
-    ): Promise<void> {
+    async createOrUpdateStripeCustomerForTeam(ctx: TraceContext, teamId: string, currency: string): Promise<void> {
+        throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
+    }
+    async subscribeTeamToStripe(ctx: TraceContext, teamId: string, setupIntentId: string): Promise<void> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
     async getStripePortalUrlForTeam(ctx: TraceContext, teamId: string): Promise<string> {

From 82362cc3d5d64cbc0cafba363cd61463f01e8a79 Mon Sep 17 00:00:00 2001
From: Jan Keromnes <janx@linux.com>
Date: Wed, 31 Aug 2022 08:55:57 +0000
Subject: [PATCH 4/5] [server] Poll Stripe after creating a new customer

---
 .../server/ee/src/user/stripe-service.ts      | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/components/server/ee/src/user/stripe-service.ts b/components/server/ee/src/user/stripe-service.ts
index 79eb2542c13001..cdd5930a06d5bc 100644
--- a/components/server/ee/src/user/stripe-service.ts
+++ b/components/server/ee/src/user/stripe-service.ts
@@ -9,6 +9,9 @@ import Stripe from "stripe";
 import { Team, User } from "@gitpod/gitpod-protocol";
 import { Config } from "../../../src/config";
 
+const POLL_CREATED_CUSTOMER_INTERVAL_MS = 1000;
+const POLL_CREATED_CUSTOMER_MAX_ATTEMPTS = 30;
+
 @injectable()
 export class StripeService {
     @inject(Config) protected readonly config: Config;
@@ -61,6 +64,14 @@ export class StripeService {
                 userId: user.id,
             },
         });
+        // Wait for the customer to show up in Stripe search results before proceeding
+        let attempts = 0;
+        while (!(await this.findCustomerByUserId(user.id))) {
+            await new Promise((resolve) => setTimeout(resolve, POLL_CREATED_CUSTOMER_INTERVAL_MS));
+            if (++attempts > POLL_CREATED_CUSTOMER_MAX_ATTEMPTS) {
+                throw new Error(`Could not confirm Stripe customer creation for user '${user.id}'`);
+            }
+        }
         return customer;
     }
 
@@ -77,6 +88,14 @@ export class StripeService {
                 teamId: team.id,
             },
         });
+        // Wait for the customer to show up in Stripe search results before proceeding
+        let attempts = 0;
+        while (!(await this.findCustomerByTeamId(team.id))) {
+            await new Promise((resolve) => setTimeout(resolve, POLL_CREATED_CUSTOMER_INTERVAL_MS));
+            if (++attempts > POLL_CREATED_CUSTOMER_MAX_ATTEMPTS) {
+                throw new Error(`Could not confirm Stripe customer creation for team '${team.id}'`);
+            }
+        }
         return customer;
     }
 

From 491c9fc80b527d0757f8e164372b45a8f6898a97 Mon Sep 17 00:00:00 2001
From: Jan Keromnes <janx@linux.com>
Date: Wed, 31 Aug 2022 09:25:03 +0000
Subject: [PATCH 5/5] [dashboard] Ensure that context menus collapse even in
 Modals by not calling e.stopPropagation() on click events

---
 components/dashboard/src/components/ContextMenu.tsx | 6 +++---
 components/dashboard/src/components/Modal.tsx       | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index 7b4db1518ef80e..206e8368052713 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -35,7 +35,7 @@ function ContextMenu(props: ContextMenuProps) {
         setExpanded(!expanded);
     };
 
-    const handler = (evt: KeyboardEvent) => {
+    const keydownHandler = (evt: KeyboardEvent) => {
         if (evt.key === "Escape") {
             setExpanded(false);
         }
@@ -55,11 +55,11 @@ function ContextMenu(props: ContextMenuProps) {
     };
 
     useEffect(() => {
-        window.addEventListener("keydown", handler);
+        window.addEventListener("keydown", keydownHandler);
         window.addEventListener("click", clickHandler);
         // Remove event listeners on cleanup
         return () => {
-            window.removeEventListener("keydown", handler);
+            window.removeEventListener("keydown", keydownHandler);
             window.removeEventListener("click", clickHandler);
         };
     }, []); // Empty array ensures that effect is only run on mount and unmount
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index df1a4e65d06072..c65e7bcbd039fe 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/components/dashboard/src/components/Modal.tsx
@@ -79,7 +79,6 @@ export default function Modal(props: {
                         "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 max-w-lg mx-auto text-left " +
                         (props.className || "")
                     }
-                    onClick={(e) => e.stopPropagation()}
                 >
                     {props.closeable !== false && (
                         <div