@startsimpli/billing 0.4.22 → 0.4.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.22",
+  "version": "0.4.24",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/CurrentPlanCard.tsx

@@ -16,6 +16,7 @@
 
 import React from "react";
 import type { OfferFeature, SubscriptionInfo, UsageMap } from "../types";
+import { formatFeatureLabel, formatPrice } from "../utils/format";
 
 export interface CurrentPlanCardProps {
   subscription: SubscriptionInfo;
@@ -32,8 +33,7 @@ export interface CurrentPlanCardProps {
 
 function priceLabel(offer: SubscriptionInfo["offer"]): string {
   if (offer.isFree) return "Free";
-  const n = Math.floor(parseFloat(offer.unitPrice) || 0);
-  return `$${n}`;
+  return formatPrice(offer.unitPrice, offer.currency);
 }
 
 function isProgressBarFeature(f: OfferFeature): boolean {
@@ -42,13 +42,7 @@ function isProgressBarFeature(f: OfferFeature): boolean {
 
 function featureLabel(f: OfferFeature): string | null {
   if (f.value === false) return null;
-  if (typeof f.value === "number" || typeof f.limit === "number") {
-    const limit = typeof f.limit === "number" ? f.limit
-                : typeof f.value === "number" ? (f.value as number) : null;
-    if (limit === -1) return `Unlimited ${f.name.toLowerCase()}`;
-    if (limit !== null && limit > 0) return `Up to ${limit} ${f.name.toLowerCase()}`;
-  }
-  return f.name;
+  return formatFeatureLabel(f);
 }
 
 function StatusBadge({ status, trialEnd }: { status: string; trialEnd: string | null }) {
@@ -277,7 +271,8 @@ export function CurrentPlanCard({ subscription, usage, upgradeCta, onPortalClick
         ) : (
           <span aria-label={`${priceLabel(offer)} ${offer.intervalDisplay}`}>
             <span aria-hidden="true" className="text-3xl font-extrabold text-gray-900">{priceLabel(offer)}</span>
-            <span aria-hidden="true" className="text-base text-gray-500 ml-1">{offer.intervalDisplay}</span>
+            {" "}
+            <span aria-hidden="true" className="text-base text-gray-500">{offer.intervalDisplay}</span>
           </span>
         )}
       </div>

package/src/components/IntervalToggle.tsx

@@ -0,0 +1,113 @@
+/**
+ * Monthly / Annual switch for plan pickers (crochet_patterns-34n7).
+ *
+ * Every plan list pairs each tier's monthly and annual offers and shows one
+ * card per tier for the chosen interval. Monthly by default — unless the
+ * viewer's current plan is an annual offer, so their card reads "Current
+ * plan" without a click. Nothing is remembered.
+ */
+import React, { useMemo, useState } from "react";
+import type { ProductOffer } from "../types";
+import {
+  annualSavings,
+  groupOffersByTier,
+  tierOffer,
+  type BillingInterval,
+  type OfferTier,
+} from "../utils/tiers";
+import { formatPrice } from "../utils/format";
+
+export interface IntervalEntry {
+  tier: OfferTier;
+  offer: ProductOffer;
+}
+
+export function useIntervalOffers(offers: ProductOffer[], currentOfferId: string | null = null) {
+  // Null until the viewer picks one, so the default can follow a plan that
+  // loads after the first render.
+  const [chosen, setInterval] = useState<BillingInterval | null>(null);
+  const currentIsAnnual = offers.some((o) => o.id === currentOfferId && o.intervalUnit === "year");
+  const interval: BillingInterval = chosen ?? (currentIsAnnual ? "annual" : "monthly");
+  const tiers = useMemo(() => groupOffersByTier(offers), [offers]);
+  const hasChoice = tiers.some((t) => t.monthly !== null && t.annual !== null);
+  const entries: IntervalEntry[] = tiers.map((tier) => ({ tier, offer: tierOffer(tier, interval) }));
+  return { interval, setInterval, hasChoice, tiers, entries };
+}
+
+export function IntervalToggle({
+  interval,
+  onChange,
+}: {
+  interval: BillingInterval;
+  onChange: (interval: BillingInterval) => void;
+}) {
+  const option = (value: BillingInterval, label: string) => {
+    const selected = interval === value;
+    return (
+      <button
+        type="button"
+        role="radio"
+        aria-checked={selected}
+        onClick={() => onChange(value)}
+        className={`px-4 py-1.5 text-sm font-semibold rounded-full transition-colors cursor-pointer ${
+          selected ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-800"
+        }`}
+      >
+        {label}
+      </button>
+    );
+  };
+  return (
+    <div className="flex justify-center">
+      <div
+        role="radiogroup"
+        aria-label="Billing interval"
+        data-testid="interval-toggle"
+        className="inline-flex items-center gap-1 rounded-full bg-gray-100 p-1"
+      >
+        {option("monthly", "Monthly")}
+        {option("annual", "Annual")}
+      </div>
+    </div>
+  );
+}
+
+/** "$2.42/month billed yearly · Save 19%" under an annual price. */
+export function AnnualNote({ entry, className = "" }: { entry: IntervalEntry; className?: string }) {
+  if (entry.offer !== entry.tier.annual) return null;
+  const savings = annualSavings(entry.tier);
+  if (!savings) return null;
+  return (
+    <p data-testid="annual-note" className={`text-xs text-gray-500 ${className}`}>
+      {formatPrice(savings.perMonth, entry.offer.currency)}/month billed yearly
+      {savings.percent > 0 && <span className="font-semibold text-green-700"> · Save {savings.percent}%</span>}
+    </p>
+  );
+}
+
+/** The price line every card shares: "$2.99 per month", or "Free". */
+export function OfferPrice({
+  offer,
+  amountClassName,
+  intervalClassName = "text-gray-500",
+}: {
+  offer: ProductOffer;
+  amountClassName: string;
+  intervalClassName?: string;
+}) {
+  if (offer.isFree) {
+    return (
+      <span aria-label="Free">
+        <span aria-hidden="true" className={amountClassName}>Free</span>
+      </span>
+    );
+  }
+  const price = formatPrice(offer.unitPrice, offer.currency);
+  return (
+    <span aria-label={`${price} ${offer.intervalDisplay}`}>
+      <span aria-hidden="true" className={amountClassName}>{price}</span>
+      {" "}
+      <span aria-hidden="true" className={intervalClassName}>{offer.intervalDisplay}</span>
+    </span>
+  );
+}

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