@startsimpli/billing 0.4.22 → 0.4.24

package/src/components/PricingDetailPage.tsx

@@ -12,7 +12,10 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer, OfferFeature } from "../types";
 import { cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
+import { formatFeatureLabel } from "../utils/format";
+import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
 import { FeatureIcon } from "./FeatureIcon";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
 export interface PricingDetailPageProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -23,14 +26,23 @@ export interface PricingDetailPageProps {
 
   /** 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 { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    resolveCurrentOfferId(product?.offers ?? [], currentPlan),
+  );
 
   if (loading) {
     return (
@@ -56,10 +68,16 @@ 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);
+  const currentOfferId = resolveCurrentOfferId(product.offers, currentPlan);
+
   // 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,20 +97,30 @@ export function PricingDetailPage({
         </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);
+          return (
+            <DetailCard
+              key={entry.offer.id}
+              entry={entry}
+              onSelect={onSelectOffer}
+              buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
+              isCurrent={entry.offer.id === currentOfferId}
+            />
+          );
+        })}
       </div>
 
       {showComparison && (
         <ComparisonTable
-          offers={product.offers}
+          entries={entries}
           featureKeys={allFeatureKeys}
           featureNameMap={featureNameMap}
         />
@@ -102,13 +130,16 @@ export function PricingDetailPage({
 }
 
 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;
 }
 
-function DetailCard({ offer, onSelect, buildsOn }: DetailCardProps) {
+function DetailCard({ entry, onSelect, buildsOn, isCurrent = false }: DetailCardProps) {
+  const { offer, tier } = entry;
   const isFeatured = offer.isFeatured;
 
   return (
@@ -128,21 +159,15 @@ 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 && (
@@ -164,40 +189,43 @@ function DetailCard({ offer, onSelect, buildsOn }: DetailCardProps) {
             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 && onSelect?.(offer)}
         data-testid={`detail-cta-${offer.slug}`}
+        disabled={isCurrent}
+        aria-disabled={isCurrent || 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" : 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 +238,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 () => {

package/src/components/PricingPage.tsx

@@ -12,6 +12,9 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
 import { FeatureIcon } from "./FeatureIcon";
+import { formatFeatureLabel } from "../utils/format";
+import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
 export interface PricingPageProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -19,10 +22,18 @@ export interface PricingPageProps {
 
   /** Called when user clicks an offer's CTA button */
   onSelectOffer?: (offer: ProductOffer) => void;
+
+  /** 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 PricingPage({ productId, onSelectOffer }: PricingPageProps) {
+export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPageProps) {
   const { product, loading, error } = useProduct(productId);
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    resolveCurrentOfferId(product?.offers ?? [], currentPlan),
+  );
 
   if (loading) {
     return (
@@ -48,6 +59,8 @@ export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
     );
   }
 
+  const currentOfferId = resolveCurrentOfferId(product.offers, currentPlan);
+
   return (
     <div data-testid="pricing-page" className="max-w-5xl mx-auto px-6 py-12">
       <div className="text-center mb-12">
@@ -59,12 +72,19 @@ export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
         </p>
       </div>
 
+      {hasChoice && (
+        <div className="mb-10">
+          <IntervalToggle interval={interval} onChange={setInterval} />
+        </div>
+      )}
+
       <div data-testid="pricing-cards" className="flex flex-wrap justify-center gap-6 items-stretch">
-        {product.offers.map((offer) => (
+        {entries.map((entry) => (
           <PricingCard
-            key={offer.id}
-            offer={offer}
+            key={entry.offer.id}
+            entry={entry}
             onSelect={onSelectOffer}
+            isCurrent={entry.offer.id === currentOfferId}
           />
         ))}
       </div>
@@ -73,11 +93,13 @@ export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
 }
 
 interface PricingCardProps {
-  offer: ProductOffer;
+  entry: IntervalEntry;
   onSelect?: (offer: ProductOffer) => void;
+  isCurrent?: boolean;
 }
 
-function PricingCard({ offer, onSelect }: PricingCardProps) {
+function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
+  const { offer, tier } = entry;
   const isFeatured = offer.isFeatured;
 
   return (
@@ -98,19 +120,15 @@ function PricingCard({ offer, onSelect }: PricingCardProps) {
         </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 className="text-4xl font-extrabold text-gray-900">Free</span>
-        ) : (
-          <span>
-            <span className="text-4xl font-extrabold text-gray-900">
-              ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-            </span>
-            <span 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 && (
@@ -129,23 +147,27 @@ function PricingCard({ offer, onSelect }: PricingCardProps) {
             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>
+            <span>{formatFeatureLabel(feature)}</span>
           </li>
         ))}
       </ul>
 
       <button
-        onClick={() => onSelect?.(offer)}
+        onClick={() => !isCurrent && onSelect?.(offer)}
         data-testid={`cta-${offer.slug}`}
+        disabled={isCurrent}
+        aria-disabled={isCurrent || 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" : offer.ctaText}
       </button>
     </div>
   );

package/src/components/PricingSection.test.tsx

@@ -217,10 +217,11 @@ describe("PricingSection", () => {
       expect(screen.getByText("Starter")).toBeDefined();
     });
 
-    // Starter has 5 features, but should only show 2
+    // Starter has 5 features, but should only show 2. Numeric allowances read
+    // "Up to 1 team seats" since crochet_patterns-34n7, so match the noun.
     // We should see "Team seats" and "Projects" (first 2), but not "Storage"
-    expect(screen.getAllByText("Team seats").length).toBe(3); // All 3 cards
-    expect(screen.getAllByText("Projects").length).toBe(3); // All 3 cards
+    expect(screen.getAllByText(/team seats$/i).length).toBe(3); // All 3 cards
+    expect(screen.getAllByText(/projects$/i).length).toBe(3); // All 3 cards
     // Storage should appear fewer times or not at all since we're limiting to 2 features per card
     const storageElements = screen.queryAllByText("Storage");
     expect(storageElements.length).toBeLessThan(3); // Should not appear in all cards
@@ -240,8 +241,8 @@ describe("PricingSection", () => {
     });
 
     // With default maxFeatures=4, should show first 4 features
-    expect(screen.getAllByText("Team seats").length).toBe(3);
-    expect(screen.getAllByText("Projects").length).toBe(3);
+    expect(screen.getAllByText(/team seats$/i).length).toBe(3);
+    expect(screen.getAllByText(/projects$/i).length).toBe(3);
     expect(screen.getAllByText("Storage").length).toBe(3);
     expect(screen.getAllByText("Support").length).toBe(3);
   });

package/src/components/PricingSection.tsx

@@ -12,6 +12,10 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
 import { tierBelow } from "../utils/tiers";
+import { FeatureIcon } from "./FeatureIcon";
+import { formatFeatureLabel } from "../utils/format";
+import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
 export interface PricingSectionProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -22,14 +26,23 @@ export interface PricingSectionProps {
 
   /** Maximum number of features to display per card (default 4) */
   maxFeatures?: number;
+
+  /** 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 PricingSection({
   productId,
   onSelectOffer,
   maxFeatures = 4,
+  currentPlan,
 }: PricingSectionProps) {
   const { product, loading, error } = useProduct(productId);
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    resolveCurrentOfferId(product?.offers ?? [], currentPlan),
+  );
 
   if (loading) {
     return (
@@ -55,32 +68,47 @@ export function PricingSection({
     );
   }
 
+  // One offer per tier for the chosen interval (crochet_patterns-34n7).
+  const visibleOffers = entries.map((e) => e.offer);
+  const currentOfferId = resolveCurrentOfferId(product.offers, currentPlan);
+
   return (
     <div data-testid="pricing-section" className="w-full px-4 py-8">
+      {hasChoice && (
+        <div className="mb-6">
+          <IntervalToggle interval={interval} onChange={setInterval} />
+        </div>
+      )}
       <div className="flex flex-row flex-wrap justify-center gap-4 items-stretch">
-        {product.offers.map((offer) => (
-          <SectionCard
-            key={offer.id}
-            offer={offer}
-            onSelect={onSelectOffer}
-            maxFeatures={maxFeatures}
-            buildsOn={tierBelow(product.offers, offer)?.name ?? null}
-          />
-        ))}
+        {entries.map((entry) => {
+          const below = tierBelow(visibleOffers, entry.offer);
+          return (
+            <SectionCard
+              key={entry.offer.id}
+              entry={entry}
+              onSelect={onSelectOffer}
+              maxFeatures={maxFeatures}
+              buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
+              isCurrent={entry.offer.id === currentOfferId}
+            />
+          );
+        })}
       </div>
     </div>
   );
 }
 
 interface SectionCardProps {
-  offer: ProductOffer;
+  entry: IntervalEntry;
+  isCurrent?: boolean;
   onSelect?: (offer: ProductOffer) => void;
   maxFeatures: number;
   /** Name of the tier just below this one, when there is one. */
   buildsOn?: string | null;
 }
 
-function SectionCard({ offer, onSelect, maxFeatures, buildsOn }: SectionCardProps) {
+function SectionCard({ entry, onSelect, maxFeatures, buildsOn, isCurrent = false }: SectionCardProps) {
+  const { offer, tier } = entry;
   const isFeatured = offer.isFeatured;
   const visibleFeatures = offer.features.slice(0, maxFeatures);
 
@@ -96,19 +124,15 @@ function SectionCard({ offer, onSelect, maxFeatures, buildsOn }: SectionCardProp
         }
       `}
     >
-      <h3 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h3>
+      <h3 className="text-lg font-bold text-gray-900 mb-2">{tier.name}</h3>
 
       <div className="mb-2">
-        {offer.isFree ? (
-          <span className="text-2xl font-extrabold text-gray-900">Free</span>
-        ) : (
-          <span>
-            <span className="text-2xl font-extrabold text-gray-900">
-              ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-            </span>
-            <span className="text-sm text-gray-500 ml-1"> {offer.intervalDisplay}</span>
-          </span>
-        )}
+        <OfferPrice
+          offer={offer}
+          amountClassName="text-2xl font-extrabold text-gray-900"
+          intervalClassName="text-sm text-gray-500"
+        />
+        <AnnualNote entry={entry} className="mt-1" />
       </div>
 
       {offer.trialDays > 0 && (
@@ -132,32 +156,28 @@ function SectionCard({ offer, onSelect, maxFeatures, buildsOn }: SectionCardProp
             key={feature.key}
             className="flex items-center gap-2 py-1.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
           >
-            <svg
-              className="w-3.5 h-3.5 text-green-500 shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={3}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-            </svg>
-            <span>{feature.name}</span>
+            <FeatureIcon value={feature.value} size="w-3.5 h-3.5" />
+            <span>{formatFeatureLabel(feature)}</span>
           </li>
         ))}
       </ul>
 
       <button
-        onClick={() => onSelect?.(offer)}
+        onClick={() => !isCurrent && onSelect?.(offer)}
         data-testid={`section-cta-${offer.slug}`}
+        disabled={isCurrent}
+        aria-disabled={isCurrent || undefined}
         className={`
-          w-full py-2.5 px-4 text-sm font-bold rounded-lg 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-2.5 px-4 text-sm font-bold rounded-lg 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" : offer.ctaText}
       </button>
     </div>
   );

package/src/components/SubscriptionManager.test.tsx

@@ -408,7 +408,9 @@ describe("SubscriptionManager", () => {
     expect(screen.getByText(/manage billing/i)).toBeDefined();
   });
 
-  it("shows No active subscription when no subscription exists", async () => {
+  // A signed-in user with no subscription row is on the free plan — the 404
+  // path only happens once the session is accepted (crochet_patterns-34n7).
+  it("shows the free plan as theirs when no subscription exists", async () => {
     const fetcher = mockFetchRouter({
       "/billing/subscription/current/": null, // 404 - no subscription
       "/billing/products/": mockProduct,
@@ -425,8 +427,9 @@ describe("SubscriptionManager", () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByText(/no active subscription/i)).toBeDefined();
+      expect(screen.getByText(/you're on the starter plan/i)).toBeDefined();
     });
+    expect(screen.queryByText(/no active subscription/i)).toBeNull();
   });
 
   it("shows subscribe options when no subscription", async () => {
@@ -591,7 +594,8 @@ describe("SubscriptionManager", () => {
     const trialNodes = screen.getAllByTestId("trial-copy");
     expect(trialNodes.length).toBe(1);
     expect(trialNodes[0].textContent).toMatch(/14-day free trial/i);
-    expect(trialNodes[0].textContent).toMatch(/no card required/i);
+    // Checkout takes a card up front, so never promise otherwise (crochet_patterns-34n7).
+    expect(trialNodes[0].textContent).not.toMatch(/no card/i);
   });
 
   it("renders 'Unlimited X' for features with limit === -1 (o7u)", async () => {
@@ -631,8 +635,10 @@ describe("SubscriptionManager", () => {
 
   it("free-offer CTA calls subscribe-free, not Stripe checkout (6vk)", async () => {
     const onPlanChange = vi.fn();
+    // On Pro, so the Free card is a downgrade and clickable (with no
+    // subscription Free is the current plan and its CTA is disabled).
     const fetcher = mockFetchRouter({
-      "/billing/subscription/current/": null,
+      "/billing/subscription/current/": mockSubscriptionActive,
       "/billing/products/": mockProduct,
     });
     const Wrapper = createWrapper(fetcher);
@@ -785,11 +791,12 @@ describe("SubscriptionManager", () => {
     };
 
     const cases: Case[] = [
-      // No subscription (legacy / pre-auto-enrol): every card is an "upgrade"
-      { label: "no-sub · Starter card → 'Start Free' (upgrade)",
+      // No subscription row (signed in, never enrolled): they are on the free
+      // plan, so it reads Current plan and is disabled (crochet_patterns-34n7).
+      { label: "no-sub · Starter card → 'Current plan' disabled badge",
         subscription: null, cardSlug: "starter-monthly",
-        expectedCta: /start free/i, shouldBeDisabled: false,
-        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+        expectedCta: /current plan/i, shouldBeDisabled: true,
+        shouldShowCurrentBadge: true, shouldShowTrialCopy: false },
       { label: "no-sub · Pro card → 'Start Trial' (upgrade)",
         subscription: null, cardSlug: "pro-monthly",
         expectedCta: /start trial/i, shouldBeDisabled: false,
@@ -1274,9 +1281,9 @@ describe("SubscriptionManager", () => {
       </Wrapper>
     );
 
-    // No crash; falls through to the empty-state copy.
+    // No crash; falls through to the free-plan copy.
     await waitFor(() =>
-      expect(screen.getByText("No active subscription")).toBeDefined()
+      expect(screen.getByText(/you're on the starter plan/i)).toBeDefined()
     );
   });