@startsimpli/billing 0.1.0

package/src/components/PricingPage.test.tsx

@@ -0,0 +1,278 @@
+/**
+ * TDD tests for PricingPage component.
+ *
+ * PricingPage is the main drop-in component that fetches product data
+ * and renders pricing cards for each active offer.
+ *
+ * Usage: <PricingPage productId="raise-simpli" />
+ */
+
+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 { PricingPage } from "./PricingPage";
+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 },
+      ],
+      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" },
+      ],
+      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" },
+      ],
+      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("PricingPage", () => {
+  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>
+        <PricingPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    expect(screen.getByText(/loading/i)).toBeDefined();
+  });
+
+  it("renders product name and description", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("RaiseSimpli")).toBeDefined();
+    });
+    expect(screen.getByText("VC fundraising platform")).toBeDefined();
+  });
+
+  it("renders a card for each active offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Starter")).toBeDefined();
+    });
+    expect(screen.getByText("Pro")).toBeDefined();
+    expect(screen.getByText("Enterprise")).toBeDefined();
+  });
+
+  it("shows pricing for each offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage 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 the featured offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Pro")).toBeDefined();
+    });
+
+    // Featured offer should have some visual distinction
+    expect(screen.getByText(/most popular/i)).toBeDefined();
+  });
+
+  it("renders CTA button text from offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Start Free")).toBeDefined();
+    });
+    expect(screen.getByText("Start Trial")).toBeDefined();
+    expect(screen.getByText("Contact Sales")).toBeDefined();
+  });
+
+  it("renders features list for each offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      // Each offer has features; "Team seats" appears in all 3 cards
+      expect(screen.getAllByText("Team seats").length).toBe(3);
+    });
+    expect(screen.getAllByText("Projects").length).toBe(3);
+  });
+
+  it("shows trial badge when offer has trial days", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage 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>
+        <PricingPage productId="nonexistent" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/unable to load/i)).toBeDefined();
+    });
+  });
+
+  it("calls onSelectOffer when CTA is clicked", async () => {
+    const onSelect = vi.fn();
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingPage 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" })
+    );
+  });
+});

package/src/components/PricingPage.tsx

@@ -0,0 +1,153 @@
+/**
+ * PricingPage — Drop-in pricing page component.
+ *
+ * Fetches product data by slug and renders pricing cards for each active offer.
+ * Uses standard Tailwind utility classes for styling.
+ *
+ * Usage:
+ *   <PricingPage productId="raise-simpli" onSelectOffer={(offer) => checkout(offer)} />
+ */
+
+import React from "react";
+import { useProduct } from "../hooks/useProduct";
+import type { ProductOffer } from "../types";
+
+export interface PricingPageProps {
+  /** Product slug (e.g., "raise-simpli") */
+  productId: string;
+
+  /** Called when user clicks an offer's CTA button */
+  onSelectOffer?: (offer: ProductOffer) => void;
+}
+
+export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
+  const { product, loading, error } = useProduct(productId);
+
+  if (loading) {
+    return (
+      <div data-testid="pricing-loading" className="text-center py-16 text-gray-500">
+        Loading pricing...
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <div data-testid="pricing-error" className="text-center py-16 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-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>
+
+      <div data-testid="pricing-cards" className="flex flex-wrap justify-center gap-6 items-stretch">
+        {product.offers.map((offer) => (
+          <PricingCard
+            key={offer.id}
+            offer={offer}
+            onSelect={onSelectOffer}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface PricingCardProps {
+  offer: ProductOffer;
+  onSelect?: (offer: ProductOffer) => void;
+}
+
+function PricingCard({ offer, onSelect }: PricingCardProps) {
+  const isFeatured = offer.is_featured;
+
+  return (
+    <div
+      data-testid={`pricing-card-${offer.slug}`}
+      data-featured={isFeatured || undefined}
+      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 scale-[1.03]"
+          : "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">
+          Most Popular
+        </span>
+      )}
+
+      <h2 className="text-xl font-bold text-gray-900 mb-4">{offer.name}</h2>
+
+      <div className="mb-2">
+        {offer.is_free ? (
+          <span className="text-4xl font-extrabold text-gray-900">Free</span>
+        ) : (
+          <span>
+            <span className="text-4xl font-extrabold text-gray-900">
+              ${Math.floor(parseFloat(offer.unit_price) || 0)}
+            </span>
+            <span className="text-base 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-sm font-semibold px-3 py-1 rounded-lg mb-5 w-fit"
+        >
+          {offer.trial_days}-day free trial
+        </span>
+      )}
+
+      <ul className="list-none p-0 m-0 mb-7 flex-1 space-y-0">
+        {offer.features.map((feature) => (
+          <li
+            key={feature.key}
+            className="flex items-center gap-2.5 py-2.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
+          >
+            <svg className="w-4 h-4 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={`cta-${offer.slug}`}
+        className={`
+          w-full py-3.5 px-6 text-base font-bold rounded-xl 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>
+  );
+}