@startsimpli/billing 0.1.0

package/src/hooks/BillingProvider.test.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act, waitFor } from "@testing-library/react";
+import React, { useState } from "react";
+import { BillingProvider, useBillingContext } from "./BillingProvider";
+import { useProduct } from "./useProduct";
+
+describe("BillingProvider", () => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1">
+      {children}
+    </BillingProvider>
+  );
+
+  it("provides billing context to children", () => {
+    const { result } = renderHook(() => useBillingContext(), { wrapper });
+    expect(result.current.client).toBeDefined();
+    expect(result.current.config.apiBaseUrl).toBe(
+      "https://api.test.com/api/v1"
+    );
+  });
+
+  it("throws when used outside provider", () => {
+    expect(() => {
+      renderHook(() => useBillingContext());
+    }).toThrow("useBillingContext must be used within a <BillingProvider>");
+  });
+
+  it("passes auth token to config", () => {
+    const authWrapper = ({ children }: { children: React.ReactNode }) => (
+      <BillingProvider
+        apiBaseUrl="https://api.test.com/api/v1"
+        authToken="tok_123"
+      >
+        {children}
+      </BillingProvider>
+    );
+
+    const { result } = renderHook(() => useBillingContext(), {
+      wrapper: authWrapper,
+    });
+    expect(result.current.config.authToken).toBe("tok_123");
+  });
+
+  it("creates a new client when authToken changes", () => {
+    let token = "tok_first";
+
+    const DynamicWrapper = ({ children }: { children: React.ReactNode }) => (
+      <BillingProvider
+        apiBaseUrl="https://api.test.com/api/v1"
+        authToken={token}
+      >
+        {children}
+      </BillingProvider>
+    );
+
+    const { result, rerender } = renderHook(() => useBillingContext(), {
+      wrapper: DynamicWrapper,
+    });
+
+    const firstClient = result.current.client;
+    expect(result.current.config.authToken).toBe("tok_first");
+
+    // Change token and re-render
+    token = "tok_second";
+    rerender();
+
+    expect(result.current.config.authToken).toBe("tok_second");
+    // BillingProvider uses useMemo keyed on authToken, so client should change
+    expect(result.current.client).not.toBe(firstClient);
+  });
+
+  it("creates a new client when apiBaseUrl changes", () => {
+    let baseUrl = "https://api.test.com/api/v1";
+
+    const DynamicWrapper = ({ children }: { children: React.ReactNode }) => (
+      <BillingProvider apiBaseUrl={baseUrl}>
+        {children}
+      </BillingProvider>
+    );
+
+    const { result, rerender } = renderHook(() => useBillingContext(), {
+      wrapper: DynamicWrapper,
+    });
+
+    const firstClient = result.current.client;
+
+    // Change base URL and re-render
+    baseUrl = "https://api2.test.com/api/v1";
+    rerender();
+
+    expect(result.current.config.apiBaseUrl).toBe("https://api2.test.com/api/v1");
+    expect(result.current.client).not.toBe(firstClient);
+  });
+
+  it("API calls include auth token in headers", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ slug: "test", name: "Test", description: "", id: "1", offers: [] }),
+    });
+
+    const authWrapper = ({ children }: { children: React.ReactNode }) => (
+      <BillingProvider
+        apiBaseUrl="https://api.test.com/api/v1"
+        authToken="tok_for_header_test"
+        fetcher={mockFetch as unknown as typeof fetch}
+      >
+        {children}
+      </BillingProvider>
+    );
+
+    // useProduct makes a GET request (public, no auth header)
+    // But we can verify the fetcher was injected properly
+    renderHook(() => useProduct("test-slug"), { wrapper: authWrapper });
+
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalled();
+    });
+
+    // Verify the fetch was called with the correct base URL
+    expect(mockFetch).toHaveBeenCalledWith(
+      "https://api.test.com/api/v1/billing/products/test-slug/",
+      expect.any(Object)
+    );
+  });
+});

package/src/hooks/BillingProvider.tsx

@@ -0,0 +1,52 @@
+/**
+ * BillingProvider — React context for @simpli/billing.
+ *
+ * Wrap your app (or a section of it) with <BillingProvider> to configure
+ * the API connection. All billing hooks read from this context.
+ *
+ * Usage:
+ *   <BillingProvider apiBaseUrl="https://api.startsimpli.com/api/v1" authToken={token}>
+ *     <PricingPage productId="raise-simpli" />
+ *   </BillingProvider>
+ */
+
+import React, { createContext, useContext, useMemo } from "react";
+import type { BillingConfig } from "../types";
+import { BillingApiClient } from "../utils/api";
+
+interface BillingContextValue {
+  client: BillingApiClient;
+  config: BillingConfig;
+}
+
+const BillingContext = createContext<BillingContextValue | null>(null);
+
+export interface BillingProviderProps extends BillingConfig {
+  children: React.ReactNode;
+}
+
+export function BillingProvider({
+  children,
+  ...config
+}: BillingProviderProps) {
+  const value = useMemo(() => {
+    const client = new BillingApiClient(config);
+    return { client, config };
+  }, [config.apiBaseUrl, config.authToken]);
+
+  return (
+    <BillingContext.Provider value={value}>
+      {children}
+    </BillingContext.Provider>
+  );
+}
+
+export function useBillingContext(): BillingContextValue {
+  const ctx = useContext(BillingContext);
+  if (!ctx) {
+    throw new Error(
+      "useBillingContext must be used within a <BillingProvider>"
+    );
+  }
+  return ctx;
+}

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export { BillingProvider, useBillingContext } from "./BillingProvider";
+export type { BillingProviderProps } from "./BillingProvider";
+export { useProduct } from "./useProduct";
+export { useCheckout } from "./useCheckout";
+export { usePortal } from "./usePortal";
+export { useSubscription } from "./useSubscription";

package/src/hooks/useCheckout.test.tsx

@@ -0,0 +1,232 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "./BillingProvider";
+import { useCheckout } from "./useCheckout";
+
+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>
+    );
+  };
+}
+
+describe("useCheckout", () => {
+  it("creates checkout session and returns result", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          session_id: "cs_test_123",
+          url: "https://checkout.stripe.com/test",
+        }),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => useCheckout(), { wrapper });
+
+    let checkoutResult: unknown;
+    await act(async () => {
+      checkoutResult = await result.current.checkout({
+        offerId: "offer-1",
+        successUrl: "https://app.test.com/success",
+        cancelUrl: "https://app.test.com/cancel",
+      });
+    });
+
+    expect(checkoutResult).toEqual({
+      session_id: "cs_test_123",
+      url: "https://checkout.stripe.com/test",
+    });
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+
+    // Verify correct API call
+    expect(mockFetch).toHaveBeenCalledWith(
+      "https://api.test.com/api/v1/billing/offer-checkout/",
+      expect.objectContaining({
+        method: "POST",
+        headers: expect.objectContaining({
+          Authorization: "Bearer tok_123",
+        }),
+      })
+    );
+  });
+
+  it("sends correct request body", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({ session_id: "cs_1", url: "https://test.com" }),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => useCheckout(), { wrapper });
+
+    await act(async () => {
+      await result.current.checkout({
+        offerId: "offer-abc",
+        successUrl: "https://success.com",
+        cancelUrl: "https://cancel.com",
+        quantity: 5,
+      });
+    });
+
+    const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+    expect(body.offer_id).toBe("offer-abc");
+    expect(body.success_url).toBe("https://success.com");
+    expect(body.cancel_url).toBe("https://cancel.com");
+    expect(body.quantity).toBe(5);
+  });
+
+  it("handles checkout error", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 400,
+      json: () =>
+        Promise.resolve({
+          detail: "Team already has an active subscription",
+        }),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => useCheckout(), { wrapper });
+
+    await act(async () => {
+      try {
+        await result.current.checkout({
+          offerId: "offer-1",
+          successUrl: "https://test.com/success",
+          cancelUrl: "https://test.com/cancel",
+        });
+      } catch {
+        // Expected
+      }
+    });
+
+    expect(result.current.error?.message).toBe(
+      "Team already has an active subscription"
+    );
+  });
+
+  it("checkout returns session URL for redirect", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          session_id: "cs_redirect_1",
+          url: "https://checkout.stripe.com/pay/cs_redirect_1",
+        }),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => useCheckout(), { wrapper });
+
+    let checkoutResult: unknown;
+    await act(async () => {
+      checkoutResult = await result.current.checkout({
+        offerId: "offer-pro",
+        successUrl: "https://app.test.com/success",
+        cancelUrl: "https://app.test.com/cancel",
+      });
+    });
+
+    expect(
+      (checkoutResult as { url: string }).url
+    ).toBe("https://checkout.stripe.com/pay/cs_redirect_1");
+  });
+
+  describe("subscribeFree", () => {
+    it("calls POST with offer_id and returns subscription result", async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            subscription_id: "sub_free_123",
+            status: "active",
+          }),
+      });
+      const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+      const { result } = renderHook(() => useCheckout(), { wrapper });
+
+      let freeResult: unknown;
+      await act(async () => {
+        freeResult = await result.current.subscribeFree("offer-free-1");
+      });
+
+      expect(freeResult).toEqual({
+        subscription_id: "sub_free_123",
+        status: "active",
+      });
+      expect(result.current.loading).toBe(false);
+      expect(result.current.error).toBeNull();
+
+      // Verify correct API call
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://api.test.com/api/v1/billing/subscribe-free/",
+        expect.objectContaining({
+          method: "POST",
+          headers: expect.objectContaining({
+            Authorization: "Bearer tok_123",
+          }),
+        })
+      );
+
+      // Verify request body
+      const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+      expect(body.offer_id).toBe("offer-free-1");
+    });
+
+    it("handles subscribeFree error", async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: false,
+        status: 400,
+        json: () =>
+          Promise.resolve({
+            detail: "Offer is not a free offer",
+          }),
+      });
+      const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+      const { result } = renderHook(() => useCheckout(), { wrapper });
+
+      await act(async () => {
+        try {
+          await result.current.subscribeFree("offer-paid");
+        } catch {
+          // Expected
+        }
+      });
+
+      expect(result.current.error?.message).toBe("Offer is not a free offer");
+    });
+
+    it("handles subscribeFree network error", async () => {
+      const mockFetch = vi
+        .fn()
+        .mockRejectedValue(new Error("Network timeout"));
+      const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+      const { result } = renderHook(() => useCheckout(), { wrapper });
+
+      await act(async () => {
+        try {
+          await result.current.subscribeFree("offer-free-1");
+        } catch {
+          // Expected
+        }
+      });
+
+      expect(result.current.error?.message).toBe("Network timeout");
+      expect(result.current.loading).toBe(false);
+    });
+  });
+});

package/src/hooks/useCheckout.ts

@@ -0,0 +1,75 @@
+/**
+ * useCheckout — Create a checkout session and redirect, or subscribe to a free offer.
+ *
+ * Usage:
+ *   const { checkout, subscribeFree, loading, error } = useCheckout();
+ *   // For paid offers:
+ *   await checkout({ offerId, successUrl, cancelUrl });
+ *   // For free offers:
+ *   await subscribeFree(offerId);
+ */
+
+import { useCallback, useState } from "react";
+import type { CheckoutResult, FreeSubscriptionResult } from "../types";
+import { useBillingContext } from "./BillingProvider";
+
+interface UseCheckoutResult {
+  checkout: (params: {
+    offerId: string;
+    successUrl: string;
+    cancelUrl: string;
+    quantity?: number;
+  }) => Promise<CheckoutResult>;
+  subscribeFree: (offerId: string) => Promise<FreeSubscriptionResult>;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useCheckout(): UseCheckoutResult {
+  const { client } = useBillingContext();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const checkout = useCallback(
+    async (params: {
+      offerId: string;
+      successUrl: string;
+      cancelUrl: string;
+      quantity?: number;
+    }) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await client.createCheckout(params);
+        return result;
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        setError(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+
+  const subscribeFree = useCallback(
+    async (offerId: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await client.subscribeFree(offerId);
+        return result;
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        setError(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+
+  return { checkout, subscribeFree, loading, error };
+}

package/src/hooks/usePortal.test.tsx

@@ -0,0 +1,189 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act, waitFor } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "./BillingProvider";
+import { usePortal } from "./usePortal";
+
+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>
+    );
+  };
+}
+
+describe("usePortal", () => {
+  it("creates portal session and returns URL", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          url: "https://billing.stripe.com/portal/test",
+        }),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => usePortal(), { wrapper });
+
+    let portalResult: unknown;
+    await act(async () => {
+      portalResult = await result.current.openPortal(
+        "https://app.test.com/settings"
+      );
+    });
+
+    expect(portalResult).toEqual({
+      url: "https://billing.stripe.com/portal/test",
+    });
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("sends auth header and correct body", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ url: "https://portal.test.com" }),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => usePortal(), { wrapper });
+
+    await act(async () => {
+      await result.current.openPortal("https://app.test.com/settings");
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      "https://api.test.com/api/v1/billing/offer-portal/",
+      expect.objectContaining({
+        method: "POST",
+        headers: expect.objectContaining({
+          Authorization: "Bearer tok_123",
+        }),
+      })
+    );
+
+    const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+    expect(body.return_url).toBe("https://app.test.com/settings");
+  });
+
+  it("handles portal error", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+      json: () =>
+        Promise.resolve({ detail: "No active subscription found" }),
+    });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => usePortal(), { wrapper });
+
+    await act(async () => {
+      try {
+        await result.current.openPortal("https://app.test.com/settings");
+      } catch {
+        // Expected
+      }
+    });
+
+    expect(result.current.error?.message).toBe(
+      "No active subscription found"
+    );
+  });
+
+  it("shows loading state during portal creation", async () => {
+    let resolveFetch!: (value: unknown) => void;
+    const fetchPromise = new Promise((resolve) => {
+      resolveFetch = resolve;
+    });
+    const mockFetch = vi.fn().mockReturnValue(fetchPromise);
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => usePortal(), { wrapper });
+
+    // Initially not loading
+    expect(result.current.loading).toBe(false);
+
+    // Start portal creation (don't await)
+    let portalPromise: Promise<unknown>;
+    act(() => {
+      portalPromise = result.current.openPortal("https://app.test.com/settings");
+    });
+
+    // Should be loading now
+    expect(result.current.loading).toBe(true);
+
+    // Resolve the fetch
+    await act(async () => {
+      resolveFetch({
+        ok: true,
+        json: () => Promise.resolve({ url: "https://portal.stripe.com/test" }),
+      });
+      await portalPromise;
+    });
+
+    // Loading should be false after resolution
+    expect(result.current.loading).toBe(false);
+  });
+
+  it("handles network timeout error", async () => {
+    const mockFetch = vi
+      .fn()
+      .mockRejectedValue(new Error("Request timed out"));
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => usePortal(), { wrapper });
+
+    await act(async () => {
+      try {
+        await result.current.openPortal("https://app.test.com/settings");
+      } catch {
+        // Expected
+      }
+    });
+
+    expect(result.current.error?.message).toBe("Request timed out");
+    expect(result.current.loading).toBe(false);
+  });
+
+  it("clears previous error on new openPortal call", async () => {
+    // First call: error
+    const mockFetch = vi
+      .fn()
+      .mockResolvedValueOnce({
+        ok: false,
+        status: 500,
+        json: () => Promise.resolve({ detail: "Server error" }),
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ url: "https://portal.stripe.com/ok" }),
+      });
+    const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
+
+    const { result } = renderHook(() => usePortal(), { wrapper });
+
+    // First call fails
+    await act(async () => {
+      try {
+        await result.current.openPortal("https://app.test.com/settings");
+      } catch {
+        // Expected
+      }
+    });
+
+    expect(result.current.error?.message).toBe("Server error");
+
+    // Second call succeeds - error should be cleared
+    await act(async () => {
+      await result.current.openPortal("https://app.test.com/settings");
+    });
+
+    expect(result.current.error).toBeNull();
+  });
+});