next/store/course license: set academic user value and hide period selection in form

Author: haraldschilly

src/.claude/settings.local.json

@@ -4,7 +4,8 @@
       "Bash(pnpm tsc:*)",
       "Bash(pnpm build:*)",
       "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(prettier -w:*)"
     ],
     "deny": []
   }

src/CLAUDE.md

@@ -4,15 +4,16 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 # 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"
+- 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.
@@ -23,28 +24,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Development Commands
 
 ### Essential Commands
+
 - `pnpm build-dev` - Build all packages for development
 - `pnpm clean` - Clean all node_modules and dist directories
-- `pnpm database` - Start PostgreSQL database server
-- `pnpm hub` - Start the main hub server
-- `pnpm psql` - Connect to the PostgreSQL database
 - `pnpm test` - Run full test suite
-- `pnpm test-parallel` - Run tests in parallel across packages
 - `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 tsc` - Watch TypeScript compilation for a specific package
+
+- `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 Setup
-1. Start database: `pnpm database`
-2. Start hub: `pnpm hub`
-3. For TypeScript changes, run `pnpm tsc` in the relevant package directory
+### Development
+
+- After code changes, run `pretter -w [filename]` 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
@@ -62,25 +67,29 @@ CoCalc is organized as a monorepo with key packages:
 ### 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
 
 ### Key Technologies
+
 - **TypeScript**: Primary language for all new code
 - **React**: Frontend framework
 - **PostgreSQL**: Database
@@ -91,40 +100,56 @@ CoCalc is organized as a monorepo with key packages:
 - **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 tsc` in relevant package)
+
+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 typecheck when you're done making a series of code changes
+
+- 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
+# 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.
-- NEVER proactively create documentation files (*.md) or README files. Only create documentation files if explicitly requested by the User.
+- 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/usage-and-duration.tsx

@@ -103,22 +103,36 @@ export function UsageAndDuration(props: Props) {
 
   function renderUsage() {
     if (!showUsage) return;
-    return (
-      <Form.Item
-        name="user"
-        initialValue={
-          type === "course"
-            ? "academic"
-            : isAcademic(profile?.email_address)
-            ? "academic"
-            : "business"
-        }
-        label={"Usage"}
-        extra={renderUsageExplanation()}
-      >
-        {renderUsageItem()}
-      </Form.Item>
-    );
+
+    switch (type) {
+      case "course":
+        return (
+          <Form.Item
+            name="user"
+            initialValue="academic"
+            label={"Usage"}
+            extra={renderUsageExplanation()}
+          >
+            <Input type="hidden" value="academic" />
+            Academic
+          </Form.Item>
+        );
+      case "license":
+        return (
+          <Form.Item
+            name="user"
+            initialValue={
+              isAcademic(profile?.email_address) ? "academic" : "business"
+            }
+            label={"Usage"}
+            extra={renderUsageExplanation()}
+          >
+            {renderUsageItem()}
+          </Form.Item>
+        );
+      default:
+        unreachable(type);
+    }
   }
 
   function renderRangeSelector(getFieldValue) {
@@ -157,12 +171,13 @@ export function UsageAndDuration(props: Props) {
     }
     return (
       <Form.Item
-        label={type === "course" ? "Start/End" : "License Term"}
+        label={type === "course" ? "Course Dates" : "License Term"}
         name="range"
         rules={[{ required: true }]}
         help={invalidRange ? "Please enter a valid license range." : ""}
         validateStatus={invalidRange ? "error" : "success"}
         style={{ paddingBottom: "30px" }}
+        extra={type === "course" ? renderDurationExplanation() : undefined}
       >
         <DateRange
           disabled={disabled}
@@ -265,13 +280,8 @@ export function UsageAndDuration(props: Props) {
     switch (type) {
       case "course":
         return (
-          <Form.Item
-            name="period"
-            initialValue={init}
-            label="Period"
-            extra={renderDurationExplanation()}
-          >
-            Select the start and end date of your course below.
+          <Form.Item name="period" initialValue={init} hidden>
+            <Input type="hidden" value="range" />
           </Form.Item>
         );