[UBP] Add placeholder billing configuration UI to the user settings page

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -7,6 +7,7 @@
 import { useState, useContext, useEffect } from "react";
 import { Appearance, loadStripe, Stripe } from "@stripe/stripe-js";
 import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 import { ThemeContext } from "../theme-context";
 import { PaymentContext } from "../payment-context";
@@ -16,7 +17,7 @@ import Modal from "../components/Modal";
 import Alert from "./Alert";
 
 interface Props {
-    userOrTeamId: string;
+    attributionId: AttributionId;
     showSpinner: boolean;
     showUpgradeBilling: boolean;
     showManageBilling: boolean;
@@ -26,7 +27,7 @@ interface Props {
 }
 
 export default function UsageBasedBillingConfig({
-    userOrTeamId,
+    attributionId,
     showSpinner,
     showUpgradeBilling,
     showManageBilling,
@@ -89,7 +90,7 @@ export default function UsageBasedBillingConfig({
                 )}
             </div>
             {showBillingSetupModal && (
-                <BillingSetupModal id={userOrTeamId} onClose={() => setShowBillingSetupModal(false)} />
+                <BillingSetupModal attributionId={attributionId} onClose={() => setShowBillingSetupModal(false)} />
             )}
             {showUpdateLimitModal && (
                 <UpdateLimitModal
@@ -102,7 +103,7 @@ export default function UsageBasedBillingConfig({
     );
 }
 
-function BillingSetupModal(props: { id: string; onClose: () => void }) {
+function BillingSetupModal(props: { attributionId: AttributionId; onClose: () => void }) {
     const { isDark } = useContext(ThemeContext);
     const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | undefined>();
     const [stripeSetupIntentClientSecret, setStripeSetupIntentClientSecret] = useState<string | undefined>();
@@ -132,7 +133,7 @@ function BillingSetupModal(props: { id: string; onClose: () => void }) {
                             clientSecret: stripeSetupIntentClientSecret,
                         }}
                     >
-                        <CreditCardInputForm id={props.id} />
+                        <CreditCardInputForm attributionId={props.attributionId} />
                     </Elements>
                 )}
             </div>
@@ -146,7 +147,7 @@ function getStripeAppearance(isDark?: boolean): Appearance {
     };
 }
 
-function CreditCardInputForm(props: { id: string }) {
+function CreditCardInputForm(props: { attributionId: AttributionId }) {
     const stripe = useStripe();
     const elements = useElements();
     const { currency, setCurrency } = useContext(PaymentContext);
@@ -161,8 +162,16 @@ function CreditCardInputForm(props: { id: string }) {
         setBillingError(undefined);
         setIsLoading(true);
         try {
-            // Create Stripe customer for team & currency (or update currency)
-            await getGitpodService().server.createOrUpdateStripeCustomerForTeam(props.id, currency);
+            if (props.attributionId.kind === "team") {
+                // Create Stripe customer for team & currency (or update currency)
+                await getGitpodService().server.createOrUpdateStripeCustomerForTeam(
+                    props.attributionId.teamId,
+                    currency,
+                );
+            } else {
+                // Create Stripe customer for user & currency (or update currency)
+                await getGitpodService().server.createOrUpdateStripeCustomerForUser(currency);
+            }
             const result = await stripe.confirmSetup({
                 elements,
                 confirmParams: {

components/dashboard/src/settings/Billing.tsx

@@ -4,15 +4,33 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import { useContext } from "react";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { BillingAccountSelector } from "../components/BillingAccountSelector";
+import { UserContext } from "../user-context";
+import UsageBasedBillingConfig from "../components/UsageBasedBillingConfig";
+import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 
 export default function Billing() {
+    const { user } = useContext(UserContext);
+
+    const attributionId: AttributionId = { kind: "user", userId: user?.id || "" };
+
     return (
         <PageWithSettingsSubMenu title="Billing" subtitle="Usage-Based Billing.">
             <div>
                 <h3>Billing Account</h3>
                 <BillingAccountSelector />
+                <h3 className="mt-12">Usage-Based Billing</h3>
+                <UsageBasedBillingConfig
+                    attributionId={attributionId}
+                    showSpinner={!user}
+                    showUpgradeBilling={true}
+                    showManageBilling={false}
+                    doUpdateLimit={function (_: number): Promise<void> {
+                        throw new Error("Function not implemented.");
+                    }}
+                />
             </div>
         </PageWithSettingsSubMenu>
     );

components/dashboard/src/teams/TeamUsageBasedBilling.tsx

@@ -11,6 +11,7 @@ import { getCurrentTeam, TeamsContext } from "./teams-context";
 import { getGitpodService } from "../service/service";
 import UsageBasedBillingConfig from "../components/UsageBasedBillingConfig";
 import Alert from "../components/Alert";
+import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 
 type PendingStripeSubscription = { pendingSince: number };
 
@@ -161,6 +162,8 @@ export default function TeamUsageBasedBilling() {
         }
     };
 
+    const attributionId: AttributionId = { kind: "team", teamId: team?.id || "" };
+
     return (
         <>
             {billingError && (
@@ -170,7 +173,7 @@ export default function TeamUsageBasedBilling() {
             )}
             <h3>Usage-Based Billing</h3>
             <UsageBasedBillingConfig
-                userOrTeamId={team?.id || ""}
+                attributionId={attributionId}
                 showSpinner={showSpinner}
                 showUpgradeBilling={showUpgradeBilling}
                 showManageBilling={showManageBilling}