@startsimpli/billing 0.1.0

package/src/components/PricingSection.test.tsx

@@ -0,0 +1,319 @@
+/**
+ * TDD tests for PricingSection component.
+ *
+ * PricingSection is a compact horizontal pricing section for embedding in landing pages.
+ * It renders pricing cards in a horizontal row with limited feature display.
+ *
+ * Usage: <PricingSection productId="raise-simpli" maxFeatures={3} onSelectOffer={handleSelect} />
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { PricingSection } from "./PricingSection";
+import type { BillingProduct } from "../types";
+
+const mockProduct: BillingProduct = {
+  id: "prod-1",
+  slug: "raise-simpli",
+  name: "RaiseSimpli",
+  description: "VC fundraising platform",
+  offers: [
+    {
+      id: "offer-1",
+      name: "Starter",
+      slug: "starter-monthly",
+      unit_price: "0.00",
+      currency: "USD",
+      pricing_model: "flat",
+      interval_unit: "month",
+      interval_count: 1,
+      interval_display: "per month",
+      is_recurring: true,
+      is_free: true,
+      features: [
+        { key: "seats", name: "Team seats", value: 1, limit: 1 },
+        { key: "projects", name: "Projects", value: 3, limit: 3 },
+        { key: "storage", name: "Storage", value: "1GB" },
+        { key: "support", name: "Support", value: "Email" },
+        { key: "api", name: "API Access", value: "Limited" },
+      ],
+      is_active: true,
+      is_featured: false,
+      trial_days: 0,
+      sort_order: 0,
+      cta_text: "Start Free",
+    },
+    {
+      id: "offer-2",
+      name: "Pro",
+      slug: "pro-monthly",
+      unit_price: "49.00",
+      currency: "USD",
+      pricing_model: "flat",
+      interval_unit: "month",
+      interval_count: 1,
+      interval_display: "per month",
+      is_recurring: true,
+      is_free: false,
+      features: [
+        { key: "seats", name: "Team seats", value: 5, limit: 5 },
+        { key: "projects", name: "Projects", value: "Unlimited" },
+        { key: "storage", name: "Storage", value: "100GB" },
+        { key: "support", name: "Support", value: "Priority" },
+        { key: "api", name: "API Access", value: "Full" },
+      ],
+      is_active: true,
+      is_featured: true,
+      trial_days: 14,
+      sort_order: 1,
+      cta_text: "Start Trial",
+    },
+    {
+      id: "offer-3",
+      name: "Enterprise",
+      slug: "enterprise-monthly",
+      unit_price: "199.00",
+      currency: "USD",
+      pricing_model: "per_seat",
+      interval_unit: "month",
+      interval_count: 1,
+      interval_display: "per month",
+      is_recurring: true,
+      is_free: false,
+      features: [
+        { key: "seats", name: "Team seats", value: "Unlimited" },
+        { key: "projects", name: "Projects", value: "Unlimited" },
+        { key: "storage", name: "Storage", value: "Unlimited" },
+        { key: "support", name: "Support", value: "24/7" },
+        { key: "api", name: "API Access", value: "Full" },
+        { key: "sla", name: "SLA", value: "99.9%" },
+      ],
+      is_active: true,
+      is_featured: false,
+      trial_days: 0,
+      sort_order: 2,
+      cta_text: "Contact Sales",
+    },
+  ],
+};
+
+function createWrapper(fetchImpl: typeof fetch) {
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <BillingProvider
+        apiBaseUrl="https://api.test.com/api/v1"
+        authToken="tok_123"
+        fetcher={fetchImpl}
+      >
+        {children}
+      </BillingProvider>
+    );
+  };
+}
+
+function mockFetchSuccess() {
+  return vi.fn().mockResolvedValue({
+    ok: true,
+    json: () => Promise.resolve(mockProduct),
+  }) as unknown as typeof fetch;
+}
+
+describe("PricingSection", () => {
+  it("renders loading state initially", () => {
+    // Never resolves — stays in loading
+    const fetcher = vi.fn().mockReturnValue(
+      new Promise(() => {})
+    ) as unknown as typeof fetch;
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    expect(screen.getByText(/loading/i)).toBeDefined();
+  });
+
+  it("renders section with all offers", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pricing-section")).toBeDefined();
+    });
+    expect(screen.getByTestId("section-card-starter-monthly")).toBeDefined();
+    expect(screen.getByTestId("section-card-pro-monthly")).toBeDefined();
+    expect(screen.getByTestId("section-card-enterprise-monthly")).toBeDefined();
+  });
+
+  it("shows plan names and prices", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Starter")).toBeDefined();
+    });
+    expect(screen.getByText("Pro")).toBeDefined();
+    expect(screen.getByText("Enterprise")).toBeDefined();
+  });
+
+  it("shows Free for free offers and $X/interval for paid", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByText(/free/i).length).toBeGreaterThan(0);
+    });
+    expect(screen.getByText(/\$49/)).toBeDefined();
+    expect(screen.getByText(/\$199/)).toBeDefined();
+  });
+
+  it("highlights featured offer with data-featured attribute", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    const { container } = render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Pro")).toBeDefined();
+    });
+
+    const proCard = container.querySelector('[data-testid="section-card-pro-monthly"]');
+    expect(proCard).toBeDefined();
+    expect(proCard?.getAttribute("data-featured")).toBe("true");
+  });
+
+  it("shows limited features when maxFeatures prop is set", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" maxFeatures={2} />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Starter")).toBeDefined();
+    });
+
+    // Starter has 5 features, but should only show 2
+    // We should see "Team seats" and "Projects" (first 2), but not "Storage"
+    expect(screen.getAllByText("Team seats").length).toBe(3); // All 3 cards
+    expect(screen.getAllByText("Projects").length).toBe(3); // All 3 cards
+    // 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
+  });
+
+  it("shows all features when maxFeatures not set (default 4)", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Starter")).toBeDefined();
+    });
+
+    // With default maxFeatures=4, should show first 4 features
+    expect(screen.getAllByText("Team seats").length).toBe(3);
+    expect(screen.getAllByText("Projects").length).toBe(3);
+    expect(screen.getAllByText("Storage").length).toBe(3);
+    expect(screen.getAllByText("Support").length).toBe(3);
+  });
+
+  it("shows CTA button text from offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("section-cta-starter-monthly")).toBeDefined();
+    });
+
+    expect(screen.getByText("Start Free")).toBeDefined();
+    expect(screen.getByText("Start Trial")).toBeDefined();
+    expect(screen.getByText("Contact Sales")).toBeDefined();
+  });
+
+  it("calls onSelectOffer when CTA clicked", async () => {
+    const onSelect = vi.fn();
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" onSelectOffer={onSelect} />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Start Free")).toBeDefined();
+    });
+
+    await userEvent.click(screen.getByText("Start Free"));
+    expect(onSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ slug: "starter-monthly" })
+    );
+  });
+
+  it("shows trial badge when offer has trial days", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingSection productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/14.day/i)).toBeDefined();
+    });
+  });
+
+  it("renders error state", async () => {
+    const fetcher = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+    }) as unknown as typeof fetch;
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <PricingSection productId="nonexistent" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/unable to load/i)).toBeDefined();
+    });
+  });
+});

package/src/components/PricingSection.tsx

@@ -0,0 +1,154 @@
+/**
+ * PricingSection — Compact horizontal pricing section for embedding in landing pages.
+ *
+ * Renders pricing cards in a horizontal row with limited feature display.
+ * Uses standard Tailwind utility classes for styling.
+ *
+ * Usage:
+ *   <PricingSection productId="raise-simpli" maxFeatures={3} onSelectOffer={handleSelect} />
+ */
+
+import React from "react";
+import { useProduct } from "../hooks/useProduct";
+import type { ProductOffer } from "../types";
+
+export interface PricingSectionProps {
+  /** Product slug (e.g., "raise-simpli") */
+  productId: string;
+
+  /** Called when user clicks an offer's CTA button */
+  onSelectOffer?: (offer: ProductOffer) => void;
+
+  /** Maximum number of features to display per card (default 4) */
+  maxFeatures?: number;
+}
+
+export function PricingSection({
+  productId,
+  onSelectOffer,
+  maxFeatures = 4,
+}: PricingSectionProps) {
+  const { product, loading, error } = useProduct(productId);
+
+  if (loading) {
+    return (
+      <div className="text-center py-10 text-gray-500">
+        Loading pricing...
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <div className="text-center py-10 text-red-600">
+        Unable to load pricing. Please try again.
+      </div>
+    );
+  }
+
+  if (product.offers.length === 0) {
+    return (
+      <div className="text-center py-16 text-gray-500">
+        No pricing plans available at this time.
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="pricing-section" className="w-full px-4 py-8">
+      <div className="flex flex-row flex-wrap justify-center gap-4 items-stretch">
+        {product.offers.map((offer) => (
+          <SectionCard
+            key={offer.id}
+            offer={offer}
+            onSelect={onSelectOffer}
+            maxFeatures={maxFeatures}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface SectionCardProps {
+  offer: ProductOffer;
+  onSelect?: (offer: ProductOffer) => void;
+  maxFeatures: number;
+}
+
+function SectionCard({ offer, onSelect, maxFeatures }: SectionCardProps) {
+  const isFeatured = offer.is_featured;
+  const visibleFeatures = offer.features.slice(0, maxFeatures);
+
+  return (
+    <div
+      data-testid={`section-card-${offer.slug}`}
+      data-featured={isFeatured ? "true" : undefined}
+      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 border-gray-200 bg-white shadow-sm"
+        }
+      `}
+    >
+      <h3 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h3>
+
+      <div className="mb-2">
+        {offer.is_free ? (
+          <span className="text-2xl font-extrabold text-gray-900">Free</span>
+        ) : (
+          <span>
+            <span className="text-2xl font-extrabold text-gray-900">
+              ${Math.floor(parseFloat(offer.unit_price) || 0)}
+            </span>
+            <span className="text-sm text-gray-500 ml-1"> {offer.interval_display}</span>
+          </span>
+        )}
+      </div>
+
+      {offer.trial_days > 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.trial_days}-day free trial
+        </span>
+      )}
+
+      <ul className="list-none p-0 m-0 mb-4 flex-1 space-y-0">
+        {visibleFeatures.map((feature) => (
+          <li
+            key={feature.key}
+            className="flex items-center gap-2 py-1.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-green-500 shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={3}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            <span>{feature.name}</span>
+          </li>
+        ))}
+      </ul>
+
+      <button
+        onClick={() => onSelect?.(offer)}
+        data-testid={`section-cta-${offer.slug}`}
+        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"
+          }
+        `}
+      >
+        {offer.cta_text}
+      </button>
+    </div>
+  );
+}