[dashboard] Re-implement Plans page for new dashboard

components/dashboard/package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "@gitpod/gitpod-protocol": "0.1.5",
+    "countries-list": "^2.6.1",
     "moment": "^2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

components/dashboard/src/Login.tsx

@@ -4,12 +4,13 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { gitpod, gitpodIcon } from './images';
 import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "./user-context";
 import { getGitpodService, gitpodHostUrl, reconnectGitpodService } from "./service/service";
 import { iconForAuthProvider, simplifyProviderName } from "./provider-utils";
+import gitpod from './images/gitpod.svg';
+import gitpodIcon from './icons/gitpod.svg';
 import automate from "./images/welcome/automate.svg";
 import code from "./images/welcome/code.svg";
 import collaborate from "./images/welcome/collaborate.svg";

components/dashboard/src/chargebee/chargebee-client.ts

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2021 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 * as chargebee from 'chargebee';
+
+import { Without } from '@gitpod/gitpod-protocol/lib/util/without';
+import { GitpodServer } from '@gitpod/gitpod-protocol';
+import { getGitpodService } from '../service/service';
+
+class ChargebeeClientProvider {
+    protected static client: chargebee.Client;
+
+    static async get() {
+        if (!this.client) {
+            await new Promise<void>((resolve) => {
+                var scriptTag = document.createElement('script');
+                scriptTag.src = "https://js.chargebee.com/v2/chargebee.js";
+                scriptTag.async = true;
+                scriptTag.addEventListener("load", () => {
+                    resolve();
+                });
+                document.head.appendChild(scriptTag);
+            })
+            const site = await getGitpodService().server.getChargebeeSiteId();
+            this.client = (((window as any).Chargebee) as chargebee.Client).init({
+                site
+            });
+        }
+        return this.client;
+    }
+}
+
+export interface OpenPortalParams {
+    loaded?: () => void;
+    close?: () => void;
+    visit?: (sectionName: string) => void;
+}
+
+// https://www.chargebee.com/checkout-portal-docs/api.html
+export class ChargebeeClient {
+    constructor(protected readonly client: chargebee.Client) {}
+
+    static async getOrCreate(): Promise<ChargebeeClient> {
+        const create = async () => {
+            const chargebeeClient = await ChargebeeClientProvider.get();
+            const client = new ChargebeeClient(chargebeeClient);
+            client.createPortalSession();
+            return client;
+        };
+
+        const w = window as any;
+        const _gp = w._gp || (w._gp = {});
+        const chargebeeClient = _gp.chargebeeClient || (_gp.chargebeeClient = await create());
+        return chargebeeClient;
+    }
+
+    checkout(hostedPage: (paymentServer: GitpodServer) => Promise<{}>, params: Without<chargebee.CheckoutCallbacks, 'hostedPage'> = { success: noOp })  {
+        const paymentServer = getGitpodService().server;
+        this.client.openCheckout({
+            ...params,
+            async hostedPage(): Promise<any> {
+                return hostedPage(paymentServer);
+            }
+        });
+    }
+
+    checkoutExisting(hostedPage: (paymentServer: GitpodServer) => Promise<{}>, params: Without<chargebee.CheckoutCallbacks, 'hostedPage'> = { success: noOp }) {
+        const paymentServer = getGitpodService().server;
+        this.client.openCheckout({
+            ...params,
+            async hostedPage(): Promise<any> {
+                return hostedPage(paymentServer);
+            }
+        });
+    }
+
+    createPortalSession() {
+        const paymentServer = getGitpodService().server;
+        this.client.setPortalSession(async () => {
+            return paymentServer.createPortalSession();
+        });
+    }
+
+    openPortal(params: OpenPortalParams = {}) {
+        this.client.createChargebeePortal().open(params);
+    }
+}
+const noOp = () => { /* tslint:disable:no-empty */ };

components/dashboard/src/chargebee/chargebee.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2021 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.
+ */
+
+declare module 'chargebee' {
+
+    export interface Client {
+        init(options: object): Client;
+        openCheckout(callbacks: CheckoutCallbacks);
+        setPortalSession(callback: () => Promise<any>);
+        createChargebeePortal(): Portal;
+    }
+
+    export interface CheckoutCallbacks {
+        hostedPage(): Promise<any>;
+        success(hostedPageId: string);
+        loaded?: () => void;
+        error?: (error: any) => void;
+        step?: (step: string) => void;
+        close?: () => void;
+    }
+
+    export interface OpenCheckoutParams {
+
+}
+
+    export interface Portal {
+        open(callbacks: object);
+    }
+}

components/dashboard/src/components/Menu.tsx

@@ -7,10 +7,10 @@
 import { User } from "@gitpod/gitpod-protocol";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
+import gitpodIcon from '../icons/gitpod.svg';
 import { gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import ContextMenu from "./ContextMenu";
-import * as images from '../images';
 import { useLocation } from "react-router";
 interface Entry {
     title: string, link: string, alternatives?: string[]
@@ -44,7 +44,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
         <header className="lg:px-28 px-10 bg-white flex flex-wrap items-center py-4">
             <div className="flex justify-between items-center pr-3">
                 <Link to="/">
-                    <img src={images.gitpodIcon} className="h-6" />
+                    <img src={gitpodIcon} className="h-6" />
                 </Link>
             </div>
             <div className="flex flex-1 items-center w-auto w-full" id="menu">

components/dashboard/src/components/SelectableCard.tsx

@@ -13,9 +13,9 @@ export interface SelectableCardProps {
 }
 
 function SelectableCard(props: SelectableCardProps) {
-    return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 transition ease-in-out ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
+    return <div className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group border-2 transition ease-in-out ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
         <div className="flex items-center">
-            <p className={`w-full text-base font-semibold ${props.selected ? 'text-green-500' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
+            <p className={`w-full pl-1 text-base font-semibold ${props.selected ? 'text-green-500' : 'text-gray-400'}`}>{props.title}</p>
             <input className={'text-green-500 ' + (props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')} type="radio" checked={props.selected} />
         </div>
         {props.children}

components/dashboard/src/index.css

@@ -65,4 +65,17 @@
     input[type=radio] {
         @apply rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
     }
+
+    progress {
+        @apply h-2 rounded;
+    }
+    progress::-webkit-progress-bar {
+        @apply rounded-md bg-gray-200;
+    }
+    progress::-webkit-progress-value {
+        @apply rounded-md bg-green-500;
+    }
+    progress::-moz-progress-bar {
+        @apply rounded-md bg-green-500;
+    }
 }

components/dashboard/src/provider-utils.tsx

@@ -4,7 +4,9 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import {github, gitlab, bitbucket} from './images';
+import bitbucket from './images/bitbucket.svg';
+import github from './images/github.svg';
+import gitlab from './images/gitlab.svg';
 import { gitpodHostUrl } from "./service/service";
 
 

components/dashboard/src/settings/Integrations.tsx

@@ -4,13 +4,14 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { copy, exclamation } from '../images';
 import { AuthProviderEntry, AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import React, { useContext, useEffect, useState } from "react";
 import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
 import { SettingsPage } from "./SettingsPage";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
+import copy from '../images/copy.svg';
+import exclamation from '../images/exclamation.svg';
 import ThreeDots from '../icons/ThreeDots.svg';
 import Modal from "../components/Modal";
 import { openAuthorizeWindow } from "../provider-utils";