@tribe-nest/forge 3.29.0 → 3.34.0

package/src/ui/styled/_tests/MembershipCheckout.spec.tsx

@@ -0,0 +1,364 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor, fireEvent, cleanup } from "@testing-library/react";
+import axios, { type AxiosAdapter, type InternalAxiosRequestConfig } from "axios";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { Currency, type MembershipTier, type PublicAuthUser } from "../../../types/models";
+import { MembershipCheckout } from "../MembershipCheckout";
+
+/**
+ * Membership signup, end to end, over the REAL query/mutation layer.
+ *
+ * The two things asserted hardest are the two that cost money:
+ *
+ *  1. **What is SENT.** Every request is captured off the axios adapter, so
+ *     `amount` is checked as a number on the wire rather than as a number in a
+ *     component's state. A pay-what-you-want box that renders "25" and posts 0
+ *     passes any assertion made on the screen alone, and that is exactly the
+ *     defect this file exists for.
+ *  2. **Which currency that number is in.** The fan's chosen display currency
+ *     converts the totals they READ and must never touch the figure they TYPE:
+ *     the tier rows and the API are both in the tenant's settlement currency.
+ *
+ * jsdom, because the amount box is seeded by an effect and the whole flow is
+ * clicks. The adapter is swapped rather than the modules mocked, so
+ * `useCreateSubscription`, `useGetMembershipTiers`, `PublicAuthProvider` and the
+ * hook all stay in the path: a rename of an endpoint or a payload field fails
+ * here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const tier = (overrides: Partial<MembershipTier> = {}): MembershipTier => ({
+  id: "tier-1",
+  name: "Inner Circle",
+  description: "The good stuff",
+  payWhatYouWant: false,
+  benefits: [],
+  ...overrides,
+});
+
+const member: PublicAuthUser = {
+  id: "account-1",
+  email: "fan@example.com",
+  firstName: "Fan",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+};
+
+/** Every request the component made, in order. */
+let sent: { method: string; url: string; body: Record<string, unknown> | null }[] = [];
+let realAdapter: AxiosAdapter | undefined;
+
+/**
+ * The tenant settles in USD; this visitor reads prices in NGN at 1500 to the
+ * dollar. Any figure that has been through the rate is instantly recognisable.
+ */
+const currencies = {
+  supportedCurrencies: [Currency.USD, Currency.NGN],
+  userCurrency: Currency.NGN,
+  exchangeRates: { [Currency.USD]: { [Currency.NGN]: 1500 } },
+};
+
+function installAdapter(tiers: MembershipTier[]) {
+  sent = [];
+  const adapter: AxiosAdapter = async (config: InternalAxiosRequestConfig) => {
+    const url = config.url ?? "";
+    const body = config.data ? (JSON.parse(config.data as string) as Record<string, unknown>) : null;
+    sent.push({ method: (config.method ?? "get").toLowerCase(), url, body });
+
+    const reply = (data: unknown) =>
+      Promise.resolve({ data, status: 200, statusText: "OK", headers: {}, config } as never);
+
+    if (url.includes("/public/membership-tiers")) return reply(tiers);
+    if (url.includes("/public/websites/site-config")) return reply({ currency: "USD" });
+    if (url.includes("/public/currencies")) return reply(currencies);
+    if (url.includes("/public/payments/subscriptions/free")) return reply({ membershipId: "m-1" });
+    if (url.includes("/public/payments/subscriptions")) {
+      return reply({ membershipId: "m-1", subscriptionId: "s-1", clientSecret: "pi_secret", requiresPayment: true });
+    }
+    return reply({});
+  };
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = adapter;
+}
+
+function mount(opts: { tiers: MembershipTier[]; user?: PublicAuthUser; initialTierId?: string }) {
+  installAdapter(opts.tiers);
+  // `"initialTierId" in opts` rather than `??`, so a test can ask for NO
+  // preselected tier (the grid) without the default quietly putting one back.
+  const initialTierId = "initialTierId" in opts ? opts.initialTierId : "tier-1";
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={
+            {
+              user: opts.user ?? member,
+              isInitialized: true,
+              isAuthenticated: true,
+              currencies,
+              userSelectedCurrency: Currency.NGN,
+            } as never
+          }
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <MembershipCheckout initialTierId={initialTierId} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+const amountBox = () => screen.getByRole("spinbutton") as HTMLInputElement;
+const subscribeButton = () =>
+  screen.getByRole("button", { name: /Subscribe|Confirm change|Processing/i }) as HTMLButtonElement;
+const subscriptionPosts = () =>
+  sent.filter((r) => r.method === "post" && r.url.includes("/public/payments/subscriptions"));
+
+beforeEach(() => {
+  sent = [];
+});
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+});
+
+describe("pay-what-you-want: the figure that is sent", () => {
+  it("REGRESSION: sends the tier's floor when the fan touches nothing, never 0", async () => {
+    // The defect: `customAmount` initialised to 0 and nothing seeded it from the
+    // tier, so the first press of Subscribe posted `amount: 0`. The server takes
+    // the amount as a positive number and refuses that outright, so a
+    // pay-what-you-want tier could not be bought at all.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    expect(amountBox().value).toBe("37500");
+
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({
+      amount: 25,
+      billingCycle: "month",
+      membershipTierId: "tier-1",
+      profileId: PROFILE_ID,
+    });
+  });
+
+  it("sends a generous figure, converted from what was typed", async () => {
+    // The fan types naira because that is what the page is priced in; the API
+    // is charged in the settlement currency.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "60000" } });
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    // 60,000 naira at 1500 to the dollar.
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 40 });
+  });
+
+  it("REGRESSION: switching to yearly re-seeds the box to the YEARLY floor and sends it", async () => {
+    // The floor belongs to the cycle. Carrying the monthly minimum onto a yearly
+    // subscription sells a whole year for a month's money.
+    mount({
+      tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 5, payWhatYouWantYearlyMinimum: 50 })],
+    });
+
+    await waitFor(() => expect(amountBox().value).toBe("7500"));
+    const [monthly, yearly] = screen.getAllByRole("radio") as HTMLInputElement[];
+    expect(monthly.checked).toBe(true);
+    fireEvent.click(yearly);
+    // 50 USD, shown in the currency the fan is reading.
+    expect(amountBox().value).toBe("75000");
+
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 50, billingCycle: "year" });
+  });
+
+  it("refuses a figure under the floor beside the field, and sends nothing", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "3" } });
+    fireEvent.click(subscribeButton());
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+
+  it("refuses a cleared box, which is the zero the server will not take", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    await waitFor(() => expect(amountBox()).toBeTruthy());
+    fireEvent.change(amountBox(), { target: { value: "" } });
+    fireEvent.click(subscribeButton());
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+});
+
+describe("currency: what converts and what does not", () => {
+  it("prints the pay-what-you-want floor in the VISITOR's currency", async () => {
+    // The whole screen is priced in naira, so the box is too. Pricing a tier in
+    // one currency and asking for the amount in another makes a fan do the
+    // arithmetic to buy something, and they will get it wrong.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const label = await screen.findByText(/How much would you like to pay/i);
+    // 25 USD at 1500 to the dollar.
+    expect(label.textContent).toContain("₦37,500");
+    expect(label.textContent).not.toContain("$25");
+  });
+
+  it("seeds the box with the floor, in the currency the fan is reading", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    expect(input.value).toBe("37500");
+  });
+
+  it("🔴 REGRESSION: sends a WHOLE settlement unit, never a raw quotient", async () => {
+    // Every membership price column is an `integer`. A raw quotient reached
+    // `ProfilePaymentPrice.findOne({ amount })` and Postgres answered
+    // `invalid input syntax for type integer: "426.76681461249575"` - a 500 on
+    // the subscribe button, from a number the fan never saw.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    // 40,001 naira at 1500 is 26.667 dollars, which does not divide evenly.
+    fireEvent.change(input, { target: { value: "40001" } });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const sent = (subscriptionPosts()[0].body as { amount: number }).amount;
+    expect(Number.isInteger(sent)).toBe(true);
+    expect(sent).toBe(27);
+  });
+
+  it("🔴 REGRESSION: converts what the fan TYPES back to the settlement currency", async () => {
+    // The half that stops the disaster. The API charges in USD, so a fan typing
+    // 37,500 meaning naira must be billed 25 dollars and not 37,500 of them.
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    const input = (await screen.findByLabelText(/How much would you like to pay/i)) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "75000" } });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    // 75,000 naira at 1500 to the dollar is 50 dollars.
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 50 });
+  });
+
+  it("converts the total the fan only reads", async () => {
+    mount({ tiers: [tier({ payWhatYouWant: true, payWhatYouWantMinimum: 25 })] });
+
+    // 25 USD at 1500 to the dollar.
+    expect(await screen.findByText("₦37,500")).toBeTruthy();
+  });
+
+  it("sends the settlement figure even while the screen reads naira", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body).toMatchObject({ amount: 10 });
+  });
+});
+
+describe("billing cycles a tier actually sells", () => {
+  it("REGRESSION: buys a YEARLY-ONLY tier as a paid subscription, not as a free one", async () => {
+    // The defect: the cycle defaulted to the literal "month", the tier had no
+    // monthly price, so it was read as free and activated through
+    // `/subscriptions/free`. The fan got the tier and the artist got nothing.
+    mount({ tiers: [tier({ priceYearly: 100 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const post = subscriptionPosts()[0];
+    expect(post.url).not.toContain("/free");
+    expect(post.body).toMatchObject({ amount: 100, billingCycle: "year" });
+  });
+
+  it("offers no cycle choice when the tier sells only one", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10 })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    expect(screen.queryByRole("radio")).toBeNull();
+  });
+
+  it("activates a genuinely free tier through the free endpoint, with no amount", async () => {
+    mount({ tiers: [tier({ name: "Free Circle" })] });
+
+    await waitFor(() => expect(subscribeButton()).toBeTruthy());
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    const post = subscriptionPosts()[0];
+    expect(post.url).toContain("/subscriptions/free");
+    expect(post.body).not.toHaveProperty("amount");
+  });
+});
+
+describe("the tier grid, when no tier was chosen up front", () => {
+  it("does not offer the tier the member is already on", async () => {
+    const onTier = { ...member, membership: { membershipTierId: "tier-1" } } as unknown as PublicAuthUser;
+    mount({
+      tiers: [tier({ id: "tier-1", name: "Inner Circle", priceMonthly: 10 }), tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })],
+      user: onTier,
+      initialTierId: undefined,
+    });
+
+    expect(await screen.findByText("Current plan")).toBeTruthy();
+    // One button per selectable tier: the current one offers a sentence instead.
+    expect(screen.getAllByRole("button", { name: "Select this tier" })).toHaveLength(1);
+  });
+
+  it("REGRESSION: advertises a yearly-only pay-what-you-want tier on its yearly floor", async () => {
+    // Reading the monthly minimum unconditionally printed "from ₦0/mo", which
+    // reads as free and is the opposite of what the tier costs.
+    mount({
+      tiers: [tier({ payWhatYouWant: true, payWhatYouWantYearlyMinimum: 60 })],
+      initialTierId: undefined,
+    });
+
+    const label = await screen.findByText(/Pay what you want from/i);
+    // 60 USD at 1500 to the dollar, advertised per year.
+    expect(label.textContent).toContain("₦90,000");
+    expect(label.textContent).toContain("/yr");
+  });
+
+  it("calls a change a change for a member with a live subscription", async () => {
+    const paying = {
+      ...member,
+      membership: { membershipTierId: "tier-1", status: "active", paymentProviderSubscriptionId: "sub_123" },
+    } as unknown as PublicAuthUser;
+    mount({ tiers: [tier({ id: "tier-2", name: "Backstage", priceMonthly: 20 })], user: paying, initialTierId: "tier-2" });
+
+    expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
+  });
+});

package/src/ui/styled/broadcast/BroadcastPassValidation.tsx

@@ -0,0 +1,187 @@
+import { useState, type CSSProperties, type ReactNode } from "react";
+import type { ILiveBroadcast } from "../../../types/models";
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme, type ForgeTheme } from "../../theme/ForgeThemeProvider";
+import { buttonStyle } from "../Button";
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+  boxSizing: "border-box",
+});
+
+export interface BroadcastPassValidationProps {
+  broadcast: ILiveBroadcast;
+  /** Present a ticket code. Rejection comes back through `error`, not a throw the caller sees. */
+  onValidate: (ticketCode: string) => void | Promise<unknown>;
+  /** True while the code is in flight. */
+  isValidating?: boolean;
+  /** Why the last code was refused. Stays visible: it is a validation error. */
+  error?: string | null;
+  /**
+   * The buy-a-ticket panel, supplied by the caller so this component stays free
+   * of data hooks and can be rendered (and asserted on) without a provider tree.
+   */
+  buyTickets?: ReactNode;
+}
+
+/**
+ * THE PAYWALL. A broadcast with a linked event does not play a frame until a
+ * viewer has presented a ticket code that the server accepted.
+ *
+ * Everything a viewer can see before that point is deliberately worthless: the
+ * title and the thumbnail, which are already public on the list page. The video
+ * element is not mounted, the playback URL is not in the markup, and the chat
+ * socket is not opened, because the component that does all three is not
+ * rendered until `useBroadcastWatch` reports a validated pass.
+ *
+ * The refusal message says only that the code was not accepted. It never says
+ * which event a code IS valid for, which would turn this box into a way to test
+ * ticket ids against every broadcast on the site.
+ */
+export function BroadcastPassValidation({
+  broadcast,
+  onValidate,
+  isValidating,
+  error,
+  buyTickets,
+}: BroadcastPassValidationProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const [ticketCode, setTicketCode] = useState("");
+  const thumb = broadcast.thumbnailUrl || broadcast.generatedThumbnailUrl;
+
+  // Trimmed, because a ticket code is nearly always pasted and a pasted code
+  // nearly always brings a trailing space with it.
+  const trimmed = ticketCode.trim();
+  const canSubmit = !!trimmed && !isValidating;
+
+  const submit = () => {
+    if (!canSubmit || !broadcast.id) return;
+    void onValidate(trimmed);
+  };
+
+  return (
+    <div
+      data-testid="broadcast-pass-validation"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        alignItems: "center",
+        padding: "0 16px",
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div
+        style={{
+          marginTop: 16,
+          maxWidth: 500,
+          width: "100%",
+          marginInline: "auto",
+          backgroundColor: theme.colors.background,
+          borderRadius: theme.cornerRadius,
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          border: `1px solid ${theme.colors.primary}30`,
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            aspectRatio: "16/9",
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: `linear-gradient(135deg, ${theme.colors.primary}20, ${theme.colors.primary}10)`,
+          }}
+        >
+          {thumb && (
+            <img
+              src={thumb}
+              alt={broadcast.title}
+              style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", top: 0, left: 0 }}
+            />
+          )}
+        </div>
+        <div style={{ padding: 16 }}>
+          <h3 style={{ fontWeight: 600 }}>{broadcast.title}</h3>
+        </div>
+      </div>
+
+      <div
+        style={{
+          marginTop: 16,
+          maxWidth: 500,
+          width: "100%",
+          marginInline: "auto",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          alignItems: "center",
+        }}
+      >
+        <label htmlFor="broadcast-ticket-code" style={{ textAlign: "center" }}>
+          {t("forge.broadcast_pass_validation.prompt")}
+        </label>
+        <input
+          id="broadcast-ticket-code"
+          data-testid="broadcast-ticket-code"
+          placeholder={t("forge.broadcast_pass_validation.input_placeholder")}
+          value={ticketCode}
+          onChange={(e) => setTicketCode(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key !== "Enter") return;
+            e.preventDefault();
+            submit();
+          }}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={error ? "broadcast-ticket-code-error" : undefined}
+          style={inputStyle(theme)}
+        />
+        {error && (
+          <p
+            id="broadcast-ticket-code-error"
+            data-testid="broadcast-pass-error"
+            role="alert"
+            // Refusal is the one place a non-theme colour is right: red is the
+            // convention for "this input is wrong", and the artist's primary
+            // could be any hue including a green.
+            style={{ color: "#ef4444", fontSize: 13, margin: 0, alignSelf: "flex-start" }}
+          >
+            {error}
+          </p>
+        )}
+        <button
+          type="button"
+          data-testid="broadcast-pass-submit"
+          onClick={submit}
+          disabled={!canSubmit}
+          style={buttonStyle(theme, { fullWidth: true, disabled: !canSubmit })}
+        >
+          {isValidating
+            ? t("forge.broadcast_pass_validation.validating")
+            : t("forge.broadcast_pass_validation.join")}
+        </button>
+
+        {buyTickets && (
+          <>
+            <p style={{ marginBlock: 16 }}>{t("forge.broadcast_pass_validation.or")}</p>
+            {buyTickets}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default BroadcastPassValidation;