@startsimpli/billing 0.1.0

package/src/components/PricingDetailPage.test.tsx

@@ -0,0 +1,404 @@
+/**
+ * TDD tests for PricingDetailPage component.
+ *
+ * PricingDetailPage is a full dedicated pricing page with detailed plan comparison
+ * and feature table. It renders all offer cards plus a comparison table showing
+ * features across all plans.
+ *
+ * Usage: <PricingDetailPage productId="raise-simpli" showComparison={true} />
+ */
+
+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 { PricingDetailPage } from "./PricingDetailPage";
+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, category: "core" },
+        { key: "projects", name: "Projects", value: 3, limit: 3, category: "core" },
+        { key: "email_support", name: "Email support", value: true, category: "support" },
+        { key: "priority_support", name: "Priority support", value: false, category: "support" },
+      ],
+      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, category: "core" },
+        { key: "projects", name: "Projects", value: "Unlimited", category: "core" },
+        { key: "email_support", name: "Email support", value: true, category: "support" },
+        { key: "priority_support", name: "Priority support", value: true, category: "support" },
+      ],
+      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", category: "core" },
+        { key: "projects", name: "Projects", value: "Unlimited", category: "core" },
+        { key: "email_support", name: "Email support", value: true, category: "support" },
+        { key: "priority_support", name: "Priority support", value: true, category: "support" },
+      ],
+      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("PricingDetailPage", () => {
+  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>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    expect(screen.getByText(/loading/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>
+        <PricingDetailPage productId="nonexistent" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/unable to load/i)).toBeDefined();
+    });
+  });
+
+  it("renders product name and description", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("RaiseSimpli")).toBeDefined();
+    });
+    expect(screen.getByText("VC fundraising platform")).toBeDefined();
+  });
+
+  it("renders all offer cards with names and prices", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByText("Starter").length).toBeGreaterThan(0);
+    });
+    expect(screen.getAllByText("Pro").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Enterprise").length).toBeGreaterThan(0);
+    expect(screen.getByText(/\$49/)).toBeDefined();
+    expect(screen.getByText(/\$199/)).toBeDefined();
+  });
+
+  it('shows "Free" for free offers', async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByText(/free/i).length).toBeGreaterThan(0);
+    });
+  });
+
+  it("highlights featured offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByText("Pro").length).toBeGreaterThan(0);
+    });
+
+    // Featured offer should have visual distinction
+    expect(screen.getByText(/most popular/i)).toBeDefined();
+  });
+
+  it("shows trial badge for offers with trial days", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/14.day/i)).toBeDefined();
+    });
+  });
+
+  it("renders CTA buttons with correct text", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage 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("calls onSelectOffer when CTA clicked", async () => {
+    const onSelect = vi.fn();
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage 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("renders feature comparison table", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("comparison-table")).toBeDefined();
+    });
+  });
+
+  it("comparison table has a row for each unique feature key", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("comparison-row-seats")).toBeDefined();
+    });
+    expect(screen.getByTestId("comparison-row-projects")).toBeDefined();
+    expect(screen.getByTestId("comparison-row-email_support")).toBeDefined();
+    expect(screen.getByTestId("comparison-row-priority_support")).toBeDefined();
+  });
+
+  it("comparison table shows values (checkmarks for true, X for false, text for strings)", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      // Check for checkmarks (true values) - email support in all plans
+      const emailSupportRow = screen.getByTestId("comparison-row-email_support");
+      expect(emailSupportRow).toBeDefined();
+    });
+
+    // Priority support: false in Starter, true in Pro and Enterprise
+    const prioritySupportRow = screen.getByTestId("comparison-row-priority_support");
+    expect(prioritySupportRow).toBeDefined();
+
+    // Numeric and string values - "Unlimited" text appears
+    expect(screen.getAllByText("Unlimited").length).toBeGreaterThan(0);
+  });
+
+  it("hides comparison table when showComparison=false", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" showComparison={false} />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("RaiseSimpli")).toBeDefined();
+    });
+
+    // Comparison table should not be rendered
+    expect(screen.queryByTestId("comparison-table")).toBeNull();
+  });
+
+  it("shows all features in cards (not limited like PricingSection)", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      // All features should appear in the cards
+      expect(screen.getAllByText("Team seats").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Projects").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Email support").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Priority support").length).toBeGreaterThan(0);
+    });
+  });
+
+  it("renders detail card test IDs for each offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("detail-card-starter-monthly")).toBeDefined();
+    });
+    expect(screen.getByTestId("detail-card-pro-monthly")).toBeDefined();
+    expect(screen.getByTestId("detail-card-enterprise-monthly")).toBeDefined();
+  });
+
+  it("renders detail CTA test IDs for each offer", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("detail-cta-starter-monthly")).toBeDefined();
+    });
+    expect(screen.getByTestId("detail-cta-pro-monthly")).toBeDefined();
+    expect(screen.getByTestId("detail-cta-enterprise-monthly")).toBeDefined();
+  });
+
+  it("renders main container with pricing-detail test ID", async () => {
+    const Wrapper = createWrapper(mockFetchSuccess());
+
+    render(
+      <Wrapper>
+        <PricingDetailPage productId="raise-simpli" />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pricing-detail")).toBeDefined();
+    });
+  });
+});

package/src/components/PricingDetailPage.tsx

@@ -0,0 +1,295 @@
+/**
+ * PricingDetailPage — Full dedicated pricing page with plan comparison and feature table.
+ *
+ * Renders all offer cards with complete feature lists, plus a comparison table
+ * showing features across all plans.
+ *
+ * Usage:
+ *   <PricingDetailPage productId="raise-simpli" showComparison={true} />
+ */
+
+import React from "react";
+import { useProduct } from "../hooks/useProduct";
+import type { ProductOffer, OfferFeature } from "../types";
+
+export interface PricingDetailPageProps {
+  /** Product slug (e.g., "raise-simpli") */
+  productId: string;
+
+  /** Called when user clicks an offer's CTA button */
+  onSelectOffer?: (offer: ProductOffer) => void;
+
+  /** Whether to show the feature comparison table (defaults to true) */
+  showComparison?: boolean;
+}
+
+export function PricingDetailPage({
+  productId,
+  onSelectOffer,
+  showComparison = true,
+}: PricingDetailPageProps) {
+  const { product, loading, error } = useProduct(productId);
+
+  if (loading) {
+    return (
+      <div className="text-center py-16 text-gray-500">
+        Loading pricing...
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <div 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>
+    );
+  }
+
+  // Extract all unique feature keys across all offers (preserving order)
+  const allFeatureKeys: string[] = [];
+  const featureNameMap: Record<string, string> = {};
+  for (const offer of product.offers) {
+    for (const feature of offer.features) {
+      if (!allFeatureKeys.includes(feature.key)) {
+        allFeatureKeys.push(feature.key);
+        featureNameMap[feature.key] = feature.name;
+      }
+    }
+  }
+
+  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">
+          {product.name}
+        </h1>
+        <p className="text-lg text-gray-500 max-w-xl mx-auto">
+          {product.description}
+        </p>
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-6 items-stretch mb-16">
+        {product.offers.map((offer) => (
+          <DetailCard
+            key={offer.id}
+            offer={offer}
+            onSelect={onSelectOffer}
+          />
+        ))}
+      </div>
+
+      {showComparison && (
+        <ComparisonTable
+          offers={product.offers}
+          featureKeys={allFeatureKeys}
+          featureNameMap={featureNameMap}
+        />
+      )}
+    </div>
+  );
+}
+
+interface DetailCardProps {
+  offer: ProductOffer;
+  onSelect?: (offer: ProductOffer) => void;
+}
+
+function DetailCard({ offer, onSelect }: DetailCardProps) {
+  const isFeatured = offer.is_featured;
+
+  return (
+    <div
+      data-testid={`detail-card-${offer.slug}`}
+      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 aria-label="Free">
+            <span aria-hidden="true" className="text-4xl font-extrabold text-gray-900">Free</span>
+          </span>
+        ) : (
+          <span aria-label={`${Math.floor(parseFloat(offer.unit_price) || 0)} dollars ${offer.interval_display}`}>
+            <span aria-hidden="true" className="text-4xl font-extrabold text-gray-900">
+              ${Math.floor(parseFloat(offer.unit_price) || 0)}
+            </span>
+            <span aria-hidden="true" className="text-base text-gray-500 ml-1"> {offer.interval_display}</span>
+          </span>
+        )}
+      </div>
+
+      {offer.trial_days > 0 && (
+        <span 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"
+          >
+            <FeatureIcon value={feature.value} />
+            <span>{feature.name}</span>
+            {typeof feature.value !== "boolean" && feature.value !== null && feature.value !== undefined && (
+              <span className="ml-auto text-gray-900 font-medium">
+                {feature.value === -1 ? "Unlimited" : String(feature.value)}
+              </span>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <button
+        onClick={() => onSelect?.(offer)}
+        data-testid={`detail-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>
+  );
+}
+
+function FeatureIcon({ value }: { value: unknown }) {
+  if (value === false) {
+    return (
+      <svg role="img" aria-label="Not included" className="w-4 h-4 text-gray-300 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    );
+  }
+  return (
+    <svg role="img" aria-label="Included" 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>
+  );
+}
+
+interface ComparisonTableProps {
+  offers: ProductOffer[];
+  featureKeys: string[];
+  featureNameMap: Record<string, string>;
+}
+
+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;
+    }
+  }
+
+  return (
+    <div data-testid="comparison-table" className="overflow-x-auto">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="border-b-2 border-gray-200">
+            <th scope="col" className="text-left py-4 px-4 text-sm font-semibold text-gray-500 uppercase tracking-wider">
+              Feature
+            </th>
+            {offers.map((offer) => (
+              <th
+                key={offer.slug}
+                scope="col"
+                aria-label={offer.name}
+                className="text-center py-4 px-4 text-sm font-semibold text-gray-900"
+              >
+                <span aria-hidden="true">{offer.name}</span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {featureKeys.map((key) => (
+            <tr
+              key={key}
+              data-testid={`comparison-row-${key}`}
+              className="border-b border-gray-100"
+            >
+              <td scope="row" className="py-3 px-4 text-sm text-gray-700">
+                {featureNameMap[key]}
+              </td>
+              {offers.map((offer) => {
+                const feature = featureLookup[offer.slug]?.[key];
+                return (
+                  <td
+                    key={offer.slug}
+                    className="text-center py-3 px-4 text-sm"
+                  >
+                    <ComparisonCellValue feature={feature} />
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function ComparisonCellValue({ feature }: { feature?: OfferFeature }) {
+  if (!feature) {
+    return <span className="text-gray-300">&mdash;</span>;
+  }
+
+  const { value } = feature;
+
+  if (value === true) {
+    return (
+      <svg role="img" aria-label="Included" className="w-5 h-5 text-green-500 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    );
+  }
+
+  if (value === false) {
+    return (
+      <svg role="img" aria-label="Not included" className="w-5 h-5 text-gray-300 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    );
+  }
+
+  if (typeof value === "string") {
+    return <span className="text-gray-900 font-medium">{value}</span>;
+  }
+
+  if (typeof value === "number") {
+    return <span className="text-gray-900 font-medium">{value === -1 ? "Unlimited" : value}</span>;
+  }
+
+  return <span className="text-gray-500">{String(value)}</span>;
+}