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

jankeromnes · jankeromnes · commit c73b1bc64aff · 2022-02-14T15:45:09.000Z
diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
@@ -45,6 +45,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'));
@@ -366,6 +367,9 @@ function App() {
                             if (maybeProject === "settings") {
                                 return <TeamSettings />;
                             }
+                            if (maybeProject === "plans") {
+                                return <TeamPlans />;
+                            }
                             if (resourceOrPrebuild === "prebuilds") {
                                 return <Prebuilds />;
                             }
diff --git a/components/dashboard/src/Menu.tsx b/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),
                 })
             }
 
diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
@@ -430,7 +430,7 @@ export default function () {
                     ? <progress value={currentPlan.hoursPerMonth - accountStatement.remainingHours} max={currentPlan.hoursPerMonth} />
                     : <progress value="0" max="100" />}
                 <p className="text-sm">
-                    <a className={`text-blue-light hover:underline" ${isChargebeeCustomer ? '' : 'invisible'}`} href="javascript:void(0)" onClick={() => { ChargebeeClient.getOrCreate().then(chargebeeClient => chargebeeClient.openPortal()); }}>Billing</a>
+                    <a className={`gp-link ${isChargebeeCustomer ? '' : 'invisible'}`} href="javascript:void(0)" onClick={() => { ChargebeeClient.getOrCreate().then(chargebeeClient => chargebeeClient.openPortal()); }}>Billing</a>
                     {!!accountStatement && Plans.isFreePlan(currentPlan.chargebeeId) && <span className="pl-6">{currency === 'EUR'
                         ? <>€ / <a className="text-blue-light hover:underline" href="javascript:void(0)" onClick={() => setCurrency('USD')}>$</a></>
                         : <><a className="text-blue-light hover:underline" href="javascript:void(0)" onClick={() => setCurrency('EUR')}>€</a> / $</>}
diff --git a/components/dashboard/src/teams/TeamPlans.tsx b/components/dashboard/src/teams/TeamPlans.tsx
@@ -0,0 +1,68 @@
+/**
+ * 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 { ChargebeeClient } from "../chargebee/chargebee-client";
+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, setCurrency } = useContext(PaymentContext);
+
+    useEffect(() => {
+        if (!team) {
+            return;
+        }
+        (async () => {
+            const infos = await getGitpodService().server.getTeamMembers(team.id);
+            setMembers(infos);
+        })();
+    }, [ team ]);
+
+    const availableTeamPlans = Plans.getAvailableTeamPlans(currency || 'USD');
+
+    const checkout = async (chargebeePlanId: string) => {
+        if (!team || members.length < 1) {
+            return;
+        }
+        const chargebeeClient = await ChargebeeClient.getOrCreate();
+        await new Promise((resolve, reject) => {
+            chargebeeClient.checkout(paymentServer => paymentServer.teamCheckout(team.id, chargebeePlanId), {
+                success: resolve,
+                error: reject,
+            });
+        });
+    }
+
+    return <PageWithSubMenu subMenu={getTeamSettingsMenu({ team, showPaymentUI })} title="Plans" subtitle="Manage team plans and billing.">
+        <p className="text-sm">
+            <a className={`gp-link ${isChargebeeCustomer ? '' : 'invisible'}`} href="javascript:void(0)" onClick={() => { ChargebeeClient.getOrCreate().then(chargebeeClient => chargebeeClient.openPortal()); }}>Billing</a>
+            <span className="pl-6">{currency === 'EUR'
+                ? <>€ / <a className="gp-link" href="javascript:void(0)" onClick={() => setCurrency('USD')}>$</a></>
+                : <><a className="gp-link" href="javascript:void(0)" onClick={() => setCurrency('EUR')}>€</a> / $</>}
+            </span>
+        </p>
+        <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={() => checkout(tp.chargebeeId)}>
+                {members.length} x {Currency.getSymbol(tp.currency)}{tp.pricePerMonth} = {Currency.getSymbol(tp.currency)}{members.length * tp.pricePerMonth}
+            </SelectableCard>)}
+        </div>
+    </PageWithSubMenu>;
+}
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/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>
diff --git a/components/ee/payment-endpoint/src/chargebee/team-subscription-handler.ts b/components/ee/payment-endpoint/src/chargebee/team-subscription-handler.ts
@@ -38,13 +38,13 @@ export class TeamSubscriptionHandler implements EventHandler<chargebee.Subscript
 
     async handleSingleEvent(event: chargebee.Event<chargebee.SubscriptionEventV2>): Promise<boolean> {
         const chargebeeSubscription = event.content.subscription;
-        const userId = chargebeeSubscription.customer_id;
+        const customerId = chargebeeSubscription.customer_id;
         const eventType = event.event_type;
 
         const logContext = this.userContext(event);
         log.info(logContext, `Start TeamSubscriptionHandler.handleSingleEvent`, { eventType });
         try {
-            await this.mapToTeamSubscription(userId, eventType, chargebeeSubscription);
+            await this.mapToTeamSubscription(customerId, eventType, chargebeeSubscription);
         } catch (error) {
             log.error(logContext, "Error in TeamSubscriptionHandler.handleSingleEvent", error);
             throw error;
@@ -53,10 +53,11 @@ export class TeamSubscriptionHandler implements EventHandler<chargebee.Subscript
         return true;
     }
 
-    async mapToTeamSubscription(userId: string, eventType: chargebee.EventType, chargebeeSubscription: chargebee.Subscription) {
+    async mapToTeamSubscription(customerId: string, eventType: chargebee.EventType, chargebeeSubscription: chargebee.Subscription) {
+        // TODO(janx) Handle `customerId.startsWith('team:')`
         await this.db.transaction(async (db) => {
             const subs = await db.findTeamSubscriptions({
-                userId,
+                userId: customerId,
                 paymentReference: chargebeeSubscription.id
             });
             if (subs.length === 0) {
@@ -67,7 +68,7 @@ export class TeamSubscriptionHandler implements EventHandler<chargebee.Subscript
                 }
 
                 const ts = TeamSubscription.create({
-                    userId,
+                    userId: customerId,
                     paymentReference: chargebeeSubscription.id,
                     planId: chargebeeSubscription.plan_id,
                     startDate: getStartDate(chargebeeSubscription),
diff --git a/components/gitpod-db/src/typeorm/entity/db-team-subscription-2.ts b/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;
+}
diff --git a/components/gitpod-db/src/typeorm/team-subscription-db-impl.ts b/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);
     }
diff --git a/components/gitpod-protocol/src/gitpod-service.ts b/components/gitpod-protocol/src/gitpod-service.ts
@@ -223,6 +223,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getChargebeeSiteId(): Promise<string>;
     createPortalSession(): Promise<{}>;
     checkout(planId: string, planQuantity?: number): Promise<{}>;
+    teamCheckout(teamId: string, planId: string): Promise<{}>;
     getAvailableCoupons(): Promise<PlanCoupon[]>;
     getAppliedCoupons(): Promise<PlanCoupon[]>;
 
diff --git a/components/gitpod-protocol/src/team-subscription-protocol.ts b/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;
diff --git a/components/server/ee/src/workspace/gitpod-server-impl.ts b/components/server/ee/src/workspace/gitpod-server-impl.ts
@@ -954,6 +954,44 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         }
     }
 
+    async teamCheckout(ctx: TraceContext, teamId: string, planId: string): Promise<{}> {
+        traceAPIParams(ctx, { teamId, planId });
+
+        const user = this.checkUser('teamCheckout');
+
+        const team = await this.teamDB.findTeamById(teamId);
+        if (!team) {
+            throw new ResponseError(ErrorCodes.NOT_FOUND, "Team not found");
+        }
+        const members = await this.teamDB.findMembersByTeam(team.id);
+        await this.guardAccess({ kind: "team", subject: team, members }, "update");
+
+        // TODO(janx): If student team plan, check that every member is eligible
+
+        const coupon = await this.findAvailableCouponForPlan(user, planId);
+
+        const email = User.getPrimaryEmail(user);
+        return new Promise((resolve, reject) => {
+            this.chargebeeProvider.hosted_page.checkout_new({
+                customer: {
+                    id: 'team:' + team.id,
+                    email,
+                },
+                subscription: {
+                    plan_id: planId,
+                    plan_quantity: members.length,
+                    coupon,
+                }
+            }).request((error: any, result: any) => {
+                if (error) {
+                    reject(error);
+                    return;
+                }
+                resolve(result.hosted_page);
+            });
+        });
+    }
+
     protected async findAvailableCouponForPlan(user: User, planId: string): Promise<string | undefined> {
         const couponNames = await this.couponComputer.getAvailableCouponIds(user);
         const chargbeeCoupons = await Promise.all(couponNames.map(c => new Promise<chargebee.Coupon | undefined>((resolve, reject) => this.chargebeeProvider.coupon.retrieve(c).request((err, res) => {
diff --git a/components/server/src/auth/rate-limiter.ts b/components/server/src/auth/rate-limiter.ts
@@ -163,6 +163,7 @@ function getConfig(config: RateLimiterConfig): RateLimiterConfig {
         "adminSetProfessionalOpenSource":  { group: "default", points: 1 },
         "adminGrantExtraHours":  { group: "default", points: 1 },
         "checkout":  { group: "default", points: 1 },
+        "teamCheckout":  { group: "default", points: 1 },
         "createPortalSession":  { group: "default", points: 1 },
         "getAccountStatement":  { group: "default", points: 1 },
         "getAppliedCoupons":  { group: "default", points: 1 },
diff --git a/components/server/src/workspace/gitpod-server-impl.ts b/components/server/src/workspace/gitpod-server-impl.ts
@@ -2457,6 +2457,9 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
     async checkout(ctx: TraceContext, planId: string, planQuantity?: number): Promise<{}> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
+    async teamCheckout(ctx: TraceContext, teamId: string, planId: string): Promise<{}> {
+        throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
+    }
     async getAvailableCoupons(ctx: TraceContext): Promise<PlanCoupon[]> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
