next/store: dedicaed course license purchase page in the store

haraldschilly · haraldschilly · commit cc33693ba8af · 2025-07-11T17:30:28.000+02:00
diff --git a/src/packages/next/components/store/add-box.tsx b/src/packages/next/components/store/add-box.tsx
@@ -15,6 +15,7 @@ import { addToCart } from "./add-to-cart";
 import { DisplayCost } from "./site-license-cost";
 import { periodicCost } from "@cocalc/util/licenses/purchase/compute-cost";
 import { decimalDivide } from "@cocalc/util/stripe/calc";
+import { LicenseType } from "./types";
 
 export const ADD_STYLE = {
   display: "inline-block",
@@ -37,6 +38,7 @@ interface Props {
   dedicatedItem?: boolean;
   disabled?: boolean;
   noAccount: boolean;
+  type: LicenseType;
 }
 
 export function AddBox({
@@ -48,6 +50,7 @@ export function AddBox({
   dedicatedItem = false,
   noAccount,
   disabled = false,
+  type,
 }: Props) {
   if (cost?.input.type == "cash-voucher") {
     return null;
@@ -76,7 +79,8 @@ export function AddBox({
         }}
         message={
           <>
-            {money(round2up(costPer))} <b>per project</b>{" "}
+            {money(round2up(costPer))}{" "}
+            <b>per {type === "course" ? "student" : "project"}</b>{" "}
             {!!cost.period && cost.period != "range" ? cost.period : ""}
           </>
         }
@@ -175,8 +179,8 @@ export function AddToCartButton({
       {clicked
         ? "Moving to Cart..."
         : router.query.id != null
-          ? "Save Changes"
-          : "Add to Cart"}
+        ? "Save Changes"
+        : "Add to Cart"}
       {clicked && <Spin style={{ marginLeft: "15px" }} />}
     </Button>
   );
diff --git a/src/packages/next/components/store/menu.tsx b/src/packages/next/components/store/menu.tsx
@@ -11,7 +11,7 @@ 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 { StoreBalanceContext } from "../../lib/balance";
+import { StoreBalanceContext } from "lib/balance";
 
 type MenuItem = Required<MenuProps>["items"][number];
 
@@ -25,6 +25,7 @@ const styles: { [k: string]: React.CSSProperties } = {
   menu: {
     width: "100%",
     height: "100%",
+    flex: "1 1 auto",
     border: 0,
   },
   menuRoot: {
diff --git a/src/packages/next/components/store/run-limit.tsx b/src/packages/next/components/store/run-limit.tsx
@@ -4,78 +4,136 @@
  */
 
 import { Divider, Form } from "antd";
+
 import A from "components/misc/A";
 import IntegerSlider from "components/misc/integer-slider";
+import { LicenseType } from "./types";
+import { unreachable } from "@cocalc/util/misc";
 
 export const MAX_ALLOWED_RUN_LIMIT = 10000;
 
+interface RunLimitProps {
+  showExplanations: boolean;
+  form: any;
+  onChange: () => void;
+  disabled?: boolean;
+  boost?: boolean;
+  type: LicenseType;
+}
+
 export function RunLimit({
   showExplanations,
   form,
   onChange,
   disabled = false,
   boost = false,
-}) {
+  type,
+}: RunLimitProps) {
   function extra() {
     if (!showExplanations) return;
 
-    return (
-      <div style={{ marginTop: "5px" }}>
-        {boost ? (
-          <div style={{ fontWeight: "bold" }}>
-            It's not necessary to match the run limit of the license you want to
-            boost!
+    switch (type) {
+      case "license":
+        return (
+          <div style={{ marginTop: "5px" }}>
+            {boost ? (
+              <div style={{ fontWeight: "bold" }}>
+                It's not necessary to match the run limit of the license you
+                want to boost!
+              </div>
+            ) : undefined}
+            Simultaneously run this many projects using this license. You, and
+            anyone you share the license code with, can apply the license to an
+            unlimited number of projects, but it will only be used up to the run
+            limit. When{" "}
+            <A href="https://doc.cocalc.com/teaching-instructors.html">
+              teaching a course
+            </A>
+            ,{" "}
+            <b>
+              <i>
+                the run limit is typically 2 more than the number of students
+                (one for each student, one for the shared project and one for
+                the instructor project)
+              </i>
+            </b>
+            .
           </div>
-        ) : undefined}
-        Simultaneously run this many projects using this license. You, and
-        anyone you share the license code with, can apply the license to an
-        unlimited number of projects, but it will only be used up to the run
-        limit. When{" "}
-        <A href="https://doc.cocalc.com/teaching-instructors.html">
-          teaching a course
-        </A>
-        ,{" "}
-        <b>
-          <i>
-            the run limit is typically 2 more than the number of students (one
-            for each student, one for the shared project and one for the
+        );
+      case "course":
+        return (
+          <div style={{ marginTop: "5px" }}>
+            It's advised to select two more seatch than the number of students
+            (one for each student, one for the shared project and one for the
             instructor project)
-          </i>
-        </b>
-        .
-      </div>
-    );
+          </div>
+        );
+
+      default:
+        unreachable(type);
+    }
   }
 
-  return (
-    <>
-      <Divider plain>Simultaneous Project Upgrades</Divider>
-      <Form.Item
-        label="Run Limit"
-        name="run_limit"
-        initialValue={1}
-        extra={extra()}
-      >
-        <EditRunLimit
-          disabled={disabled}
-          onChange={(run_limit) => {
-            form.setFieldsValue({ run_limit });
-            onChange();
-          }}
-        />
-      </Form.Item>
-    </>
-  );
+  switch (type) {
+    case "license":
+      return (
+        <>
+          <Divider plain>Simultaneous Project Upgrades</Divider>
+          <Form.Item
+            label="Run Limit"
+            name="run_limit"
+            initialValue={1}
+            extra={extra()}
+          >
+            <EditRunLimit
+              type={type}
+              disabled={disabled}
+              onChange={(run_limit) => {
+                form.setFieldsValue({ run_limit });
+                onChange();
+              }}
+            />
+          </Form.Item>
+        </>
+      );
+
+    case "course":
+      return (
+        <>
+          <Divider plain>Size of Course</Divider>
+          <Form.Item
+            label="Students"
+            name="run_limit"
+            initialValue={25}
+            extra={extra()}
+          >
+            <EditRunLimit
+              type={type}
+              disabled={disabled}
+              onChange={(run_limit) => {
+                form.setFieldsValue({ run_limit });
+                onChange();
+              }}
+            />
+          </Form.Item>
+        </>
+      );
+
+    default:
+      unreachable(type);
+  }
 }
 
-export function EditRunLimit({
+function EditRunLimit({
   value,
   onChange,
   disabled,
+  type,
 }: {
-  value?;
-  onChange?;
-  disabled?;
+  value?: number;
+  onChange: (run_limit: number) => void;
+  disabled?: boolean;
+  type: LicenseType;
 }) {
   return (
     <IntegerSlider
@@ -85,8 +143,12 @@ export function EditRunLimit({
       max={300}
       maxText={MAX_ALLOWED_RUN_LIMIT}
       onChange={onChange}
-      units={"projects"}
-      presets={[1, 2, 10, 50, 100, 250, 500]}
+      units={type === "course" ? "students" : "projects"}
+      presets={
+        type === "course"
+          ? [10, 25, 50, 75, 100, 125, 150, 200]
+          : [1, 2, 10, 50, 100, 250, 500]
+      }
     />
   );
 }
diff --git a/src/packages/next/components/store/site-license.tsx b/src/packages/next/components/store/site-license.tsx
@@ -33,6 +33,7 @@ import { RunLimit } from "./run-limit";
 import { SignInToPurchase } from "./sign-in-to-purchase";
 import { TitleDescription } from "./title-description";
 import { ToggleExplanations } from "./toggle-explanations";
+import { LicenseType } from "./types";
 import { UsageAndDuration } from "./usage-and-duration";
 
 const DEFAULT_PRESET: Preset = "standard";
@@ -47,9 +48,11 @@ const STYLE: React.CSSProperties = {
 
 interface Props {
   noAccount: boolean;
-  type: "license" | "course";
+  type: LicenseType;
 }
 
+// depending on the type, this either purchases a license with all settings,
+// or a license for a course with a subset of controls.
 export default function SiteLicense({ noAccount, type }: Props) {
   const router = useRouter();
   const headerRef = useRef<HTMLHeadingElement>(null);
@@ -74,6 +77,8 @@ export default function SiteLicense({ noAccount, type }: Props) {
         <Icon name={"key"} style={{ marginRight: "5px" }} />{" "}
         {router.query.id != null
           ? "Edit License in Shopping Cart"
+          : type === "course"
+          ? "Purchase a License for a Course"
           : "Configure a License"}
       </Title>
       {router.query.id == null && (
@@ -106,14 +111,27 @@ export default function SiteLicense({ noAccount, type }: Props) {
           )}
           {type === "course" && (
             <div>
-              <Paragraph style={{ fontSize: "12pt" }}>Course License</Paragraph>
+              <Paragraph style={{ fontSize: "12pt" }}>
+                When you teach your course on CoCalc, you benefit from a
+                managed, reliable platform used by tens of thousands of students
+                since 2013. Each student works in an isolated workspace
+                (project), with options for group work. File-based assignments
+                are handed out to students and collected when completed. You can
+                easily monitor progress, review editing history, and assist
+                students directly. For more information, please consult the{" "}
+                <A href={"https://doc.cocalc.com/teaching-instructors.html"}>
+                  instructor guide
+                </A>
+                .
+              </Paragraph>
             </div>
           )}
         </>
       )}
       <CreateSiteLicense
         showInfoBar={scrollY > offsetHeader}
         noAccount={noAccount}
+        type={type}
       />
     </>
   );
@@ -122,7 +140,15 @@ export default function SiteLicense({ noAccount, type }: Props) {
 // Note -- the back and forth between moment and Date below
 // is a *workaround* because of some sort of bug in moment/antd/react.
 
-function CreateSiteLicense({ showInfoBar = false, noAccount = false }) {
+function CreateSiteLicense({
+  showInfoBar = false,
+  noAccount = false,
+  type,
+}: {
+  type: LicenseType;
+  noAccount: boolean;
+  showInfoBar: boolean;
+}) {
   const [cost, setCost] = useState<CostInputPeriod | undefined>(undefined);
   const [loading, setLoading] = useState<boolean>(false);
   const [cartError, setCartError] = useState<string>("");
@@ -163,6 +189,7 @@ function CreateSiteLicense({ showInfoBar = false, noAccount = false }) {
 
   function onLicenseChange() {
     const vals = form.getFieldsValue(true);
+    // console.log("form vals=", vals);
     encodeFormValues(router, vals, "regular");
     setCost(computeCost(vals));
 
@@ -231,6 +258,7 @@ function CreateSiteLicense({ showInfoBar = false, noAccount = false }) {
       cartError={cartError}
       setCartError={setCartError}
       noAccount={noAccount}
+      type={type}
     />
   );
 
@@ -269,8 +297,10 @@ function CreateSiteLicense({ showInfoBar = false, noAccount = false }) {
           showExplanations={showExplanations}
           form={form}
           onChange={onLicenseChange}
+          type={type}
         />
         <RunLimit
+          type={type}
           showExplanations={showExplanations}
           form={form}
           onChange={onLicenseChange}
diff --git a/src/packages/next/components/store/types.ts b/src/packages/next/components/store/types.ts
@@ -11,3 +11,5 @@ export const StorePages = [
 ] as const;
 
 export type StorePagesTypes = (typeof StorePages)[number];
+
+export type LicenseType = "license" | "course";
diff --git a/src/packages/next/components/store/usage-and-duration.tsx b/src/packages/next/components/store/usage-and-duration.tsx
diff --git a/src/packages/util/licenses/store/compute-cost.ts b/src/packages/util/licenses/store/compute-cost.ts
