[server][dashboard] Allow (new) Teams to buy and manage (legacy) Team Plans

Author: jankeromnes

components/dashboard/src/App.tsx

@@ -41,6 +41,7 @@ const NewTeam = React.lazy(() => import(/* webpackPrefetch: true */ './teams/New
 const JoinTeam = React.lazy(() => import(/* webpackPrefetch: true */ './teams/JoinTeam'));
 const Members = React.lazy(() => import(/* webpackPrefetch: true */ './teams/Members'));
 const TeamSettings = React.lazy(() => import(/* webpackPrefetch: true */ './teams/TeamSettings'));
+const TeamPlans = React.lazy(() => import(/* webpackPrefetch: true */ './teams/TeamPlans'));
 const NewProject = React.lazy(() => import(/* webpackPrefetch: true */ './projects/NewProject'));
 const ConfigureProject = React.lazy(() => import(/* webpackPrefetch: true */ './projects/ConfigureProject'));
 const Projects = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Projects'));
@@ -355,6 +356,9 @@ function App() {
                             if (maybeProject === "settings") {
                                 return <TeamSettings />;
                             }
+                            if (maybeProject === "plans") {
+                                return <TeamPlans />;
+                            }
                             if (resourceOrPrebuild === "prebuilds") {
                                 return <Prebuilds />;
                             }

components/dashboard/src/Menu.tsx

@@ -43,7 +43,7 @@ export default function Menu() {
     const match = useRouteMatch<{ segment1?: string, segment2?: string, segment3?: string }>("/(t/)?:segment1/:segment2?/:segment3?");
     const projectSlug = (() => {
         const resource = match?.params?.segment2;
-        if (resource && ![/* team sub-pages */ "projects", "members", "settings", /* admin sub-pages */ "users", "workspaces"].includes(resource)) {
+        if (resource && ![/* team sub-pages */ "projects", "members", "settings", "plans", /* admin sub-pages */ "users", "workspaces"].includes(resource)) {
             return resource;
         }
     })();
@@ -148,7 +148,7 @@ export default function Menu() {
                 teamSettingsList.push({
                     title: 'Settings',
                     link: `/t/${team.slug}/settings`,
-                    alternatives: getTeamSettingsMenu(team).flatMap(e => e.link),
+                    alternatives: getTeamSettingsMenu({ team, showPaymentUI }).flatMap(e => e.link),
                 })
             }
 

components/dashboard/src/teams/TeamPlans.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { TeamMemberInfo } from "@gitpod/gitpod-protocol";
+import { Currency, Plans } from "@gitpod/gitpod-protocol/lib/plans";
+import { useContext, useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import SelectableCard from "../components/SelectableCard";
+import { PaymentContext } from "../payment-context";
+import { getGitpodService } from "../service/service";
+import { getCurrentTeam, TeamsContext } from "./teams-context";
+import { getTeamSettingsMenu } from "./TeamSettings";
+
+export default function TeamPlans() {
+    const { teams } = useContext(TeamsContext);
+    const location = useLocation();
+    const team = getCurrentTeam(location, teams);
+    const [ members, setMembers ] = useState<TeamMemberInfo[]>([]);
+    const { showPaymentUI, currency } = useContext(PaymentContext);
+
+    useEffect(() => {
+        if (!team) {
+            return;
+        }
+        (async () => {
+            const infos = await getGitpodService().server.getTeamMembers(team.id);
+            setMembers(infos);
+        })();
+    }, [ team ]);
+
+    const availableTeamPlans = Plans.getAvailableTeamPlans(currency || 'USD');
+
+    return <PageWithSubMenu subMenu={getTeamSettingsMenu({ team, showPaymentUI })} title="Plans" subtitle="Manage team plans and billing.">
+        <button>Billing</button>
+        <div className="mt-4 space-x-4 flex">
+            <SelectableCard className="w-36 h-32" title="Free" selected={true} onClick={() => {}}>
+                {members.length} x {Currency.getSymbol(currency || 'USD')}0 = {Currency.getSymbol(currency || 'USD')}0
+            </SelectableCard>
+            {availableTeamPlans.map(tp => <SelectableCard className="w-36 h-32" title={tp.name} selected={false} onClick={() => {}}>
+                {members.length} x {Currency.getSymbol(tp.currency)}{tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}{members.length * tp.pricePerMonth}
+            </SelectableCard>)}
+        </div>
+    </PageWithSubMenu>;
+}

components/dashboard/src/teams/TeamSettings.tsx

@@ -10,16 +10,24 @@ import { Redirect, useLocation } from "react-router";
 import CodeText from "../components/CodeText";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import { PaymentContext } from "../payment-context";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
 
-export function getTeamSettingsMenu(team?: Team) {
+export function getTeamSettingsMenu(params: { team?: Team, showPaymentUI?: boolean }) {
+    const { team, showPaymentUI } = params;
     return [
         {
             title: 'General',
             link: [`/t/${team?.slug}/settings`],
         },
+        ...(showPaymentUI ? [
+            {
+                title: 'Paid Plans',
+                link: [`/t/${team?.slug}/plans`],
+            },
+        ] : []),
     ];
 }
 
@@ -31,6 +39,7 @@ export default function TeamSettings() {
     const { user } = useContext(UserContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
+    const { showPaymentUI } = useContext(PaymentContext);
 
     const close = () => setModal(false);
 
@@ -55,7 +64,7 @@ export default function TeamSettings() {
     };
 
     return <>
-        <PageWithSubMenu subMenu={getTeamSettingsMenu(team)} title="Settings" subtitle="Manage general team settings.">
+        <PageWithSubMenu subMenu={getTeamSettingsMenu({ team, showPaymentUI })} title="Settings" subtitle="Manage general team settings.">
             <h3>Delete Team</h3>
             <p className="text-base text-gray-500 pb-4 max-w-2xl">Deleting this team will also remove all associated data with this team, including projects and workspaces. Deleted teams cannot be restored!</p>
             <button className="danger secondary" onClick={() => setModal(true)}>Delete Team</button>

components/gitpod-db/src/typeorm/entity/db-team-subscription-2.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the Gitpod Enterprise Source Code License,
+ * See License.enterprise.txt in the project root folder.
+ */
+
+import { Entity, Column, PrimaryColumn, Index } from "typeorm";
+
+import { TeamSubscription2 } from "@gitpod/gitpod-protocol/lib/team-subscription-protocol";
+
+import { TypeORM } from "../../typeorm/typeorm";
+import { Transformer } from "../../typeorm/transformer";
+
+@Entity()
+@Index("ind_team_paymentReference", ["teamId", "paymentReference"])
+@Index("ind_team_startdate", ["teamId", "startDate"])
+// on DB but not Typeorm: @Index("ind_lastModified", ["_lastModified"])   // DBSync
+export class DBTeamSubscription2 implements TeamSubscription2 {
+
+    @PrimaryColumn("uuid")
+    id: string;
+
+    @Column(TypeORM.UUID_COLUMN_TYPE)
+    teamId: string;
+
+    @Column()
+    paymentReference: string;
+
+    @Column()
+    startDate: string;
+
+    @Column({
+        default: '',
+        transformer: Transformer.MAP_EMPTY_STR_TO_UNDEFINED
+    })
+    endDate?: string;
+
+    @Column()
+    planId: string;
+
+    @Column('int')
+    quantity: number;
+
+    @Column({
+        default: '',
+        transformer: Transformer.MAP_EMPTY_STR_TO_UNDEFINED
+    })
+    cancellationDate?: string;
+
+    // This column triggers the db-sync deletion mechanism. It's not intended for public consumption.
+    @Column()
+    deleted: boolean;
+}

components/gitpod-db/src/typeorm/team-subscription-db-impl.ts

@@ -11,6 +11,7 @@ import { TeamSubscription, TeamSubscriptionSlot } from "@gitpod/gitpod-protocol/
 
 import { TeamSubscriptionDB } from "../team-subscription-db";
 import { DBTeamSubscription } from "./entity/db-team-subscription";
+import { DBTeamSubscription2 } from "./entity/db-team-subscription-2";
 import { DBTeamSubscriptionSlot } from "./entity/db-team-subscription-slot";
 import { TypeORM } from "./typeorm";
 
@@ -33,6 +34,10 @@ export class TeamSubscriptionDBImpl implements TeamSubscriptionDB {
         return (await this.getEntityManager()).getRepository(DBTeamSubscription);
     }
 
+    protected async getRepo2(): Promise<Repository<DBTeamSubscription2>> {
+        return (await this.getEntityManager()).getRepository(DBTeamSubscription2);
+    }
+
     protected async getSlotsRepo(): Promise<Repository<DBTeamSubscriptionSlot>> {
         return (await this.getEntityManager()).getRepository(DBTeamSubscriptionSlot);
     }

components/gitpod-protocol/src/team-subscription-protocol.ts

@@ -20,6 +20,17 @@ export interface TeamSubscription {
     deleted?: boolean;
 }
 
+export interface TeamSubscription2 {
+    id: string;
+    teamId: string;
+    planId: string;
+    startDate: string;
+    endDate?: string;
+    /** The Chargebee subscription id */
+    paymentReference: string;
+    cancellationDate?: string;
+}
+
 export namespace TeamSubscription {
     export const create = (ts: Omit<TeamSubscription, 'id'>): TeamSubscription => {
         const withId = ts as TeamSubscription;