next/store/course: rename type to source, to be later able to distinquish where to route back

Author: haraldschilly

src/.claude/settings.local.json

@@ -5,7 +5,10 @@
       "Bash(pnpm build:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)",
-      "Bash(prettier -w:*)"
+      "Bash(prettier -w:*)",
+      "WebFetch(domain:docs.anthropic.com)",
+      "Bash(pnpm ts-build:*)",
+      "Bash(find:*)"
     ],
     "deny": []
   }

src/CLAUDE.md

@@ -43,7 +43,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ### Development
 
-- After code changes, run `pretter -w [filename]` to ensure consistent styling
+- **IMPORTANT**: Always run `prettier -w [filename]` immediately after editing any .ts, .tsx, .md, or .json file to ensure consistent styling
 - After TypeScript or `*.tsx` changes, run `pnpm build` in the relevant package directory
 
 ## Architecture Overview
@@ -87,6 +87,7 @@ CoCalc is organized as a monorepo with key packages:
 - **Database Queries**: Structured query system with typed interfaces
 - **Event Emitters**: Inter-service communication within backend
 - **REST-like APIs**: Some HTTP endpoints for specific operations
+- **API Schema**: API endpoints in `packages/next/pages/api/v2/` use Zod schemas in `packages/next/lib/api/schema/` for validation. These schemas must be kept in harmony with the TypeScript types sent from frontend applications using `apiPost` (in `packages/next/lib/api/post.ts`) or `api` (in `packages/frontend/client/api.ts`). When adding new fields to API requests, both the frontend types and the API schema validation must be updated.
 
 ### Key Technologies
 

src/packages/next/components/store/add-box.tsx

@@ -7,15 +7,17 @@
 Add a cash voucher to your shopping cart.
 */
 import { useState, type JSX } from "react";
+import { Alert, Button, Spin } from "antd";
+
 import { CostInputPeriod } from "@cocalc/util/licenses/purchase/types";
 import { round2up } from "@cocalc/util/misc";
 import { money } from "@cocalc/util/licenses/purchase/utils";
-import { Alert, Button, Spin } from "antd";
 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";
+
+import type { LicenseSource } from "@cocalc/util/upgrades/shopping";
 
 export const ADD_STYLE = {
   display: "inline-block",
@@ -38,7 +40,7 @@ interface Props {
   dedicatedItem?: boolean;
   disabled?: boolean;
   noAccount: boolean;
-  type: LicenseType;
+  source: LicenseSource;
 }
 
 export function AddBox({
@@ -50,7 +52,7 @@ export function AddBox({
   dedicatedItem = false,
   noAccount,
   disabled = false,
-  type,
+  source,
 }: Props) {
   if (cost?.input.type == "cash-voucher") {
     return null;
@@ -80,7 +82,7 @@ export function AddBox({
         message={
           <>
             {money(round2up(costPer))}{" "}
-            <b>per {type === "course" ? "student" : "project"}</b>{" "}
+            <b>per {source === "course" ? "student" : "project"}</b>{" "}
             {!!cost.period && cost.period != "range" ? cost.period : ""}
           </>
         }

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

@@ -11,26 +11,27 @@ shopping cart experience, so most likely to feel familiar to users and easy
 to use.
 */
 
+import { Alert, Button, Checkbox, Popconfirm, Table } from "antd";
+import { useRouter } from "next/router";
+import { useEffect, useMemo, useState, type JSX } from "react";
+
 import { Icon } from "@cocalc/frontend/components/icon";
+import type {
+  ProductDescription,
+  ProductType,
+} from "@cocalc/util/db-schema/shopping-cart-items";
 import { describeQuotaFromInfo } from "@cocalc/util/licenses/describe-quota";
 import { CostInputPeriod } from "@cocalc/util/licenses/purchase/types";
+import { computeCost } from "@cocalc/util/licenses/store/compute-cost";
 import { capitalize, isValidUUID } from "@cocalc/util/misc";
-import { Alert, Button, Checkbox, Popconfirm, Table } from "antd";
 import A from "components/misc/A";
 import Loading from "components/share/loading";
 import SiteName from "components/share/site-name";
 import apiPost from "lib/api/post";
 import useAPI from "lib/hooks/api";
 import useIsMounted from "lib/hooks/mounted";
-import { useRouter } from "next/router";
-import { useEffect, useMemo, useState, type JSX } from "react";
-import { computeCost } from "@cocalc/util/licenses/store/compute-cost";
 import OtherItems from "./other-items";
 import { describeItem, describePeriod, DisplayCost } from "./site-license-cost";
-import type {
-  ProductDescription,
-  ProductType,
-} from "@cocalc/util/db-schema/shopping-cart-items";
 
 export default function ShoppingCart() {
   const isMounted = useIsMounted();
@@ -353,9 +354,9 @@ export function DescriptionColumn(props: DCProps) {
   const router = useRouter();
   const { id, description, style, readOnly } = props;
   if (
-    description.type == "disk" ||
-    description.type == "vm" ||
-    description.type == "quota"
+    description.type === "disk" ||
+    description.type === "vm" ||
+    description.type === "quota"
   ) {
     return <DescriptionColumnSiteLicense {...props} />;
   } else if (description.type == "cash-voucher") {
@@ -390,9 +391,9 @@ function DescriptionColumnSiteLicense(props: DCProps) {
   const { id, cost, description, compact, project_id, readOnly } = props;
   if (
     !(
-      description.type == "disk" ||
-      description.type == "vm" ||
-      description.type == "quota"
+      description.type === "disk" ||
+      description.type === "vm" ||
+      description.type === "quota"
     )
   ) {
     throw Error("BUG -- incorrect typing");
@@ -403,7 +404,7 @@ function DescriptionColumnSiteLicense(props: DCProps) {
     return <pre>{JSON.stringify(description, undefined, 2)}</pre>;
   }
   const { input } = cost;
-  if (input.type == "cash-voucher") {
+  if (input.type === "cash-voucher") {
     throw Error("incorrect typing");
   }
 
@@ -423,7 +424,7 @@ function DescriptionColumnSiteLicense(props: DCProps) {
   }
 
   function editableQuota() {
-    if (input.type == "cash-voucher") return null;
+    if (input.type === "cash-voucher") return null;
     return (
       <div>
         <div>{describeQuotaFromInfo(input)}</div>
@@ -433,9 +434,14 @@ function DescriptionColumnSiteLicense(props: DCProps) {
   }
 
   // this could rely an the "type" field, but we rather check the data directly
-  function editPage(): "site-license" | "vouchers" {
-    if (input.type == "cash-voucher") {
+  function editPage(): "site-license" | "vouchers" | "course" {
+    if (input.type === "cash-voucher") {
       return "vouchers";
+    } else if (
+      description.type === "quota" &&
+      description.source === "course"
+    ) {
+      return "course";
     }
     return "site-license";
   }
@@ -451,7 +457,7 @@ function DescriptionColumnSiteLicense(props: DCProps) {
       <div style={DESCRIPTION_STYLE}>
         <div style={{ marginBottom: "8px" }}>
           <b>
-            {input.subscription == "no"
+            {input.subscription === "no"
               ? describePeriod({ quota: input })
               : capitalize(input.subscription) + " subscription"}
           </b>

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

@@ -123,9 +123,9 @@ export default function StoreLayout({ page }: Props) {
 
     switch (main) {
       case "site-license":
-        return <SiteLicense noAccount={noAccount} type="license" />;
+        return <SiteLicense noAccount={noAccount} source="license" />;
       case "course":
-        return <SiteLicense noAccount={noAccount} type="course" />;
+        return <SiteLicense noAccount={noAccount} source="course" />;
       case "cart":
         return requireAccount(Cart);
       case "checkout":

src/packages/next/components/store/quota-config.tsx

@@ -23,6 +23,7 @@ import { Icon } from "@cocalc/frontend/components/icon";
 import { displaySiteLicense } from "@cocalc/util/consts/site-license";
 import { plural, unreachable } from "@cocalc/util/misc";
 import { BOOST, DISK_DEFAULT_GB, REGULAR } from "@cocalc/util/upgrades/consts";
+import type { LicenseSource } from "@cocalc/util/upgrades/shopping";
 
 import PricingItem, { Line } from "components/landing/pricing-item";
 import { CSS, Paragraph } from "components/misc";
@@ -35,7 +36,6 @@ import {
   Preset,
   PresetConfig,
 } from "./quota-config-presets";
-import type { LicenseType } from "./types";
 
 const { Text } = Typography;
 
@@ -62,7 +62,7 @@ interface Props {
   setPreset?: (preset: Preset | null) => void;
   presetAdjusted?: boolean;
   setPresetAdjusted?: (adjusted: boolean) => void;
-  type: LicenseType;
+  source: LicenseSource;
 }
 
 export const QuotaConfig: React.FC<Props> = (props: Props) => {
@@ -78,7 +78,7 @@ export const QuotaConfig: React.FC<Props> = (props: Props) => {
     setPreset,
     presetAdjusted,
     setPresetAdjusted,
-    type,
+    source,
   } = props;
 
   const presetsRef = useRef<HTMLDivElement>(null);
@@ -114,13 +114,13 @@ export const QuotaConfig: React.FC<Props> = (props: Props) => {
     if (boost) {
       return "Booster";
     } else {
-      switch (type) {
+      switch (source) {
         case "license":
           return "Quota Upgrades";
         case "course":
           return "Project Upgrades";
         default:
-          unreachable(type);
+          unreachable(source);
       }
     }
   }
@@ -443,7 +443,7 @@ export const QuotaConfig: React.FC<Props> = (props: Props) => {
 
     return (
       <>
-        <Form.Item label="Preset">
+        <Form.Item label="Presets">
           <Radio.Group
             size="large"
             value={preset}
@@ -650,7 +650,7 @@ export const QuotaConfig: React.FC<Props> = (props: Props) => {
         </>
       );
     } else {
-      switch (type) {
+      switch (source) {
         case "license":
           return (
             <Tabs
@@ -687,7 +687,7 @@ export const QuotaConfig: React.FC<Props> = (props: Props) => {
         case "course":
           return renderCoursePresets();
         default:
-          unreachable(type);
+          unreachable(source);
       }
     }
   }

src/packages/next/components/store/quota-query-params.ts

@@ -22,7 +22,7 @@ import { MAX_ALLOWED_RUN_LIMIT } from "./run-limit";
 // Various support functions for storing quota parameters as a query parameter in the browser URL
 
 export function encodeRange(
-  vals: [Date | string | undefined, Date | string | undefined]
+  vals: [Date | string | undefined, Date | string | undefined],
 ): string {
   const [start, end] = vals;
   if (start == null || end == null) {
@@ -75,7 +75,7 @@ const DEDICATED_FIELDS = [
 ] as const;
 
 function getFormFields(
-  type: "regular" | "boost" | "dedicated"
+  type: "regular" | "boost" | "dedicated",
 ): readonly string[] {
   switch (type) {
     case "regular":
@@ -87,13 +87,16 @@ function getFormFields(
 }
 
 export const ALL_FIELDS: Set<string> = new Set(
-  REGULAR_FIELDS.concat(DEDICATED_FIELDS as any).concat(["type" as any])
+  REGULAR_FIELDS.concat(DEDICATED_FIELDS as any).concat([
+    "type",
+    "source",
+  ] as any),
 );
 
 export function encodeFormValues(
   router: NextRouter,
   vals: any,
-  type: "regular" | "boost" | "dedicated"
+  type: "regular" | "boost" | "dedicated",
 ): void {
   const { query } = router;
   for (const key in vals) {
@@ -120,7 +123,7 @@ function decodeValue(val): boolean | number | string | DateRange {
 
 function fixNumVal(
   val: any,
-  param: { min: number; max: number; dflt: number }
+  param: { min: number; max: number; dflt: number },
 ): number {
   if (typeof val !== "number") {
     return param.dflt;
@@ -136,7 +139,7 @@ function fixNumVal(
  */
 export function decodeFormValues(
   router: NextRouter,
-  type: "regular" | "boost" | "dedicated"
+  type: "regular" | "boost" | "dedicated",
 ): {
   [key: string]: string | number | boolean;
 } {