@startsimpli/billing 0.4.27 → 0.4.28

package/package.json

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

package/src/components/IntervalToggle.tsx

@@ -99,14 +99,9 @@ export function OfferPrice({
   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);
+  // A free plan reads "$0 per month" like the others; its name already says
+  // Free, so the price does not repeat it (crochet_patterns-vveb).
+  const price = formatPrice(offer.isFree ? 0 : offer.unitPrice, offer.currency);
   return (
     <span aria-label={`${price} ${offer.intervalDisplay}`}>
       <span aria-hidden="true" className={amountClassName}>{price}</span>

package/src/components/PricingDetailPage.tsx

@@ -11,7 +11,7 @@
 import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { PlanChangePreview, ProductOffer, OfferFeature } from "../types";
-import { cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
+import { cardFeatures, cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
 import { formatFeatureLabel } from "../utils/format";
 import {
   isPayingSubscription,
@@ -20,7 +20,6 @@ import {
   planDirection,
   resolveCurrentOffer,
   trialApplies,
-  TRIAL_NOTE_FEATURE_KEY,
   type CurrentPlanState,
 } from "../utils/plan";
 import { usePlanChange } from "../hooks/usePlanChange";
@@ -280,10 +279,6 @@ interface DetailCardProps {
   busy?: boolean;
 }
 
-function sameFeature(a: OfferFeature, b: OfferFeature): boolean {
-  return a.value === b.value && (a.limit ?? null) === (b.limit ?? null);
-}
-
 function DetailCard({
   entry, onSelect, buildsOn, inherited, yourPlanNote, isCurrent = false, ctaLabel, showTrial, busy = false, spinning = false,
 }: DetailCardProps) {
@@ -292,12 +287,7 @@ function DetailCard({
   // Each row once (crochet_patterns-tv7fb): no "not included" rows (the
   // comparison table has them), no trial row (the pill says it, or the trial
   // does not apply), and nothing the tier below already has.
-  const features = offer.features.filter((f) => {
-    if (f.value === false) return false;
-    if (f.key === TRIAL_NOTE_FEATURE_KEY) return false;
-    const below = inherited?.[f.key];
-    return !(below && sameFeature(below, f));
-  });
+  const features = cardFeatures(offer, inherited);
   // Featured is the tier's, so Pro stays highlighted on Annual too
   // (crochet_patterns-ftrka).
   const isFeatured = !!(tier.monthly?.isFeatured || tier.annual?.isFeatured);
@@ -308,13 +298,13 @@ function DetailCard({
       className={`
         flex flex-col relative rounded-2xl p-8 w-full max-w-sm flex-1 min-w-[280px]
         ${isFeatured
-          ? "border-2 border-blue-600 shadow-lg"
+          ? "border-2 border-[color:var(--billing-accent,#2563eb)] shadow-lg"
           : "border border-gray-200 bg-white shadow-sm"
         }
       `}
     >
       {isFeatured && (
-        <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-full uppercase tracking-wide whitespace-nowrap">
+        <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[var(--billing-accent,#2563eb)] text-white text-xs font-bold px-4 py-1 rounded-full uppercase tracking-wide whitespace-nowrap">
           Most Popular
         </span>
       )}
@@ -336,7 +326,7 @@ function DetailCard({
 
       <div className="mb-5 min-h-8">
         {trial ? (
-          <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-blue-50 text-blue-700 text-sm font-semibold px-3 py-1 rounded-lg w-fit">
+          <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-[var(--billing-accent-soft,#eff6ff)] text-[color:var(--billing-accent-text,#1d4ed8)] text-sm font-semibold px-3 py-1 rounded-lg w-fit">
             {offer.trialDays}-day free trial
           </span>
         ) : yourPlanNote ? (
@@ -376,7 +366,7 @@ function DetailCard({
           ${isCurrent
             ? "bg-gray-100 text-gray-500 cursor-not-allowed"
             : isFeatured
-              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer disabled:opacity-70 disabled:cursor-wait"
+              ? "bg-[var(--billing-accent,#2563eb)] text-white hover:bg-[var(--billing-accent-hover,#1d4ed8)] cursor-pointer disabled:opacity-70 disabled:cursor-wait"
               : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer disabled:opacity-70 disabled:cursor-wait"
           }
         `}

package/src/components/PricingSection.review.test.tsx

@@ -0,0 +1,106 @@
+/**
+ * The compact PricingSection (crochet Home) follows the same card rules as the
+ * full pricing page (design review, Home page):
+ * - Under "Everything in X, plus:" a card lists only what it adds: no rows the
+ *   tier below has, no "not included" rows, no trial row (crochet_patterns-469n).
+ * - Every card reserves the pill and lead-in rows (crochet_patterns-gac4).
+ * - A free plan's price reads "$0 per month", not "Free" twice (crochet_patterns-vveb).
+ * - The highlight colour comes from --billing-accent so an app can theme it
+ *   (crochet_patterns-fpv4); blue stays the default.
+ */
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { PricingSection } from "./PricingSection";
+
+const offer = (o: Record<string, unknown>) => ({
+  currency: "USD", pricingModel: "flat", intervalUnit: "month", intervalCount: 1,
+  intervalDisplay: "per month", isRecurring: true, isActive: true, isFeatured: false,
+  trialDays: 0, ctaText: "Choose", description: "", ...o,
+});
+
+// The live crochet-patterns offers (api.startsimpli.com, 2026-10-18), monthly only.
+const product = {
+  id: "p", slug: "crochet-patterns", name: "Crochet Patterns", description: "",
+  offers: [
+    offer({ id: "f", slug: "crochet-free", name: "Free", unitPrice: "0.00", isFree: true, sortOrder: 0, 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", value: true, limit: null },
+    ] }),
+    offer({ id: "l", slug: "crochet-lite", name: "Lite", unitPrice: "2.99", isFree: false, sortOrder: 1, features: [
+      { 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", value: -1 },
+    ] }),
+    offer({ id: "pr", slug: "crochet-pro", name: "Pro", unitPrice: "9.00", isFree: false, sortOrder: 2, isFeatured: true, trialDays: 7, features: [
+      { 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: "Saved patterns", 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 },
+      { key: "ai_designs_per_month", name: "AI designs per month", value: 15 },
+    ] }),
+  ],
+};
+
+function renderSection() {
+  const fetcher = (async () => new Response(JSON.stringify(product), { status: 200, headers: { "Content-Type": "application/json" } })) as typeof fetch;
+  return render(
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1" fetcher={fetcher}>
+      <PricingSection productId="crochet-patterns" maxFeatures={4} />
+    </BillingProvider>,
+  );
+}
+
+const rows = (slug: string) =>
+  within(screen.getByTestId(`section-card-${slug}`)).getAllByRole("listitem").map((li) => li.textContent?.trim());
+
+describe("PricingSection card rules", () => {
+  it("Pro lists only what Lite lacks, so 15 designs and Custom sizing are not cut by the 4-row cap", async () => {
+    renderSection();
+    await waitFor(() => screen.getByTestId("section-card-crochet-pro"));
+    const pro = rows("crochet-pro");
+    expect(pro.some((r) => /15/.test(r ?? ""))).toBe(true);
+    expect(pro).toContain("Custom sizing");
+    expect(pro).not.toContain("AI chat to refine any pattern");
+    expect(pro).not.toContain("Print-ready PDF export");
+    expect(pro.some((r) => /7-day free trial with/.test(r ?? ""))).toBe(false);
+  });
+
+  it("Free drops its not-included row; Lite does not repeat Free's rows", async () => {
+    renderSection();
+    await waitFor(() => screen.getByTestId("section-card-crochet-lite"));
+    expect(rows("crochet-free")).not.toContain("AI pattern designs");
+    const lite = rows("crochet-lite");
+    expect(lite).not.toContain("Print-ready PDF export");
+    expect(lite).not.toContain("Track your progress");
+  });
+
+  it("every card reserves the lead-in row, and the free price is $0 per month", async () => {
+    renderSection();
+    await waitFor(() => screen.getByTestId("section-card-crochet-free"));
+    for (const slug of ["crochet-free", "crochet-lite", "crochet-pro"]) {
+      expect(screen.getByTestId(`section-lead-${slug}`)).toBeDefined();
+    }
+    expect(screen.getByTestId("section-lead-crochet-free").textContent).toBe("");
+    const free = screen.getByTestId("section-card-crochet-free");
+    expect(within(free).getByLabelText("$0 per month")).toBeDefined();
+    expect(within(free).getAllByText("Free")).toHaveLength(1); // the name only
+  });
+
+  it("the featured card and its button use the themeable accent", async () => {
+    renderSection();
+    await waitFor(() => screen.getByTestId("section-card-crochet-pro"));
+    expect(screen.getByTestId("section-card-crochet-pro").className).toContain("var(--billing-accent,#2563eb)");
+    expect(screen.getByTestId("section-cta-crochet-pro").className).toContain("bg-[var(--billing-accent,#2563eb)]");
+  });
+});

package/src/components/PricingSection.test.tsx

@@ -221,7 +221,9 @@ describe("PricingSection", () => {
     // "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$/i).length).toBe(3); // All 3 cards
-    expect(screen.getAllByText(/projects$/i).length).toBe(3); // All 3 cards
+    // Enterprise's "Unlimited" projects is Pro's too, so it is not repeated
+    // under "Everything in Pro, plus:" (crochet_patterns-469n).
+    expect(screen.getAllByText(/projects$/i).length).toBe(2);
     // 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
@@ -242,7 +244,7 @@ describe("PricingSection", () => {
 
     // With default maxFeatures=4, should show first 4 features
     expect(screen.getAllByText(/team seats$/i).length).toBe(3);
-    expect(screen.getAllByText(/projects$/i).length).toBe(3);
+    expect(screen.getAllByText(/projects$/i).length).toBe(2); // Enterprise does not repeat Pro's Unlimited
     expect(screen.getAllByText("Storage").length).toBe(3);
     expect(screen.getAllByText("Support").length).toBe(3);
   });

package/src/components/PricingSection.tsx

@@ -10,8 +10,8 @@
 
 import React from "react";
 import { useProduct } from "../hooks/useProduct";
-import type { ProductOffer } from "../types";
-import { tierBelow } from "../utils/tiers";
+import type { OfferFeature, ProductOffer } from "../types";
+import { cardFeatures, cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
 import { FeatureIcon } from "./FeatureIcon";
 import { formatFeatureLabel } from "../utils/format";
 import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
@@ -71,6 +71,9 @@ 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);
+  // What each tier already has, so a card under "Everything in X, plus:" lists
+  // only what it adds, as on the full pricing page (crochet_patterns-469n).
+  const cumulative = cumulativeFeatureLookup(visibleOffers);
 
   return (
     <div data-testid="pricing-section" className="w-full px-4 py-8">
@@ -89,6 +92,7 @@ export function PricingSection({
               onSelect={onSelectOffer}
               maxFeatures={maxFeatures}
               buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
+              inherited={below ? cumulative[below.slug] ?? null : null}
               isCurrent={entry.offer.id === currentOfferId}
             />
           );
@@ -105,12 +109,15 @@ interface SectionCardProps {
   maxFeatures: number;
   /** Name of the tier just below this one, when there is one. */
   buildsOn?: string | null;
+  /** What the tier below already has (cumulative); rows it matches are not repeated. */
+  inherited?: Record<string, OfferFeature> | null;
 }
 
-function SectionCard({ entry, onSelect, maxFeatures, buildsOn, isCurrent = false }: SectionCardProps) {
+function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurrent = false }: SectionCardProps) {
   const { offer, tier } = entry;
-  const isFeatured = offer.isFeatured;
-  const visibleFeatures = offer.features.slice(0, maxFeatures);
+  // Featured is the tier's, so the highlight survives the Annual toggle.
+  const isFeatured = !!(tier.monthly?.isFeatured || tier.annual?.isFeatured);
+  const visibleFeatures = cardFeatures(offer, inherited).slice(0, maxFeatures);
 
   return (
     <div
@@ -119,7 +126,7 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, isCurrent = false
       className={`
         flex flex-col relative rounded-xl p-6 flex-1 min-w-[220px] max-w-xs
         ${isFeatured
-          ? "border-2 border-blue-600 shadow-md"
+          ? "border-2 border-[color:var(--billing-accent,#2563eb)] shadow-md"
           : "border border-gray-200 bg-white shadow-sm"
         }
       `}
@@ -132,23 +139,27 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, isCurrent = false
           amountClassName="text-2xl font-extrabold text-gray-900"
           intervalClassName="text-sm text-gray-500"
         />
-        <AnnualNote entry={entry} className="mt-1" />
+        <div className="mt-1 min-h-4">
+          <AnnualNote entry={entry} />
+        </div>
       </div>
 
-      {offer.trialDays > 0 && (
-        <span
-          data-testid="trial-badge"
-          className="inline-block bg-blue-50 text-blue-700 text-xs font-semibold px-2 py-0.5 rounded-md mb-3 w-fit"
-        >
-          {offer.trialDays}-day free trial
-        </span>
-      )}
+      {/* Every card reserves the pill and lead-in rows, so matching features
+          start at the same height on each card (crochet_patterns-gac4). */}
+      <div className="mb-3 min-h-5">
+        {offer.trialDays > 0 && (
+          <span
+            data-testid="trial-badge"
+            className="inline-block bg-[var(--billing-accent-soft,#eff6ff)] text-[color:var(--billing-accent-text,#1d4ed8)] text-xs font-semibold px-2 py-0.5 rounded-md w-fit"
+          >
+            {offer.trialDays}-day free trial
+          </span>
+        )}
+      </div>
 
-      {buildsOn && (
-        <p className="text-sm font-semibold text-gray-900 mb-1">
-          Everything in {buildsOn}, plus:
-        </p>
-      )}
+      <p data-testid={`section-lead-${offer.slug}`} className="text-sm font-semibold text-gray-900 mb-1 min-h-5">
+        {buildsOn ? `Everything in ${buildsOn}, plus:` : null}
+      </p>
 
       <ul className="list-none p-0 m-0 mb-4 flex-1 space-y-0">
         {visibleFeatures.map((feature) => (
@@ -172,7 +183,7 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, isCurrent = false
           ${isCurrent
             ? "bg-gray-100 text-gray-500 cursor-not-allowed"
             : isFeatured
-              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
+              ? "bg-[var(--billing-accent,#2563eb)] text-white hover:bg-[var(--billing-accent-hover,#1d4ed8)] cursor-pointer"
               : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
           }
         `}

package/src/utils/tiers.ts

@@ -6,6 +6,7 @@
  * showed a paid plan as missing what the free plan had.
  */
 import type { ProductOffer, OfferFeature } from "../types";
+import { TRIAL_NOTE_FEATURE_KEY } from "./plan";
 /**
  * Plans are cumulative: a paid tier includes what the cheaper tier includes.
  *
@@ -158,3 +159,25 @@ export function annualSavings(tier: OfferTier): { perMonth: number; percent: num
   const percent = yearly < twelve ? Math.floor(((twelve - yearly) / twelve) * 100) : 0;
   return { perMonth: yearly / 12, percent };
 }
+
+function sameFeature(a: OfferFeature, b: OfferFeature): boolean {
+  return a.value === b.value && (a.limit ?? null) === (b.limit ?? null);
+}
+
+/**
+ * The rows a pricing card lists (crochet_patterns-tv7fb, -469n): no "not
+ * included" rows, no trial row (the pill says it), and nothing the tier below
+ * already has, so a card under "Everything in X, plus:" lists only what it adds.
+ * Shared by the full pricing page and the compact section on landing pages.
+ */
+export function cardFeatures(
+  offer: ProductOffer,
+  inherited: Record<string, OfferFeature> | null | undefined,
+): OfferFeature[] {
+  return offer.features.filter((f) => {
+    if (f.value === false) return false;
+    if (f.key === TRIAL_NOTE_FEATURE_KEY) return false;
+    const below = inherited?.[f.key];
+    return !(below && sameFeature(below, f));
+  });
+}