@startsimpli/billing 0.4.39 → 0.4.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.39",
+  "version": "0.4.42",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "license": "MIT",
   "homepage": "https://startsimpli.com",
@@ -35,8 +35,8 @@
     "next": ">=14.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "^0.5.77",
-    "@startsimpli/ui": "^0.4.178"
+    "@startsimpli/ui": "^0.4.179",
+    "@startsimpli/api": "^0.5.77"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {
@@ -62,7 +62,7 @@
     "typescript": "^6.0.3",
     "vitest": "^4.1.5",
     "@startsimpli/api": "0.5.77",
-    "@startsimpli/ui": "0.4.178"
+    "@startsimpli/ui": "0.4.179"
   },
   "keywords": [
     "billing",

package/src/components/PricingDetailPage.tsx

@@ -14,6 +14,7 @@ import type { PlanChangePreview, ProductOffer, OfferFeature } from "../types";
 import { cardFeatures, cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
 import { resolveFeatureCopy, withBillingCopy, type BillingCopy, type BillingCopyInput, type FeatureCopy } from "../copy";
 import { FeatureLabel } from "./FeatureLabel";
+import { PricingHeader, type PricingHeadingLevel } from "./PricingHeader";
 import {
   isPayingSubscription,
   isUnlistedOffer,
@@ -57,6 +58,12 @@ export interface PricingDetailPageProps {
   /** Line under the heading; defaults to the product description. */
   subtitle?: React.ReactNode;
 
+  /** Heading element for the title (default "h1"); use "h2" when the host page has its own h1. */
+  headingLevel?: PricingHeadingLevel;
+
+  /** Render no title/subtitle block at all (default false). */
+  hideHeader?: boolean;
+
   /** Wording overrides (trial phrasing, buttons, headings…); defaults are the original strings. */
   copy?: BillingCopyInput;
 
@@ -72,6 +79,8 @@ export function PricingDetailPage({
   busy: hostBusy = false,
   title,
   subtitle,
+  headingLevel = "h1",
+  hideHeader = false,
   copy: copyOverride,
   featureCopy,
 }: PricingDetailPageProps) {
@@ -174,14 +183,7 @@ export function PricingDetailPage({
 
   return (
     <div data-testid="pricing-detail" className="max-w-6xl mx-auto px-6 py-12">
-      <div className="text-center mb-12">
-        <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 mb-3">
-          {title ?? product.name}
-        </h1>
-        <p className="text-lg text-gray-500 max-w-xl mx-auto">
-          {subtitle ?? product.description}
-        </p>
-      </div>
+      {!hideHeader && <PricingHeader title={title ?? product.name} subtitle={subtitle ?? product.description} headingLevel={headingLevel} />}
 
       {onUnlistedPlan && currentOffer && (
         <div

package/src/components/PricingHeader.header.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { PricingDetailPage } from "./PricingDetailPage";
+import { PricingPage } from "./PricingPage";
+
+const product = {
+  id: "p", slug: "prod", name: "Prod Name", description: "Prod description",
+  offers: [{
+    id: "o1", name: "Free", slug: "free", unitPrice: "0.00", currency: "USD", pricingModel: "flat",
+    intervalUnit: "month", intervalCount: 1, intervalDisplay: "per month", isRecurring: true, isFree: true,
+    features: [], isActive: true, isFeatured: false, trialDays: 0, sortOrder: 0, ctaText: "Start",
+  }],
+};
+const fetcher = vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(product) }) as unknown as typeof fetch;
+const wrap = (el: React.ReactElement) => <BillingProvider apiBaseUrl="https://api.test/api/v1" fetcher={fetcher}>{el}</BillingProvider>;
+
+const pages = [
+  ["PricingDetailPage", "pricing-detail", (p: object) => <PricingDetailPage productId="prod" {...p} />],
+  ["PricingPage", "pricing-page", (p: object) => <PricingPage productId="prod" onSelectOffer={() => {}} {...p} />],
+] as const;
+
+describe.each(pages)("%s header", (_n, testId, make) => {
+  const mount = async (props = {}) => {
+    const r = render(wrap(make(props)));
+    await waitFor(() => expect(screen.getByTestId(testId)).toBeDefined());
+    return r;
+  };
+  it("draws the h1 title and description by default", async () => {
+    await mount();
+    const h1 = screen.getByRole("heading", { level: 1 });
+    expect(h1.textContent).toBe("Prod Name");
+    expect(h1.className).toContain("text-4xl");
+    expect(screen.getByText("Prod description")).toBeTruthy();
+  });
+  it("renders the title as h2 with headingLevel='h2' and no h1", async () => {
+    await mount({ headingLevel: "h2" });
+    expect(screen.queryByRole("heading", { level: 1 })).toBeNull();
+    expect(screen.getByRole("heading", { level: 2, name: "Prod Name" }).className).toContain("text-4xl");
+  });
+  it("renders h3 with headingLevel='h3'", async () => {
+    await mount({ headingLevel: "h3" });
+    expect(screen.getByRole("heading", { level: 3, name: "Prod Name" })).toBeTruthy();
+  });
+  it("removes the whole header with hideHeader", async () => {
+    await mount({ hideHeader: true });
+    expect(screen.queryByText("Prod Name")).toBeNull();
+    expect(screen.queryByText("Prod description")).toBeNull();
+    expect(screen.queryByRole("heading", { level: 1 })).toBeNull();
+  });
+});

package/src/components/PricingHeader.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export type PricingHeadingLevel = "h1" | "h2" | "h3";
+
+/** Title and subtitle block at the top of a pricing page. */
+export function PricingHeader({
+  title, subtitle, headingLevel = "h1",
+}: { title: React.ReactNode; subtitle: React.ReactNode; headingLevel?: PricingHeadingLevel }) {
+  const Heading = headingLevel;
+  return (
+    <div className="text-center mb-12">
+      <Heading className="text-4xl font-extrabold tracking-tight text-gray-900 mb-3">{title}</Heading>
+      <p className="text-lg text-gray-500 max-w-xl mx-auto">{subtitle}</p>
+    </div>
+  );
+}

package/src/components/PricingPage.tsx

@@ -14,6 +14,7 @@ import type { ProductOffer } from "../types";
 import { FeatureIcon } from "./FeatureIcon";
 import { withBillingCopy, type BillingCopy, type BillingCopyInput, type FeatureCopy } from "../copy";
 import { FeatureLabel } from "./FeatureLabel";
+import { PricingHeader, type PricingHeadingLevel } from "./PricingHeader";
 import { resolveCurrentOfferId, trialLabel, type CurrentPlanState } from "../utils/plan";
 import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
@@ -28,6 +29,12 @@ export interface PricingPageProps {
    * Omit on signed-out pages. crochet_patterns-34n7. */
   currentPlan?: CurrentPlanState | null;
 
+  /** Heading element for the title (default "h1"); use "h2" when the host page has its own h1. */
+  headingLevel?: PricingHeadingLevel;
+
+  /** Render no title/subtitle block at all (default false). */
+  hideHeader?: boolean;
+
   /** Wording overrides (trial phrasing, buttons, headings…); defaults are the original strings. */
   copy?: BillingCopyInput;
 
@@ -35,7 +42,7 @@ export interface PricingPageProps {
   featureCopy?: FeatureCopy;
 }
 
-export function PricingPage({ productId, onSelectOffer, currentPlan, copy: copyOverride, featureCopy }: PricingPageProps) {
+export function PricingPage({ productId, onSelectOffer, currentPlan, copy: copyOverride, featureCopy, headingLevel = "h1", hideHeader = false }: PricingPageProps) {
   const copy = withBillingCopy(copyOverride);
   const { product, loading, error } = useProduct(productId);
   const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
@@ -71,14 +78,7 @@ export function PricingPage({ productId, onSelectOffer, currentPlan, copy: copyO
 
   return (
     <div data-testid="pricing-page" className="max-w-5xl mx-auto px-6 py-12">
-      <div className="text-center mb-12">
-        <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 mb-3">
-          {product.name}
-        </h1>
-        <p className="text-lg text-gray-500 max-w-xl mx-auto">
-          {product.description}
-        </p>
-      </div>
+      {!hideHeader && <PricingHeader title={product.name} subtitle={product.description} headingLevel={headingLevel} />}
 
       {hasChoice && (
         <div className="mb-10">

package/src/credits/CreditPackCard.align.test.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { CreditPackCard, CreditPackGrid } from "./index";
+import { defaultCreditsCopy } from "./copy";
+
+const single = { id: "p1", slug: "1", name: "1", credits: 1, price: "4.99", currency: "usd", compareAt: "", featured: false };
+const five = { id: "p5", slug: "5", name: "5", credits: 5, price: "19.99", currency: "usd", compareAt: "24.95", featured: false, savingsPercent: 20, savingsAmount: 496 };
+
+describe("pack card alignment", () => {
+  it("is a full-height flex column and pushes Buy to the bottom", () => {
+    render(<ul><CreditPackCard offer={single as never} copy={defaultCreditsCopy} buying={null} onBuy={vi.fn()} /></ul>);
+    const li = screen.getByRole("listitem");
+    expect(li.className).toMatch(/\bflex\b/);
+    expect(li.className).toContain("flex-col");
+    expect(li.className).toContain("h-full");
+    const wrap = screen.getByRole("button").parentElement as HTMLElement;
+    expect(wrap.className).toContain("mt-auto");
+  });
+
+  it("reserves the same savings-line slot on a single card as on a multi card", () => {
+    const { unmount } = render(<ul><CreditPackCard offer={single as never} copy={defaultCreditsCopy} buying={null} onBuy={vi.fn()} /></ul>);
+    const slotS = screen.getByTestId("savings-slot");
+    expect(slotS.textContent).toBe("");
+    expect(slotS.className).toContain("min-h-[1.25rem]");
+    unmount();
+    render(<ul><CreditPackCard offer={five as never} copy={defaultCreditsCopy} buying={null} onBuy={vi.fn()} /></ul>);
+    const slotM = screen.getByTestId("savings-slot");
+    expect(slotM.textContent).toBe("Save $4.96");
+    expect(slotM.className).toContain("min-h-[1.25rem]");
+    expect(screen.getByTestId("per-pattern-slot").className).toContain("min-h-[1.25rem]");
+  });
+
+  it("grid stretches its items", () => {
+    render(<CreditPackGrid offers={[single, five] as never} onBuy={vi.fn()} />);
+    const ul = screen.getAllByRole("listitem")[0].parentElement as HTMLElement;
+    expect(ul.className).toContain("items-stretch");
+    expect(ul.className).not.toContain("items-start");
+  });
+});

package/src/credits/CreditPackCard.tsx

@@ -30,7 +30,7 @@ export function CreditPackCard({ offer, copy, buying, onBuy }: CreditPackCardPro
   const name = copy.packName(offer.credits);
   const opening = buying === offer.id;
   return (
-    <li className={`relative flex flex-col overflow-hidden rounded-xl border p-4 ${offer.featured ? "border-primary bg-primary/5" : "border-border bg-card"}`}>
+    <li className={`relative flex h-full flex-col overflow-hidden rounded-xl border p-4 ${offer.featured ? "border-primary bg-primary/5" : "border-border bg-card"}`}>
       {showSash && (
         <span
           data-testid="savings-sash"
@@ -39,7 +39,7 @@ export function CreditPackCard({ offer, copy, buying, onBuy }: CreditPackCardPro
           {copy.savingsSash(savings.percent as number)}
         </span>
       )}
-      <div className={`flex flex-wrap items-center gap-2 ${showSash ? "pr-14" : ""}`}>
+      <div className={`flex min-h-[1.75rem] flex-wrap items-center gap-2 ${showSash ? "pr-14" : ""}`}>
         <p className="text-base font-semibold text-foreground">{name}</p>
         {offer.featured && (
           <span className="rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground">{copy.featured}</span>
@@ -53,15 +53,16 @@ export function CreditPackCard({ offer, copy, buying, onBuy }: CreditPackCardPro
           </s>
         )}
       </p>
-      {multi && savings.amountCents !== null && (
-        <p className="mt-1 text-sm font-medium text-green-700">{copy.savingsLine(formatSavingsAmount(savings.amountCents, offer.currency))}</p>
-      )}
-      <p className="mt-1 min-h-[1.25rem] text-sm text-muted-foreground">
-        {!multi && savings.percent !== null && <span className="font-medium text-green-700">{copy.save(savings.percent)}</span>}
+      <p data-testid="savings-slot" className="mt-1 min-h-[1.25rem] text-sm font-medium text-green-700">
+        {multi && savings.amountCents !== null && copy.savingsLine(formatSavingsAmount(savings.amountCents, offer.currency))}
+        {!multi && savings.percent !== null && copy.save(savings.percent)}
+      </p>
+      <p data-testid="per-pattern-slot" className="mt-1 min-h-[1.25rem] text-sm text-muted-foreground">
         {multi && copy.perCredit(formatPackPrice(savings.perPattern, offer.currency))}
       </p>
+      <div className="mt-auto pt-4">
       <Button
-        className="mt-4 w-full"
+        className="w-full"
         variant={offer.featured ? "default" : "outline"}
         disabled={buying !== null}
         onClick={() => onBuy(offer.id)}
@@ -69,6 +70,7 @@ export function CreditPackCard({ offer, copy, buying, onBuy }: CreditPackCardPro
       >
         {opening ? copy.buying : copy.buy(name)}
       </Button>
+      </div>
     </li>
   );
 }

package/src/credits/CreditPackGrid.tsx

@@ -17,7 +17,7 @@ export function CreditPackGrid({ offers, onBuy, buying = null, copy: copyIn, cla
   if (offers.length === 0) return null;
   const copy = withCreditsCopy(copyIn);
   return (
-    <ul className={className ?? "grid gap-3 sm:grid-cols-2 lg:grid-cols-3"}>
+    <ul className={className ?? "grid items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3"}>
       {offers.map((offer) => (
         <CreditPackCard key={offer.id} offer={offer} copy={copy} buying={buying} onBuy={onBuy} />
       ))}

package/src/credits/CreditsPanel.tsx

@@ -45,7 +45,7 @@ export function CreditsPanel({ credits, copy: copyIn, headingId = "credits-headi
           {credits.error && (
             <p role="alert" className="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">{credits.error}</p>
           )}
-          <CreditPackGrid className="mb-2 grid gap-3 sm:grid-cols-2 lg:grid-cols-3" offers={credits.offers} copy={copy} buying={credits.buying} onBuy={(id) => void credits.buy(id)} />
+          <CreditPackGrid className="mb-2 grid items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3" offers={credits.offers} copy={copy} buying={credits.buying} onBuy={(id) => void credits.buy(id)} />
           <p className="mb-6 text-xs text-muted-foreground">{copy.secure}</p>
           <h4 className="mb-2 text-sm font-semibold text-foreground">{copy.historyTitle}</h4>
           <CreditHistoryList history={credits.history} copy={copy} />