@startsimpli/billing 0.4.23 → 0.4.24

package/src/components/SubscriptionManager.tsx

@@ -21,6 +21,8 @@ import { useUsage } from "../hooks/useUsage";
 import { useSuccessSync } from "../hooks/useSuccessSync";
 import type { OfferFeature, ProductOffer } from "../types";
 import { CurrentPlanCard } from "./CurrentPlanCard";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers } from "./IntervalToggle";
+import { formatFeatureLabel } from "../utils/format";
 
 export interface SubscriptionManagerProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -41,16 +43,8 @@ export interface SubscriptionManagerProps {
  * "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 }) {
-  const v = feature.value;
-  if (v === false) return null;
-
-  let label = feature.name;
-  if (typeof v === "number" || typeof feature.limit === "number") {
-    const limit = typeof feature.limit === "number" ? feature.limit
-                : typeof v === "number" ? v : null;
-    if (limit === -1) label = `Unlimited ${feature.name.toLowerCase()}`;
-    else if (limit !== null && limit > 0) label = `Up to ${limit} ${feature.name.toLowerCase()}`;
-  }
+  if (feature.value === false) return null;
+  const label = formatFeatureLabel(feature);
 
   return (
     <li className="flex items-start gap-2 text-sm text-gray-700">
@@ -73,12 +67,14 @@ function PlanFeatureList({ features }: { features: OfferFeature[] }) {
 }
 
 /** Subtle trial copy below the price block on offers that ship a trial.
- * startsim-pih — so users know "Start Free Trial" actually IS a free trial. */
+ * 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({ trialDays }: { trialDays: number }) {
   if (!trialDays || trialDays <= 0) return null;
   return (
     <p data-testid="trial-copy" className="-mt-1 mb-3 text-xs text-gray-500">
-      {trialDays}-day free trial · no card required
+      {trialDays}-day free trial
     </p>
   );
 }
@@ -178,6 +174,10 @@ export function SubscriptionManager({
   const { subscribeFree } = useCheckout();
   const { usage } = useUsage(productId);
   const { sync: successSync } = useSuccessSync();
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    subscription?.offer?.id ?? null,
+  );
 
   // startsim-ngw — when the user lands on ?status=success (just back from
   // Stripe checkout), POST /billing/success-sync/ ONCE to populate the cache
@@ -233,22 +233,31 @@ export function SubscriptionManager({
   // BillingApiClient, but guard here too so CurrentPlanCard can never deref
   // `subscription.offer.*` on undefined and white-screen the page.
   const usableSubscription = subscription?.offer ? subscription : null;
-  const currentOfferId = usableSubscription?.offer?.id ?? null;
-  const currentOffer = usableSubscription?.offer ?? null;
-  // Show ALL offers in the Change Plan grid (not just non-current ones) so users
-  // can compare and see what they have. The card matching their current sub
-  // gets a "Current Plan" badge + disabled CTA. startsim-1f1.
-  const allOffers = product?.offers ?? [];
+  // No subscription row once the fetch has settled (404 → null; a signed-out
+  // viewer gets a 401 and the error branch above) means the free plan:
+  // that card reads "Current plan" and is disabled (crochet_patterns-34n7).
+  const freeOffer = product?.offers.find((o) => o.isFree) ?? null;
+  const onFreeByDefault = !usableSubscription && !subLoading && !subError && freeOffer !== null;
+  const currentOffer = usableSubscription?.offer ?? (onFreeByDefault ? freeOffer : null);
+  const tierKeyOf = (offerId: string) =>
+    entries.find(({ tier }) => tier.monthly?.id === offerId || tier.annual?.id === offerId)?.tier.key ?? null;
+  // Show every tier in the Change Plan grid (not just non-current ones) so
+  // users can compare and see what they have; `entries` is one offer per tier
+  // for the chosen interval. The card matching their current plan gets a
+  // "Current plan" badge + disabled CTA. startsim-1f1, crochet_patterns-34n7.
 
   /** Per-card direction relative to the current subscription:
    * - "current"   → user is on this exact offer → "Current Plan" badge, no action
    * - "upgrade"   → card is a higher tier (paid vs current free, or higher sortOrder)
    * - "downgrade" → card is a lower tier (free when current is paid, or lower sortOrder)
    * startsim-21f. */
-  type Direction = "current" | "upgrade" | "downgrade";
+  type Direction = "current" | "upgrade" | "downgrade" | "switch";
   function directionFor(cardOffer: ProductOffer): Direction {
-    if (!currentOffer) return "upgrade"; // legacy: no sub → every card is an upgrade
+    if (!currentOffer) return "upgrade"; // plan still unknown → every card is an upgrade
     if (cardOffer.id === currentOffer.id) return "current";
+    // Same plan, other billing interval (Lite ↔ Lite Annual).
+    const tierKey = tierKeyOf(cardOffer.id);
+    if (tierKey !== null && tierKey === tierKeyOf(currentOffer.id)) return "switch";
     // Free vs Paid: paid is always an upgrade, free is always a downgrade.
     if (cardOffer.isFree && !currentOffer.isFree) return "downgrade";
     if (!cardOffer.isFree && currentOffer.isFree) return "upgrade";
@@ -260,7 +269,8 @@ export function SubscriptionManager({
    * `offer.ctaText` (e.g. "Start Free Trial") is for UPGRADE only — using it
    * on a Free card when a Pro user is looking is the bug startsim-21f closes. */
   function ctaLabelFor(cardOffer: ProductOffer, direction: Direction): string {
-    if (direction === "current") return "Current Plan";
+    if (direction === "current") return "Current plan";
+    if (direction === "switch") return cardOffer.intervalUnit === "year" ? "Switch to annual" : "Switch to monthly";
     if (direction === "downgrade") return `Downgrade to ${cardOffer.name}`;
     return cardOffer.ctaText || `Upgrade to ${cardOffer.name}`;
   }
@@ -379,6 +389,11 @@ export function SubscriptionManager({
             }
           />
         </>
+      ) : 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>
+        </div>
       ) : (
         <div className="text-center py-8">
           <p className="text-lg text-gray-600">No active subscription</p>
@@ -419,16 +434,18 @@ export function SubscriptionManager({
 
       {/* Only render the Change Plan section when there are at least 2 offers
           to show. Single-tier apps (just Free) skip it entirely — startsim-ft2. */}
-      {!productLoading && !productError && allOffers.length >= 2 && (
+      {!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"}
           </h3>
+          {hasChoice && <IntervalToggle interval={interval} onChange={setInterval} />}
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {allOffers.map((offer) => {
+            {entries.map((entry) => {
+              const { offer, tier } = entry;
               const direction = directionFor(offer);
               const isCurrent = direction === "current";
-              const isDowngrade = direction === "downgrade";
+              const isDowngrade = direction === "downgrade" || direction === "switch";
               const ctaLabel = ctaLabelFor(offer, direction);
 
               // Border: current = solid ring; featured upgrade = blue; else gray.
@@ -459,25 +476,17 @@ export function SubscriptionManager({
                       data-testid={`current-plan-badge-${offer.slug}`}
                       className="absolute -top-2.5 right-4 inline-block bg-primary text-primary-foreground text-xs font-bold uppercase tracking-wide px-2.5 py-0.5 rounded-full"
                     >
-                      Current Plan
+                      Current plan
                     </span>
                   )}
-                  <h4 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h4>
+                  <h4 className="text-lg font-bold text-gray-900 mb-2">{tier.name}</h4>
                   <div className="mb-3">
-                    {offer.isFree ? (
-                      <span aria-label="Free">
-                        <span aria-hidden="true" className="text-2xl 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-2xl font-extrabold text-gray-900">
-                          ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-                        </span>
-                        <span aria-hidden="true" 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>
                   {/* Trial copy is for prospective trialers only — once the
                       user is on this offer or moving downward, drop the

package/src/components/UpgradeModal.tsx

@@ -13,12 +13,19 @@ import React, { useEffect, useRef, useCallback } 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 } from "./IntervalToggle";
 
 export interface UpgradeModalProps {
   productId: string;
   open: boolean;
   onClose: () => void;
   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 UpgradeModal({
@@ -26,8 +33,13 @@ export function UpgradeModal({
   open,
   onClose,
   onSelectOffer,
+  currentPlan,
 }: UpgradeModalProps) {
   const { product, loading, error } = useProduct(productId);
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    resolveCurrentOfferId(product?.offers ?? [], currentPlan),
+  );
   const modalRef = useRef<HTMLDivElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
 
@@ -120,10 +132,18 @@ export function UpgradeModal({
           </div>
         )}
 
+        {product && hasChoice && (
+          <div className="mb-6">
+            <IntervalToggle interval={interval} onChange={setInterval} />
+          </div>
+        )}
+
         {product && (
           <div data-testid="upgrade-offers" className="flex flex-wrap justify-center gap-5">
-            {product.offers.map((offer) => {
+            {entries.map((entry) => {
+              const { offer, tier } = entry;
               const isFeatured = offer.isFeatured;
+              const isCurrent = offer.id === resolveCurrentOfferId(product.offers, currentPlan);
               return (
                 <div
                   key={offer.id}
@@ -136,21 +156,15 @@ export function UpgradeModal({
                     }
                   `}
                 >
-                  <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 aria-label="Free">
-                        <span aria-hidden="true" className="text-2xl 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-2xl font-extrabold text-gray-900">
-                          ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-                        </span>
-                        <span aria-hidden="true" className="text-sm text-gray-500"> {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 && (
@@ -164,24 +178,28 @@ export function UpgradeModal({
                       {offer.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" />
-                          {f.name}
+                          <span>{formatFeatureLabel(f)}</span>
                         </li>
                       ))}
                     </ul>
                   )}
 
                   <button
-                    onClick={() => onSelectOffer?.(offer)}
+                    onClick={() => !isCurrent && onSelectOffer?.(offer)}
                     data-testid={`upgrade-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/__fixtures__/crochetProduct.ts

@@ -0,0 +1,172 @@
+/**
+ * The live crochets.site catalogue (GET /billing/products/crochet-patterns/,
+ * 2026-10-16), camelised the way the proxy hands it to the components.
+ * `tier` is not served yet, so the base fixture omits it on purpose: the
+ * picker has to pair Lite with Lite Annual without it.
+ */
+import type { BillingProduct, ProductOffer, SubscriptionInfo } from "../../types";
+
+const base = {
+  currency: "USD",
+  pricingModel: "flat" as const,
+  intervalCount: 1,
+  isRecurring: true,
+  isActive: true,
+  isFeatured: false,
+};
+
+const liteFeatures = [
+  { key: "ai_designs", name: "AI pattern designs", value: true },
+  { 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 per month", value: -1 },
+];
+
+const proFeatures = [
+  { key: "ai_designs", name: "AI pattern designs, made with our best model and checked by a design review", value: true },
+  { key: "patterns_per_month", name: "AI designs per month", 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 },
+];
+
+export const crochetFree: ProductOffer = {
+  ...base,
+  id: "free-id",
+  name: "Free",
+  slug: "crochet-free",
+  unitPrice: "0.00",
+  intervalUnit: "month",
+  intervalDisplay: "per month",
+  isFree: true,
+  features: [
+    { key: "ai_designs", name: "AI pattern designs", value: false },
+    { key: "browse_patterns", name: "Browse and buy patterns", value: true },
+    { 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", limit: null, value: true },
+  ],
+  trialDays: 0,
+  sortOrder: 0,
+  ctaText: "Get Started",
+};
+
+export const crochetLite: ProductOffer = {
+  ...base,
+  id: "lite-id",
+  name: "Lite",
+  slug: "crochet-lite",
+  unitPrice: "2.99",
+  intervalUnit: "month",
+  intervalDisplay: "per month",
+  isFree: false,
+  features: liteFeatures,
+  trialDays: 0,
+  sortOrder: 1,
+  ctaText: "Get Lite",
+};
+
+export const crochetLiteAnnual: ProductOffer = {
+  ...base,
+  id: "lite-annual-id",
+  name: "Lite Annual",
+  slug: "crochet-lite-annual",
+  unitPrice: "29.00",
+  intervalUnit: "year",
+  intervalDisplay: "per year",
+  isFree: false,
+  features: liteFeatures,
+  trialDays: 0,
+  sortOrder: 1,
+  ctaText: "Get Lite",
+};
+
+export const crochetPro: ProductOffer = {
+  ...base,
+  id: "pro-id",
+  name: "Pro",
+  slug: "crochet-pro",
+  unitPrice: "9.00",
+  intervalUnit: "month",
+  intervalDisplay: "per month",
+  isFree: false,
+  features: proFeatures,
+  trialDays: 7,
+  sortOrder: 2,
+  ctaText: "Start Free Trial",
+};
+
+export const crochetProAnnual: ProductOffer = {
+  ...base,
+  id: "pro-annual-id",
+  name: "Pro Annual",
+  slug: "crochet-pro-annual",
+  unitPrice: "89.00",
+  intervalUnit: "year",
+  intervalDisplay: "per year",
+  isFree: false,
+  features: proFeatures,
+  trialDays: 7,
+  sortOrder: 2,
+  ctaText: "Start Free Trial",
+};
+
+/** What production serves today: no Pro Annual, no `tier`. */
+export const crochetProduct: BillingProduct = {
+  id: "034a56c9",
+  slug: "crochet-patterns",
+  name: "Crochet Patterns",
+  description: "AI-powered crochet pattern generator with step-by-step instructions.",
+  offers: [crochetFree, crochetLite, crochetLiteAnnual, crochetPro],
+};
+
+/** After the in-flight deploy: `tier` on every paid offer, plus Pro Annual. */
+export const crochetProductWithTiers: BillingProduct = {
+  ...crochetProduct,
+  offers: [
+    crochetFree,
+    { ...crochetLite, tier: "lite" },
+    { ...crochetLiteAnnual, tier: "lite" },
+    { ...crochetPro, tier: "pro" },
+    { ...crochetProAnnual, tier: "pro" },
+  ],
+};
+
+export function subscriptionTo(offer: ProductOffer, status: SubscriptionInfo["status"] = "active"): SubscriptionInfo {
+  return {
+    id: `sub-${offer.slug}`,
+    offer,
+    status,
+    currentPeriodStart: "2026-10-01T00:00:00Z",
+    currentPeriodEnd: "2026-11-01T00:00:00Z",
+    cancelAtPeriodEnd: false,
+    trialEnd: null,
+    viewerIsOwner: true,
+  };
+}
+
+/** A fetch that serves the product and the given subscription (null = 404). */
+export function crochetFetcher(
+  product: BillingProduct,
+  subscription: SubscriptionInfo | null,
+): typeof fetch {
+  return ((url: string) => {
+    if (url.includes("/billing/subscription/current/")) {
+      if (subscription === null) {
+        return Promise.resolve({ ok: false, status: 404, json: () => Promise.resolve({ detail: "none" }) });
+      }
+      return Promise.resolve({ ok: true, status: 200, json: () => Promise.resolve(subscription) });
+    }
+    if (url.includes("/billing/usage/")) {
+      return Promise.resolve({ ok: true, status: 200, json: () => Promise.resolve({}) });
+    }
+    if (url.includes("/billing/products/")) {
+      return Promise.resolve({ ok: true, status: 200, json: () => Promise.resolve(product) });
+    }
+    return Promise.resolve({ ok: false, status: 404, json: () => Promise.resolve({}) });
+  }) as unknown as typeof fetch;
+}

package/src/index.ts

@@ -57,5 +57,8 @@ export type {
 export { BillingApiClient } from "./utils/api";
 
 // Pure helpers
-export { isPaidSubscription, getFeatureLimit, resolvePlanEntitlement, resolveUsageWindow } from "./utils/plan";
-export type { PlanEntitlement, ResolvePlanEntitlementOptions, UsageWindow } from "./utils/plan";
+export { isPaidSubscription, getFeatureLimit, resolvePlanEntitlement, resolveUsageWindow, resolveCurrentOfferId } from "./utils/plan";
+export type { PlanEntitlement, ResolvePlanEntitlementOptions, UsageWindow, CurrentPlanState } from "./utils/plan";
+export { formatPrice, formatFeatureLabel } from "./utils/format";
+export { groupOffersByTier, offersForInterval, hasIntervalChoice, annualSavings, tierOffer } from "./utils/tiers";
+export type { BillingInterval, OfferTier } from "./utils/tiers";

package/src/types/index.ts

@@ -23,6 +23,10 @@ export interface ProductOffer {
   trialDays: number;
   sortOrder: number;
   ctaText: string;
+  /** Plan tier shared by an offer's monthly and annual prices ("lite",
+   * "pro"). Optional: older payloads omit it and the picker pairs by
+   * features / name instead. */
+  tier?: string | null;
 }
 
 export interface OfferFeature {

package/src/utils/format.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Price and feature-label formatting shared by every plan card
+ * (crochet_patterns-34n7).
+ */
+import { describe, it, expect } from "vitest";
+import { formatPrice, formatFeatureLabel } from "./format";
+
+describe("formatPrice", () => {
+  it("keeps the cents: 2.99 is $2.99, not $2", () => {
+    expect(formatPrice("2.99")).toBe("$2.99");
+  });
+
+  it("drops .00 on whole amounts", () => {
+    expect(formatPrice("9.00")).toBe("$9");
+    expect(formatPrice("29.00")).toBe("$29");
+    expect(formatPrice("199.00")).toBe("$199");
+  });
+
+  it("pads a single cent digit", () => {
+    expect(formatPrice("2.5")).toBe("$2.50");
+  });
+
+  it("accepts numbers and other currencies", () => {
+    expect(formatPrice(2.42)).toBe("$2.42");
+    expect(formatPrice("10.00", "EUR")).toBe("€10");
+  });
+
+  it("treats junk as zero rather than NaN", () => {
+    expect(formatPrice("")).toBe("$0");
+  });
+});
+
+describe("formatFeatureLabel", () => {
+  it("keeps acronyms capitalised in a capped allowance", () => {
+    expect(formatFeatureLabel({ key: "ai_designs_per_month", name: "AI designs per month", value: 3 }))
+      .toBe("Up to 3 AI designs per month");
+  });
+
+  it("does not say per month for an unlimited allowance", () => {
+    expect(formatFeatureLabel({ key: "patterns_per_month", name: "Saved patterns per month", value: -1 }))
+      .toBe("Unlimited saved patterns");
+    expect(formatFeatureLabel({ key: "patterns_per_month", name: "AI designs per month", value: -1 }))
+      .toBe("Unlimited AI designs");
+  });
+
+  it("prefers limit over value", () => {
+    expect(formatFeatureLabel({ key: "seats", name: "Team seats", value: 1, limit: 5 }))
+      .toBe("Up to 5 team seats");
+  });
+
+  it("leaves capabilities and string values as their name", () => {
+    expect(formatFeatureLabel({ key: "pdf_export", name: "Print-ready PDF export", value: true }))
+      .toBe("Print-ready PDF export");
+    expect(formatFeatureLabel({ key: "projects", name: "Projects", value: "Unlimited" }))
+      .toBe("Projects");
+  });
+});

package/src/utils/format.ts

@@ -0,0 +1,54 @@
+/**
+ * Display formatting shared by every plan card, so a price or a feature line
+ * reads the same on /pricing, the billing settings page and the upgrade modal
+ * (crochet_patterns-34n7).
+ */
+import type { OfferFeature } from "../types";
+
+/**
+ * "$2.99", "$9", "€10". Cents are kept when there are any and dropped when
+ * the amount is whole — truncating with Math.floor turned $2.99 into $2.
+ */
+export function formatPrice(amount: string | number, currency = "USD"): string {
+  const n = typeof amount === "number" ? amount : parseFloat(amount);
+  const value = Number.isFinite(n) ? n : 0;
+  const whole = Math.abs(value - Math.round(value)) < 0.005;
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency || "USD",
+      minimumFractionDigits: whole ? 0 : 2,
+      maximumFractionDigits: whole ? 0 : 2,
+    }).format(value);
+  } catch {
+    return `$${whole ? Math.round(value) : value.toFixed(2)}`;
+  }
+}
+
+/** Lower-case the first letter for mid-sentence use, unless the first word is
+ * an acronym ("AI designs" stays "AI designs", "Team seats" → "team seats"). */
+function midSentence(name: string): string {
+  const firstWord = name.split(/\s+/)[0] ?? "";
+  if ((firstWord.match(/[A-Z]/g) ?? []).length >= 2) return name;
+  return name.charAt(0).toLowerCase() + name.slice(1);
+}
+
+/** "Saved patterns per month" → "Saved patterns": an unlimited allowance has
+ * no period. */
+function withoutPeriod(name: string): string {
+  return name.replace(/\s+(per|a|each|\/)\s*(day|week|month|year)$/i, "");
+}
+
+/**
+ * The line a plan card shows for one feature. Numeric allowances read as
+ * "Up to 3 AI designs per month" / "Unlimited saved patterns"; capabilities
+ * and string values are shown by name. Callers decide what to do with a
+ * feature whose value is `false`.
+ */
+export function formatFeatureLabel(feature: OfferFeature): string {
+  const { name, value, limit } = feature;
+  const n = typeof limit === "number" ? limit : typeof value === "number" ? value : null;
+  if (n === -1) return `Unlimited ${midSentence(withoutPeriod(name))}`;
+  if (n !== null && n > 0) return `Up to ${n} ${midSentence(name)}`;
+  return name;
+}

package/src/utils/plan.ts

@@ -201,3 +201,41 @@ export function resolveUsageWindow(
   );
   return { start: monthStart, end: monthEnd };
 }
+
+/**
+ * What a plan picker knows about the viewer. Omit it (signed-out pages) and
+ * no card is marked current.
+ */
+export interface CurrentPlanState {
+  signedIn: boolean;
+  subscription: SubscriptionInfo | null | undefined;
+  /** The subscription is still being fetched. */
+  loading?: boolean;
+  /** The subscription fetch failed. */
+  error?: unknown;
+}
+
+/**
+ * The offer to mark "Current plan" on a picker (crochet_patterns-34n7).
+ *
+ * A signed-in user with no subscription row is on the free plan — that is
+ * what every gate already assumes — so the free card is theirs. A paid plan
+ * counts while it is active, trialing or past due; a lapsed one falls back to
+ * free so the user can buy it again. Nothing is marked while the plan is
+ * unknown (loading / failed): a paying user must never see Free flash as
+ * current with their real plan offered as an upgrade.
+ */
+export function resolveCurrentOfferId(
+  offers: ProductOffer[],
+  state: CurrentPlanState | null | undefined,
+): string | null {
+  if (!state || !state.signedIn || state.loading || state.error) return null;
+  const offer = state.subscription?.offer ?? null;
+  if (offer) {
+    if (offer.isFree) return offer.id;
+    if (isPaidSubscription(state.subscription) || state.subscription?.status === "past_due") {
+      return offer.id;
+    }
+  }
+  return offers.find((o) => o.isFree)?.id ?? null;
+}