@startsimpli/billing 0.4.35 → 0.4.39

package/src/credits/CreditPackCard.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@startsimpli/ui";
-import { formatPackPrice, pricePerCredit, savingsPercent } from "../utils/credit-math";
+import { formatPackPrice, formatSavingsAmount, packSavings } from "../utils/credit-math";
 import type { CreditsCopy } from "./copy";
 import type { PatternCreditOffer } from "./types";
 
@@ -11,14 +11,35 @@ export interface CreditPackCardProps {
   onBuy: (offerId: string) => void;
 }
 
-/** One pack: its price, the struck-through price and saving when the offer has one, and a Buy button. */
+/**
+ * Sash colours. White on green-800 (#166534) is 7.1:1, above WCAG AA 4.5:1;
+ * a test computes the ratio from these classes.
+ */
+export const SAVINGS_SASH_TOKENS = { bg: "bg-green-800", text: "text-white" } as const;
+
+/**
+ * One pack: its price, the struck-through price, a corner sash and a dollar
+ * saving line on multi-pattern packs, and a Buy button. Server savings fields
+ * win; compareAt math is the fallback.
+ */
 export function CreditPackCard({ offer, copy, buying, onBuy }: CreditPackCardProps) {
-  const saving = savingsPercent(offer);
+  const savings = packSavings(offer);
+  const multi = offer.credits > 1;
+  const showSash = multi && savings.percent !== null;
+  const struck = !!offer.compareAt && Number(offer.compareAt) > Number(offer.price);
   const name = copy.packName(offer.credits);
   const opening = buying === offer.id;
   return (
-    <li className={`flex flex-col rounded-xl border p-4 ${offer.featured ? "border-primary bg-primary/5" : "border-border bg-card"}`}>
-      <div className="flex items-start justify-between gap-2">
+    <li className={`relative flex flex-col overflow-hidden rounded-xl border p-4 ${offer.featured ? "border-primary bg-primary/5" : "border-border bg-card"}`}>
+      {showSash && (
+        <span
+          data-testid="savings-sash"
+          className={`pointer-events-none absolute right-[-2.75rem] top-4 w-36 rotate-45 whitespace-nowrap py-1 text-center text-xs font-semibold shadow-sm ${SAVINGS_SASH_TOKENS.bg} ${SAVINGS_SASH_TOKENS.text}`}
+        >
+          {copy.savingsSash(savings.percent as number)}
+        </span>
+      )}
+      <div className={`flex flex-wrap items-center gap-2 ${showSash ? "pr-14" : ""}`}>
         <p className="text-base font-semibold text-foreground">{name}</p>
         {offer.featured && (
           <span className="rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground">{copy.featured}</span>
@@ -26,16 +47,18 @@ export function CreditPackCard({ offer, copy, buying, onBuy }: CreditPackCardPro
       </div>
       <p className="mt-3 flex flex-wrap items-baseline gap-x-2">
         <span className="text-2xl font-bold text-foreground">{formatPackPrice(offer.price, offer.currency)}</span>
-        {saving !== null && (
+        {struck && (
           <s className="text-sm text-muted-foreground" style={{ textDecoration: "line-through" }}>
             {formatPackPrice(offer.compareAt, offer.currency)}
           </s>
         )}
       </p>
+      {multi && savings.amountCents !== null && (
+        <p className="mt-1 text-sm font-medium text-green-700">{copy.savingsLine(formatSavingsAmount(savings.amountCents, offer.currency))}</p>
+      )}
       <p className="mt-1 min-h-[1.25rem] text-sm text-muted-foreground">
-        {saving !== null && <span className="font-medium text-green-700">{copy.save(saving)}</span>}
-        {saving !== null && offer.credits > 1 && " · "}
-        {offer.credits > 1 && copy.perCredit(formatPackPrice(pricePerCredit(offer), offer.currency))}
+        {!multi && savings.percent !== null && <span className="font-medium text-green-700">{copy.save(savings.percent)}</span>}
+        {multi && copy.perCredit(formatPackPrice(savings.perPattern, offer.currency))}
       </p>
       <Button
         className="mt-4 w-full"

package/src/credits/CreditPackGrid.tsx

@@ -0,0 +1,26 @@
+import { CreditPackCard } from "./CreditPackCard";
+import { withCreditsCopy, type CreditsCopy } from "./copy";
+import type { PatternCreditOffer } from "./types";
+
+export interface CreditPackGridProps {
+  offers: PatternCreditOffer[];
+  /** Called with the offer id. The caller owns what buying means (checkout, or sign-in first for a visitor). */
+  onBuy: (offerId: string) => void;
+  /** Offer id being opened in checkout, if any. */
+  buying?: string | null;
+  copy?: Partial<CreditsCopy>;
+  className?: string;
+}
+
+/** The pack cards on their own: no hook, no balance, no history. For /pricing and home sections. */
+export function CreditPackGrid({ offers, onBuy, buying = null, copy: copyIn, className }: CreditPackGridProps) {
+  if (offers.length === 0) return null;
+  const copy = withCreditsCopy(copyIn);
+  return (
+    <ul className={className ?? "grid gap-3 sm:grid-cols-2 lg:grid-cols-3"}>
+      {offers.map((offer) => (
+        <CreditPackCard key={offer.id} offer={offer} copy={copy} buying={buying} onBuy={onBuy} />
+      ))}
+    </ul>
+  );
+}

package/src/credits/CreditsPanel.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@startsimpli/ui";
 import { CreditBalanceBadge } from "./CreditBalanceBadge";
 import { CreditHistoryList } from "./CreditHistoryList";
-import { CreditPackCard } from "./CreditPackCard";
+import { CreditPackGrid } from "./CreditPackGrid";
 import { withCreditsCopy, type CreditsCopy } from "./copy";
 import type { CreditsView } from "./types";
 
@@ -45,11 +45,7 @@ export function CreditsPanel({ credits, copy: copyIn, headingId = "credits-headi
           {credits.error && (
             <p role="alert" className="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">{credits.error}</p>
           )}
-          <ul className="mb-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {credits.offers.map((offer) => (
-              <CreditPackCard key={offer.id} offer={offer} copy={copy} buying={credits.buying} onBuy={(id) => void credits.buy(id)} />
-            ))}
-          </ul>
+          <CreditPackGrid className="mb-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3" offers={credits.offers} copy={copy} buying={credits.buying} onBuy={(id) => void credits.buy(id)} />
           <p className="mb-6 text-xs text-muted-foreground">{copy.secure}</p>
           <h4 className="mb-2 text-sm font-semibold text-foreground">{copy.historyTitle}</h4>
           <CreditHistoryList history={credits.history} copy={copy} />

package/src/credits/copy.ts

@@ -14,6 +14,10 @@ export interface CreditsCopy {
   packName: (credits: number) => string;
   perCredit: (price: string) => string;
   save: (pct: number) => string;
+  /** Corner sash on a multi-pattern pack. Defaults to `save` when only that is overridden. */
+  savingsSash: (percent: number) => string;
+  /** Dollar saving under the price; `amount` is already formatted ("$4.96"). */
+  savingsLine: (amount: string) => string;
   featured: string;
   buy: (name: string) => string;
   buying: string;
@@ -57,6 +61,8 @@ export const defaultCreditsCopy: CreditsCopy = {
   packName: (c) => `${c} ${plural(c, "credit", "credits")}`,
   perCredit: (p) => `${p} each`,
   save: (pct) => `Save ${pct}%`,
+  savingsSash: (percent) => `Save ${percent}%`,
+  savingsLine: (amount) => `Save ${amount}`,
   featured: "Best value",
   buy: (name) => `Buy ${name}`,
   buying: "Opening checkout…",
@@ -93,4 +99,9 @@ export const defaultCreditsCopy: CreditsCopy = {
   planAllowanceUsed: "Your plan’s allowance for this month is used. You can use a credit instead.",
 };
 
-export const withCreditsCopy = (copy?: Partial<CreditsCopy>): CreditsCopy => ({ ...defaultCreditsCopy, ...copy });
+export const withCreditsCopy = (copy?: Partial<CreditsCopy>): CreditsCopy => ({
+  ...defaultCreditsCopy,
+  // An app that only overrides `save` keeps its wording on the sash.
+  ...(copy?.save && !copy.savingsSash ? { savingsSash: copy.save } : {}),
+  ...copy,
+});

package/src/credits/credits.label.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { CreditHistoryList } from "./CreditHistoryList";
+import { defaultCreditsCopy } from "./copy";
+
+const entry = (over = {}) => ({ id: "h1", entryType: "grant", quantity: 5, externalRef: "", reason: "", createdAt: "2026-11-01T00:00:00Z", ...over }) as never;
+
+describe("CreditHistoryList label", () => {
+  it("renders the server label when given", () => {
+    render(<CreditHistoryList copy={defaultCreditsCopy} history={[entry({ label: "Added 5 patterns" }), entry({ id: "h2", entryType: "commit", quantity: -1, label: "Used 1 pattern" })]} />);
+    expect(screen.getByText("Added 5 patterns")).toBeTruthy();
+    expect(screen.getByText("Used 1 pattern")).toBeTruthy();
+    expect(screen.queryByText("Bought")).toBeNull();
+  });
+  it("falls back to the old rendering without a label", () => {
+    render(<CreditHistoryList copy={defaultCreditsCopy} history={[entry(), entry({ id: "h2", entryType: "grant", reason: "Welcome gift" }), entry({ id: "h3", entryType: "commit", quantity: -1 })]} />);
+    expect(screen.getByText("Bought")).toBeTruthy();
+    expect(screen.getByText("Welcome gift")).toBeTruthy();
+    expect(screen.getByText("Used")).toBeTruthy();
+  });
+  it("ignores an empty label", () => {
+    render(<CreditHistoryList copy={defaultCreditsCopy} history={[entry({ label: "" })]} />);
+    expect(screen.getByText("Bought")).toBeTruthy();
+  });
+});

package/src/credits/index.ts

@@ -1,7 +1,9 @@
 export { CreditsPanel } from "./CreditsPanel";
 export type { CreditsPanelProps } from "./CreditsPanel";
-export { CreditPackCard } from "./CreditPackCard";
+export { CreditPackCard, SAVINGS_SASH_TOKENS } from "./CreditPackCard";
 export type { CreditPackCardProps } from "./CreditPackCard";
+export { CreditPackGrid } from "./CreditPackGrid";
+export type { CreditPackGridProps } from "./CreditPackGrid";
 export { CreditBalanceBadge } from "./CreditBalanceBadge";
 export { CreditHistoryList } from "./CreditHistoryList";
 export { UseCreditPrompt } from "./UseCreditPrompt";

package/src/index.ts

@@ -43,6 +43,10 @@ export type {
   UsageMap,
 } from "./types";
 
+// Copy / label overrides
+export { defaultBillingCopy, withBillingCopy, defaultPlanChangeCopy, featureText, resolveFeatureCopy } from "./copy";
+export type { BillingCopy, BillingCopyInput, PlanChangeCopy, FeatureCopy, FeatureCopyEntry, FeatureText } from "./copy";
+
 // Components
 export { PricingPage, PricingSection, PricingDetailPage, UpgradeModal, ManageSubscription, SubscriptionManager, PlanGate, CurrentPlanCard, LimitNudge, PlanChangeConfirm, planChangeCopy, UsageMeters } from "./components";
 export type {
@@ -96,7 +100,7 @@ export {
   statusMessageFrom,
 } from "./utils/return-urls";
 export type { CreditReturnPaths, PlanStatusMessage } from "./utils/return-urls";
-export { formatPackPrice, pricePerCredit, savingsPercent } from "./utils/credit-math";
-export type { PackPrice } from "./utils/credit-math";
+export { formatPackPrice, formatSavingsAmount, packSavings, pricePerCredit, savingsPercent } from "./utils/credit-math";
+export type { PackPrice, PackSavings, PackSavingsInput } from "./utils/credit-math";
 export { meterRows } from "./utils/usage-meters";
 export type { MeterRow, MeterState } from "./utils/usage-meters";

package/src/utils/credit-math.savings.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { formatSavingsAmount, packSavings } from "./credit-math";
+
+const base = { price: "19.99", compareAt: "24.95", credits: 5, currency: "usd" };
+
+describe("packSavings", () => {
+  it("prefers the server's values", () => {
+    expect(packSavings({ ...base, savingsPercent: 21, savingsAmount: 500, pricePerPattern: "3.99" })).toEqual({
+      percent: 21, amountCents: 500, perPattern: "3.99",
+    });
+  });
+  it("accepts save_percent and per_pattern_price spellings", () => {
+    expect(packSavings({ ...base, savePercent: 22, perPatternPrice: "3.98" })).toMatchObject({ percent: 22, perPattern: "3.98" });
+  });
+  it("falls back to compareAt math when the server sends nothing", () => {
+    expect(packSavings(base)).toEqual({ percent: 20, amountCents: 496, perPattern: "4.00" });
+  });
+  it("derives the percent from a server amount when there is no compareAt", () => {
+    expect(packSavings({ price: "19.99", compareAt: "", credits: 5, savingsAmount: 496 })).toMatchObject({ percent: 20, amountCents: 496 });
+  });
+  it("reports no saving when the server says zero or there is none", () => {
+    expect(packSavings({ ...base, savingsPercent: 0, savingsAmount: 0 })).toMatchObject({ percent: null, amountCents: null });
+    expect(packSavings({ price: "4.99", compareAt: "", credits: 1 })).toMatchObject({ percent: null, amountCents: null });
+  });
+  it("formats cents as a currency amount", () => {
+    expect(formatSavingsAmount(496, "usd")).toBe("$4.96");
+    expect(formatSavingsAmount(2486, "usd")).toBe("$24.86");
+  });
+});

package/src/utils/credit-math.ts

@@ -30,3 +30,53 @@ export function pricePerCredit(offer: Pick<PackPrice, "price" | "credits">): str
   const total = Number(offer.price);
   return offer.credits > 0 && Number.isFinite(total) ? (total / offer.credits).toFixed(2) : offer.price;
 }
+
+/** The server's savings fields on an offer (all optional: older backends send none). */
+export interface PackSavingsInput extends PackPrice {
+  savingsPercent?: number;
+  savePercent?: number;
+  savingsAmount?: number;
+  pricePerPattern?: string;
+  perPatternPrice?: string;
+}
+
+export interface PackSavings {
+  /** Whole percent saved, or null when the pack saves nothing. */
+  percent: number | null;
+  /** Integer cents saved, or null when the pack saves nothing. */
+  amountCents: number | null;
+  /** Price of one pattern, decimal string. */
+  perPattern: string;
+}
+
+const positiveNumber = (v: unknown): number | null =>
+  typeof v === "number" && Number.isFinite(v) && v > 0 ? v : null;
+
+/**
+ * Savings of a pack. Server values win when present (a server 0 means "no
+ * saving"); otherwise derived from compareAt so older backends still work.
+ */
+export function packSavings(offer: PackSavingsInput): PackSavings {
+  const price = Number(offer.price);
+  const was = Number(offer.compareAt);
+  const hasCompare = !!offer.compareAt && Number.isFinite(price) && Number.isFinite(was) && was > price && was > 0;
+
+  let amountCents: number | null;
+  if (typeof offer.savingsAmount === "number") amountCents = positiveNumber(Math.round(offer.savingsAmount));
+  else amountCents = hasCompare ? positiveNumber(Math.round((was - price) * 100)) : null;
+
+  const serverPercent = typeof offer.savingsPercent === "number" ? offer.savingsPercent : offer.savePercent;
+  let percent: number | null;
+  if (typeof serverPercent === "number") percent = positiveNumber(Math.round(serverPercent));
+  else if (hasCompare) percent = positiveNumber(savingsPercent(offer));
+  else if (amountCents !== null && Number.isFinite(price) && price > 0) {
+    percent = positiveNumber(Math.round((amountCents / (price * 100 + amountCents)) * 100));
+  } else percent = null;
+
+  return { percent, amountCents, perPattern: offer.pricePerPattern || offer.perPatternPrice || pricePerCredit(offer) };
+}
+
+/** "$4.96" from integer cents. */
+export function formatSavingsAmount(cents: number, currency: string): string {
+  return formatPackPrice((cents / 100).toFixed(2), currency);
+}

package/src/utils/plan.ts

@@ -8,6 +8,7 @@
  */
 
 import type { OfferFeature, ProductOffer, SubscriptionInfo } from "../types";
+import { defaultBillingCopy, type BillingCopy } from "../copy/billing-copy";
 
 const PAID_STATUSES: ReadonlyArray<SubscriptionInfo["status"]> = ["active", "trialing"];
 
@@ -311,10 +312,13 @@ export function trialApplies(card: ProductOffer, direction: PlanDirection, payin
  * "7-day free trial", or "7-day trial · $1 today" when starting it charges a
  * card-check fee (then it is not free, so it must not say so).
  */
-export function trialLabel(offer: Pick<ProductOffer, "trialDays" | "trialFeeCents" | "currency">): string {
+export function trialLabel(
+  offer: Pick<ProductOffer, "trialDays" | "trialFeeCents" | "currency">,
+  copy: Pick<BillingCopy, "trialFree" | "trialWithFee"> = defaultBillingCopy,
+): string {
   const days = offer.trialDays ?? 0;
   const cents = offer.trialFeeCents ?? 0;
-  if (cents <= 0) return `${days}-day free trial`;
+  if (cents <= 0) return copy.trialFree(days);
   const amount = cents / 100;
   let fee: string;
   try {
@@ -326,7 +330,7 @@ export function trialLabel(offer: Pick<ProductOffer, "trialDays" | "trialFeeCent
   } catch {
     fee = `$${amount}`;
   }
-  return `${days}-day trial · ${fee} today`;
+  return copy.trialWithFee(days, fee);
 }
 
 /**
@@ -334,12 +338,17 @@ export function trialLabel(offer: Pick<ProductOffer, "trialDays" | "trialFeeCent
  * new buyer; someone already paying is upgraded in place, so they get
  * "Upgrade to X" (startsim-21f, crochet_patterns-anw61).
  */
-export function planCtaLabel(card: ProductOffer, direction: PlanDirection, paying = false): string {
-  if (direction === "current") return "Current plan";
-  if (direction === "switch") return card.intervalUnit === "year" ? "Switch to annual" : "Switch to monthly";
-  if (direction === "downgrade") return `Downgrade to ${card.name}`;
-  if (paying) return `Upgrade to ${card.name}`;
-  return card.ctaText || `Upgrade to ${card.name}`;
+export function planCtaLabel(
+  card: ProductOffer,
+  direction: PlanDirection,
+  paying = false,
+  copy: Pick<BillingCopy, "currentPlan" | "switchToAnnual" | "switchToMonthly" | "downgradeTo" | "upgradeTo"> = defaultBillingCopy,
+): string {
+  if (direction === "current") return copy.currentPlan;
+  if (direction === "switch") return card.intervalUnit === "year" ? copy.switchToAnnual : copy.switchToMonthly;
+  if (direction === "downgrade") return copy.downgradeTo(card.name);
+  if (paying) return copy.upgradeTo(card.name);
+  return card.ctaText || copy.upgradeTo(card.name);
 }
 
 /**