@startsimpli/billing 0.4.34 → 0.4.37

package/src/components/SubscriptionManager.tsx

@@ -34,7 +34,8 @@ import {
   type PlanDirection,
 } from "../utils/plan";
 import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers } from "./IntervalToggle";
-import { formatFeatureLabel } from "../utils/format";
+import { FeatureLabel } from "./FeatureLabel";
+import { withBillingCopy, type BillingCopy, type BillingCopyInput, type FeatureCopy } from "../copy";
 
 export interface SubscriptionManagerProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -57,6 +58,14 @@ export interface SubscriptionManagerProps {
   /** The checkout session id from the success URL ({CHECKOUT_SESSION_ID}),
    * passed to success-sync so it reads the checkout that was paid. */
   checkoutSessionId?: string | null;
+
+  /** Wording overrides (section titles, buttons, badges, trial phrasing…).
+   * Defaults are the original strings. Plan names come from the offers. */
+  copy?: BillingCopyInput;
+
+  /** Feature-row overrides by feature key (`ai_refine`, `trial_note`…):
+   * a label string or `{ label, hint }`. */
+  featureCopy?: FeatureCopy;
 }
 
 /** How long to keep looking for a just-paid subscription before saying so. */
@@ -67,9 +76,8 @@ const ACTIVATION_POLL_MS = 2000;
  * that feature so we don't pretend it does). Numeric limits surface as
  * "Unlimited X" (-1) / "Up to N X" / "X" (no limit attribute).
  * startsim-o7u — kills the blank gap between price and CTA on plan cards. */
-function FeatureRow({ feature }: { feature: OfferFeature }) {
+function FeatureRow({ feature, featureCopy }: { feature: OfferFeature; featureCopy?: FeatureCopy }) {
   if (feature.value === false) return null;
-  const label = formatFeatureLabel(feature);
 
   return (
     <li className="flex items-start gap-2 text-sm text-gray-700">
@@ -77,17 +85,17 @@ function FeatureRow({ feature }: { feature: OfferFeature }) {
            stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
         <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
       </svg>
-      <span>{label}</span>
+      <FeatureLabel feature={feature} featureCopy={featureCopy} />
     </li>
   );
 }
 
-function PlanFeatureList({ features, showTrialNote = true }: { features: OfferFeature[]; showTrialNote?: boolean }) {
+function PlanFeatureList({ features, showTrialNote = true, featureCopy }: { features: OfferFeature[]; showTrialNote?: boolean; featureCopy?: FeatureCopy }) {
   if (!features || features.length === 0) return null;
   const shown = showTrialNote ? features : features.filter((f) => f.key !== TRIAL_NOTE_FEATURE_KEY);
   return (
     <ul data-testid="plan-features" className="space-y-1.5 mb-4">
-      {shown.map((f) => <FeatureRow key={f.key} feature={f} />)}
+      {shown.map((f) => <FeatureRow key={f.key} feature={f} featureCopy={featureCopy} />)}
     </ul>
   );
 }
@@ -96,11 +104,11 @@ function PlanFeatureList({ features, showTrialNote = true }: { features: OfferFe
  * startsim-pih — so users know "Start Free Trial" actually IS a free trial.
  * No "no card required": checkout collects a card up front and the offer
  * carries nothing that says otherwise (crochet_patterns-34n7). */
-function TrialCopy({ offer }: { offer: ProductOffer }) {
+function TrialCopy({ offer, copy }: { offer: ProductOffer; copy: BillingCopy }) {
   if (!offer.trialDays || offer.trialDays <= 0) return null;
   return (
     <p data-testid="trial-copy" className="-mt-1 mb-3 text-xs text-gray-500">
-      {trialLabel(offer)}
+      {trialLabel(offer, copy)}
     </p>
   );
 }
@@ -138,7 +146,7 @@ function formatDate(iso: string): string {
   return `${year}-${month}-${day}`;
 }
 
-function StatusBadge({ status, trialEnd }: { status: string; trialEnd: string | null }) {
+function StatusBadge({ status, trialEnd, copy }: { status: string; trialEnd: string | null; copy: BillingCopy }) {
   let className = "inline-block text-xs font-semibold px-3 py-1 rounded-full ";
   switch (status) {
     case "active":
@@ -166,20 +174,12 @@ function StatusBadge({ status, trialEnd }: { status: string; trialEnd: string |
       className += "bg-gray-100 text-gray-600";
   }
 
-  const labelMap: Record<string, string> = {
-    active: "Active",
-    trialing: "Trialing",
-    past_due: "Past due",
-    cancelled: "Cancelled",
-    incomplete: "Incomplete",
-    incomplete_expired: "Expired",
-    unpaid: "Unpaid",
-  };
+  const labelMap = copy.status;
 
   const readableStatus = labelMap[status] ?? status;
 
   return (
-    <span data-testid="plan-status" role="status" aria-label={`Subscription status: ${readableStatus}`} className={className}>
+    <span data-testid="plan-status" role="status" aria-label={copy.statusAria(readableStatus)} className={className}>
       {labelMap[status] ?? status}
       {status === "trialing" && trialEnd && (
         <span className="ml-1">until {formatDate(trialEnd)}</span>
@@ -194,7 +194,10 @@ export function SubscriptionManager({
   onPlanChange,
   statusMessage,
   checkoutSessionId = null,
+  copy: copyOverride,
+  featureCopy,
 }: SubscriptionManagerProps) {
+  const copy = withBillingCopy(copyOverride);
   const { subscription, loading: subLoading, error: subError, refetch: refetchSubscription } = useSubscription(productId);
   const { product, loading: productLoading, error: productError, refetch: refetchProduct } = useProduct(productId);
   const { openPortal, loading: portalLoading, error: portalError } = usePortal();
@@ -379,8 +382,8 @@ export function SubscriptionManager({
           <p className="text-sm font-medium text-green-800">
             {/* A trial is not yet a paid plan (crochet_patterns-reg6a). */}
             {usableSubscription?.status === "trialing"
-              ? `Your ${usableSubscription.offer.name} trial has started.`
-              : "Subscription activated successfully!"}
+              ? copy.trialStarted(usableSubscription.offer.name)
+              : copy.activated}
           </p>
         </div>
       )}
@@ -390,14 +393,14 @@ export function SubscriptionManager({
           <svg className="w-5 h-5 text-gray-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
-          <p className="text-sm font-medium text-gray-700">Checkout was cancelled. You can try again whenever you&apos;re ready.</p>
+          <p className="text-sm font-medium text-gray-700">{copy.checkoutCancelled}</p>
         </div>
       )}
 
       {statusMessage === "success" && activation === "done" && !planFoundRef.current && (
         <div data-testid="status-banner-pending" role="status" className="rounded-xl bg-amber-50 border border-amber-200 p-4">
           <p className="text-sm font-medium text-amber-900">
-            We haven&apos;t received the payment confirmation yet. It can take a minute; refresh this page to check again. Please don&apos;t pay a second time.
+            {copy.paymentPending}
           </p>
         </div>
       )}
@@ -405,10 +408,10 @@ export function SubscriptionManager({
       {statusMessage === "scheduled" && (
         <div data-testid="status-banner-scheduled" role="status" className="rounded-xl bg-blue-50 border border-blue-200 p-4">
           <p className="text-sm font-medium text-blue-900">
-            Your plan change is scheduled.
+            {copy.scheduled}
             {usableSubscription?.currentPeriodEnd
-              ? <> You keep your current plan until {new Date(usableSubscription.currentPeriodEnd).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" })}.</>
-              : <> You keep your current plan until the end of this billing period.</>}
+              ? <> {copy.scheduledUntil(new Date(usableSubscription.currentPeriodEnd).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }))}</>
+              : <> {copy.scheduledUntilPeriodEnd}</>}
           </p>
         </div>
       )}
@@ -425,7 +428,7 @@ export function SubscriptionManager({
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
           </svg>
-          <p className="text-sm font-medium text-blue-800">Activating your subscription...</p>
+          <p className="text-sm font-medium text-blue-800">{copy.activating}</p>
         </div>
       )}
 
@@ -450,6 +453,8 @@ export function SubscriptionManager({
           <CurrentPlanCard
             subscription={usableSubscription}
             usage={usage}
+            copy={copyOverride}
+            featureCopy={featureCopy}
             onPortalClick={usableSubscription.viewerIsOwner === false ? undefined : handlePortalClick}
             upgradeCta={
               usableSubscription.viewerIsOwner !== false && usableSubscription.offer.isFree && featuredPaidOffer ? (
@@ -459,7 +464,7 @@ export function SubscriptionManager({
                   disabled={planChange.busy}
                   className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-bold rounded-xl bg-blue-600 text-white hover:bg-blue-700 cursor-pointer transition-colors"
                 >
-                  Upgrade to {featuredPaidOffer.name} →
+                  {copy.upgradeToArrow(featuredPaidOffer.name)}
                 </button>
               ) : null
             }
@@ -467,13 +472,13 @@ export function SubscriptionManager({
         </>
       ) : statusMessage === "success" && activation !== "done" ? null : onFreeByDefault && freeOffer ? (
         <div data-testid="free-by-default" className="text-center py-8">
-          <p className="text-lg text-gray-600">You&apos;re on the {freeOffer.name} plan</p>
-          <p className="text-sm text-gray-400 mt-1">Choose a plan below to upgrade.</p>
+          <p className="text-lg text-gray-600">{copy.freeByDefault(freeOffer.name)}</p>
+          <p className="text-sm text-gray-400 mt-1">{copy.chooseToUpgrade}</p>
         </div>
       ) : (
         <div className="text-center py-8">
-          <p className="text-lg text-gray-600">No active subscription</p>
-          <p className="text-sm text-gray-400 mt-1">Choose a plan below to get started.</p>
+          <p className="text-lg text-gray-600">{copy.noSubscription}</p>
+          <p className="text-sm text-gray-400 mt-1">{copy.chooseToStart}</p>
         </div>
       )}
 
@@ -482,7 +487,7 @@ export function SubscriptionManager({
       {productLoading && (
         <div data-testid="available-plans-loading" className="space-y-4">
           <h3 className="text-lg font-semibold text-gray-900">
-            {subscription ? "Change Plan" : "Available Plans"}
+            {subscription ? copy.changePlan : copy.availablePlans}
           </h3>
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             <PlanSkeleton testId="skeleton-plan-card" />
@@ -513,9 +518,9 @@ export function SubscriptionManager({
       {!productLoading && !productError && entries.length >= 2 && (
         <div data-testid="available-plans" className="space-y-4">
           <h3 className="text-lg font-semibold text-gray-900">
-            {subscription ? "Change Plan" : "Available Plans"}
+            {subscription ? copy.changePlan : copy.availablePlans}
           </h3>
-          {hasChoice && <IntervalToggle interval={interval} onChange={setInterval} />}
+          {hasChoice && <IntervalToggle interval={interval} onChange={setInterval} copy={copyOverride} />}
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {entries.map((entry) => {
               const { offer, tier } = entry;
@@ -526,9 +531,9 @@ export function SubscriptionManager({
               // Straight to checkout: say so until the page goes (crochet_patterns-jnkso).
               const opening = planChange.busy && planChange.choosing?.id === offer.id && !planChange.pending && !offer.isFree && !paying;
               const ctaLabel = fallsBackHere
-                ? `Starts ${new Date(endingOn).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", timeZone: "UTC" })}`
-                : opening ? "Opening checkout\u2026"
-                : planCtaLabel(offer, direction, paying);
+                ? copy.startsOn(new Date(endingOn).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", timeZone: "UTC" }))
+                : opening ? copy.openingCheckout
+                : planCtaLabel(offer, direction, paying, copy);
               const showTrial = trialApplies(offer, direction, paying);
 
               // Border: current = solid ring; featured upgrade = blue; else gray.
@@ -567,15 +572,15 @@ export function SubscriptionManager({
                   {/* Trial copy is for prospective trialers only — once the
                       user is on this offer or moving downward, drop the
                       "14-day free trial" sales pitch. */}
-                  {showTrial && <TrialCopy offer={offer} />}
-                  <PlanFeatureList features={offer.features} showTrialNote={showTrial || !(offer.trialDays > 0)} />
+                  {showTrial && <TrialCopy offer={offer} copy={copy} />}
+                  <PlanFeatureList features={offer.features} featureCopy={featureCopy} showTrialNote={showTrial || !(offer.trialDays > 0)} />
                   <button
                     data-testid={`upgrade-cta-${offer.slug}`}
                     onClick={() => !isCurrent && !fallsBackHere && !isViewerNonOwner && !planChange.busy && handleOfferClick(offer)}
                     disabled={isCurrent || fallsBackHere || isViewerNonOwner || planChange.busy}
                     aria-disabled={isCurrent || fallsBackHere || isViewerNonOwner || planChange.busy || undefined}
                     aria-busy={planChange.busy && planChange.choosing?.id === offer.id ? true : undefined}
-                    title={isViewerNonOwner ? "Only the team owner can change the plan" : undefined}
+                    title={isViewerNonOwner ? copy.onlyOwnerCanChange : undefined}
                     className={`mt-auto w-full py-2.5 px-4 text-sm font-bold rounded-xl transition-colors ${fallsBackHere ? "bg-gray-100 text-gray-500 cursor-not-allowed" : ctaClass} ${isViewerNonOwner ? "opacity-60 cursor-not-allowed" : ""}`}
                   >
                     {ctaLabel}
@@ -606,7 +611,7 @@ export function SubscriptionManager({
                 : "bg-white text-gray-700 border-gray-200 hover:bg-gray-50 hover:border-gray-300 cursor-pointer"
             }`}
           >
-            {portalLoading ? "Loading..." : "Manage Billing"}
+            {portalLoading ? copy.loadingShort : copy.manageBilling}
           </button>
           {portalError && (
             <p data-testid="portal-error" role="alert" className="mt-3 text-sm text-red-700">
@@ -622,6 +627,7 @@ export function SubscriptionManager({
         error={planChange.pending ? planChange.error : null}
         onConfirm={planChange.confirm}
         onCancel={planChange.cancel}
+        copy={copyOverride}
       />
     </div>
   );

package/src/components/UpgradeModal.tsx

@@ -13,7 +13,8 @@ import React, { useEffect, useRef, useCallback } from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { PlanChangePreview, ProductOffer } from "../types";
 import { FeatureIcon } from "./FeatureIcon";
-import { formatFeatureLabel } from "../utils/format";
+import { withBillingCopy, type BillingCopyInput, type FeatureCopy } from "../copy";
+import { FeatureLabel } from "./FeatureLabel";
 import {
   isPayingSubscription,
   isUnlistedOffer,
@@ -41,6 +42,12 @@ export interface UpgradeModalProps {
   /** The viewer's plan, so their card reads "Current plan" and is disabled.
    * Omit on signed-out pages. crochet_patterns-34n7. */
   currentPlan?: CurrentPlanState | null;
+
+  /** Wording overrides (trial phrasing, buttons, headings…); defaults are the original strings. */
+  copy?: BillingCopyInput;
+
+  /** Feature-row overrides by feature key: a label string or `{ label, hint }`. */
+  featureCopy?: FeatureCopy;
 }
 
 export function UpgradeModal({
@@ -49,7 +56,10 @@ export function UpgradeModal({
   onClose,
   onSelectOffer,
   currentPlan,
+  copy: copyOverride,
+  featureCopy,
 }: UpgradeModalProps) {
+  const copy = withBillingCopy(copyOverride);
   const { product, loading, error } = useProduct(productId);
   const currentOffer = resolveCurrentOffer(product?.offers ?? [], currentPlan);
   const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
@@ -147,22 +157,22 @@ export function UpgradeModal({
         </button>
 
         <h2 id="upgrade-modal-title" className="text-2xl font-extrabold text-gray-900 text-center mb-8">
-          Choose a plan
+          {copy.chooseAPlan}
         </h2>
 
         {loading && (
-          <div className="text-center py-8 text-gray-500">Loading...</div>
+          <div className="text-center py-8 text-gray-500">{copy.loadingShort}</div>
         )}
 
         {error && (
           <div className="text-center py-8 text-red-600">
-            Unable to load pricing. Please try again.
+            {copy.pricingErrorTryAgain}
           </div>
         )}
 
         {product && hasChoice && (
           <div className="mb-6">
-            <IntervalToggle interval={interval} onChange={setInterval} />
+            <IntervalToggle interval={interval} onChange={setInterval} copy={copyOverride} />
           </div>
         )}
 
@@ -202,7 +212,7 @@ export function UpgradeModal({
 
                   {trial && (
                     <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-blue-50 text-blue-700 text-xs font-semibold px-2.5 py-0.5 rounded-md mb-3 w-fit">
-                      {trialLabel(offer)}
+                      {trialLabel(offer, copy)}
                     </span>
                   )}
 
@@ -211,7 +221,7 @@ export function UpgradeModal({
                       {features.map((f) => (
                         <li key={f.key} className="flex items-center gap-1.5 py-1 text-sm text-gray-600">
                           <FeatureIcon value={f.value} size="w-3.5 h-3.5" />
-                          <span>{formatFeatureLabel(f)}</span>
+                          <FeatureLabel feature={f} featureCopy={featureCopy} />
                         </li>
                       ))}
                     </ul>
@@ -232,7 +242,7 @@ export function UpgradeModal({
                       }
                     `}
                   >
-                    {isCurrent ? "Current plan" : direction ? planCtaLabel(offer, direction, paying) : offer.ctaText}
+                    {isCurrent ? copy.currentPlan : direction ? planCtaLabel(offer, direction, paying, copy) : offer.ctaText}
                   </button>
                 </div>
               );
@@ -251,6 +261,7 @@ export function UpgradeModal({
         error={planChange.pending ? planChange.error : null}
         onConfirm={planChange.confirm}
         onCancel={planChange.cancel}
+        copy={copyOverride}
       />
     </div>
   );

package/src/components/billing-copy.test.tsx

@@ -0,0 +1,261 @@
+/**
+ * Copy / label overrides (`copy`, `featureCopy`) on every plan surface.
+ * Per component: the default render is byte-identical with and without empty
+ * overrides, and the overrides replace the words. Plan names stay offer data.
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { SubscriptionManager } from "./SubscriptionManager";
+import { PricingDetailPage } from "./PricingDetailPage";
+import { PricingSection } from "./PricingSection";
+import { PricingPage } from "./PricingPage";
+import { UpgradeModal } from "./UpgradeModal";
+import { CurrentPlanCard } from "./CurrentPlanCard";
+import { PlanChangeConfirm, planChangeCopy } from "./PlanChangeConfirm";
+import { withBillingCopy } from "../copy";
+import type { BillingProduct, SubscriptionInfo } from "../types";
+import {
+  crochetProductWithTiers,
+  crochetFree,
+  crochetLite,
+  crochetPro,
+  crochetFetcher,
+  subscriptionTo,
+} from "./__fixtures__/crochetProduct";
+
+const text = (el: Element) => (el.textContent ?? "").replace(/\s+/g, " ");
+
+const copy = {
+  changePlan: "Pick a different level",
+  availablePlans: "Levels you can pick",
+  currentPlan: "You are here",
+  upgradeTo: (n: string) => `Move up to ${n}`,
+  downgradeTo: (n: string) => `Move down to ${n}`,
+  trialFree: (d: number) => `${d} days on us`,
+  mostPopular: "Crowd favourite",
+  status: { active: "All good" },
+} as never;
+
+const featureCopy = {
+  ai_designs_per_month: { label: "Patterns per month", hint: "Resets on the 1st" },
+  patterns_per_month: "Patterns per month",
+  ai_refine: "Tweak any pattern by chatting",
+  ai_designs: "Pattern making",
+  trial_note: "Try Pro free for 7 days",
+};
+
+const featuredProduct: BillingProduct = {
+  ...crochetProductWithTiers,
+  offers: crochetProductWithTiers.offers.map((o) => (o.slug.startsWith("crochet-pro") ? { ...o, isFeatured: true } : o)),
+};
+
+function ui(el: React.ReactElement, product: BillingProduct = featuredProduct, sub: SubscriptionInfo | null = null) {
+  return (
+    <BillingProvider apiBaseUrl="https://api.test/api/v1" fetcher={crochetFetcher(product, sub)}>
+      {el}
+    </BillingProvider>
+  );
+}
+
+async function html(el: React.ReactElement, ready: string, sub: SubscriptionInfo | null = null) {
+  const { container, unmount } = render(ui(el, crochetProductWithTiers, sub));
+  await waitFor(() => expect(screen.getByTestId(ready)).toBeDefined());
+  await new Promise((r) => setTimeout(r, 20));
+  const out = container.innerHTML;
+  unmount();
+  return out;
+}
+
+describe("SubscriptionManager copy", () => {
+  const el = (props = {}) => <SubscriptionManager productId="crochet-patterns" returnUrl="https://t/s" {...props} />;
+  const free = subscriptionTo(crochetFree);
+
+  it("default render is unchanged by empty overrides", async () => {
+    const a = await html(el(), "available-plans", free);
+    const b = await html(el({ copy: {}, featureCopy: {} }), "available-plans", free);
+    expect(b).toBe(a);
+    expect(a).toContain("Change Plan");
+    expect(a).toContain("7-day free trial");
+  });
+
+  it("applies copy and featureCopy", async () => {
+    render(ui(el({ copy, featureCopy }), featuredProduct, free));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    const grid = screen.getByTestId("available-plans");
+    expect(within(grid).getByText("Pick a different level")).toBeDefined();
+    expect(text(grid)).not.toContain("Change Plan");
+    expect(screen.getByTestId("upgrade-cta-crochet-free").textContent).toBe("You are here");
+    const pro = screen.getByTestId("plan-card-crochet-pro");
+    expect(within(pro).getByTestId("trial-copy").textContent).toBe("7 days on us");
+    expect(text(pro)).toContain("Tweak any pattern by chatting");
+    expect(text(pro)).toContain("Try Pro free for 7 days");
+    expect(text(pro)).not.toContain("AI chat");
+    const lite = screen.getByTestId("plan-card-crochet-lite");
+    expect(text(lite)).toContain("Patterns per month");
+    expect(text(lite)).toContain("Resets on the 1st");
+    // plan names are offer data, not copy
+    expect(within(pro).getByRole("heading").textContent).toBe("Pro");
+    expect(screen.getByTestId("current-plan").textContent).toContain("Free");
+  });
+
+  it("status badge and the upgrade button on the current-plan card use copy", async () => {
+    render(ui(el({ copy: withBillingCopy({ status: { active: "All good" } as never, upgradeToArrow: (n: string) => `Go ${n}` }) }), crochetProductWithTiers, free));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(screen.getByTestId("plan-status").textContent).toBe("All good");
+    expect(screen.getByTestId("upgrade-cta-current-plan").textContent).toBe("Go Lite");
+  });
+
+  it("with no subscription row it shows the Available Plans title from copy", async () => {
+    render(ui(el({ copy: { availablePlans: "Levels you can pick" } }), { ...crochetProductWithTiers, offers: crochetProductWithTiers.offers.filter((o) => !o.isFree) }, null));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(within(screen.getByTestId("available-plans")).getByText("Levels you can pick")).toBeDefined();
+  });
+});
+
+describe("PricingSection copy", () => {
+  const el = (props = {}) => <PricingSection productId="crochet-patterns" {...props} />;
+  it("default unchanged", async () => {
+    const a = await html(el(), "pricing-section");
+    const b = await html(el({ copy: {}, featureCopy: {} }), "pricing-section");
+    expect(b).toBe(a);
+  });
+  it("applies overrides", async () => {
+    render(ui(el({ copy, featureCopy, maxFeatures: 10, currentPlan: { signedIn: true, loading: false, subscription: subscriptionTo(crochetFree) } })));
+    await waitFor(() => expect(screen.getByTestId("pricing-section")).toBeDefined());
+    expect(text(screen.getByTestId("section-card-crochet-pro"))).toContain("7 days on us");
+    expect(text(screen.getByTestId("section-card-crochet-lite"))).toContain("Patterns per month");
+    expect(screen.getByTestId("section-cta-crochet-free").textContent).toBe("You are here");
+    expect(text(screen.getByTestId("section-card-crochet-lite"))).toContain("Tweak any pattern by chatting");
+  });
+});
+
+describe("PricingPage copy", () => {
+  const el = (props = {}) => <PricingPage productId="crochet-patterns" {...props} />;
+  it("default unchanged", async () => {
+    const a = await html(el(), "pricing-page");
+    const b = await html(el({ copy: {}, featureCopy: {} }), "pricing-page");
+    expect(b).toBe(a);
+  });
+  it("applies overrides", async () => {
+    render(ui(el({ copy, featureCopy })));
+    await waitFor(() => expect(screen.getByTestId("pricing-page")).toBeDefined());
+    expect(text(screen.getByTestId("pricing-page"))).toContain("7 days on us");
+    expect(text(screen.getByTestId("pricing-page"))).toContain("Tweak any pattern by chatting");
+    expect(text(screen.getByTestId("pricing-page"))).toContain("Crowd favourite");
+  });
+});
+
+describe("PricingDetailPage copy", () => {
+  const el = (props = {}) => <PricingDetailPage productId="crochet-patterns" {...props} />;
+  it("default unchanged", async () => {
+    const a = await html(el(), "pricing-detail");
+    const b = await html(el({ copy: {}, featureCopy: {} }), "pricing-detail");
+    expect(b).toBe(a);
+  });
+  it("applies overrides to cards and the comparison table", async () => {
+    render(ui(el({ copy: { ...copy as object, featureColumn: "What you get" }, featureCopy, currentPlan: { signedIn: true, loading: false, subscription: subscriptionTo(crochetFree) } })));
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    const pro = screen.getByTestId("detail-card-crochet-pro");
+    expect(text(pro)).toContain("7 days on us");
+    expect(text(pro)).toContain("Crowd favourite");
+    expect(text(screen.getByTestId("detail-card-crochet-lite"))).toContain("Tweak any pattern by chatting");
+    expect(screen.getByTestId("detail-cta-crochet-free").textContent).toBe("You are here");
+    const row = screen.getByTestId("comparison-row-ai_refine");
+    expect(row.textContent).toContain("Tweak any pattern by chatting");
+    expect(text(screen.getByTestId("comparison-table"))).toContain("What you get");
+    expect(within(pro).getByRole("heading").textContent).toBe("Pro");
+  });
+});
+
+describe("downgrade / upgrade button wording", () => {
+  it("SubscriptionManager and PricingDetailPage use copy for Downgrade to X and Upgrade to X", async () => {
+    const proSub = subscriptionTo(crochetPro);
+    const { unmount } = render(ui(<SubscriptionManager productId="crochet-patterns" returnUrl="https://t/s" copy={copy} />, featuredProduct, proSub));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(screen.getByTestId("upgrade-cta-crochet-free").textContent).toBe("Move down to Free");
+    expect(screen.getByTestId("upgrade-cta-crochet-lite").textContent).toBe("Move down to Lite");
+    unmount();
+    render(ui(<PricingDetailPage productId="crochet-patterns" copy={copy} currentPlan={{ signedIn: true, loading: false, subscription: proSub }} />, featuredProduct, proSub));
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    expect(screen.getByTestId("detail-cta-crochet-free").textContent).toBe("Move down to Free");
+    expect(screen.getByTestId("detail-cta-crochet-pro").textContent).toBe("You are here");
+  });
+  it("defaults stay Downgrade to / Upgrade to", async () => {
+    const liteSub = subscriptionTo(crochetLite);
+    render(ui(<SubscriptionManager productId="crochet-patterns" returnUrl="https://t/s" />, featuredProduct, liteSub));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(screen.getByTestId("upgrade-cta-crochet-free").textContent).toBe("Downgrade to Free");
+    expect(screen.getByTestId("upgrade-cta-crochet-pro").textContent).toBe("Upgrade to Pro");
+  });
+});
+
+describe("UpgradeModal copy", () => {
+  const el = (props = {}) => <UpgradeModal productId="crochet-patterns" open onClose={() => {}} {...props} />;
+  it("default unchanged", async () => {
+    const a = await html(el(), "upgrade-offers");
+    const b = await html(el({ copy: {}, featureCopy: {} }), "upgrade-offers");
+    expect(b).toBe(a);
+  });
+  it("applies overrides", async () => {
+    render(ui(el({ copy: { ...copy as object, chooseAPlan: "Pick a level" }, featureCopy })));
+    await waitFor(() => expect(screen.getByTestId("upgrade-offers")).toBeDefined());
+    expect(screen.getByRole("heading", { name: "Pick a level" })).toBeDefined();
+    expect(text(screen.getByTestId("upgrade-offer-crochet-pro"))).toContain("7 days on us");
+    expect(text(screen.getByTestId("upgrade-offer-crochet-pro"))).toContain("Tweak any pattern by chatting");
+  });
+});
+
+describe("CurrentPlanCard copy", () => {
+  const usage = {};
+  it("default unchanged", () => {
+    const sub = subscriptionTo(crochetPro, "past_due");
+    const a = render(<CurrentPlanCard subscription={sub} usage={usage} onPortalClick={() => {}} />);
+    const ha = a.container.innerHTML; a.unmount();
+    const b = render(<CurrentPlanCard subscription={sub} usage={usage} onPortalClick={() => {}} copy={{}} featureCopy={{}} />);
+    expect(b.container.innerHTML).toBe(ha);
+    expect(ha).toContain("Past due");
+    expect(ha).toContain("Update card");
+  });
+  it("applies overrides", () => {
+    const sub = subscriptionTo(crochetPro, "past_due");
+    render(<CurrentPlanCard subscription={sub} usage={usage} onPortalClick={() => {}}
+      copy={{ status: { past_due: "Needs attention" }, updateCard: "Fix payment", pastDueMessage: "Your last payment did not go through." } as never}
+      featureCopy={featureCopy} />);
+    expect(screen.getByTestId("plan-status").textContent).toBe("Needs attention");
+    expect(screen.getByText("Fix payment")).toBeDefined();
+    expect(screen.getByText("Your last payment did not go through.")).toBeDefined();
+    expect(screen.getByTestId("current-plan-feature-ai_refine").textContent).toContain("Tweak any pattern by chatting");
+    expect(screen.getByRole("heading", { level: 2 }).textContent).toBe("Pro");
+  });
+});
+
+describe("PlanChangeConfirm copy", () => {
+  const state = { offer: crochetFree, preview: null, currentName: "Pro", leavingUnlisted: false } as never;
+  it("default text unchanged", () => {
+    const c = planChangeCopy(state);
+    expect(c.title).toBe("Downgrade to Free?");
+    expect(c.action).toBe("Downgrade to Free");
+    expect(planChangeCopy(state, withBillingCopy())).toEqual(c);
+  });
+  it("overrides titles, actions, bodies and buttons", () => {
+    const o = withBillingCopy({
+      confirmDowngradeTitle: (n) => `Move down to ${n}?`,
+      confirmDowngradeAction: (n) => `Yes, ${n}`,
+      confirmDowngradeGeneric: (cur) => `${cur} will end.`,
+      confirmKeepPlan: "Stay put",
+    });
+    const c = planChangeCopy(state, o);
+    expect(c.title).toBe("Move down to Free?");
+    expect(c.action).toBe("Yes, Free");
+    expect(c.body).toEqual(["Pro will end."]);
+    render(<PlanChangeConfirm state={state} confirming={false} error={null} onConfirm={vi.fn()} onCancel={vi.fn()} copy={o} />);
+    expect(screen.getByTestId("plan-change-cancel").textContent).toBe("Stay put");
+    expect(screen.getByTestId("plan-change-confirm-button").textContent).toBe("Yes, Free");
+  });
+  it("lite is not special-cased: names come from the offer", () => {
+    const c = planChangeCopy({ ...(state as object), offer: crochetLite, preview: null } as never);
+    expect(c.title).toBe("Change to Lite?");
+  });
+});