@startsimpli/billing 0.4.24 → 0.4.26

package/src/components/PricingDetailPage.review.test.tsx

@@ -0,0 +1,256 @@
+/**
+ * The /pricing design review (crochets.site, 2026-10-18), against a product
+ * shaped like the live crochet-patterns catalogue: Free, Lite (+ annual),
+ * Pro (+ annual). Pro monthly is the featured offer; Pro Annual is not.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { PricingDetailPage, type PricingDetailPageProps } from "./PricingDetailPage";
+import type { BillingProduct, OfferFeature, SubscriptionInfo } from "../types";
+
+function offer(
+  over: Partial<BillingProduct["offers"][number]> & { name: string; slug: string; features: OfferFeature[] },
+) {
+  return {
+    id: over.slug,
+    unitPrice: "0.00",
+    currency: "USD",
+    pricingModel: "flat" as const,
+    intervalUnit: "month" as const,
+    intervalCount: 1,
+    intervalDisplay: "per month",
+    isRecurring: true,
+    isFree: false,
+    isActive: true,
+    isFeatured: false,
+    trialDays: 0,
+    sortOrder: 0,
+    ctaText: "Choose",
+    ...over,
+  };
+}
+
+const LITE: OfferFeature[] = [
+  { key: "ai_designs_per_month", name: "AI designs per month", value: 3 },
+  { key: "ai_refine", name: "AI chat to refine any pattern", value: true },
+  { key: "pdf_export", name: "Print-ready PDF export", value: true },
+  { key: "save_patterns", name: "Save patterns to your library", value: true },
+  { key: "track_progress", name: "Track your progress", value: true },
+  { key: "patterns_per_month", name: "Saved patterns", value: -1 },
+];
+const PRO: OfferFeature[] = [
+  { key: "patterns_per_month", name: "Saved patterns", value: -1 },
+  { key: "ai_refine", name: "AI chat to refine any pattern", value: true },
+  { key: "pdf_export", name: "Print-ready PDF export", value: true },
+  { key: "custom_sizing", name: "Custom sizing", value: true },
+  { key: "trial_note", name: "7-day free trial with AI designs included", value: true },
+  { key: "ai_designs_per_month", name: "AI designs per month", value: 15 },
+];
+
+const product: BillingProduct = {
+  id: "prod-crochet",
+  slug: "crochet-patterns",
+  name: "Crochet Patterns",
+  description: "AI-powered crochet pattern generator",
+  offers: [
+    offer({
+      name: "Free", slug: "crochet-free", isFree: true, sortOrder: 0, ctaText: "Get Started",
+      features: [
+        { key: "ai_designs", name: "AI pattern designs", value: false },
+        { key: "save_patterns", name: "Save patterns to your library", value: true },
+        { key: "track_progress", name: "Track your progress", value: true },
+        { key: "pdf_export", name: "Print-ready PDF export", value: true },
+      ],
+    }),
+    offer({ name: "Lite", slug: "crochet-lite", tier: "lite", unitPrice: "2.99", sortOrder: 1, ctaText: "Get Lite", features: LITE }),
+    offer({
+      name: "Lite Annual", slug: "crochet-lite-annual", tier: "lite", unitPrice: "29.00", sortOrder: 1,
+      intervalUnit: "year", intervalDisplay: "per year", ctaText: "Get Lite", features: LITE,
+    }),
+    offer({
+      name: "Pro", slug: "crochet-pro", tier: "pro", unitPrice: "9.00", sortOrder: 2, trialDays: 7,
+      isFeatured: true, ctaText: "Start Free Trial", features: PRO,
+    }),
+    offer({
+      name: "Pro Annual", slug: "crochet-pro-annual", tier: "pro", unitPrice: "89.00", sortOrder: 2, trialDays: 7,
+      intervalUnit: "year", intervalDisplay: "per year", ctaText: "Start Free Trial", features: PRO,
+    }),
+  ],
+};
+
+function okFetcher(p: BillingProduct = product) {
+  return vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(p) }) as unknown as typeof fetch;
+}
+
+function renderPricing(props: Partial<PricingDetailPageProps> = {}, fetcher: typeof fetch = okFetcher()) {
+  return render(
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1" fetcher={fetcher}>
+      <PricingDetailPage productId="crochet-patterns" {...props} />
+    </BillingProvider>,
+  );
+}
+
+const card = (slug: string) => screen.getByTestId(`detail-card-${slug}`);
+const cta = (slug: string) => screen.getByTestId(`detail-cta-${slug}`) as HTMLButtonElement;
+const cards = () => screen.getAllByTestId(/^detail-card-/);
+const toAnnual = () => fireEvent.click(screen.getByRole("radio", { name: "Annual" }));
+
+function liteMonthly(): SubscriptionInfo {
+  return {
+    id: "sub-1",
+    status: "active",
+    offer: product.offers[1],
+  } as unknown as SubscriptionInfo;
+}
+
+describe("Pro stays the highlighted tier on Annual (crochet_patterns-ftrka)", () => {
+  it("keeps Most Popular on Pro Annual although only the monthly offer is featured", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    expect(within(card("crochet-pro")).getByText(/most popular/i)).toBeDefined();
+
+    toAnnual();
+    expect(within(card("crochet-pro-annual")).getByText(/most popular/i)).toBeDefined();
+    expect(within(card("crochet-lite-annual")).queryByText(/most popular/i)).toBeNull();
+  });
+});
+
+describe("cards list only what a tier adds (crochet_patterns-tv7fb)", () => {
+  it("does not repeat Free's rows on Lite", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-lite")).toBeDefined());
+    const lite = within(card("crochet-lite"));
+    expect(lite.getByText(/everything in free, plus/i)).toBeDefined();
+    expect(lite.queryByText("Print-ready PDF export")).toBeNull();
+    expect(lite.queryByText("Save patterns to your library")).toBeNull();
+    expect(lite.queryByText("Track your progress")).toBeNull();
+    expect(lite.getByText(/AI chat to refine/)).toBeDefined();
+  });
+
+  it("does not repeat Lite's rows on Pro, but keeps Pro's bigger allowance", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    const pro = within(card("crochet-pro"));
+    expect(pro.queryByText(/AI chat to refine/)).toBeNull();
+    expect(pro.queryByText("Print-ready PDF export")).toBeNull();
+    expect(pro.queryByText(/saved patterns/i)).toBeNull();
+    expect(pro.getByText(/custom sizing/i)).toBeDefined();
+    expect(pro.getByText(/15 AI designs/)).toBeDefined();
+  });
+
+  it("shows the trial once, as the pill, and no 'not included' rows on Free", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    expect(screen.getByTestId("trial-pill-crochet-pro")).toBeDefined();
+    expect(within(card("crochet-pro")).queryByText(/with AI designs included/)).toBeNull();
+    expect(within(card("crochet-free")).queryByText("AI pattern designs")).toBeNull();
+    // The comparison table still has every row.
+    expect(screen.getByTestId("comparison-row-ai_designs")).toBeDefined();
+  });
+});
+
+describe("load error offers Try again (crochet_patterns-aeuji)", () => {
+  it("refetches the offers from the button", async () => {
+    const fetcher = vi.fn()
+      .mockResolvedValueOnce({ ok: false, status: 500, json: () => Promise.resolve({}) })
+      .mockResolvedValue({ ok: true, json: () => Promise.resolve(product) }) as unknown as typeof fetch;
+    renderPricing({}, fetcher);
+    const retry = await screen.findByTestId("pricing-retry");
+    fireEvent.click(retry);
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+  });
+});
+
+describe("plan buttons wait while the viewer's plan is unknown (crochet_patterns-ktjto)", () => {
+  it("disables every button and says the plan is being checked", async () => {
+    const onSelectOffer = vi.fn();
+    renderPricing({ onSelectOffer, currentPlan: { signedIn: true, subscription: null, loading: true } });
+    await waitFor(() => expect(card("crochet-free")).toBeDefined());
+    expect(screen.getByTestId("plan-unknown").textContent).toMatch(/checking your plan/i);
+    for (const c of cards()) {
+      const slug = c.getAttribute("data-testid")!.replace("detail-card-", "");
+      expect(cta(slug).disabled, slug).toBe(true);
+    }
+    fireEvent.click(cta("crochet-free"));
+    expect(onSelectOffer).not.toHaveBeenCalled();
+  });
+
+  it("offers a retry when the plan failed to load", async () => {
+    const retry = vi.fn();
+    renderPricing({ currentPlan: { signedIn: true, subscription: null, error: new Error("x"), retry } });
+    await waitFor(() => expect(card("crochet-free")).toBeDefined());
+    expect(cta("crochet-free").disabled).toBe(true);
+    fireEvent.click(screen.getByTestId("plan-retry"));
+    expect(retry).toHaveBeenCalledTimes(1);
+  });
+
+  it("leaves a signed-out viewer's buttons live", async () => {
+    renderPricing({ currentPlan: { signedIn: false, subscription: null } });
+    await waitFor(() => expect(card("crochet-free")).toBeDefined());
+    expect(screen.queryByTestId("plan-unknown")).toBeNull();
+    expect(cta("crochet-lite").disabled).toBe(false);
+  });
+});
+
+describe("one purchase at a time (crochet_patterns-j2we6)", () => {
+  it("disables every button and the toggle while the host's checkout runs", async () => {
+    renderPricing({ busy: true });
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    expect(cta("crochet-lite").disabled).toBe(true);
+    expect(cta("crochet-pro").disabled).toBe(true);
+    expect((screen.getByRole("radio", { name: "Annual" }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("spins the clicked button and holds the rest until the checkout settles", async () => {
+    let finish: (v?: unknown) => void = () => {};
+    const onSelectOffer = vi.fn(() => new Promise((r) => { finish = r; }));
+    renderPricing({ onSelectOffer });
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+
+    fireEvent.click(cta("crochet-lite"));
+    await waitFor(() => expect(cta("crochet-lite").getAttribute("aria-busy")).toBe("true"));
+    expect(cta("crochet-pro").disabled).toBe(true);
+    fireEvent.click(cta("crochet-pro"));
+    expect(onSelectOffer).toHaveBeenCalledTimes(1);
+
+    await act(async () => { finish(); });
+    await waitFor(() => expect(cta("crochet-pro").disabled).toBe(false));
+  });
+});
+
+describe("the page names itself (crochet_patterns-ln6hf)", () => {
+  it("uses the host's title and subtitle", async () => {
+    renderPricing({ title: "Pricing", subtitle: "Free to start." });
+    expect(await screen.findByRole("heading", { level: 1, name: "Pricing" })).toBeDefined();
+    expect(screen.getByText("Free to start.")).toBeDefined();
+  });
+
+  it("falls back to the product name", async () => {
+    renderPricing();
+    expect(await screen.findByRole("heading", { level: 1, name: "Crochet Patterns" })).toBeDefined();
+  });
+});
+
+describe("a Lite monthly subscriber on Annual (crochet_patterns-m1psz)", () => {
+  it("offers Switch to annual on their own tier, marked as their plan", async () => {
+    renderPricing({ currentPlan: { signedIn: true, subscription: liteMonthly() } });
+    await waitFor(() => expect(card("crochet-lite")).toBeDefined());
+    toAnnual();
+    expect(cta("crochet-lite-annual").textContent).toMatch(/switch to annual/i);
+    expect(screen.getByTestId("your-plan-note-crochet-lite-annual").textContent).toBe("Your plan · billed monthly");
+  });
+});
+
+describe("cards share row slots (crochet_patterns-h74l1)", () => {
+  it("gives every card the lead-in row and no featured card is scaled", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    for (const slug of ["crochet-free", "crochet-lite", "crochet-pro"]) {
+      expect(screen.getByTestId(`card-lead-${slug}`)).toBeDefined();
+      expect(card(slug).className).not.toMatch(/scale-/);
+    }
+  });
+});

package/src/components/PricingDetailPage.tsx

@@ -10,10 +10,21 @@
 
 import React from "react";
 import { useProduct } from "../hooks/useProduct";
-import type { ProductOffer, OfferFeature } from "../types";
+import type { PlanChangePreview, ProductOffer, OfferFeature } from "../types";
 import { cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
 import { formatFeatureLabel } from "../utils/format";
-import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
+import {
+  isPayingSubscription,
+  isUnlistedOffer,
+  planCtaLabel,
+  planDirection,
+  resolveCurrentOffer,
+  trialApplies,
+  TRIAL_NOTE_FEATURE_KEY,
+  type CurrentPlanState,
+} from "../utils/plan";
+import { usePlanChange } from "../hooks/usePlanChange";
+import { PlanChangeConfirm } from "./PlanChangeConfirm";
 import { FeatureIcon } from "./FeatureIcon";
 import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
@@ -21,15 +32,29 @@ export interface PricingDetailPageProps {
   /** Product slug (e.g., "raise-simpli") */
   productId: string;
 
-  /** Called when user clicks an offer's CTA button */
-  onSelectOffer?: (offer: ProductOffer) => void;
+  /** Does the purchase / change for the offer the viewer chose. For a
+   * signed-in viewer who already has a plan this runs only after they
+   * confirm (crochet_patterns-anw61, -kigcj), and gets the backend's preview.
+   * Return "navigating" after sending the browser away; throw to show an error. */
+  onSelectOffer?: (offer: ProductOffer, preview?: PlanChangePreview | null) => unknown;
 
   /** Whether to show the feature comparison table (defaults to true) */
   showComparison?: boolean;
 
   /** The viewer's plan, so their card reads "Current plan" and is disabled.
-   * Omit on signed-out pages. crochet_patterns-34n7. */
+   * Omit on signed-out pages. crochet_patterns-34n7. While it loads or has
+   * failed every plan button waits (crochet_patterns-ktjto). */
   currentPlan?: CurrentPlanState | null;
+
+  /** A purchase the host started is in flight (e.g. an auto-checkout after
+   * sign-up): every plan button and the interval toggle wait. */
+  busy?: boolean;
+
+  /** Page heading; defaults to the product name. */
+  title?: React.ReactNode;
+
+  /** Line under the heading; defaults to the product description. */
+  subtitle?: React.ReactNode;
 }
 
 export function PricingDetailPage({
@@ -37,12 +62,20 @@ export function PricingDetailPage({
   onSelectOffer,
   showComparison = true,
   currentPlan,
+  busy: hostBusy = false,
+  title,
+  subtitle,
 }: PricingDetailPageProps) {
-  const { product, loading, error } = useProduct(productId);
+  const { product, loading, error, refetch } = useProduct(productId);
+  const currentOffer = resolveCurrentOffer(product?.offers ?? [], currentPlan);
   const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
     product?.offers ?? [],
-    resolveCurrentOfferId(product?.offers ?? [], currentPlan),
+    currentOffer?.id ?? null,
   );
+  const planChange = usePlanChange(async (offer, preview) => onSelectOffer?.(offer, preview));
+  // A purchase by a viewer with no plan (signed out) skips usePlanChange, so
+  // it is tracked here: the clicked card spins and every other button waits.
+  const [selecting, setSelecting] = React.useState<string | null>(null);
 
   if (loading) {
     return (
@@ -54,8 +87,16 @@ export function PricingDetailPage({
 
   if (error || !product) {
     return (
-      <div className="text-center py-16 text-red-600">
-        Unable to load pricing. Please try again.
+      <div role="alert" className="text-center py-16">
+        <p className="text-red-600">Unable to load pricing.</p>
+        <button
+          type="button"
+          data-testid="pricing-retry"
+          onClick={refetch}
+          className="mt-4 py-2 px-5 text-sm font-semibold rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
+        >
+          Try again
+        </button>
       </div>
     );
   }
@@ -72,7 +113,36 @@ export function PricingDetailPage({
   // the comparison columns all read this, never the raw list (which would
   // add a "Lite Annual" column beside "Lite").
   const visibleOffers = entries.map((e) => e.offer);
-  const currentOfferId = resolveCurrentOfferId(product.offers, currentPlan);
+  // The viewer's plan once known; null signed out or while it loads, and
+  // then every card keeps its sales CTA.
+  const paying = !!currentOffer && isPayingSubscription(currentPlan?.subscription);
+  const onUnlistedPlan = isUnlistedOffer(product.offers, currentOffer);
+  const tierKeyOf = (offerId: string) =>
+    entries.find(({ tier }) => tier.monthly?.id === offerId || tier.annual?.id === offerId)?.tier.key ?? null;
+  // Signed in but the plan is not known yet (or failed to load): a click
+  // could buy what they already have or drop a paying plan to Free.
+  const planUnknown = !!currentPlan && (!!currentPlan.loading || (currentPlan.signedIn && !!currentPlan.error));
+  const busy = planChange.busy || hostBusy || selecting !== null;
+  const select = (offer: ProductOffer) => {
+    if (busy || planUnknown) return;
+    if (!currentOffer) {
+      setSelecting(offer.id);
+      void Promise.resolve()
+        .then(() => onSelectOffer?.(offer))
+        .then(
+          (outcome) => { if (outcome !== "navigating") setSelecting(null); },
+          () => setSelecting(null),
+        );
+      return;
+    }
+    setSelecting(null);
+    void planChange.choose(offer, { paying, leavingUnlisted: onUnlistedPlan, currentOffer });
+  };
+  const spinningId = busy ? selecting ?? planChange.pending?.offer.id ?? null : null;
+
+  // What each tier already has, so a card under "Everything in X, plus:"
+  // lists only what it adds (crochet_patterns-tv7fb).
+  const cumulative = cumulativeFeatureLookup(visibleOffers);
 
   // Extract all unique feature keys across all offers (preserving order)
   const allFeatureKeys: string[] = [];
@@ -90,29 +160,81 @@ export function PricingDetailPage({
     <div data-testid="pricing-detail" className="max-w-6xl mx-auto px-6 py-12">
       <div className="text-center mb-12">
         <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 mb-3">
-          {product.name}
+          {title ?? product.name}
         </h1>
         <p className="text-lg text-gray-500 max-w-xl mx-auto">
-          {product.description}
+          {subtitle ?? product.description}
         </p>
       </div>
 
+      {onUnlistedPlan && currentOffer && (
+        <div
+          data-testid="current-plan-unlisted"
+          role="status"
+          className="mb-8 mx-auto max-w-2xl rounded-xl border border-blue-200 bg-blue-50 p-4 text-center"
+        >
+          <p className="text-sm font-semibold text-blue-900">You&apos;re on {currentOffer.name}.</p>
+          <p className="mt-1 text-sm text-blue-800">
+            It isn&apos;t one of the plans below. If you choose another plan, {currentOffer.name} ends and can&apos;t be chosen again.
+          </p>
+        </div>
+      )}
+
+      {planChange.error && !planChange.pending && (
+        <div data-testid="plan-change-error" role="alert" className="mb-8 mx-auto max-w-2xl rounded-xl border border-red-200 bg-red-50 p-4">
+          <p className="text-sm text-red-700">{planChange.error}</p>
+        </div>
+      )}
+
+      {planUnknown && (
+        <div
+          data-testid="plan-unknown"
+          role="status"
+          className="mb-8 mx-auto max-w-2xl rounded-xl border border-gray-200 bg-gray-50 p-4 text-center"
+        >
+          {currentPlan?.loading ? (
+            <p className="text-sm text-gray-700">Checking your plan…</p>
+          ) : (
+            <>
+              <p className="text-sm text-gray-700">We couldn&apos;t check your plan, so plan changes are paused.</p>
+              {currentPlan?.retry && (
+                <button
+                  type="button"
+                  data-testid="plan-retry"
+                  onClick={currentPlan.retry}
+                  className="mt-2 text-sm font-semibold text-blue-700 hover:underline cursor-pointer"
+                >
+                  Try again
+                </button>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
       {hasChoice && (
         <div className="mb-10">
-          <IntervalToggle interval={interval} onChange={setInterval} />
+          <IntervalToggle interval={interval} onChange={setInterval} disabled={busy} />
         </div>
       )}
 
       <div className="flex flex-wrap justify-center gap-6 items-stretch mb-16">
         {entries.map((entry) => {
           const below = tierBelow(visibleOffers, entry.offer);
+          const direction = currentOffer ? planDirection(entry.offer, currentOffer, tierKeyOf) : null;
           return (
             <DetailCard
               key={entry.offer.id}
               entry={entry}
-              onSelect={onSelectOffer}
+              onSelect={select}
               buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
-              isCurrent={entry.offer.id === currentOfferId}
+              inherited={below ? cumulative[below.slug] ?? null : null}
+              isCurrent={direction === "current"}
+              yourPlanNote={direction === "switch" && currentOffer ? `Your plan · billed ${currentOffer.intervalUnit === "year" ? "yearly" : "monthly"}` : null}
+              ctaLabel={direction ? planCtaLabel(entry.offer, direction, paying) : entry.offer.ctaText}
+              showTrial={direction ? trialApplies(entry.offer, direction, paying) : entry.offer.trialDays > 0}
+              busy={busy || planUnknown}
+              spinning={spinningId === entry.offer.id}
             />
           );
         })}
@@ -125,6 +247,14 @@ export function PricingDetailPage({
           featureNameMap={featureNameMap}
         />
       )}
+
+      <PlanChangeConfirm
+        state={planChange.pending}
+        confirming={planChange.confirming}
+        error={planChange.pending ? planChange.error : null}
+        onConfirm={planChange.confirm}
+        onCancel={planChange.cancel}
+      />
     </div>
   );
 }
@@ -134,13 +264,43 @@ interface DetailCardProps {
   onSelect?: (offer: ProductOffer) => void;
   /** Name of the tier just below this one, when there is one. */
   buildsOn?: string | null;
+  /** What the tier below already has (cumulative); rows it matches are not repeated. */
+  inherited?: Record<string, OfferFeature> | null;
+  /** "Your plan · billed monthly" on the other-interval card of the viewer's plan. */
+  yourPlanNote?: string | null;
+  /** This card's purchase is in flight: its button spins. */
+  spinning?: boolean;
   /** The viewer is on this offer: "Current plan", disabled. */
   isCurrent?: boolean;
+  /** The button's words for this viewer (planCtaLabel). */
+  ctaLabel?: string;
+  /** Show the free-trial pill: only when choosing this card starts one. */
+  showTrial?: boolean;
+  /** A plan change is in flight: every button waits. */
+  busy?: boolean;
 }
 
-function DetailCard({ entry, onSelect, buildsOn, isCurrent = false }: DetailCardProps) {
+function sameFeature(a: OfferFeature, b: OfferFeature): boolean {
+  return a.value === b.value && (a.limit ?? null) === (b.limit ?? null);
+}
+
+function DetailCard({
+  entry, onSelect, buildsOn, inherited, yourPlanNote, isCurrent = false, ctaLabel, showTrial, busy = false, spinning = false,
+}: DetailCardProps) {
   const { offer, tier } = entry;
-  const isFeatured = offer.isFeatured;
+  const trial = showTrial ?? offer.trialDays > 0;
+  // Each row once (crochet_patterns-tv7fb): no "not included" rows (the
+  // comparison table has them), no trial row (the pill says it, or the trial
+  // does not apply), and nothing the tier below already has.
+  const features = offer.features.filter((f) => {
+    if (f.value === false) return false;
+    if (f.key === TRIAL_NOTE_FEATURE_KEY) return false;
+    const below = inherited?.[f.key];
+    return !(below && sameFeature(below, f));
+  });
+  // Featured is the tier's, so Pro stays highlighted on Annual too
+  // (crochet_patterns-ftrka).
+  const isFeatured = !!(tier.monthly?.isFeatured || tier.annual?.isFeatured);
 
   return (
     <div
@@ -148,7 +308,7 @@ function DetailCard({ entry, onSelect, buildsOn, isCurrent = false }: DetailCard
       className={`
         flex flex-col relative rounded-2xl p-8 w-full max-w-sm flex-1 min-w-[280px]
         ${isFeatured
-          ? "border-2 border-blue-600 shadow-lg scale-[1.03]"
+          ? "border-2 border-blue-600 shadow-lg"
           : "border border-gray-200 bg-white shadow-sm"
         }
       `}
@@ -161,29 +321,37 @@ function DetailCard({ entry, onSelect, buildsOn, isCurrent = false }: DetailCard
 
       <h2 className="text-xl font-bold text-gray-900 mb-4">{tier.name}</h2>
 
+      {/* Every card reserves the same rows (price, note, pill, lead-in) so
+          matching features line up across cards (crochet_patterns-h74l1). */}
       <div className="mb-2">
         <OfferPrice
           offer={offer}
           amountClassName="text-4xl font-extrabold text-gray-900"
           intervalClassName="text-base text-gray-500"
         />
-        <AnnualNote entry={entry} className="mt-1" />
+        <div className="mt-1 min-h-4">
+          <AnnualNote entry={entry} />
+        </div>
       </div>
 
-      {offer.trialDays > 0 && (
-        <span className="inline-block bg-blue-50 text-blue-700 text-sm font-semibold px-3 py-1 rounded-lg mb-5 w-fit">
-          {offer.trialDays}-day free trial
-        </span>
-      )}
+      <div className="mb-5 min-h-8">
+        {trial ? (
+          <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-blue-50 text-blue-700 text-sm font-semibold px-3 py-1 rounded-lg w-fit">
+            {offer.trialDays}-day free trial
+          </span>
+        ) : yourPlanNote ? (
+          <span data-testid={`your-plan-note-${offer.slug}`} className="inline-block bg-gray-100 text-gray-700 text-sm font-semibold px-3 py-1 rounded-lg w-fit">
+            {yourPlanNote}
+          </span>
+        ) : null}
+      </div>
 
-      {buildsOn && (
-        <p className="text-sm font-semibold text-gray-900 mb-1">
-          Everything in {buildsOn}, plus:
-        </p>
-      )}
+      <p data-testid={`card-lead-${offer.slug}`} className="text-sm font-semibold text-gray-900 mb-1 min-h-5">
+        {buildsOn ? `Everything in ${buildsOn}, plus:` : null}
+      </p>
 
       <ul className="list-none p-0 m-0 mb-7 flex-1 space-y-0">
-        {offer.features.map((feature) => (
+        {features.map((feature) => (
           <li
             key={feature.key}
             className="flex items-center gap-2.5 py-2.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
@@ -198,21 +366,25 @@ function DetailCard({ entry, onSelect, buildsOn, isCurrent = false }: DetailCard
       </ul>
 
       <button
-        onClick={() => !isCurrent && onSelect?.(offer)}
+        onClick={() => !isCurrent && !busy && onSelect?.(offer)}
         data-testid={`detail-cta-${offer.slug}`}
-        disabled={isCurrent}
-        aria-disabled={isCurrent || undefined}
+        disabled={isCurrent || busy}
+        aria-disabled={isCurrent || busy || undefined}
+        aria-busy={spinning || undefined}
         className={`
           w-full py-3.5 px-6 text-base font-bold rounded-xl transition-colors
           ${isCurrent
             ? "bg-gray-100 text-gray-500 cursor-not-allowed"
             : isFeatured
-              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
-              : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
+              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer disabled:opacity-70 disabled:cursor-wait"
+              : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer disabled:opacity-70 disabled:cursor-wait"
           }
         `}
       >
-        {isCurrent ? "Current plan" : offer.ctaText}
+        {spinning && (
+          <span aria-hidden="true" className="inline-block align-[-2px] mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-b-transparent" />
+        )}
+        {isCurrent ? "Current plan" : ctaLabel ?? offer.ctaText}
       </button>
     </div>
   );