From d6c1dccded21453faa061d61a53c7b1d3e523ff1 Mon Sep 17 00:00:00 2001
From: Maxerns <maksafk@gmail.com>
Date: Mon, 12 Oct 2026 15:29:58 +0200
Subject: [PATCH] send canonical offers from the web billing form

The account panel exposes monthly and annual terms, while the billing API accepts canonical catalogue offer names. Map the selected term for quote requests and preserve the server returned offer for checkout.

Keep founding quotes displayable, but leave cohort assignment to the shared personal and sponsored allocator work.
---
 web/src/CloudAccountPanel.tsx                |  5 +++--
 web/src/__tests__/CloudAccountPanel.test.tsx |  8 ++++----
 web/src/api.ts                               | 16 ++++++++++++----
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/src/CloudAccountPanel.tsx b/web/src/CloudAccountPanel.tsx
index f37bfa3b..992e8a19 100644
--- a/web/src/CloudAccountPanel.tsx
+++ b/web/src/CloudAccountPanel.tsx
@@ -16,6 +16,7 @@ import {
   type PersonalLifecycle,
   type PersonalOperation,
   type PersonalQuote,
+  type PersonalBillingTerm,
   type RefundRequest,
 } from "./api";
 
@@ -25,7 +26,7 @@ function date(epoch: number | null): string | null { return epoch === null ? nul
 
 export function CloudAccountPanel() {
   const [eligibility, setEligibility] = useState<EligibilityView | null>(null);
-  const [offer, setOffer] = useState<PersonalQuote["offer"]>("monthly");
+  const [offer, setOffer] = useState<PersonalBillingTerm>("monthly");
   const [quote, setQuote] = useState<PersonalQuote | null>(null);
   const [lifecycle, setLifecycle] = useState<PersonalLifecycle | null>(null);
   const [refund, setRefund] = useState<RefundRequest | null>(null);
@@ -134,7 +135,7 @@ export function CloudAccountPanel() {
     {error !== null && <p role="alert">{error}</p>}{notice !== null && <p className="notice" role="status">{notice}</p>}
     {notices.length > 0 && <section aria-labelledby="notices-heading"><h2 id="notices-heading">Account notices</h2><ul>{notices.map((item) => <li key={item.noticeId}><strong>{item.content.title}</strong><p>{item.content.detail}</p>{item.content.deadlineEpoch !== null && <p className="muted">Deadline: {date(item.content.deadlineEpoch)}</p>}{item.status === "failed" && <p role="alert">This notice could not be delivered{item.lastErrorCode === null ? "." : ` (${item.lastErrorCode}).`}</p>}</li>)}</ul></section>}
     <section aria-labelledby="status-heading"><h2 id="status-heading">Hosted access</h2><p><strong>{eligibility.state.replaceAll("_", " ")}</strong>{paidThrough !== null ? ` · paid through ${paidThrough}` : ""}</p>{recoveryUntil !== null && <p className="muted">Recovery is available until {recoveryUntil}.</p>}{eligibility.payer === null && eligibility.state === "paid" && <p className="muted">Your hosted access is sponsored or provided by another billing record. There is no personal upgrade to buy.</p>}{eligibility.state === "unavailable" && <p>Billing evidence is temporarily unavailable. Checkout is hidden until the account can be checked safely.</p>}</section>
-    {eligibility.actions.billing && quote !== null && <section aria-labelledby="billing-heading"><h2 id="billing-heading">Choose hosted billing</h2><label>Term <select value={offer} onChange={(e) => setOffer(e.target.value as PersonalQuote["offer"])}><option value="monthly">Monthly</option><option value="annual">Annual</option></select></label><p>{pounds(quote.amountPence)} per {quote.interval}. Tax is shown at checkout.</p>{quote.founding && <p className="muted">Founding price: {quote.foundingRemainingPlaces ?? 0} places remain; {quote.foundingTerm}. Renews at {pounds(quote.nextRenewalAmountPence)}.</p>}<button className="primary" disabled={busy} onClick={() => void checkout()}>{busy ? "Opening checkout…" : "Continue to secure checkout"}</button></section>}
+    {eligibility.actions.billing && quote !== null && <section aria-labelledby="billing-heading"><h2 id="billing-heading">Choose hosted billing</h2><label>Term <select value={offer} onChange={(e) => setOffer(e.target.value as PersonalBillingTerm)}><option value="monthly">Monthly</option><option value="annual">Annual</option></select></label><p>{pounds(quote.amountPence)} per {quote.interval}. Tax is shown at checkout.</p>{quote.founding && <p className="muted">Founding price: {quote.foundingRemainingPlaces ?? 0} places remain; {quote.foundingTerm}. Renews at {pounds(quote.nextRenewalAmountPence)}.</p>}<button className="primary" disabled={busy} onClick={() => void checkout()}>{busy ? "Opening checkout…" : "Continue to secure checkout"}</button></section>}
     {eligibility.state === "pending_initial_payment" && <section aria-labelledby="pending-heading"><h2 id="pending-heading">Payment confirmation pending</h2><p>Your checkout is waiting for the verified payment webhook. Hosted access stays unchanged until it arrives.</p>{operation?.checkoutUrl !== null && operation?.checkoutUrl !== undefined && <p><a href={operation.checkoutUrl}>Return to checkout</a></p>}<button disabled={busy} onClick={() => void refreshOperation()}>Refresh payment status</button></section>}
     {(eligibility.state === "paid" || eligibility.state === "renewal_recovery") && <section aria-labelledby="manage-heading"><h2 id="manage-heading">Manage billing</h2><button disabled={busy} onClick={() => void portal()}>Open billing portal</button>{" "}{eligibility.actions.revoke && <button disabled={busy} onClick={() => void cancel()}>Cancel at the end of the paid period</button>}<button disabled={busy} onClick={() => void askRefund()}>Request a refund</button>{lifecycle?.cancelAtPeriodEnd && <p className="muted">Cancellation is scheduled; access remains available until {lifecycle.paidThroughDate ?? "the paid period ends"}.</p>}{refund !== null && <p className="muted">Refund request: {refund.state}. The paid term is preserved by default.</p>}</section>}
     {eligibility.actions.export && <section aria-labelledby="export-heading"><h2 id="export-heading">Recover your encrypted account</h2><p>{exportUntil === null ? "Your export window is open." : `Export before ${exportUntil}.`}</p>{eligibility.accountInitialized ? <button disabled={busy} onClick={() => void exportAccount()}>Download encrypted export</button> : <p>Set up your account before exporting.</p>}</section>}
diff --git a/web/src/__tests__/CloudAccountPanel.test.tsx b/web/src/__tests__/CloudAccountPanel.test.tsx
index 5b382726..dcc1d9db 100644
--- a/web/src/__tests__/CloudAccountPanel.test.tsx
+++ b/web/src/__tests__/CloudAccountPanel.test.tsx
@@ -52,14 +52,14 @@ describe("CloudAccountPanel", () => {
   it("shows the server quote before offering a personal checkout", async () => {
     vi.mocked(api.fetchEligibility).mockResolvedValue({ ...base, state: "free", actions: { ...base.actions, billing: true } });
     vi.mocked(api.fetchPersonalQuote).mockResolvedValue({
-      offer: "monthly", amountPence: 299, currency: "gbp", interval: "month", taxTreatment: "shown_at_checkout",
+      offer: "founding_monthly", amountPence: 199, currency: "gbp", interval: "month", taxTreatment: "shown_at_checkout",
       quoteVersion: 1, quoteExpiresAtEpoch: 2_000_000_000, founding: true,
-      foundingRemainingPlaces: 12, foundingTerm: "through the founding monthly term", nextRenewalAmountPence: 499,
+      foundingRemainingPlaces: 12, foundingTerm: "through the founding monthly term", nextRenewalAmountPence: 299,
     });
 
     render(<CloudAccountPanel />);
 
-    expect(await screen.findByText(/£2\.99 per month/)).toBeInTheDocument();
+    expect(await screen.findByText(/£1\.99 per month/)).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /secure checkout/i })).toBeInTheDocument();
     expect(screen.getByText(/12 places remain/)).toBeInTheDocument();
   });
@@ -67,7 +67,7 @@ describe("CloudAccountPanel", () => {
   it("keeps a pending checkout recoverable", async () => {
     vi.mocked(api.fetchEligibility).mockResolvedValue({ ...base, state: "pending_initial_payment" });
     vi.mocked(api.fetchPersonalOperation).mockResolvedValue({
-      operationId: "operation-1", offer: "monthly", state: "pending", checkoutUrl: null,
+      operationId: "operation-1", offer: "standard_monthly", state: "pending", checkoutUrl: null,
     });
     sessionStorage.setItem("sotto_personal_operation_id", "operation-1");
 
diff --git a/web/src/api.ts b/web/src/api.ts
index 96e2fa5e..73e8fbeb 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -219,8 +219,15 @@ export async function fetchCloudNotices(): Promise<CloudNotice[]> {
   }));
 }
 
+export type PersonalBillingTerm = "monthly" | "annual";
+export type PersonalBillingOffer =
+  | "standard_monthly"
+  | "standard_annual"
+  | "founding_monthly"
+  | "founding_annual";
+
 export interface PersonalQuote {
-  offer: "monthly" | "annual";
+  offer: PersonalBillingOffer;
   amountPence: number;
   currency: string;
   interval: string;
@@ -233,9 +240,10 @@ export interface PersonalQuote {
   nextRenewalAmountPence: number;
 }
 
-export async function fetchPersonalQuote(offer: PersonalQuote["offer"]): Promise<PersonalQuote> {
+export async function fetchPersonalQuote(term: PersonalBillingTerm): Promise<PersonalQuote> {
+  const offer = term === "monthly" ? "standard_monthly" : "standard_annual";
   const body = await authedJson<{
-    offer: PersonalQuote["offer"];
+    offer: PersonalBillingOffer;
     amount_pence: number;
     currency: string;
     interval: string;
@@ -269,7 +277,7 @@ export interface PersonalCheckoutResult {
 }
 
 export async function createPersonalCheckout(input: {
-  offer: PersonalQuote["offer"];
+  offer: PersonalBillingOffer;
   idempotencyKey: string;
   quoteVersion: number;
   quoteExpiresAtEpoch: number;