@startsimpli/billing 0.4.18 → 0.4.19

package/package.json

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

package/src/components/PricingDetailPage.tiers.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * Tiers are cumulative: a paid plan includes what the cheaper plan includes.
+ *
+ * Real offer data only lists what a tier ADDS — crochet-pro declares
+ * advanced_generation / stitch_library / pdf_export / custom_sizing and omits
+ * the basic_generation and save_patterns that crochet-free declares. The table
+ * rendered every omission as an em-dash, so the paid plan showed a dash exactly
+ * where the free plan showed a tick, and read as though Pro could not save
+ * patterns. Reported as "the paid plan doesn't look like it has more checks".
+ *
+ * The fixture in PricingDetailPage.test.tsx restates every feature on every
+ * tier, which is why this never showed up there. This one is shaped like the
+ * data production actually serves.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { PricingDetailPage } from "./PricingDetailPage";
+import type { BillingProduct, OfferFeature } from "../types";
+
+function offer(
+  over: Partial<BillingProduct["offers"][number]> & { name: string; slug: string; features: OfferFeature[] },
+) {
+  return {
+    id: over.slug,
+    unitPrice: "0.00",
+    currency: "USD",
+    pricingModel: "flat" as const,
+    intervalUnit: "month" as const,
+    intervalCount: 1,
+    intervalDisplay: "per month",
+    isRecurring: true,
+    isFree: false,
+    isActive: true,
+    isFeatured: false,
+    trialDays: 0,
+    sortOrder: 0,
+    ctaText: "Choose",
+    ...over,
+  };
+}
+
+/** Shaped like the live crochet-patterns product. */
+const product: BillingProduct = {
+  id: "prod-crochet",
+  slug: "crochet-patterns",
+  name: "Crochet Patterns",
+  description: "AI-powered crochet pattern generator",
+  offers: [
+    offer({
+      name: "Free",
+      slug: "crochet-free",
+      isFree: true,
+      sortOrder: 0,
+      features: [
+        { key: "patterns_per_month", name: "Patterns per month", value: 3, limit: 3 },
+        { key: "basic_generation", name: "Basic pattern generation", value: true },
+        { key: "save_patterns", name: "Save patterns", value: true },
+      ],
+    }),
+    offer({
+      name: "Pro",
+      slug: "crochet-pro",
+      unitPrice: "9.00",
+      sortOrder: 1,
+      isFeatured: true,
+      features: [
+        { key: "patterns_per_month", name: "Patterns per month", value: -1 },
+        { key: "advanced_generation", name: "Advanced pattern generation", value: true },
+        { key: "pdf_export", name: "PDF export", value: true },
+      ],
+    }),
+  ],
+};
+
+function renderPricing(p: BillingProduct = product) {
+  const fetcher = vi.fn().mockResolvedValue({
+    ok: true,
+    json: () => Promise.resolve(p),
+  }) as unknown as typeof fetch;
+
+  return render(
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1" fetcher={fetcher}>
+      <PricingDetailPage productId={p.slug} />
+    </BillingProvider>,
+  );
+}
+
+/** The cell for one offer in one feature row, by column position. */
+function cell(featureKey: string, column: number) {
+  const row = screen.getByTestId(`comparison-row-${featureKey}`);
+  // column 0 is the feature name.
+  return within(row).getAllByRole("cell")[column + 1];
+}
+
+describe("comparison table — cumulative tiers", () => {
+  it("shows the paid plan as including what the free plan includes", async () => {
+    renderPricing();
+    await waitFor(() => expect(screen.getByTestId("comparison-table")).toBeDefined());
+
+    for (const key of ["basic_generation", "save_patterns"]) {
+      const pro = cell(key, 1);
+      expect(within(pro).queryByLabelText("Included"), key).not.toBeNull();
+      expect(pro.textContent, key).not.toContain("—");
+    }
+  });
+
+  it("gives the paid plan more ticks than the free plan, which is the whole point", async () => {
+    renderPricing();
+    await waitFor(() => expect(screen.getByTestId("comparison-table")).toBeDefined());
+
+    const ticks = (column: number) =>
+      ["basic_generation", "save_patterns", "advanced_generation", "pdf_export"].filter(
+        (key) => within(cell(key, column)).queryByLabelText("Included") !== null,
+      ).length;
+
+    expect(ticks(1)).toBeGreaterThan(ticks(0));
+  });
+
+  it("still lets a higher tier opt out by saying so explicitly", async () => {
+    renderPricing({
+      ...product,
+      offers: [
+        product.offers[0],
+        {
+          ...product.offers[1],
+          features: [
+            ...product.offers[1].features,
+            { key: "save_patterns", name: "Save patterns", value: false },
+          ],
+        },
+      ],
+    });
+    await waitFor(() => expect(screen.getByTestId("comparison-table")).toBeDefined());
+
+    expect(within(cell("save_patterns", 1)).queryByLabelText("Not included")).not.toBeNull();
+  });
+
+  it("never inherits a numeric allowance — a bigger plan must state its own", async () => {
+    renderPricing({
+      ...product,
+      offers: [
+        product.offers[0],
+        {
+          ...product.offers[1],
+          // Pro forgot to declare patterns_per_month.
+          features: product.offers[1].features.filter((f) => f.key !== "patterns_per_month"),
+        },
+      ],
+    });
+    await waitFor(() => expect(screen.getByTestId("comparison-table")).toBeDefined());
+
+    // Claiming Pro is capped at the free plan's 3 would be worse than saying nothing.
+    expect(cell("patterns_per_month", 1).textContent).not.toContain("3");
+  });
+
+  it("leaves the cheapest plan alone — nothing below it to inherit", async () => {
+    renderPricing();
+    await waitFor(() => expect(screen.getByTestId("comparison-table")).toBeDefined());
+
+    for (const key of ["advanced_generation", "pdf_export"]) {
+      expect(within(cell(key, 0)).queryByLabelText("Included"), key).toBeNull();
+    }
+  });
+
+  it("tells the reader on the card that a paid plan builds on the free one", async () => {
+    renderPricing();
+    await waitFor(() => expect(screen.getByTestId("detail-card-crochet-pro")).toBeDefined());
+
+    const proCard = screen.getByTestId("detail-card-crochet-pro");
+    expect(within(proCard).getByText(/everything in free/i)).toBeDefined();
+
+    const freeCard = screen.getByTestId("detail-card-crochet-free");
+    expect(within(freeCard).queryByText(/everything in/i)).toBeNull();
+  });
+});

package/src/components/PricingDetailPage.tsx

@@ -11,6 +11,7 @@
 import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer, OfferFeature } from "../types";
+import { cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
 
 export interface PricingDetailPageProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -83,6 +84,7 @@ export function PricingDetailPage({
             key={offer.id}
             offer={offer}
             onSelect={onSelectOffer}
+            buildsOn={tierBelow(product.offers, offer)?.name ?? null}
           />
         ))}
       </div>
@@ -101,9 +103,11 @@ export function PricingDetailPage({
 interface DetailCardProps {
   offer: ProductOffer;
   onSelect?: (offer: ProductOffer) => void;
+  /** Name of the tier just below this one, when there is one. */
+  buildsOn?: string | null;
 }
 
-function DetailCard({ offer, onSelect }: DetailCardProps) {
+function DetailCard({ offer, onSelect, buildsOn }: DetailCardProps) {
   const isFeatured = offer.isFeatured;
 
   return (
@@ -146,6 +150,12 @@ function DetailCard({ offer, onSelect }: DetailCardProps) {
         </span>
       )}
 
+      {buildsOn && (
+        <p className="text-sm font-semibold text-gray-900 mb-1">
+          Everything in {buildsOn}, plus:
+        </p>
+      )}
+
       <ul className="list-none p-0 m-0 mb-7 flex-1 space-y-0">
         {offer.features.map((feature) => (
           <li
@@ -202,14 +212,9 @@ interface ComparisonTableProps {
 }
 
 function ComparisonTable({ offers, featureKeys, featureNameMap }: ComparisonTableProps) {
-  // Build a lookup: offer slug -> feature key -> feature
-  const featureLookup: Record<string, Record<string, OfferFeature>> = {};
-  for (const offer of offers) {
-    featureLookup[offer.slug] = {};
-    for (const feature of offer.features) {
-      featureLookup[offer.slug][feature.key] = feature;
-    }
-  }
+  // offer slug -> feature key -> feature, with cheaper tiers' capabilities
+  // carried upward so a paid plan never shows a dash where free shows a tick.
+  const featureLookup = cumulativeFeatureLookup(offers);
 
   return (
     <div data-testid="comparison-table" className="overflow-x-auto">

package/src/components/PricingSection.test.tsx

@@ -315,4 +315,24 @@ describe("PricingSection", () => {
       expect(screen.getByText(/unable to load/i)).toBeDefined();
     });
   });
+
+  // The home-page cards sit next to /pricing, which says "Everything in Free,
+  // plus:" on the paid tier. Without it, a card that lists only what the tier
+  // ADDS reads as a plan that lost the cheaper tier's features.
+  it("says a paid tier builds on the one below it", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => expect(screen.getByTestId("pricing-section")).toBeDefined());
+
+    expect(screen.getAllByText(/everything in starter, plus/i).length).toBeGreaterThan(0);
+    // The cheapest tier has nothing below it.
+    const starter = screen.getByTestId("section-card-starter-monthly");
+    expect(starter.textContent).not.toMatch(/everything in/i);
+  });
 });

package/src/components/PricingSection.tsx

@@ -11,6 +11,7 @@
 import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
+import { tierBelow } from "../utils/tiers";
 
 export interface PricingSectionProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -63,6 +64,7 @@ export function PricingSection({
             offer={offer}
             onSelect={onSelectOffer}
             maxFeatures={maxFeatures}
+            buildsOn={tierBelow(product.offers, offer)?.name ?? null}
           />
         ))}
       </div>
@@ -74,9 +76,11 @@ interface SectionCardProps {
   offer: ProductOffer;
   onSelect?: (offer: ProductOffer) => void;
   maxFeatures: number;
+  /** Name of the tier just below this one, when there is one. */
+  buildsOn?: string | null;
 }
 
-function SectionCard({ offer, onSelect, maxFeatures }: SectionCardProps) {
+function SectionCard({ offer, onSelect, maxFeatures, buildsOn }: SectionCardProps) {
   const isFeatured = offer.isFeatured;
   const visibleFeatures = offer.features.slice(0, maxFeatures);
 
@@ -116,6 +120,12 @@ function SectionCard({ offer, onSelect, maxFeatures }: SectionCardProps) {
         </span>
       )}
 
+      {buildsOn && (
+        <p className="text-sm font-semibold text-gray-900 mb-1">
+          Everything in {buildsOn}, plus:
+        </p>
+      )}
+
       <ul className="list-none p-0 m-0 mb-4 flex-1 space-y-0">
         {visibleFeatures.map((feature) => (
           <li

package/src/utils/tiers.ts

@@ -0,0 +1,55 @@
+/**
+ * How plan tiers relate to each other.
+ *
+ * Shared by the pricing cards and the comparison table so both read the offer
+ * data the same way — they disagreed before, and the table was the one that
+ * showed a paid plan as missing what the free plan had.
+ */
+import type { ProductOffer, OfferFeature } from "../types";
+/**
+ * Plans are cumulative: a paid tier includes what the cheaper tier includes.
+ *
+ * Offer data in the wild only lists what a tier ADDS — crochet-pro declares its
+ * advanced features and omits the "Save patterns" that crochet-free declares.
+ * Rendering that omission as "not included" put a dash on the paid plan exactly
+ * where the free plan had a tick, so the expensive plan looked WORSE.
+ *
+ * So a capability (`value === true`) established by a cheaper tier carries up
+ * into dearer ones. Two things deliberately do not carry:
+ *  - an explicit `false`, which is how a tier opts out and stops the carry; and
+ *  - numbers and strings, because an allowance is not a capability. Inheriting
+ *    the free plan's "3 patterns" onto Pro would state something untrue; a tier
+ *    has to declare its own allowance or say nothing.
+ */
+export function cumulativeFeatureLookup(
+  offers: ProductOffer[],
+): Record<string, Record<string, OfferFeature>> {
+  const cheapestFirst = [...offers].sort((a, b) => a.sortOrder - b.sortOrder);
+  const lookup: Record<string, Record<string, OfferFeature>> = {};
+  const carried: Record<string, OfferFeature> = {};
+
+  for (const offer of cheapestFirst) {
+    const own: Record<string, OfferFeature> = {};
+    for (const feature of offer.features) own[feature.key] = feature;
+
+    // Own declarations always win over anything inherited.
+    lookup[offer.slug] = { ...carried, ...own };
+
+    for (const feature of offer.features) {
+      if (feature.value === true) carried[feature.key] = feature;
+      // Anything else ends the run, so a tier that opts out does not have the
+      // capability silently handed back to the tier above it.
+      else delete carried[feature.key];
+    }
+  }
+
+  return lookup;
+}
+
+/** The tier immediately below each offer, for the "Everything in X" line. */
+export function tierBelow(offers: ProductOffer[], offer: ProductOffer): ProductOffer | null {
+  const cheapestFirst = [...offers].sort((a, b) => a.sortOrder - b.sortOrder);
+  const index = cheapestFirst.findIndex((o) => o.slug === offer.slug);
+  const below = index > 0 ? cheapestFirst[index - 1] : null;
+  return below && below.features.length > 0 ? below : null;
+}