@startsimpli/billing 0.1.0

package/src/components/SubscriptionManager.tsx

@@ -0,0 +1,270 @@
+/**
+ * SubscriptionManager — Interactive subscription management widget.
+ *
+ * Displays the current subscription, available plan options for
+ * upgrade/downgrade, and a portal button for billing management.
+ *
+ * Usage:
+ *   <SubscriptionManager
+ *     productId="raise-simpli"
+ *     returnUrl="https://app.example.com/settings"
+ *     onPlanChange={(offer) => console.log(offer)}
+ *   />
+ */
+
+import React from "react";
+import { useSubscription } from "../hooks/useSubscription";
+import { useProduct } from "../hooks/useProduct";
+import { usePortal } from "../hooks/usePortal";
+import type { ProductOffer } from "../types";
+
+export interface SubscriptionManagerProps {
+  /** Product slug (e.g., "raise-simpli") */
+  productId: string;
+
+  /** URL to return to after portal session */
+  returnUrl: string;
+
+  /** Called when user clicks an available plan's CTA button */
+  onPlanChange?: (offer: ProductOffer) => void;
+
+  /** Optional status message to display (e.g., after checkout redirect) */
+  statusMessage?: "success" | "cancelled" | "activating" | null;
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  const year = d.getUTCFullYear();
+  const month = String(d.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(d.getUTCDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function StatusBadge({ status, trialEnd }: { status: string; trialEnd: string | null }) {
+  let className = "inline-block text-xs font-semibold px-3 py-1 rounded-full ";
+  switch (status) {
+    case "active":
+      className += "bg-green-50 text-green-700";
+      break;
+    case "trialing":
+      className += "bg-blue-50 text-blue-700";
+      break;
+    case "past_due":
+      className += "bg-yellow-50 text-yellow-700 warning";
+      break;
+    case "cancelled":
+      className += "bg-gray-100 text-gray-600";
+      break;
+    case "incomplete":
+      className += "bg-yellow-50 text-yellow-700";
+      break;
+    case "incomplete_expired":
+      className += "bg-red-50 text-red-700";
+      break;
+    case "unpaid":
+      className += "bg-red-50 text-red-700";
+      break;
+    default:
+      className += "bg-gray-100 text-gray-600";
+  }
+
+  const labelMap: Record<string, string> = {
+    active: "Active",
+    trialing: "Trialing",
+    past_due: "Past due",
+    cancelled: "Cancelled",
+    incomplete: "Incomplete",
+    incomplete_expired: "Expired",
+    unpaid: "Unpaid",
+  };
+
+  const readableStatus = labelMap[status] ?? status;
+
+  return (
+    <span data-testid="plan-status" role="status" aria-label={`Subscription status: ${readableStatus}`} className={className}>
+      {labelMap[status] ?? status}
+      {status === "trialing" && trialEnd && (
+        <span className="ml-1">until {formatDate(trialEnd)}</span>
+      )}
+    </span>
+  );
+}
+
+export function SubscriptionManager({
+  productId,
+  returnUrl,
+  onPlanChange,
+  statusMessage,
+}: SubscriptionManagerProps) {
+  const { subscription, loading: subLoading, error: subError } = useSubscription();
+  const { product, loading: productLoading } = useProduct(productId);
+  const { openPortal, loading: portalLoading } = usePortal();
+
+  const loading = subLoading || productLoading;
+
+  if (loading) {
+    return (
+      <div data-testid="subscription-manager" className="max-w-3xl mx-auto px-6 py-12">
+        <p className="text-center text-gray-500">Loading subscription...</p>
+      </div>
+    );
+  }
+
+  if (subError) {
+    return (
+      <div data-testid="subscription-manager" className="max-w-3xl mx-auto px-6 py-12">
+        <div className="text-center text-red-600">
+          <p className="font-semibold">Something went wrong</p>
+          <p className="text-sm mt-1">{subError.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  const currentOfferId = subscription?.offer?.id ?? null;
+  const availableOffers = product?.offers.filter((o) => o.id !== currentOfferId) ?? [];
+
+  const handlePortalClick = async () => {
+    try {
+      const result = await openPortal(returnUrl);
+      window.location.href = result.url;
+    } catch {
+      // Error captured by hook state
+    }
+  };
+
+  return (
+    <div data-testid="subscription-manager" className="max-w-3xl mx-auto px-6 py-12 space-y-8">
+      {statusMessage === "success" && (
+        <div data-testid="status-banner-success" className="rounded-xl bg-green-50 border border-green-200 p-4 flex items-center gap-3">
+          <svg className="w-5 h-5 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+          <p className="text-sm font-medium text-green-800">Subscription activated successfully!</p>
+        </div>
+      )}
+
+      {statusMessage === "cancelled" && (
+        <div data-testid="status-banner-cancelled" className="rounded-xl bg-gray-50 border border-gray-200 p-4 flex items-center gap-3">
+          <svg className="w-5 h-5 text-gray-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+          <p className="text-sm font-medium text-gray-700">Checkout was cancelled. You can try again whenever you&apos;re ready.</p>
+        </div>
+      )}
+
+      {statusMessage === "activating" && (
+        <div data-testid="status-banner-activating" className="rounded-xl bg-blue-50 border border-blue-200 p-4 flex items-center gap-3">
+          <svg className="w-5 h-5 text-blue-600 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+          </svg>
+          <p className="text-sm font-medium text-blue-800">Activating your subscription...</p>
+        </div>
+      )}
+
+      {subscription ? (
+        <div data-testid="current-plan" className="rounded-2xl border border-gray-200 bg-white shadow-sm p-8">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-bold text-gray-900">{subscription.offer.name}</h2>
+            <StatusBadge status={subscription.status} trialEnd={subscription.trial_end} />
+          </div>
+
+          <div className="mb-4">
+            {subscription.offer.is_free ? (
+              <span aria-label="Free">
+                <span aria-hidden="true" className="text-3xl font-extrabold text-gray-900">Free</span>
+              </span>
+            ) : (
+              <span aria-label={`${Math.floor(parseFloat(subscription.offer.unit_price) || 0)} dollars ${subscription.offer.interval_display}`}>
+                <span aria-hidden="true" className="text-3xl font-extrabold text-gray-900">
+                  ${Math.floor(parseFloat(subscription.offer.unit_price) || 0)}
+                </span>
+                <span aria-hidden="true" className="text-base text-gray-500 ml-1">
+                  {subscription.offer.interval_display}
+                </span>
+              </span>
+            )}
+          </div>
+
+          <p className="text-sm text-gray-500">
+            Billing period: {formatDate(subscription.current_period_start)} to{" "}
+            {formatDate(subscription.current_period_end)}
+          </p>
+        </div>
+      ) : (
+        <div className="text-center py-8">
+          <p className="text-lg text-gray-600">No active subscription</p>
+          <p className="text-sm text-gray-400 mt-1">Choose a plan below to get started.</p>
+        </div>
+      )}
+
+      {availableOffers.length > 0 && (
+        <div data-testid="available-plans" className="space-y-4">
+          <h3 className="text-lg font-semibold text-gray-900">
+            {subscription ? "Change Plan" : "Available Plans"}
+          </h3>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {availableOffers.map((offer) => (
+              <div
+                key={offer.id}
+                className={`rounded-xl border p-6 ${
+                  offer.is_featured
+                    ? "border-blue-600 shadow-md"
+                    : "border-gray-200 bg-white shadow-sm"
+                }`}
+              >
+                <h4 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h4>
+                <div className="mb-3">
+                  {offer.is_free ? (
+                    <span aria-label="Free">
+                      <span aria-hidden="true" className="text-2xl 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-2xl font-extrabold text-gray-900">
+                        ${Math.floor(parseFloat(offer.unit_price) || 0)}
+                      </span>
+                      <span aria-hidden="true" className="text-sm text-gray-500 ml-1">
+                        {offer.interval_display}
+                      </span>
+                    </span>
+                  )}
+                </div>
+                <button
+                  data-testid={`upgrade-cta-${offer.slug}`}
+                  onClick={() => onPlanChange?.(offer)}
+                  className={`w-full py-2.5 px-4 text-sm font-bold rounded-xl cursor-pointer transition-colors ${
+                    offer.is_featured
+                      ? "bg-blue-600 text-white hover:bg-blue-700"
+                      : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+                  }`}
+                >
+                  {offer.cta_text}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {subscription && subscription.status !== "cancelled" && (
+        <div className="pt-4 border-t border-gray-100">
+          <button
+            data-testid="portal-button"
+            onClick={handlePortalClick}
+            disabled={portalLoading}
+            aria-busy={portalLoading || undefined}
+            className={`inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold rounded-xl border transition-colors ${
+              portalLoading
+                ? "bg-gray-50 text-gray-400 border-gray-200 cursor-not-allowed"
+                : "bg-white text-gray-700 border-gray-200 hover:bg-gray-50 hover:border-gray-300 cursor-pointer"
+            }`}
+          >
+            {portalLoading ? "Loading..." : "Manage Billing"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/UpgradeModal.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * TDD tests for UpgradeModal component.
+ *
+ * UpgradeModal is a modal dialog that shows upgrade options and handles
+ * the checkout flow when a user selects an offer.
+ *
+ * Usage:
+ *   <UpgradeModal
+ *     productId="raise-simpli"
+ *     open={showModal}
+ *     onClose={() => setShowModal(false)}
+ *   />
+ */
+
+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 { UpgradeModal } from "./UpgradeModal";
+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: "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 }],
+      is_active: true,
+      is_featured: true,
+      trial_days: 14,
+      sort_order: 0,
+      cta_text: "Upgrade to Pro",
+    },
+  ],
+};
+
+function createWrapper(productFetch: typeof fetch, checkoutFetch?: typeof fetch) {
+  const fetcher = (checkoutFetch
+    ? vi.fn()
+        .mockImplementationOnce(productFetch as any)
+        .mockImplementation(checkoutFetch as any)
+    : productFetch) as typeof fetch;
+
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <BillingProvider
+        apiBaseUrl="https://api.test.com/api/v1"
+        authToken="tok_123"
+        fetcher={fetcher}
+      >
+        {children}
+      </BillingProvider>
+    );
+  };
+}
+
+function mockProductFetch() {
+  return vi.fn().mockResolvedValue({
+    ok: true,
+    json: () => Promise.resolve(mockProduct),
+  }) as unknown as typeof fetch;
+}
+
+describe("UpgradeModal", () => {
+  it("renders nothing when closed", () => {
+    const Wrapper = createWrapper(mockProductFetch());
+
+    const { container } = render(
+      <Wrapper>
+        <UpgradeModal productId="raise-simpli" open={false} onClose={() => {}} />
+      </Wrapper>
+    );
+
+    expect(container.querySelector("[data-testid='upgrade-modal']")).toBeNull();
+  });
+
+  it("renders offers when open", async () => {
+    const Wrapper = createWrapper(mockProductFetch());
+
+    render(
+      <Wrapper>
+        <UpgradeModal productId="raise-simpli" open={true} onClose={() => {}} />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Pro")).toBeDefined();
+    });
+    expect(screen.getByText(/\$49/)).toBeDefined();
+  });
+
+  it("calls onClose when close button is clicked", async () => {
+    const onClose = vi.fn();
+    const Wrapper = createWrapper(mockProductFetch());
+
+    render(
+      <Wrapper>
+        <UpgradeModal productId="raise-simpli" open={true} onClose={onClose} />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Pro")).toBeDefined();
+    });
+
+    const closeButton = screen.getByLabelText(/close/i);
+    await userEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("shows CTA button from offer data", async () => {
+    const Wrapper = createWrapper(mockProductFetch());
+
+    render(
+      <Wrapper>
+        <UpgradeModal productId="raise-simpli" open={true} onClose={() => {}} />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Upgrade to Pro")).toBeDefined();
+    });
+  });
+
+  it("shows trial info when offer has trial days", async () => {
+    const Wrapper = createWrapper(mockProductFetch());
+
+    render(
+      <Wrapper>
+        <UpgradeModal productId="raise-simpli" open={true} onClose={() => {}} />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/14.day/i)).toBeDefined();
+    });
+  });
+});

package/src/components/UpgradeModal.tsx

@@ -0,0 +1,195 @@
+/**
+ * UpgradeModal — Modal dialog showing upgrade options with checkout.
+ *
+ * Usage:
+ *   <UpgradeModal
+ *     productId="raise-simpli"
+ *     open={showModal}
+ *     onClose={() => setShowModal(false)}
+ *   />
+ */
+
+import React, { useEffect, useRef, useCallback } from "react";
+import { useProduct } from "../hooks/useProduct";
+import type { ProductOffer } from "../types";
+
+export interface UpgradeModalProps {
+  productId: string;
+  open: boolean;
+  onClose: () => void;
+  onSelectOffer?: (offer: ProductOffer) => void;
+}
+
+export function UpgradeModal({
+  productId,
+  open,
+  onClose,
+  onSelectOffer,
+}: UpgradeModalProps) {
+  const { product, loading, error } = useProduct(productId);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+
+      if (e.key === "Tab" && modalRef.current) {
+        const focusable = modalRef.current.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement as HTMLElement | null;
+
+      // Focus the first focusable element after render
+      const timer = setTimeout(() => {
+        if (modalRef.current) {
+          const focusable = modalRef.current.querySelector<HTMLElement>(
+            'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+          );
+          focusable?.focus();
+        }
+      }, 0);
+
+      return () => clearTimeout(timer);
+    } else {
+      previousFocusRef.current?.focus();
+    }
+  }, [open]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      data-testid="upgrade-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="upgrade-modal-title"
+      onKeyDown={handleKeyDown}
+      ref={modalRef}
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-6"
+    >
+      <div className="bg-white rounded-2xl max-w-3xl w-full max-h-[90vh] overflow-auto p-8 relative">
+        <button
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 text-2xl leading-none p-1 cursor-pointer"
+        >
+          &times;
+        </button>
+
+        <h2 id="upgrade-modal-title" className="text-2xl font-extrabold text-gray-900 text-center mb-8">
+          Choose a plan
+        </h2>
+
+        {loading && (
+          <div className="text-center py-8 text-gray-500">Loading...</div>
+        )}
+
+        {error && (
+          <div className="text-center py-8 text-red-600">
+            Unable to load pricing. Please try again.
+          </div>
+        )}
+
+        {product && (
+          <div data-testid="upgrade-offers" className="flex flex-wrap justify-center gap-5">
+            {product.offers.map((offer) => {
+              const isFeatured = offer.is_featured;
+              return (
+                <div
+                  key={offer.id}
+                  data-testid={`upgrade-offer-${offer.slug}`}
+                  className={`
+                    flex flex-col flex-1 min-w-[200px] max-w-[240px] rounded-xl p-6
+                    ${isFeatured
+                      ? "border-2 border-blue-600 shadow-md"
+                      : "border border-gray-200"
+                    }
+                  `}
+                >
+                  <h3 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h3>
+
+                  <div className="mb-2">
+                    {offer.is_free ? (
+                      <span aria-label="Free">
+                        <span aria-hidden="true" className="text-2xl 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-2xl font-extrabold text-gray-900">
+                          ${Math.floor(parseFloat(offer.unit_price) || 0)}
+                        </span>
+                        <span aria-hidden="true" className="text-sm text-gray-500"> {offer.interval_display}</span>
+                      </span>
+                    )}
+                  </div>
+
+                  {offer.trial_days > 0 && (
+                    <span className="inline-block bg-blue-50 text-blue-700 text-xs font-semibold px-2.5 py-0.5 rounded-md mb-3 w-fit">
+                      {offer.trial_days}-day free trial
+                    </span>
+                  )}
+
+                  {offer.features.length > 0 && (
+                    <ul className="list-none p-0 m-0 mb-4 flex-1 space-y-0">
+                      {offer.features.map((f) => (
+                        <li key={f.key} className="flex items-center gap-1.5 py-1 text-sm text-gray-600">
+                          <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>
+                          {f.name}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+
+                  <button
+                    onClick={() => onSelectOffer?.(offer)}
+                    data-testid={`upgrade-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>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { PricingPage } from "./PricingPage";
+export type { PricingPageProps } from "./PricingPage";
+export { PricingSection } from "./PricingSection";
+export type { PricingSectionProps } from "./PricingSection";
+export { UpgradeModal } from "./UpgradeModal";
+export type { UpgradeModalProps } from "./UpgradeModal";
+export { PricingDetailPage } from "./PricingDetailPage";
+export type { PricingDetailPageProps } from "./PricingDetailPage";
+export { ManageSubscription } from "./ManageSubscription";
+export type { ManageSubscriptionProps } from "./ManageSubscription";
+export { SubscriptionManager } from "./SubscriptionManager";
+export type { SubscriptionManagerProps } from "./SubscriptionManager";