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

@@ -1,6 +1,6 @@
-# CLAUDE.md
+# CLAUDE.md and GEMINI.md
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI (https://github.com/google-gemini/gemini-cli) when working with code in this repository.
 
 # CoCalc Source Repository
 
@@ -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/GEMINI.md

@@ -0,0 +1,156 @@
+# CLAUDE.md and GEMINI.md
+
+This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI (https://github.com/google-gemini/gemini-cli) when working with code in this repository.
+
+# CoCalc Source Repository
+
+- This is the source code of CoCalc in a Git repository
+- It is a complex JavaScript/TypeScript SaaS application
+- CoCalc is organized as a monorepository (multi-packages) in the subdirectory "./packages"
+- The packages are managed as a pnpm workspace in "./packages/pnpm-workspace.yaml"
+
+## Code Style
+
+- Everything is written in TypeScript code
+- Indentation: 2-spaces
+- Run `pretter -w [filename]` after modifying a file (ts, tsx, md, json, ...) to format it correctly.
+- All .js and .ts files are formatted by the tool prettier
+- Add suitable types when you write code
+- Variable name styles are "camelCase" for local and "FOO_BAR" for global variables. If you edit older code not following these guidlines, adjust this rule to fit the files style.
+- Some older code is JavaScript or CoffeeScript, which will be translated to TypeScript
+- Use ES modules (import/export) syntax, not CommonJS (require)
+- Organize the list of imports in such a way: installed npm packages are on top, newline, then are imports from @cocalc's code base. Sorted alphabetically.
+
+## Development Commands
+
+### Essential Commands
+
+- `pnpm build-dev` - Build all packages for development
+- `pnpm clean` - Clean all node_modules and dist directories
+- `pnpm test` - Run full test suite
+- `pnpm depcheck` - Check for dependency issues
+- `prettier -w [filename]` to format the style of a file after editing it
+- after creating a file, run `git add [filename]` to start tracking it
+
+### Package-Specific Commands
+
+- `cd packages/[package] && pnpm build` - Build and compile a specific package
+  - for packages/next and packages/static, run `cd packages/[package] && pnpm build-dev`
+- `cd packages/[package] && pnpm tsc:watch` - TypeScript compilation in watch mode for a specific package
+- `cd packages/[package] && pnpm test` - Run tests for a specific package
+- `cd packages/[package] && pnpm build` - Build a specific package
+- **IMPORTANT**: When modifying packages like `util` that other packages depend on, you must run `pnpm build` in the modified package before typechecking dependent packages
+
+### Development
+
+- **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
+
+### Package Structure
+
+CoCalc is organized as a monorepo with key packages:
+
+- **frontend** - React/TypeScript frontend application using Redux-style stores and actions
+- **backend** - Node.js backend services and utilities
+- **hub** - Main server orchestrating the entire system
+- **database** - PostgreSQL database layer with queries and schema
+- **util** - Shared utilities and types used across packages
+- **comm** - Communication layer including WebSocket types
+- **conat** - CoCalc's container/compute orchestration system
+- **sync** - Real-time synchronization system for collaborative editing
+- **project** - Project-level services and management
+- **static** - Static assets and build configuration
+- **next** - Next.js server components
+
+### Key Architectural Patterns
+
+#### Frontend Architecture
+
+- **Redux-style State Management**: Uses custom stores and actions pattern (see `packages/frontend/app-framework/actions-and-stores.ts`)
+- **TypeScript React Components**: All frontend code is TypeScript with proper typing
+- **Modular Store System**: Each feature has its own store/actions (AccountStore, BillingStore, etc.)
+- **WebSocket Communication**: Real-time communication with backend via WebSocket messages
+
+#### Backend Architecture
+
+- **PostgreSQL Database**: Primary data store with sophisticated querying system
+- **WebSocket Messaging**: Real-time communication between frontend and backend
+- **Conat System**: Container orchestration for compute servers
+- **Event-Driven Architecture**: Extensive use of EventEmitter patterns
+- **Microservice-like Packages**: Each package handles specific functionality
+
+#### Communication Patterns
+
+- **WebSocket Messages**: Primary communication method (see `packages/comm/websocket/types.ts`)
+- **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
+
+- **TypeScript**: Primary language for all new code
+- **React**: Frontend framework
+- **PostgreSQL**: Database
+- **Node.js**: Backend runtime
+- **WebSockets**: Real-time communication
+- **pnpm**: Package manager and workspace management
+- **Jest**: Testing framework
+- **SASS**: CSS preprocessing
+
+### Database Schema
+
+- Comprehensive schema in `packages/util/db-schema`
+- Query abstractions in `packages/database/postgres/`
+- Type-safe database operations with TypeScript interfaces
+
+### Testing
+
+- **Jest**: Primary testing framework
+- **ts-jest**: TypeScript support for Jest
+- **jsdom**: Browser environment simulation for frontend tests
+- Test files use `.test.ts` or `.spec.ts` extensions
+- Each package has its own jest.config.js
+
+### Import Patterns
+
+- Use absolute imports with `@cocalc/` prefix for cross-package imports
+- Example: `import { cmp } from "@cocalc/util/misc"`
+- Type imports: `import type { Foo } from "./bar"`
+- Destructure imports when possible
+
+### Development Workflow
+
+1. Changes to TypeScript require compilation (`pnpm build` in relevant package)
+2. Database must be running before starting hub
+3. Hub coordinates all services and should be restarted after changes
+4. Use `pnpm clean && pnpm build-dev` when switching branches or after major changes
+
+# Workflow
+
+- Be sure to build when you're done making a series of code changes
+- Prefer running single tests, and not the whole test suite, for performance
+
+## Git Workflow
+
+- Never modify a file when in the `master` or `main` branch
+- All changes happen through feature branches, which are pushed as pull requests to GitHub
+- When creating a new file, run `git add [filename]` to track the file.
+- Prefix git commits with the package and general area. e.g. 'frontend/latex: ...' if it concerns latex editor changes in the packages/frontend/... code.
+- When pushing a new branch to Github, track it upstream. e.g. `git push --set-upstream origin feature-foo` for branch "feature-foo".
+
+# Important Instruction Reminders
+
+- Do what has been asked; nothing more, nothing less.
+- NEVER create files unless they're absolutely necessary for achieving your goal.
+- ALWAYS prefer editing an existing file to creating a new one.
+- REFUSE to modify files when the git repository is on the `master` or `main` branch.
+- NEVER proactively create documentation files (`*.md`) or README files. Only create documentation files if explicitly requested by the User.
+
+# Ignore
+
+- Ignore files covered by `.gitignore`
+- Ignore everything in `node_modules` or `dist` directories
+- Ignore all files not tracked by Git, unless they are newly created files

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":