@startsimpli/billing 0.4.23 → 0.4.25

package/src/components/PlanPicker.crochet.test.tsx

@@ -0,0 +1,322 @@
+/**
+ * The crochets.site plan picker, against the live catalogue
+ * (crochet_patterns-34n7). Quinn, signed in on Free with no subscription row,
+ * saw every offer in one row (Lite AND Lite Annual), "Get Started" on the plan
+ * he was already on, "$2per month" for $2.99, "no card required" on a trial
+ * that takes a card, and "Up to 3 ai designs per month".
+ *
+ * Same rules on every surface that lists plans: SubscriptionManager
+ * (/settings/billing), PricingDetailPage (/pricing), PricingSection (home),
+ * PricingPage and UpgradeModal.
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+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 type { BillingProduct, SubscriptionInfo } from "../types";
+import {
+  crochetProduct,
+  crochetProductWithTiers,
+  crochetLite,
+  crochetLiteAnnual,
+  crochetPro,
+  crochetProAnnual,
+  crochetFetcher,
+  subscriptionTo,
+} from "./__fixtures__/crochetProduct";
+
+const text = (el: Element) => (el.textContent ?? "").replace(/\s+/g, " ");
+
+function renderWith(
+  ui: React.ReactElement,
+  product: BillingProduct = crochetProduct,
+  subscription: SubscriptionInfo | null = null,
+) {
+  return render(
+    <BillingProvider apiBaseUrl="https://api.test/api/v1" fetcher={crochetFetcher(product, subscription)}>
+      {ui}
+    </BillingProvider>,
+  );
+}
+
+async function chooseAnnual() {
+  await userEvent.click(screen.getByRole("radio", { name: /annual/i }));
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// /settings/billing
+// ─────────────────────────────────────────────────────────────────────────────
+describe("SubscriptionManager plan picker (crochet catalogue)", () => {
+  const manager = <SubscriptionManager productId="crochet-patterns" returnUrl="https://t/s" />;
+
+  it("defaults to Monthly and shows one card per tier", async () => {
+    renderWith(manager);
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+    expect(screen.getByRole("radio", { name: /monthly/i }).getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByRole("radio", { name: /annual/i }).getAttribute("aria-checked")).toBe("false");
+    expect(screen.getByTestId("plan-card-crochet-free")).toBeDefined();
+    expect(screen.getByTestId("plan-card-crochet-lite")).toBeDefined();
+    expect(screen.getByTestId("plan-card-crochet-pro")).toBeDefined();
+    expect(screen.queryByTestId("plan-card-crochet-lite-annual")).toBeNull();
+  });
+
+  it("Annual swaps Lite for its yearly price, keeps Free, and shows the saving", async () => {
+    renderWith(manager);
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    await chooseAnnual();
+
+    expect(screen.queryByTestId("plan-card-crochet-lite")).toBeNull();
+    const lite = screen.getByTestId("plan-card-crochet-lite-annual");
+    expect(within(lite).getByRole("heading").textContent).toBe("Lite");
+    expect(text(lite)).toContain("$29 per year");
+    expect(text(lite)).toContain("$2.42");
+    expect(text(lite)).toMatch(/save 19%/i);
+    expect(screen.getByTestId("plan-card-crochet-free")).toBeDefined();
+    // Pro has no annual price yet: it stays on the page at its monthly price.
+    expect(text(screen.getByTestId("plan-card-crochet-pro"))).toContain("$9 per month");
+  });
+
+  it("a signed-in user with no subscription is on Free: Current plan, disabled", async () => {
+    renderWith(manager, crochetProduct, null);
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+    const cta = screen.getByTestId("upgrade-cta-crochet-free") as HTMLButtonElement;
+    expect(cta.textContent).toMatch(/^current plan$/i);
+    expect(cta.disabled).toBe(true);
+    expect(screen.queryByText(/get started/i)).toBeNull();
+    expect(screen.getByText(/you're on the free plan/i)).toBeDefined();
+    // Paid cards stay buyable.
+    expect((screen.getByTestId("upgrade-cta-crochet-lite") as HTMLButtonElement).disabled).toBe(false);
+  });
+
+  it("renders $2.99 with its cents and a space before the interval", async () => {
+    renderWith(manager);
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    const lite = screen.getByTestId("plan-card-crochet-lite");
+    expect(text(lite)).toContain("$2.99 per month");
+    expect(text(screen.getByTestId("plan-card-crochet-pro"))).toContain("$9 per month");
+  });
+
+  it("Pro's trial copy does not promise no card", async () => {
+    renderWith(manager);
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    const pro = screen.getByTestId("plan-card-crochet-pro");
+    expect(text(pro)).toMatch(/7-day free trial/i);
+    expect(text(pro)).not.toMatch(/no card/i);
+  });
+
+  it("feature labels keep AI capitalised and drop per month when unlimited", async () => {
+    renderWith(manager);
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    const lite = screen.getByTestId("plan-card-crochet-lite");
+    expect(within(lite).getByText("Up to 3 AI designs per month")).toBeDefined();
+    expect(within(lite).getByText("Unlimited saved patterns")).toBeDefined();
+    const pro = screen.getByTestId("plan-card-crochet-pro");
+    expect(within(pro).getByText("Unlimited AI designs")).toBeDefined();
+    expect(screen.queryByText(/ai designs/)).toBeNull(); // no lower-case "ai"
+  });
+
+  it("on Lite Annual: the switch opens on Annual so their card reads Current plan", async () => {
+    renderWith(manager, crochetProduct, subscriptionTo(crochetLiteAnnual));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+
+    expect(screen.getByRole("radio", { name: /annual/i }).getAttribute("aria-checked")).toBe("true");
+    const annualCta = screen.getByTestId("upgrade-cta-crochet-lite-annual") as HTMLButtonElement;
+    expect(annualCta.textContent).toMatch(/^current plan$/i);
+    expect(annualCta.disabled).toBe(true);
+
+    // Flipping to Monthly offers the same plan billed monthly as a switch.
+    await userEvent.click(screen.getByRole("radio", { name: /monthly/i }));
+    const monthlyCta = screen.getByTestId("upgrade-cta-crochet-lite") as HTMLButtonElement;
+    expect(monthlyCta.textContent).toMatch(/switch to monthly/i);
+    expect(monthlyCta.disabled).toBe(false);
+  });
+
+  it("on a monthly plan the switch still opens on Monthly", async () => {
+    renderWith(manager, crochetProductWithTiers, subscriptionTo(crochetLite));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(screen.getByRole("radio", { name: /monthly/i }).getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("pairs by the API's tier field once it is served (Pro Annual)", async () => {
+    renderWith(manager, crochetProductWithTiers, subscriptionTo(crochetPro));
+    await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
+    expect(screen.queryByTestId("plan-card-crochet-pro-annual")).toBeNull();
+    await chooseAnnual();
+    const proAnnual = screen.getByTestId("plan-card-crochet-pro-annual");
+    expect(within(proAnnual).getByRole("heading").textContent).toBe("Pro");
+    expect(text(proAnnual)).toContain("$89 per year");
+    expect((screen.getByTestId("upgrade-cta-crochet-pro-annual") as HTMLButtonElement).textContent)
+      .toMatch(/switch to annual/i);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// /pricing
+// ─────────────────────────────────────────────────────────────────────────────
+describe("PricingDetailPage plan picker (crochet catalogue)", () => {
+  it("signed out: toggle, one card per tier, normal CTAs", async () => {
+    const onSelect = vi.fn();
+    renderWith(<PricingDetailPage productId="crochet-patterns" onSelectOffer={onSelect} />);
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+
+    expect(screen.getByRole("radio", { name: /monthly/i }).getAttribute("aria-checked")).toBe("true");
+    expect(screen.queryByTestId("detail-card-crochet-lite-annual")).toBeNull();
+    const free = screen.getByTestId("detail-cta-crochet-free") as HTMLButtonElement;
+    expect(free.textContent).toBe("Get Started");
+    expect(free.disabled).toBe(false);
+    expect(text(screen.getByTestId("detail-card-crochet-lite"))).toContain("$2.99 per month");
+    expect(within(screen.getByTestId("detail-card-crochet-lite")).getByText("Up to 3 AI designs per month")).toBeDefined();
+  });
+
+  it("annual: comparison table has one column per tier and Pro builds on Lite", async () => {
+    renderWith(<PricingDetailPage productId="crochet-patterns" />);
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    await chooseAnnual();
+
+    const lite = screen.getByTestId("detail-card-crochet-lite-annual");
+    expect(within(lite).getByRole("heading").textContent).toBe("Lite");
+    expect(text(lite)).toContain("$29 per year");
+    expect(text(screen.getByTestId("detail-card-crochet-pro"))).toMatch(/everything in lite, plus/i);
+
+    const headers = within(screen.getByTestId("comparison-table")).getAllByRole("columnheader");
+    expect(headers.map((h) => h.getAttribute("aria-label") ?? h.textContent)).toEqual(["Feature", "Free", "Lite", "Pro"]);
+  });
+
+  it("signed in on Free with no subscription: Free is Current plan, disabled", async () => {
+    const onSelect = vi.fn();
+    renderWith(
+      <PricingDetailPage
+        productId="crochet-patterns"
+        onSelectOffer={onSelect}
+        currentPlan={{ signedIn: true, subscription: null }}
+      />,
+    );
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    const free = screen.getByTestId("detail-cta-crochet-free") as HTMLButtonElement;
+    expect(free.textContent).toMatch(/^current plan$/i);
+    expect(free.disabled).toBe(true);
+    await userEvent.click(free);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("while the plan is still loading nothing is marked current", async () => {
+    renderWith(
+      <PricingDetailPage
+        productId="crochet-patterns"
+        currentPlan={{ signedIn: true, subscription: null, loading: true }}
+      />,
+    );
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    expect((screen.getByTestId("detail-cta-crochet-free") as HTMLButtonElement).disabled).toBe(false);
+  });
+
+  it("signed in on Pro Annual: opens on Annual with Pro Annual current", async () => {
+    renderWith(
+      <PricingDetailPage
+        productId="crochet-patterns"
+        currentPlan={{ signedIn: true, subscription: subscriptionTo(crochetProAnnual) }}
+      />,
+      crochetProductWithTiers,
+    );
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    expect(screen.getByRole("radio", { name: /annual/i }).getAttribute("aria-checked")).toBe("true");
+    const cta = screen.getByTestId("detail-cta-crochet-pro-annual") as HTMLButtonElement;
+    expect(cta.textContent).toMatch(/^current plan$/i);
+    expect(cta.disabled).toBe(true);
+  });
+
+  it("opens on Annual once a slow plan load reveals an annual subscription", async () => {
+    const { rerender } = renderWith(
+      <PricingDetailPage productId="crochet-patterns" currentPlan={{ signedIn: true, subscription: null, loading: true }} />,
+      crochetProductWithTiers,
+    );
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    expect(screen.getByRole("radio", { name: /monthly/i }).getAttribute("aria-checked")).toBe("true");
+    rerender(
+      <BillingProvider apiBaseUrl="https://api.test/api/v1" fetcher={crochetFetcher(crochetProductWithTiers, null)}>
+        <PricingDetailPage
+          productId="crochet-patterns"
+          currentPlan={{ signedIn: true, subscription: subscriptionTo(crochetLiteAnnual) }}
+        />
+      </BillingProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByRole("radio", { name: /annual/i }).getAttribute("aria-checked")).toBe("true"),
+    );
+  });
+
+  it("signed in on Pro: Pro is current, Free is not", async () => {
+    renderWith(
+      <PricingDetailPage
+        productId="crochet-patterns"
+        currentPlan={{ signedIn: true, subscription: subscriptionTo(crochetPro) }}
+      />,
+    );
+    await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
+    expect((screen.getByTestId("detail-cta-crochet-pro") as HTMLButtonElement).disabled).toBe(true);
+    expect((screen.getByTestId("detail-cta-crochet-free") as HTMLButtonElement).disabled).toBe(false);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Home-page section, standalone pricing page, upgrade modal
+// ─────────────────────────────────────────────────────────────────────────────
+describe("PricingSection plan picker (crochet catalogue)", () => {
+  it("toggle, prices, labels, current plan", async () => {
+    renderWith(
+      <PricingSection productId="crochet-patterns" maxFeatures={10} currentPlan={{ signedIn: true, subscription: null }} />,
+    );
+    await waitFor(() => expect(screen.getByTestId("pricing-section")).toBeDefined());
+    expect(screen.queryByTestId("section-card-crochet-lite-annual")).toBeNull();
+    expect(text(screen.getByTestId("section-card-crochet-lite"))).toContain("$2.99 per month");
+    expect(within(screen.getByTestId("section-card-crochet-lite")).getByText("Up to 3 AI designs per month")).toBeDefined();
+    expect((screen.getByTestId("section-cta-crochet-free") as HTMLButtonElement).disabled).toBe(true);
+    await chooseAnnual();
+    expect(text(screen.getByTestId("section-card-crochet-lite-annual"))).toContain("$29 per year");
+  });
+});
+
+describe("PricingPage plan picker (crochet catalogue)", () => {
+  it("toggle, prices, labels, current plan", async () => {
+    renderWith(<PricingPage productId="crochet-patterns" currentPlan={{ signedIn: true, subscription: null }} />);
+    await waitFor(() => expect(screen.getByTestId("pricing-page")).toBeDefined());
+    expect(screen.queryByTestId("pricing-card-crochet-lite-annual")).toBeNull();
+    expect(text(screen.getByTestId("pricing-card-crochet-lite"))).toContain("$2.99 per month");
+    expect(within(screen.getByTestId("pricing-card-crochet-lite")).getByText("Unlimited saved patterns")).toBeDefined();
+    expect((screen.getByTestId("cta-crochet-free") as HTMLButtonElement).textContent).toMatch(/^current plan$/i);
+    await chooseAnnual();
+    expect(screen.getByTestId("pricing-card-crochet-lite-annual")).toBeDefined();
+  });
+});
+
+describe("UpgradeModal plan picker (crochet catalogue)", () => {
+  it("toggle, prices, labels, current plan", async () => {
+    const onSelect = vi.fn();
+    renderWith(
+      <UpgradeModal
+        productId="crochet-patterns"
+        open
+        onClose={() => {}}
+        onSelectOffer={onSelect}
+        currentPlan={{ signedIn: true, subscription: null }}
+      />,
+    );
+    await waitFor(() => expect(screen.getByTestId("upgrade-offers")).toBeDefined());
+    expect(screen.queryByTestId("upgrade-offer-crochet-lite-annual")).toBeNull();
+    expect(text(screen.getByTestId("upgrade-offer-crochet-lite"))).toContain("$2.99 per month");
+    expect(within(screen.getByTestId("upgrade-offer-crochet-lite")).getByText("Up to 3 AI designs per month")).toBeDefined();
+    const free = screen.getByTestId("upgrade-cta-crochet-free") as HTMLButtonElement;
+    expect(free.textContent).toMatch(/^current plan$/i);
+    expect(free.disabled).toBe(true);
+    await chooseAnnual();
+    expect(text(screen.getByTestId("upgrade-offer-crochet-lite-annual"))).toContain("$29 per year");
+  });
+});

package/src/components/PricingDetailPage.tsx

@@ -10,27 +10,55 @@
 
 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 {
+  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";
 
 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. */
+  currentPlan?: CurrentPlanState | null;
 }
 
 export function PricingDetailPage({
   productId,
   onSelectOffer,
   showComparison = true,
+  currentPlan,
 }: PricingDetailPageProps) {
   const { product, loading, error } = useProduct(productId);
+  const currentOffer = resolveCurrentOffer(product?.offers ?? [], currentPlan);
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    currentOffer?.id ?? null,
+  );
+  const planChange = usePlanChange(async (offer, preview) => onSelectOffer?.(offer, preview));
 
   if (loading) {
     return (
@@ -56,10 +84,28 @@ export function PricingDetailPage({
     );
   }
 
+  // One offer per tier for the chosen interval: cards, "Everything in X" and
+  // 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);
+  // 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;
+  const select = (offer: ProductOffer) => {
+    if (!currentOffer) {
+      onSelectOffer?.(offer);
+      return;
+    }
+    void planChange.choose(offer, { paying, leavingUnlisted: onUnlistedPlan, currentOffer });
+  };
+
   // Extract all unique feature keys across all offers (preserving order)
   const allFeatureKeys: string[] = [];
   const featureNameMap: Record<string, string> = {};
-  for (const offer of product.offers) {
+  for (const offer of visibleOffers) {
     for (const feature of offer.features) {
       if (!allFeatureKeys.includes(feature.key)) {
         allFeatureKeys.push(feature.key);
@@ -79,36 +125,90 @@ export function PricingDetailPage({
         </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>
+      )}
+
+      {hasChoice && (
+        <div className="mb-10">
+          <IntervalToggle interval={interval} onChange={setInterval} />
+        </div>
+      )}
+
       <div className="flex flex-wrap justify-center gap-6 items-stretch mb-16">
-        {product.offers.map((offer) => (
-          <DetailCard
-            key={offer.id}
-            offer={offer}
-            onSelect={onSelectOffer}
-            buildsOn={tierBelow(product.offers, offer)?.name ?? null}
-          />
-        ))}
+        {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={select}
+              buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
+              isCurrent={direction === "current"}
+              ctaLabel={direction ? planCtaLabel(entry.offer, direction, paying) : entry.offer.ctaText}
+              showTrial={direction ? trialApplies(entry.offer, direction, paying) : entry.offer.trialDays > 0}
+              busy={planChange.busy}
+            />
+          );
+        })}
       </div>
 
       {showComparison && (
         <ComparisonTable
-          offers={product.offers}
+          entries={entries}
           featureKeys={allFeatureKeys}
           featureNameMap={featureNameMap}
         />
       )}
+
+      <PlanChangeConfirm
+        state={planChange.pending}
+        confirming={planChange.confirming}
+        error={planChange.pending ? planChange.error : null}
+        onConfirm={planChange.confirm}
+        onCancel={planChange.cancel}
+      />
     </div>
   );
 }
 
 interface DetailCardProps {
-  offer: ProductOffer;
+  entry: IntervalEntry;
   onSelect?: (offer: ProductOffer) => void;
   /** Name of the tier just below this one, when there is one. */
   buildsOn?: string | null;
+  /** 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({ offer, onSelect, buildsOn }: DetailCardProps) {
+function DetailCard({ entry, onSelect, buildsOn, isCurrent = false, ctaLabel, showTrial, busy = false }: DetailCardProps) {
+  const { offer, tier } = entry;
+  const trial = showTrial ?? offer.trialDays > 0;
+  const features = trial || !(offer.trialDays > 0)
+    ? offer.features
+    : offer.features.filter((f) => f.key !== TRIAL_NOTE_FEATURE_KEY);
   const isFeatured = offer.isFeatured;
 
   return (
@@ -128,25 +228,19 @@ function DetailCard({ offer, onSelect, buildsOn }: DetailCardProps) {
         </span>
       )}
 
-      <h2 className="text-xl font-bold text-gray-900 mb-4">{offer.name}</h2>
+      <h2 className="text-xl font-bold text-gray-900 mb-4">{tier.name}</h2>
 
       <div className="mb-2">
-        {offer.isFree ? (
-          <span aria-label="Free">
-            <span aria-hidden="true" className="text-4xl font-extrabold text-gray-900">Free</span>
-          </span>
-        ) : (
-          <span aria-label={`${Math.floor(parseFloat(offer.unitPrice) || 0)} dollars ${offer.intervalDisplay}`}>
-            <span aria-hidden="true" className="text-4xl font-extrabold text-gray-900">
-              ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-            </span>
-            <span aria-hidden="true" className="text-base text-gray-500 ml-1"> {offer.intervalDisplay}</span>
-          </span>
-        )}
+        <OfferPrice
+          offer={offer}
+          amountClassName="text-4xl font-extrabold text-gray-900"
+          intervalClassName="text-base text-gray-500"
+        />
+        <AnnualNote entry={entry} className="mt-1" />
       </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">
+      {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 mb-5 w-fit">
           {offer.trialDays}-day free trial
         </span>
       )}
@@ -158,46 +252,49 @@ function DetailCard({ offer, onSelect, buildsOn }: DetailCardProps) {
       )}
 
       <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"
           >
             <FeatureIcon value={feature.value} />
-            <span>{feature.name}</span>
-            {typeof feature.value !== "boolean" && feature.value !== null && feature.value !== undefined && (
-              <span className="ml-auto text-gray-900 font-medium">
-                {feature.value === -1 ? "Unlimited" : String(feature.value)}
-              </span>
+            <span>{formatFeatureLabel(feature)}</span>
+            {typeof feature.value === "string" && (
+              <span className="ml-auto text-gray-900 font-medium">{feature.value}</span>
             )}
           </li>
         ))}
       </ul>
 
       <button
-        onClick={() => onSelect?.(offer)}
+        onClick={() => !isCurrent && !busy && onSelect?.(offer)}
         data-testid={`detail-cta-${offer.slug}`}
+        disabled={isCurrent || busy}
+        aria-disabled={isCurrent || busy || undefined}
         className={`
-          w-full py-3.5 px-6 text-base font-bold rounded-xl cursor-pointer transition-colors
-          ${isFeatured
-            ? "bg-blue-600 text-white hover:bg-blue-700"
-            : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+          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"
           }
         `}
       >
-        {offer.ctaText}
+        {isCurrent ? "Current plan" : ctaLabel ?? offer.ctaText}
       </button>
     </div>
   );
 }
 
 interface ComparisonTableProps {
-  offers: ProductOffer[];
+  entries: IntervalEntry[];
   featureKeys: string[];
   featureNameMap: Record<string, string>;
 }
 
-function ComparisonTable({ offers, featureKeys, featureNameMap }: ComparisonTableProps) {
+function ComparisonTable({ entries, featureKeys, featureNameMap }: ComparisonTableProps) {
+  const offers = entries.map((e) => e.offer);
   // offer slug -> feature key -> feature, with cheaper tiers' capabilities
   // carried upward so a paid plan never shows a dash where free shows a tick.
   const featureLookup = cumulativeFeatureLookup(offers);
@@ -210,14 +307,14 @@ function ComparisonTable({ offers, featureKeys, featureNameMap }: ComparisonTabl
             <th scope="col" className="text-left py-4 px-4 text-sm font-semibold text-gray-500 uppercase tracking-wider">
               Feature
             </th>
-            {offers.map((offer) => (
+            {entries.map(({ offer, tier }) => (
               <th
                 key={offer.slug}
                 scope="col"
-                aria-label={offer.name}
+                aria-label={tier.name}
                 className="text-center py-4 px-4 text-sm font-semibold text-gray-900"
               >
-                <span aria-hidden="true">{offer.name}</span>
+                <span aria-hidden="true">{tier.name}</span>
               </th>
             ))}
           </tr>

package/src/components/PricingPage.test.tsx

@@ -218,9 +218,9 @@ describe("PricingPage", () => {
 
     await waitFor(() => {
       // Each offer has features; "Team seats" appears in all 3 cards
-      expect(screen.getAllByText("Team seats").length).toBe(3);
+      expect(screen.getAllByText(/team seats$/i).length).toBe(3);
     });
-    expect(screen.getAllByText("Projects").length).toBe(3);
+    expect(screen.getAllByText(/projects$/i).length).toBe(3);
   });
 
   it("shows trial badge when offer has trial days", async () => {