@startsimpli/billing 0.1.0

package/src/components/SubscriptionManager.test.tsx

@@ -0,0 +1,498 @@
+/**
+ * TDD tests for SubscriptionManager component.
+ *
+ * SubscriptionManager is an interactive subscription management widget
+ * for logged-in users. It displays the current subscription, allows
+ * upgrade/downgrade options, and provides portal access.
+ *
+ * Usage:
+ *   <SubscriptionManager
+ *     productId="raise-simpli"
+ *     returnUrl="https://app.example.com/settings"
+ *     onPlanChange={(offer) => console.log(offer)}
+ *   />
+ */
+
+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 { SubscriptionManager } from "./SubscriptionManager";
+import type { BillingProduct, SubscriptionInfo } 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",
+    },
+  ],
+};
+
+const mockSubscriptionActive: SubscriptionInfo = {
+  id: "sub-123",
+  offer: mockProduct.offers[1], // Pro plan
+  status: "active",
+  current_period_start: "2026-01-01T00:00:00Z",
+  current_period_end: "2026-02-01T00:00:00Z",
+  cancel_at_period_end: false,
+  trial_end: null,
+};
+
+const mockSubscriptionTrialing: SubscriptionInfo = {
+  id: "sub-456",
+  offer: mockProduct.offers[1], // Pro plan
+  status: "trialing",
+  current_period_start: "2026-01-01T00:00:00Z",
+  current_period_end: "2026-02-01T00:00:00Z",
+  cancel_at_period_end: false,
+  trial_end: "2026-01-15T00:00:00Z",
+};
+
+const mockSubscriptionPastDue: SubscriptionInfo = {
+  id: "sub-789",
+  offer: mockProduct.offers[1], // Pro plan
+  status: "past_due",
+  current_period_start: "2026-01-01T00:00:00Z",
+  current_period_end: "2026-02-01T00:00:00Z",
+  cancel_at_period_end: false,
+  trial_end: null,
+};
+
+const mockSubscriptionCancelled: SubscriptionInfo = {
+  id: "sub-999",
+  offer: mockProduct.offers[1], // Pro plan
+  status: "cancelled",
+  current_period_start: "2026-01-01T00:00:00Z",
+  current_period_end: "2026-02-01T00:00:00Z",
+  cancel_at_period_end: true,
+  trial_end: null,
+};
+
+function createWrapper(fetcher: 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 mockFetchRouter(routes: Record<string, any>) {
+  return vi.fn((url: string) => {
+    // Match subscription endpoint
+    if (url.includes("/billing/subscription/current/")) {
+      const response = routes["/billing/subscription/current/"];
+      if (response === null) {
+        return Promise.resolve({
+          ok: false,
+          status: 404,
+          json: () => Promise.resolve({ detail: "No subscription found" }),
+        });
+      }
+      if (response instanceof Error) {
+        return Promise.resolve({
+          ok: false,
+          status: 500,
+          json: () => Promise.resolve({ detail: response.message }),
+        });
+      }
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(response),
+      });
+    }
+
+    // Match product endpoint
+    if (url.includes("/billing/products/")) {
+      const response = routes["/billing/products/"];
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(response),
+      });
+    }
+
+    return Promise.resolve({
+      ok: false,
+      status: 404,
+    });
+  }) as unknown as typeof fetch;
+}
+
+describe("SubscriptionManager", () => {
+  it("renders loading state while fetching subscription", () => {
+    // Never resolves — stays in loading
+    const fetcher = vi.fn().mockReturnValue(
+      new Promise(() => {})
+    ) as unknown as typeof fetch;
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    expect(screen.getByTestId("subscription-manager")).toBeDefined();
+    expect(screen.getByText(/loading/i)).toBeDefined();
+  });
+
+  it("shows current plan details when subscribed (plan name, price)", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("current-plan")).toBeDefined();
+    });
+
+    // Check plan name
+    expect(screen.getByText("Pro")).toBeDefined();
+
+    // Check price
+    expect(screen.getByText(/\$49/)).toBeDefined();
+  });
+
+  it("shows subscription status badge (active, trialing, past_due, cancelled)", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("plan-status")).toBeDefined();
+    });
+
+    // Check status badge displays "active"
+    expect(screen.getByText(/active/i)).toBeDefined();
+  });
+
+  it("shows trialing badge with trial end date when trialing", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionTrialing,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("plan-status")).toBeDefined();
+    });
+
+    // Check trialing status
+    expect(screen.getByText(/trialing/i)).toBeDefined();
+
+    // Check trial end date is displayed
+    expect(screen.getByText(/2026-01-15/)).toBeDefined();
+  });
+
+  it("shows billing period dates", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("current-plan")).toBeDefined();
+    });
+
+    // Check billing period dates are displayed
+    expect(screen.getByText(/2026-01-01/)).toBeDefined();
+    expect(screen.getByText(/2026-02-01/)).toBeDefined();
+  });
+
+  it("shows available offers for upgrade (excludes current plan)", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive, // Currently on Pro
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("available-plans")).toBeDefined();
+    });
+
+    // Should show Starter and Enterprise, but NOT Pro (current plan)
+    expect(screen.getByText("Starter")).toBeDefined();
+    expect(screen.getByText("Enterprise")).toBeDefined();
+
+    // Pro should only appear once (in current plan section)
+    const proElements = screen.getAllByText("Pro");
+    expect(proElements.length).toBe(1);
+  });
+
+  it("calls onPlanChange when upgrade option clicked", async () => {
+    const onPlanChange = vi.fn();
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive, // Currently on Pro
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+          onPlanChange={onPlanChange}
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("available-plans")).toBeDefined();
+    });
+
+    // Click Enterprise upgrade option
+    const enterpriseButton = screen.getByTestId("upgrade-cta-enterprise-monthly");
+    await userEvent.click(enterpriseButton);
+
+    expect(onPlanChange).toHaveBeenCalledWith(
+      expect.objectContaining({ slug: "enterprise-monthly" })
+    );
+  });
+
+  it("shows Manage Billing portal button", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionActive,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("portal-button")).toBeDefined();
+    });
+
+    expect(screen.getByText(/manage billing/i)).toBeDefined();
+  });
+
+  it("shows No active subscription when no subscription exists", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null, // 404 - no subscription
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/no active subscription/i)).toBeDefined();
+    });
+  });
+
+  it("shows subscribe options when no subscription", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": null, // 404 - no subscription
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("available-plans")).toBeDefined();
+    });
+
+    // Should show all available plans
+    expect(screen.getByText("Starter")).toBeDefined();
+    expect(screen.getByText("Pro")).toBeDefined();
+    expect(screen.getByText("Enterprise")).toBeDefined();
+  });
+
+  it("handles subscription fetch error", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": new Error("Network error"),
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/error/i)).toBeDefined();
+    });
+
+    expect(screen.getByText(/network error/i)).toBeDefined();
+  });
+
+  it("shows past due warning styling", async () => {
+    const fetcher = mockFetchRouter({
+      "/billing/subscription/current/": mockSubscriptionPastDue,
+      "/billing/products/": mockProduct,
+    });
+    const Wrapper = createWrapper(fetcher);
+
+    render(
+      <Wrapper>
+        <SubscriptionManager
+          productId="raise-simpli"
+          returnUrl="https://app.test.com/settings"
+        />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("plan-status")).toBeDefined();
+    });
+
+    // Check past_due status is displayed
+    expect(screen.getByText(/past.due/i)).toBeDefined();
+
+    // Check for warning styling indicator
+    const statusBadge = screen.getByTestId("plan-status");
+    expect(statusBadge.className).toMatch(/warning|error|danger|alert/i);
+  });
+});