@startsimpli/billing 0.4.35 → 0.4.39

package/src/copy/billing-copy.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from "vitest";
+import {
+  defaultBillingCopy,
+  withBillingCopy,
+  resolveFeatureCopy,
+  featureText,
+} from "./index";
+import { trialLabel, planCtaLabel } from "../utils/plan";
+import { formatFeatureLabel } from "../utils/format";
+import { crochetPro, crochetFree } from "../components/__fixtures__/crochetProduct";
+
+describe("withBillingCopy", () => {
+  it("returns the defaults with no override", () => {
+    expect(withBillingCopy()).toEqual(defaultBillingCopy);
+    expect(withBillingCopy({})).toEqual(defaultBillingCopy);
+  });
+
+  it("keeps today's strings as the defaults", () => {
+    expect(defaultBillingCopy.changePlan).toBe("Change Plan");
+    expect(defaultBillingCopy.availablePlans).toBe("Available Plans");
+    expect(defaultBillingCopy.downgradeTo("Free")).toBe("Downgrade to Free");
+    expect(defaultBillingCopy.upgradeTo("Pro")).toBe("Upgrade to Pro");
+    expect(defaultBillingCopy.trialFree(7)).toBe("7-day free trial");
+  });
+
+  it("overrides single keys and merges the status labels per key", () => {
+    const c = withBillingCopy({ changePlan: "Pick a plan", status: { active: "On" } as never });
+    expect(c.changePlan).toBe("Pick a plan");
+    expect(c.availablePlans).toBe("Available Plans");
+    expect(c.status.active).toBe("On");
+    expect(c.status.past_due).toBe("Past due");
+  });
+});
+
+describe("resolveFeatureCopy", () => {
+  const f = { key: "ai_refine", name: "AI chat to refine any pattern", value: true };
+  it("is null without an entry", () => {
+    expect(resolveFeatureCopy(f, undefined)).toBeNull();
+    expect(resolveFeatureCopy(f, { other: "x" })).toBeNull();
+  });
+  it("accepts a string or {label, hint}", () => {
+    expect(resolveFeatureCopy(f, { ai_refine: "Chat to tweak" })).toEqual({ label: "Chat to tweak" });
+    expect(resolveFeatureCopy(f, { ai_refine: { label: "Chat", hint: "Ask for changes" } })).toEqual({ label: "Chat", hint: "Ask for changes" });
+  });
+  it("featureText falls back to the old label", () => {
+    expect(featureText(f, undefined)).toEqual({ label: formatFeatureLabel(f) });
+    expect(featureText(f, { ai_refine: "Chat" }).label).toBe("Chat");
+  });
+});
+
+describe("plan helpers take optional copy", () => {
+  it("trialLabel default unchanged, overridable", () => {
+    expect(trialLabel(crochetPro)).toBe("7-day free trial");
+    expect(trialLabel(crochetPro, withBillingCopy({ trialFree: (d) => `Try it for ${d} days` }))).toBe("Try it for 7 days");
+  });
+  it("trialLabel with a fee", () => {
+    const o = { ...crochetPro, trialFeeCents: 100 };
+    expect(trialLabel(o)).toBe("7-day trial · $1 today");
+    expect(trialLabel(o, withBillingCopy({ trialWithFee: (d, fee) => `${d} days, ${fee} now` }))).toBe("7 days, $1 now");
+  });
+  it("planCtaLabel default unchanged, overridable", () => {
+    expect(planCtaLabel(crochetFree, "downgrade")).toBe("Downgrade to Free");
+    expect(planCtaLabel(crochetPro, "upgrade", true)).toBe("Upgrade to Pro");
+    expect(planCtaLabel(crochetPro, "current")).toBe("Current plan");
+    const copy = withBillingCopy({ downgradeTo: (n) => `Move down to ${n}`, upgradeTo: (n) => `Move up to ${n}`, currentPlan: "Your pick" });
+    expect(planCtaLabel(crochetFree, "downgrade", false, copy)).toBe("Move down to Free");
+    expect(planCtaLabel(crochetPro, "upgrade", true, copy)).toBe("Move up to Pro");
+    expect(planCtaLabel(crochetPro, "current", false, copy)).toBe("Your pick");
+  });
+});

package/src/copy/billing-copy.ts

@@ -0,0 +1,188 @@
+/**
+ * Every overridable customer-facing string of the plan UI. The app owns its
+ * vocabulary (what a plan or a design is called); these defaults are the
+ * words the components always had. Plan NAMES and prices are not here: they
+ * come from the offers.
+ *
+ *   <SubscriptionManager copy={{ changePlan: "Pick a level" }} />
+ */
+import { defaultPlanChangeCopy, type PlanChangeCopy } from "./plan-change-copy";
+
+export interface BillingCopy extends PlanChangeCopy {
+  // Plan grid (SubscriptionManager) and buttons shared by every plan list.
+  changePlan: string;
+  availablePlans: string;
+  currentPlan: string;
+  upgradeTo: (offerName: string) => string;
+  downgradeTo: (offerName: string) => string;
+  /** Button on the current-plan card: "Upgrade to Pro →". */
+  upgradeToArrow: (offerName: string) => string;
+  switchToAnnual: string;
+  switchToMonthly: string;
+  startsOn: (date: string) => string;
+  openingCheckout: string;
+  onlyOwnerCanChange: string;
+  manageBilling: string;
+  loadingShort: string;
+
+  // Trial phrasing ("7-day free trial").
+  trialFree: (days: number) => string;
+  /** The trial costs a card-check fee, so it is not called free. */
+  trialWithFee: (days: number, fee: string) => string;
+
+  // Status badges, keyed by subscription status.
+  status: Record<string, string>;
+  endsOn: (date: string) => string;
+  /** Spoken form inside the status label: "ends Jun 27, 2026". */
+  endsOnAria: (date: string) => string;
+  statusAria: (label: string) => string;
+
+  // Current plan card.
+  freePrice: string;
+  pastDueMessage: string;
+  updateCard: string;
+  cancelledMessage: (planName: string, date: string) => string;
+  endOfPeriod: string;
+  reactivate: string;
+  checkoutExpired: (planName: string) => string;
+  setupIncomplete: (planName: string) => string;
+  startOver: string;
+  finishCheckout: string;
+  trialEndsToday: (date: string) => string;
+  trialEndsTomorrow: (date: string) => string;
+  trialEndsIn: (days: number, date: string) => string;
+  cancelTrial: string;
+  firstCharge: (price: string, date: string) => string;
+  nextBilling: (date: string) => string;
+  billingPeriod: (start: string, end: string) => string;
+
+  // SubscriptionManager states and banners.
+  freeByDefault: (planName: string) => string;
+  chooseToUpgrade: string;
+  noSubscription: string;
+  chooseToStart: string;
+  trialStarted: (planName: string) => string;
+  activated: string;
+  checkoutCancelled: string;
+  paymentPending: string;
+  activating: string;
+  scheduled: string;
+  scheduledUntil: (date: string) => string;
+  scheduledUntilPeriodEnd: string;
+
+  // Pricing pages, modal and section.
+  chooseAPlan: string;
+  mostPopular: string;
+  everythingIn: (tierName: string) => string;
+  yourPlanBilled: (interval: "monthly" | "yearly") => string;
+  unlistedYoureOn: (planName: string) => string;
+  unlistedExplain: (planName: string) => string;
+  pricingLoading: string;
+  pricingError: string;
+  pricingErrorTryAgain: string;
+  noPlans: string;
+  tryAgain: string;
+  checkingPlan: string;
+  planCheckFailed: string;
+  featureColumn: string;
+  included: string;
+  notIncluded: string;
+  unlimited: string;
+  monthly: string;
+  annual: string;
+  billingInterval: string;
+}
+
+export const defaultBillingCopy: BillingCopy = {
+  ...defaultPlanChangeCopy,
+  changePlan: "Change Plan",
+  availablePlans: "Available Plans",
+  currentPlan: "Current plan",
+  upgradeTo: (n) => `Upgrade to ${n}`,
+  downgradeTo: (n) => `Downgrade to ${n}`,
+  upgradeToArrow: (n) => `Upgrade to ${n} →`,
+  switchToAnnual: "Switch to annual",
+  switchToMonthly: "Switch to monthly",
+  startsOn: (d) => `Starts ${d}`,
+  openingCheckout: "Opening checkout…",
+  onlyOwnerCanChange: "Only the team owner can change the plan",
+  manageBilling: "Manage Billing",
+  loadingShort: "Loading...",
+
+  trialFree: (days) => `${days}-day free trial`,
+  trialWithFee: (days, fee) => `${days}-day trial · ${fee} today`,
+
+  status: {
+    active: "Active",
+    trialing: "Trialing",
+    past_due: "Past due",
+    cancelled: "Cancelled",
+    incomplete: "Incomplete",
+    incomplete_expired: "Expired",
+    unpaid: "Unpaid",
+  },
+  endsOn: (d) => `Ends ${d}`,
+  endsOnAria: (d) => `ends ${d}`,
+  statusAria: (label) => `Subscription status: ${label}`,
+
+  freePrice: "Free",
+  pastDueMessage: "Your last payment failed. Update your card to keep your subscription active.",
+  updateCard: "Update card",
+  cancelledMessage: (name, date) => `Your ${name} plan is cancelled. You'll keep access until ${date}.`,
+  endOfPeriod: "the end of your period",
+  reactivate: "Reactivate",
+  checkoutExpired: (name) => `Your ${name} checkout expired. Start over to activate the plan.`,
+  setupIncomplete: (name) => `Your ${name} plan setup is incomplete. Finish checkout to activate.`,
+  startOver: "Start over",
+  finishCheckout: "Finish checkout",
+  trialEndsToday: (d) => `Your trial ends today (${d}).`,
+  trialEndsTomorrow: (d) => `Your trial ends tomorrow (${d}).`,
+  trialEndsIn: (n, d) => `Your trial ends in ${n} days (${d}).`,
+  cancelTrial: "Cancel trial",
+  firstCharge: (price, d) => `First charge ${price} on ${d}`,
+  nextBilling: (d) => `Next billing date: ${d}`,
+  billingPeriod: (s, e) => `Billing period: ${s} to ${e}`,
+
+  freeByDefault: (name) => `You're on the ${name} plan`,
+  chooseToUpgrade: "Choose a plan below to upgrade.",
+  noSubscription: "No active subscription",
+  chooseToStart: "Choose a plan below to get started.",
+  trialStarted: (name) => `Your ${name} trial has started.`,
+  activated: "Subscription activated successfully!",
+  checkoutCancelled: "Checkout was cancelled. You can try again whenever you're ready.",
+  paymentPending: "We haven't received the payment confirmation yet. It can take a minute; refresh this page to check again. Please don't pay a second time.",
+  activating: "Activating your subscription...",
+  scheduled: "Your plan change is scheduled.",
+  scheduledUntil: (d) => `You keep your current plan until ${d}.`,
+  scheduledUntilPeriodEnd: "You keep your current plan until the end of this billing period.",
+
+  chooseAPlan: "Choose a plan",
+  mostPopular: "Most Popular",
+  everythingIn: (tier) => `Everything in ${tier}, plus:`,
+  yourPlanBilled: (i) => `Your plan · billed ${i}`,
+  unlistedYoureOn: (n) => `You're on ${n}.`,
+  unlistedExplain: (n) => `It isn't one of the plans below. If you choose another plan, ${n} ends and can't be chosen again.`,
+  pricingLoading: "Loading pricing...",
+  pricingError: "Unable to load pricing.",
+  pricingErrorTryAgain: "Unable to load pricing. Please try again.",
+  noPlans: "No pricing plans available at this time.",
+  tryAgain: "Try again",
+  checkingPlan: "Checking your plan…",
+  planCheckFailed: "We couldn't check your plan, so plan changes are paused.",
+  featureColumn: "Feature",
+  included: "Included",
+  notIncluded: "Not included",
+  unlimited: "Unlimited",
+  monthly: "Monthly",
+  annual: "Annual",
+  billingInterval: "Billing interval",
+};
+
+/** Per-key override. `status` is merged key by key so one badge can change. */
+export type BillingCopyInput = Partial<BillingCopy>;
+
+export const withBillingCopy = (copy?: BillingCopyInput): BillingCopy => ({
+  ...defaultBillingCopy,
+  ...copy,
+  status: { ...defaultBillingCopy.status, ...copy?.status },
+});

package/src/copy/feature-copy.test.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { FeatureLabel } from "../components/FeatureLabel";
+import { featureText, resolveFeatureCopy } from "./feature-copy";
+import type { OfferFeature } from "../types";
+
+const f = (over: Partial<OfferFeature> = {}): OfferFeature => ({ key: "ai_designs_per_month", name: "AI designs per month", value: 3, ...over });
+const copy = { ai_designs_per_month: "{value} new patterns each month" };
+
+describe("featureCopy {value} placeholder", () => {
+  it("fills from the feature value", () => {
+    expect(featureText(f({ value: 3 }), copy).label).toBe("3 new patterns each month");
+    expect(featureText(f({ value: 15 }), copy).label).toBe("15 new patterns each month");
+  });
+  it("prefers the limit over the value", () => {
+    expect(featureText(f({ value: true, limit: 15 }), copy).label).toBe("15 new patterns each month");
+    expect(featureText(f({ value: 3, limit: 15 }), copy).label).toBe("15 new patterns each month");
+    expect(featureText(f({ value: 3, limit: null }), copy).label).toBe("3 new patterns each month");
+  });
+  it("says unlimited for -1 and the string 'unlimited', matching the case of the spot", () => {
+    expect(featureText(f({ value: -1 }), copy).label).toBe("Unlimited new patterns each month");
+    expect(featureText(f({ limit: -1 }), { ai_designs_per_month: "Make {value} patterns" }).label).toBe("Make unlimited patterns");
+    expect(featureText(f({ value: "unlimited" }), copy).label).toBe("Unlimited new patterns each month");
+  });
+  it("drops the placeholder for true / other strings / null", () => {
+    expect(featureText(f({ value: true }), copy).label).toBe("new patterns each month");
+    expect(featureText(f({ value: "pro" }), copy).label).toBe("new patterns each month");
+    expect(featureText(f({ value: null }), { ai_designs_per_month: "Patterns ({value}) monthly" }).label).toBe("Patterns monthly");
+  });
+  it("works in {label, hint} and fills every occurrence", () => {
+    const out = featureText(f({ value: 3 }), { ai_designs_per_month: { label: "{value} patterns", hint: "Up to {value} a month, resets on the 1st" } });
+    expect(out).toEqual({ label: "3 patterns", hint: "Up to 3 a month, resets on the 1st" });
+  });
+  it("leaves text without a placeholder and the default label untouched", () => {
+    expect(featureText(f(), { ai_designs_per_month: "Patterns per month" }).label).toBe("Patterns per month");
+    expect(featureText(f({ value: 3 })).label).toBe("Up to 3 ai designs per month".replace("ai designs", "AI designs"));
+    expect(resolveFeatureCopy(f(), {})).toBeNull();
+  });
+  it("generic mode (comparison-table row labels) removes the placeholder", () => {
+    expect(resolveFeatureCopy(f({ value: 3 }), copy, { generic: true })?.label).toBe("new patterns each month");
+  });
+  it("renders through FeatureLabel", () => {
+    render(<FeatureLabel feature={f({ value: 15 })} featureCopy={{ ai_designs_per_month: { label: "{value} new patterns each month", hint: "of {value}" } }} />);
+    expect(screen.getByText(/15 new patterns each month/)).toBeTruthy();
+    expect(screen.getByTestId("feature-hint-ai_designs_per_month").textContent).toBe("of 15");
+  });
+});

package/src/copy/feature-copy.ts

@@ -0,0 +1,64 @@
+import type { OfferFeature } from "../types";
+import { formatFeatureLabel } from "../utils/format";
+
+export type FeatureCopyEntry = string | { label: string; hint?: string };
+
+/** Override of a plan feature row, by feature key (`ai_refine`, `trial_note`, …). */
+export type FeatureCopy = Record<string, FeatureCopyEntry>;
+
+export interface FeatureText {
+  label: string;
+  hint?: string;
+}
+
+const PLACEHOLDER = /\{value\}/g;
+
+/**
+ * The number a `{value}` placeholder reads: the feature's `limit` when it is a
+ * number, else its `value` when that is a number. -1 or the string "unlimited"
+ * is unlimited; anything else (true, other strings, null) has no number.
+ */
+function placeholderValue(feature: Pick<OfferFeature, "limit" | "value">): number | "unlimited" | null {
+  const n = typeof feature.limit === "number" ? feature.limit : typeof feature.value === "number" ? feature.value : null;
+  if (n === -1) return "unlimited";
+  if (n !== null && Number.isFinite(n) && n >= 0) return n;
+  if (n === null && typeof feature.value === "string" && feature.value.trim().toLowerCase() === "unlimited") return "unlimited";
+  return null;
+}
+
+function fillPlaceholder(text: string, value: number | "unlimited" | null): string {
+  if (!PLACEHOLDER.test(text)) return text;
+  PLACEHOLDER.lastIndex = 0;
+  if (value === null) {
+    return text.replace(PLACEHOLDER, "").replace(/\(\s*\)/g, "").replace(/\s{2,}/g, " ").trim();
+  }
+  return text.replace(PLACEHOLDER, (_m, offset: number) => {
+    if (value !== "unlimited") return String(value);
+    const atStart = text.slice(0, offset).trim() === "";
+    return atStart ? "Unlimited" : "unlimited";
+  });
+}
+
+/**
+ * The override for this feature, or null when the app set none. `{value}` in a
+ * label or hint is filled from the feature (see placeholderValue). `generic`
+ * drops the placeholder, for a row label shared by several plans.
+ */
+export function resolveFeatureCopy(
+  feature: Pick<OfferFeature, "key"> & Partial<Pick<OfferFeature, "limit" | "value">>,
+  featureCopy?: FeatureCopy,
+  opts?: { generic?: boolean },
+): FeatureText | null {
+  const entry = featureCopy?.[feature.key];
+  if (entry === undefined || entry === null) return null;
+  const value = opts?.generic ? null : placeholderValue({ limit: feature.limit, value: feature.value ?? null });
+  const fill = (t: string) => fillPlaceholder(t, value);
+  return typeof entry === "string"
+    ? { label: fill(entry) }
+    : { label: fill(entry.label), ...(entry.hint ? { hint: fill(entry.hint) } : {}) };
+}
+
+/** What a feature row says: the override, else the label the card always had. */
+export function featureText(feature: OfferFeature, featureCopy?: FeatureCopy): FeatureText {
+  return resolveFeatureCopy(feature, featureCopy) ?? { label: formatFeatureLabel(feature) };
+}

package/src/copy/index.ts

@@ -0,0 +1,6 @@
+export { defaultBillingCopy, withBillingCopy } from "./billing-copy";
+export type { BillingCopy, BillingCopyInput } from "./billing-copy";
+export { defaultPlanChangeCopy } from "./plan-change-copy";
+export type { PlanChangeCopy } from "./plan-change-copy";
+export { featureText, resolveFeatureCopy } from "./feature-copy";
+export type { FeatureCopy, FeatureCopyEntry, FeatureText } from "./feature-copy";

package/src/copy/plan-change-copy.ts

@@ -0,0 +1,66 @@
+/** The words of the plan-change confirmation dialog (PlanChangeConfirm). */
+export interface PlanChangeCopy {
+  confirmDowngradeTitle: (offerName: string) => string;
+  confirmDowngradeAction: (offerName: string) => string;
+  /** Leaving a plan that is not for sale. */
+  confirmEndAction: (currentName: string) => string;
+  confirmDowngradeAtDate: (currentName: string, date: string) => string;
+  confirmDowngradeAtPeriodEnd: (currentName: string) => string;
+  confirmDowngradeAfter: (offerName: string, currentName: string) => string;
+  confirmEndsNow: (currentName: string) => string;
+  confirmUnlistedGone: (currentName: string) => string;
+  confirmDowngradeGeneric: (currentName: string) => string;
+  confirmSwitchTitle: (offerName: string) => string;
+  confirmSwitchAction: (offerName: string) => string;
+  confirmSwitchAtDate: (currentName: string, offerName: string, date: string, recurring: string) => string;
+  confirmSwitchAtPeriodEnd: (currentName: string, offerName: string, recurring: string) => string;
+  confirmNothingToday: string;
+  confirmChangeTitle: (offerName: string) => string;
+  confirmChangeAction: (offerName: string) => string;
+  confirmChangeRules: (offerName: string, recurring: string) => string;
+  confirmNoTrial: string;
+  confirmUpgradeTitle: (offerName: string) => string;
+  confirmUpgradeAction: (offerName: string) => string;
+  confirmUpgradeAndPay: (amount: string) => string;
+  confirmChargedAmount: (amount: string, recurring: string) => string;
+  confirmChargedProrated: (recurring: string) => string;
+  confirmChangesNow: (currentName: string, offerName: string) => string;
+  /** Used when the viewer's current plan name is unknown. */
+  confirmYourCurrentPlan: string;
+  confirmKeepPlan: string;
+  confirmCancel: string;
+  confirmWorking: string;
+}
+
+const NO_TRIAL = "There's no free trial when you're already on a paid plan.";
+
+export const defaultPlanChangeCopy: PlanChangeCopy = {
+  confirmDowngradeTitle: (n) => `Downgrade to ${n}?`,
+  confirmDowngradeAction: (n) => `Downgrade to ${n}`,
+  confirmEndAction: (c) => `End ${c}`,
+  confirmDowngradeAtDate: (c, d) => `Your ${c} plan ends on ${d}. You keep everything in it until then, and you won't be charged again.`,
+  confirmDowngradeAtPeriodEnd: (c) => `Your ${c} plan ends at the end of this billing period. You keep everything in it until then, and you won't be charged again.`,
+  confirmDowngradeAfter: (n, c) => `After that you're on ${n}, and lose what ${c} includes.`,
+  confirmEndsNow: (c) => `Your ${c} plan ends now, and you lose what it includes.`,
+  confirmUnlistedGone: (c) => `${c} isn't a plan you can buy, so once it ends you can't get it back.`,
+  confirmDowngradeGeneric: (c) => `Your ${c} plan will end. If it is a paid plan you keep it until the end of the period you've paid for.`,
+  confirmSwitchTitle: (n) => `Switch to ${n}?`,
+  confirmSwitchAction: (n) => `Switch to ${n}`,
+  confirmSwitchAtDate: (c, n, d, r) => `You keep ${c} until ${d}. Then your plan changes to ${n} at ${r}.`,
+  confirmSwitchAtPeriodEnd: (c, n, r) => `You keep ${c} until the end of this billing period. Then your plan changes to ${n} at ${r}.`,
+  confirmNothingToday: "Nothing is charged today.",
+  confirmChangeTitle: (n) => `Change to ${n}?`,
+  confirmChangeAction: (n) => `Change to ${n}`,
+  confirmChangeRules: (n, r) => `${n} is ${r}. Moving to a more expensive plan is charged today for the rest of this billing period (prorated); moving to a cheaper one takes effect when this period ends.`,
+  confirmNoTrial: NO_TRIAL,
+  confirmUpgradeTitle: (n) => `Upgrade to ${n}?`,
+  confirmUpgradeAction: (n) => `Upgrade to ${n}`,
+  confirmUpgradeAndPay: (a) => `Upgrade and pay ${a}`,
+  confirmChargedAmount: (a, r) => `You'll be charged ${a} today for the rest of this billing period, then ${r}.`,
+  confirmChargedProrated: (r) => `You'll be charged today for the rest of this billing period (prorated), then ${r}.`,
+  confirmChangesNow: (c, n) => `Your plan changes from ${c} to ${n} now.`,
+  confirmYourCurrentPlan: "your current plan",
+  confirmKeepPlan: "Keep my plan",
+  confirmCancel: "Cancel",
+  confirmWorking: "Working…",
+};

package/src/credits/CreditHistoryList.tsx

@@ -9,8 +9,9 @@ const when = (iso: string) => {
 /** Purchases and use, in the order given (newest first from the server). */
 export function CreditHistoryList({ history, copy }: { history: PatternCreditHistoryEntry[]; copy: CreditsCopy }) {
   if (history.length === 0) return <p className="text-sm text-muted-foreground">{copy.historyEmpty}</p>;
+  // The server's own line ("Added 5 patterns") wins; otherwise the entry type's words.
   const label = (e: PatternCreditHistoryEntry) =>
-    e.entryType === "grant" && e.reason ? e.reason : copy.entry[e.entryType] ?? e.entryType;
+    e.label ? e.label : e.entryType === "grant" && e.reason ? e.reason : copy.entry[e.entryType] ?? e.entryType;
   return (
     <ul aria-label={copy.historyTitle} className="divide-y divide-border rounded-lg border border-border bg-card">
       {history.map((e) => (

package/src/credits/CreditPackCard.savings.test.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { CreditPackCard, CreditPackGrid, CreditsPanel, SAVINGS_SASH_TOKENS, defaultCreditsCopy, withCreditsCopy, type CreditsView } from "./index";
+
+const five = { id: "p5", slug: "5", name: "5 pack", credits: 5, price: "19.99", currency: "usd", compareAt: "24.95", featured: false };
+const fifteen = { id: "p15", slug: "15", name: "15 pack", credits: 15, price: "49.99", currency: "usd", compareAt: "74.85", featured: true };
+const single = { id: "p1", slug: "1", name: "1", credits: 1, price: "4.99", currency: "usd", compareAt: "", featured: false };
+const server5 = { ...five, savingsPercent: 20, savingsAmount: 496, pricePerPattern: "4.00" };
+const server15 = { ...fifteen, savingsPercent: 33, savingsAmount: 2486, pricePerPattern: "3.33" };
+
+const card = (offer: object, copy = defaultCreditsCopy) =>
+  render(<ul><CreditPackCard offer={offer as never} copy={copy} buying={null} onBuy={vi.fn()} /></ul>);
+
+describe("CreditPackCard savings", () => {
+  it("shows the sash, the dollar line and the per-pattern line for the 5 and 15 packs", () => {
+    const { unmount } = card(server5);
+    expect(screen.getByTestId("savings-sash").textContent).toBe("Save 20%");
+    expect(screen.getByText("Save $4.96")).toBeTruthy();
+    expect(screen.getByText("$4.00 each")).toBeTruthy();
+    unmount();
+    card(server15);
+    expect(screen.getByTestId("savings-sash").textContent).toBe("Save 33%");
+    expect(screen.getByText("Save $24.86")).toBeTruthy();
+    expect(screen.getByText("$3.33 each")).toBeTruthy();
+  });
+
+  it("has no sash and no dollar line for a single pattern", () => {
+    card(single);
+    expect(screen.queryByTestId("savings-sash")).toBeNull();
+    expect(screen.queryByText(/^Save/)).toBeNull();
+  });
+
+  it("follows the data: change the offer and the text changes", () => {
+    card({ ...server5, savingsPercent: 35, savingsAmount: 1234, pricePerPattern: "2.50" });
+    expect(screen.getByTestId("savings-sash").textContent).toBe("Save 35%");
+    expect(screen.getByText("Save $12.34")).toBeTruthy();
+    expect(screen.getByText("$2.50 each")).toBeTruthy();
+  });
+
+  it("falls back to compareAt math against an older backend", () => {
+    card(five);
+    expect(screen.getByTestId("savings-sash").textContent).toBe("Save 20%");
+    expect(screen.getByText("Save $4.96")).toBeTruthy();
+    expect(screen.getByText("$4.00 each")).toBeTruthy();
+  });
+
+  it("has no sash when a multi pack saves nothing", () => {
+    card({ ...five, compareAt: "" });
+    expect(screen.queryByTestId("savings-sash")).toBeNull();
+    expect(screen.queryByText(/^Save/)).toBeNull();
+    expect(screen.getByText("$4.00 each")).toBeTruthy();
+  });
+
+  it("applies copy overrides to the sash and the line", () => {
+    card(server5, withCreditsCopy({ savingsSash: (p) => `${p}% off`, savingsLine: (a) => `You keep ${a}` }));
+    expect(screen.getByTestId("savings-sash").textContent).toBe("20% off");
+    expect(screen.getByText("You keep $4.96")).toBeTruthy();
+  });
+
+  it("keeps the older save key working for the sash", () => {
+    card(server5, withCreditsCopy({ save: (p) => `Spar ${p}%` }));
+    expect(screen.getByTestId("savings-sash").textContent).toBe("Spar 20%");
+  });
+
+  it("clips the ribbon inside the card corner", () => {
+    card(server5);
+    const li = screen.getByRole("listitem");
+    expect(li.className).toContain("relative");
+    expect(li.className).toContain("overflow-hidden");
+    const sash = screen.getByTestId("savings-sash");
+    expect(sash.className).toContain("rotate-45");
+    expect(sash.className).toContain("whitespace-nowrap");
+    expect(sash.className).toContain("pointer-events-none");
+  });
+});
+
+// Tailwind default palette values for the classes the sash may use.
+const PALETTE: Record<string, string> = { "bg-green-800": "#166534", "bg-green-900": "#14532d", "bg-emerald-800": "#065f46", "text-white": "#ffffff" };
+const lum = (hex: string) => {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+const contrast = (a: string, b: string) => {
+  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+describe("sash accessibility", () => {
+  it("meets WCAG AA (4.5:1) for its text on its fill", () => {
+    const bg = PALETTE[SAVINGS_SASH_TOKENS.bg];
+    const fg = PALETTE[SAVINGS_SASH_TOKENS.text];
+    expect(bg && fg).toBeTruthy();
+    expect(contrast(bg, fg)).toBeGreaterThanOrEqual(4.5);
+  });
+  it("meets AA for the savings line text (green-700) on white", () => {
+    expect(contrast("#15803d", "#ffffff")).toBeGreaterThanOrEqual(4.5);
+  });
+  it("uses the declared classes on the sash", () => {
+    card(server5);
+    const cls = screen.getByTestId("savings-sash").className;
+    expect(cls).toContain(SAVINGS_SASH_TOKENS.bg);
+    expect(cls).toContain(SAVINGS_SASH_TOKENS.text);
+  });
+});
+
+describe("CreditPackGrid", () => {
+  it("renders one card per offer with no hook and calls the caller's buy handler", () => {
+    const onBuy = vi.fn();
+    render(<CreditPackGrid offers={[single, server5, server15] as never} onBuy={onBuy} />);
+    expect(screen.getAllByRole("listitem")).toHaveLength(3);
+    expect(screen.getAllByTestId("savings-sash")).toHaveLength(2);
+    screen.getByRole("button", { name: "Buy 5 credits" }).click();
+    expect(onBuy).toHaveBeenCalledWith("p5");
+  });
+  it("marks the opening pack, disables the others, and takes copy", () => {
+    render(<CreditPackGrid offers={[server5, server15] as never} onBuy={vi.fn()} buying="p5" copy={{ buying: "Opening…" }} />);
+    expect(screen.getByRole("button", { name: "Opening…" })).toBeTruthy();
+    expect((screen.getByRole("button", { name: "Buy 15 credits" }) as HTMLButtonElement).disabled).toBe(true);
+  });
+  it("renders nothing for no offers", () => {
+    const { container } = render(<CreditPackGrid offers={[]} onBuy={vi.fn()} />);
+    expect(container.innerHTML).toBe("");
+  });
+});
+
+describe("CreditsPanel copy", () => {
+  it("passes the savings copy through to the cards", () => {
+    const credits: CreditsView = {
+      status: "ready", balance: 0, offers: [server5 as never], history: [], error: null, buying: null,
+      refresh: vi.fn(async () => {}), buy: vi.fn(async () => {}), sync: vi.fn(async () => ({ granted: true, balance: 0 })),
+    };
+    render(<CreditsPanel credits={credits} copy={{ savingsLine: (a) => `Keep ${a}` }} />);
+    expect(screen.getByText("Keep $4.96")).toBeTruthy();
+  });
+});