next/store: basic scaffolding for a "course" purchase

Author: haraldschilly

src/packages/next/components/store/index.tsx

@@ -5,6 +5,7 @@
 import { Alert, Layout } from "antd";
 import { useRouter } from "next/router";
 import { useEffect, useState, type JSX } from "react";
+
 import * as purchasesApi from "@cocalc/frontend/purchases/api";
 import { COLORS } from "@cocalc/util/theme";
 import Anonymous from "components/misc/anonymous";
@@ -16,28 +17,19 @@ import useProfile from "lib/hooks/profile";
 import useCustomize from "lib/use-customize";
 import Cart from "./cart";
 import Checkout from "./checkout";
-import Processing from "./processing";
 import Congrats from "./congrats";
 import Menu from "./menu";
 import Overview from "./overview";
+import Processing from "./processing";
 import SiteLicense from "./site-license";
 import { StoreInplaceSignInOrUp } from "./store-inplace-signup";
+import { StorePagesTypes } from "./types";
 import Vouchers from "./vouchers";
 
 const { Content } = Layout;
 
 interface Props {
-  page: (
-    | "site-license"
-    | "boost"
-    | "dedicated"
-    | "cart"
-    | "checkout"
-    | "processing"
-    | "congrats"
-    | "vouchers"
-    | undefined
-  )[];
+  page: (StorePagesTypes | undefined)[];
 }
 
 export default function StoreLayout({ page }: Props) {
@@ -131,7 +123,9 @@ export default function StoreLayout({ page }: Props) {
 
     switch (main) {
       case "site-license":
-        return <SiteLicense noAccount={noAccount} />;
+        return <SiteLicense noAccount={noAccount} type="license" />;
+      case "course":
+        return <SiteLicense noAccount={noAccount} type="course" />;
       case "cart":
         return requireAccount(Cart);
       case "checkout":

src/packages/next/components/store/menu.tsx

@@ -3,12 +3,14 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import React, { useContext } from "react";
-import { Button, Menu, MenuProps, Flex, Spin } from "antd";
+import type { MenuProps } from "antd";
+import { Button, Flex, Menu, Spin } from "antd";
 import { useRouter } from "next/router";
+import React, { useContext } from "react";
+
+import { Icon } from "@cocalc/frontend/components/icon";
 import { currency, round2down } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
-import { Icon } from "@cocalc/frontend/components/icon";
 import { StoreBalanceContext } from "../../lib/balance";
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -17,7 +19,7 @@ const styles: { [k: string]: React.CSSProperties } = {
   menuBookend: {
     height: "100%",
     whiteSpace: "nowrap",
-    flexGrow: 1,
+    flex: "0 1 auto",
     textAlign: "end",
   },
   menu: {
@@ -38,7 +40,7 @@ const styles: { [k: string]: React.CSSProperties } = {
     maxWidth: "100%",
     flexGrow: 1,
   },
-};
+} as const;
 
 export interface ConfigMenuProps {
   main?: string;
@@ -64,6 +66,7 @@ export default function ConfigMenu({ main }: ConfigMenuProps) {
       key: "site-license",
       icon: <Icon name="key" />,
     },
+    { label: "Course", key: "course", icon: <Icon name="graduation-cap" /> },
     {
       label: "Vouchers",
       key: "vouchers",

src/packages/next/components/store/overview.tsx

@@ -47,14 +47,17 @@ export default function Overview() {
         </Paragraph>
       ) : undefined}
       <OverviewRow>
-        <Product icon="key" title="Licenses" href="/store/site-license">
+        <Product icon="key" title="License" href="/store/site-license">
           Buy a license to upgrade projects, get internet access, more CPU, disk
           and memory.
         </Product>
-        <Product href={"/store/vouchers"} icon="gift" title="Vouchers">
-          Purchase a <A href={"/vouchers"}>voucher code</A> to make <SiteName />{" "}
-          credit easily available to somebody else.
+        <Product icon="graduation-cap" title="Course" href="/store/course">
+          Purchase a license for teaching a course.
         </Product>
+        <Paragraph style={{ textAlign: "center", width: "100%" }}>
+          <Icon name="gift" /> Purchase a <A href={"/vouchers"}>voucher code</A>{" "}
+          to make <SiteName /> credit easily available to somebody else.
+        </Paragraph>
         <Divider />
         <Product
           href={"/features/compute-server"}
@@ -74,7 +77,7 @@ export default function Overview() {
         <A href="/store/cart">shopping cart</A> or go straight to{" "}
         <A href="/store/checkout">checkout</A>.
       </Paragraph>
-      <Paragraph>
+      <Paragraph style={{ marginBottom: "4em" }}>
         You can also browse your{" "}
         <A href="/settings/purchases">purchase history</A>,{" "}
         <A href="/settings/licenses">licenses</A>, and{" "}

src/packages/next/components/store/site-license.tsx

@@ -8,7 +8,9 @@ Create a new site license.
 */
 import { Form, Input } from "antd";
 import { isEmpty } from "lodash";
+import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
+
 import { Icon } from "@cocalc/frontend/components/icon";
 import { get_local_storage } from "@cocalc/frontend/misc/local-storage";
 import { CostInputPeriod } from "@cocalc/util/licenses/purchase/types";
@@ -20,7 +22,6 @@ import SiteName from "components/share/site-name";
 import apiPost from "lib/api/post";
 import { MAX_WIDTH } from "lib/config";
 import { useScrollY } from "lib/use-scroll-y";
-import { useRouter } from "next/router";
 import { AddBox } from "./add-box";
 import { ApplyLicenseToProject } from "./apply-license-to-project";
 import { InfoBar } from "./cost-info-bar";
@@ -46,9 +47,10 @@ const STYLE: React.CSSProperties = {
 
 interface Props {
   noAccount: boolean;
+  type: "license" | "course";
 }
 
-export default function SiteLicense({ noAccount }: Props) {
+export default function SiteLicense({ noAccount, type }: Props) {
   const router = useRouter();
   const headerRef = useRef<HTMLHeadingElement>(null);
 
@@ -75,30 +77,39 @@ export default function SiteLicense({ noAccount }: Props) {
           : "Configure a License"}
       </Title>
       {router.query.id == null && (
-        <div>
-          <Paragraph style={{ fontSize: "12pt" }}>
-            <A href="https://doc.cocalc.com/licenses.html">
-              <SiteName /> licenses
-            </A>{" "}
-            allow you to upgrade projects to run more quickly, have network
-            access, more disk space and memory. Licenses cover a wide range of
-            use cases, ranging from a single hobbyist project to thousands of
-            simultaneous users across a large organization.
-          </Paragraph>
+        <>
+          {type === "license" && (
+            <div>
+              <Paragraph style={{ fontSize: "12pt" }}>
+                <A href="https://doc.cocalc.com/licenses.html">
+                  <SiteName /> licenses
+                </A>{" "}
+                allow you to upgrade projects to run more quickly, have network
+                access, more disk space and memory. Licenses cover a wide range
+                of use cases, ranging from a single hobbyist project to
+                thousands of simultaneous users across a large organization.
+              </Paragraph>
 
-          <Paragraph style={{ fontSize: "12pt" }}>
-            Create a license using the form below then add it to your{" "}
-            <A href="/store/cart">shopping cart</A>. If you aren't sure exactly
-            what to buy, you can always edit your licenses later. Subscriptions
-            are also flexible and can be{" "}
-            <A
-              href="https://doc.cocalc.com/account/purchases.html#recent-updates-to-subscriptions"
-              external
-            >
-              edited at any time.{" "}
-            </A>
-          </Paragraph>
-        </div>
+              <Paragraph style={{ fontSize: "12pt" }}>
+                Create a license using the form below then add it to your{" "}
+                <A href="/store/cart">shopping cart</A>. If you aren't sure
+                exactly what to buy, you can always edit your licenses later.
+                Subscriptions are also flexible and can be{" "}
+                <A
+                  href="https://doc.cocalc.com/account/purchases.html#recent-updates-to-subscriptions"
+                  external
+                >
+                  edited at any time.{" "}
+                </A>
+              </Paragraph>
+            </div>
+          )}
+          {type === "course" && (
+            <div>
+              <Paragraph style={{ fontSize: "12pt" }}>Course License</Paragraph>
+            </div>
+          )}
+        </>
       )}
       <CreateSiteLicense
         showInfoBar={scrollY > offsetHeader}

src/packages/next/components/store/types.ts

@@ -1,5 +1,6 @@
 export const StorePages = [
   "site-license",
+  "course",
   "boost",
   "dedicated",
   "cart",

src/packages/next/lib/styles/layouts.tsx

@@ -5,7 +5,7 @@
 
 import { Col, Row } from "antd";
 
-import { Icon } from "@cocalc/frontend/components/icon";
+import { Icon, IconName } from "@cocalc/frontend/components/icon";
 import { COLORS } from "@cocalc/util/theme";
 import { CSS, Paragraph, Title } from "components/misc";
 import A from "components/misc/A";
@@ -48,8 +48,8 @@ export function Product({
   children,
   external,
 }: {
-  icon;
-  icon2?;
+  icon: IconName;
+  icon2?: IconName;
   title;
   href;
   children;