@startsimpli/billing 0.4.22 → 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 {
@@ -76,6 +80,8 @@ export interface SubscriptionInfo {
   viewerIsOwner?: boolean;
   /** Email of the team owner so non-owners can be told who to ask. */
   ownerEmail?: string | null;
+  /** The server sends this subscription's GA4 conversion; the browser must not. */
+  conversionByServer?: boolean;
 }
 
 export interface PaymentMethod {

package/src/utils/api.test.ts

@@ -44,6 +44,19 @@ describe("BillingApiClient", () => {
     });
   });
 
+  describe("subscription conversion owner", () => {
+    it("keeps conversionByServer on both the rich and the flat cache shape", async () => {
+      const offer = { id: "o1", slug: "pro", name: "Pro" };
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ id: "s1", offer, status: "trialing", conversionByServer: true }) });
+      expect((await createClient().getSubscription("p"))?.conversionByServer).toBe(true);
+
+      mockFetch
+        .mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ subscriptionId: "s1", status: "trialing", productSlug: "p", offerId: "o1", conversionByServer: true }) })
+        .mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ slug: "p", name: "P", offers: [offer] }) });
+      expect((await createClient().getSubscription("p"))?.conversionByServer).toBe(true);
+    });
+  });
+
   describe("createCheckout", () => {
     it("sends POST without auth header (proxy handles auth server-side)", async () => {
       mockFetch.mockResolvedValue({
@@ -71,6 +84,19 @@ describe("BillingApiClient", () => {
       );
     });
 
+    it("sends the buyer's GA ids so the server can send the conversion", async () => {
+      document.cookie = "_ga=GA1.1.1234567890.1760000000; path=/";
+      document.cookie = "_ga_K1M560RH1W=GS2.1.s1760600000$o3$g1$t1760600500; path=/";
+      mockFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ sessionId: "cs_1", url: "https://pay.com" }) });
+
+      await createClient().createCheckout({ offerId: "offer-1", successUrl: "https://ok.com", cancelUrl: "https://nope.com" });
+
+      const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+      expect(body.analytics).toEqual({ ga_client_id: "1234567890.1760000000", ga_session_id: "1760600000" });
+      document.cookie = "_ga=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      document.cookie = "_ga_K1M560RH1W=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+    });
+
     it("includes quantity in request body", async () => {
       mockFetch.mockResolvedValue({
         ok: true,

package/src/utils/api.ts

@@ -13,6 +13,7 @@ import type {
   UsageMap,
 } from "../types";
 import { billingErrorMessage } from "./error-message";
+import { currentGaIds } from "./ga-ids";
 
 export class BillingApiClient {
   private config: BillingConfig;
@@ -49,6 +50,7 @@ export class BillingApiClient {
     quantity?: number;
   }): Promise<CheckoutResult> {
     const url = `${this.config.apiBaseUrl}/billing/offer-checkout/`;
+    const ga = currentGaIds();
     const resp = await this.fetcher(url, {
       method: "POST",
       headers: this.headers,
@@ -57,6 +59,8 @@ export class BillingApiClient {
         success_url: params.successUrl,
         cancel_url: params.cancelUrl,
         quantity: params.quantity ?? 1,
+        // For the subscription's conversion, sent from the server.
+        ...(ga && { analytics: ga }),
       }),
     });
     if (!resp.ok) {
@@ -200,6 +204,7 @@ export class BillingApiClient {
         currentPeriodEnd: toIso(r.currentPeriodEnd),
         cancelAtPeriodEnd: Boolean(r.cancelAtPeriodEnd),
         trialEnd: toIso(r.trialEnd),
+        conversionByServer: Boolean(r.conversionByServer),
       };
     } catch {
       // Product fetch failed — degrade to "no subscription" instead of crashing.

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");
+  });
+});