@tribe-nest/forge 3.53.0 → 3.57.0

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

@@ -79,6 +79,24 @@ function installAdapter(tiers: MembershipTier[]) {
     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/membership-applications")) {
+      return reply({
+        application: {
+          id: "app-1",
+          profileId: PROFILE_ID,
+          membershipTierId: "tier-1",
+          accountId: "account-1",
+          status: "pending",
+          billingCycle: null,
+          amount: null,
+          currency: null,
+          message: null,
+          closedReason: null,
+        },
+        requiresCard: false,
+        clientSecret: null,
+      });
+    }
     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 });
@@ -362,3 +380,91 @@ describe("the tier grid, when no tier was chosen up front", () => {
     expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
   });
 });
+
+describe("free trials", () => {
+  it("shows the trial line and Start free trial on the select step for an eligible fan", async () => {
+    mount({ tiers: [tier({ priceMonthly: 12, trialDays: 14, trialEligible: true })] });
+
+    const line = await screen.findByTestId("membership-checkout-trial-line");
+    const ends = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+    expect(line.textContent).toBe(`14-day free trial. Your first charge is on ${ends}.`);
+    expect(screen.getByRole("button", { name: "Start free trial" })).toBeTruthy();
+  });
+
+  it("shows neither to a fan who already had a trial", async () => {
+    mount({ tiers: [tier({ priceMonthly: 12, trialDays: 14, trialEligible: false })] });
+
+    await screen.findByText("Inner Circle", { exact: false });
+    expect(screen.queryByTestId("membership-checkout-trial-line")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Start free trial" })).toBeNull();
+  });
+});
+
+describe("tier questionnaires", () => {
+  const questions = [
+    { id: "q-why", question: "Why do you want to join?", type: "textarea" },
+    { id: "q-city", question: "Which city?", type: "select", options: ["Berlin", "Lagos"] },
+    { id: "q-handle", question: "Instagram handle", type: "text", optional: true },
+  ];
+  const applicationPosts = () =>
+    sent.filter((r) => r.method === "post" && r.url.includes("/public/membership-applications"));
+
+  it("renders the questions, required ones marked, and no free-text message box", async () => {
+    mount({ tiers: [tier({ priceMonthly: 0, joinMode: "application", questionnaire: questions })] });
+
+    const why = (await screen.findByLabelText(/Why do you want to join\?/)) as HTMLTextAreaElement;
+    expect(why.tagName).toBe("TEXTAREA");
+    expect(why.required).toBe(true);
+    expect((screen.getByLabelText(/Which city\?/) as HTMLSelectElement).tagName).toBe("SELECT");
+    expect((screen.getByLabelText(/Instagram handle/) as HTMLInputElement).required).toBe(false);
+    expect(screen.queryByText(/Anything you'd like us to know/i)).toBeNull();
+    expect(screen.queryByPlaceholderText(/Tell us a little about yourself/i)).toBeNull();
+  });
+
+  it("refuses a blank required answer beside the questions and sends nothing", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10, questionnaire: questions })] });
+
+    await screen.findByLabelText(/Why do you want to join\?/);
+    fireEvent.click(subscribeButton());
+
+    const refusal = await screen.findByTestId("membership-questionnaire-refusal");
+    expect(refusal.textContent).toBe("Please answer: Why do you want to join?");
+    expect(screen.getAllByText("This field is required")).toHaveLength(2);
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+
+  it("sends the answers with the paid subscription", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10, questionnaire: questions })] });
+
+    fireEvent.change(await screen.findByLabelText(/Why do you want to join\?/), { target: { value: "Big fan" } });
+    fireEvent.change(screen.getByLabelText(/Which city\?/), { target: { value: "Berlin" } });
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body?.questionnaire).toEqual([
+      { id: "q-why", question: "Why do you want to join?", type: "textarea", answer: "Big fan" },
+      { id: "q-city", question: "Which city?", type: "select", options: ["Berlin", "Lagos"], answer: "Berlin" },
+      { id: "q-handle", question: "Instagram handle", type: "text", answer: "" },
+    ]);
+  });
+
+  it("after applying, links to the account page rather than the membership list", async () => {
+    mount({ tiers: [tier({ priceMonthly: 0, joinMode: "application", questionnaire: questions })] });
+
+    fireEvent.change(await screen.findByLabelText(/Why do you want to join\?/), { target: { value: "Big fan" } });
+    fireEvent.change(screen.getByLabelText(/Which city\?/), { target: { value: "Lagos" } });
+    fireEvent.click(screen.getByRole("button", { name: "Apply to join" }));
+
+    await waitFor(() => expect(applicationPosts()).toHaveLength(1));
+    expect(applicationPosts()[0].body).not.toHaveProperty("message");
+    expect(applicationPosts()[0].body?.questionnaire).toHaveLength(3);
+    expect(await screen.findByText("Application received")).toBeTruthy();
+    const link = screen.getByRole("link", { name: "Go to your account" }) as HTMLAnchorElement;
+    expect(link.getAttribute("href")).toBe("/i/account");
+    expect(screen.queryByRole("link", { name: "View memberships" })).toBeNull();
+  });
+});

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

@@ -0,0 +1,139 @@
+// @vitest-environment jsdom
+import { describe, it, expect, 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 type { MembershipApplicationStatus, MembershipTier } from "../../../types/models";
+import { MembershipTiers } from "../MembershipTiers";
+
+/**
+ * The tier card under curated access, over the REAL query layer: what the card
+ * offers for each join mode and each state of the fan's own application, that
+ * the invite token on the url reaches the tier list request, and that Withdraw
+ * posts to the right application.
+ */
+
+const PROFILE_ID = "profile-1";
+let sent: { method: string; url: string; params: Record<string, unknown>; body: Record<string, unknown> | null }[] = [];
+let realAdapter: AxiosAdapter | undefined;
+
+const tier = (id: string, overrides: Partial<MembershipTier> = {}): MembershipTier => ({
+  id,
+  name: `Tier ${id}`,
+  description: "",
+  priceMonthly: 10,
+  payWhatYouWant: false,
+  benefits: [],
+  ...overrides,
+});
+
+const withApplication = (id: string, status: MembershipApplicationStatus) =>
+  tier(id, { joinMode: "application", myApplication: { id: `app-${id}`, status, paymentWindowExpiresAt: null } });
+
+function mount(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, params: config.params ?? {}, 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("/withdraw")) return reply({ application: { id: "x", status: "withdrawn" } });
+    return reply({});
+  };
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = adapter;
+  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: null, isInitialized: true, isAuthenticated: false } as never}>
+          <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+            <MembershipTiers />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+  window.history.replaceState(null, "", "/");
+});
+
+const cardOf = async (name: string) => {
+  const heading = await screen.findByRole("heading", { name });
+  return heading.parentElement as HTMLElement;
+};
+
+describe("MembershipTiers: the card per join mode and application state", () => {
+  it("reads Select, Accept invite and Apply to join by join mode", async () => {
+    mount([tier("open"), tier("inv", { joinMode: "invite" }), tier("app", { joinMode: "application" })]);
+
+    expect((await cardOf("Tier open")).textContent).toContain("Select");
+    expect((await cardOf("Tier inv")).textContent).toContain("Accept invite");
+    expect((await cardOf("Tier app")).textContent).toContain("Apply to join");
+  });
+
+  it("shows the application's state instead of the join button", async () => {
+    mount([
+      withApplication("p", "pending"),
+      withApplication("a", "approved"),
+      withApplication("f", "payment_failed"),
+      withApplication("d", "declined"),
+    ]);
+
+    const pending = await cardOf("Tier p");
+    expect(pending.textContent).toContain("Application pending");
+    expect(pending.textContent).toContain("Withdraw application");
+    expect(pending.textContent).not.toContain("Apply to join");
+
+    const approved = await cardOf("Tier a");
+    expect(approved.textContent).toContain("Approved, finishing up");
+    expect(approved.querySelector("button")).toBeNull();
+
+    const failed = await cardOf("Tier f");
+    expect(failed.textContent).toContain("Approved: complete your membership");
+    expect(failed.textContent).toContain("Complete your membership");
+
+    const declined = await cardOf("Tier d");
+    expect(declined.textContent).toContain("Not approved");
+    expect(declined.querySelector("button")).toBeNull();
+  });
+
+  it("withdraws the pending application it shows", async () => {
+    mount([withApplication("p", "pending")]);
+    const card = await cardOf("Tier p");
+    fireEvent.click(card.querySelector("button") as HTMLButtonElement);
+
+    await waitFor(() => expect(sent.some((r) => r.method === "post" && r.url.includes("/withdraw"))).toBe(true));
+    const post = sent.find((r) => r.url.includes("/withdraw"))!;
+    expect(post.url).toContain("/public/membership-applications/app-p/withdraw");
+    expect(post.body).toEqual({ profileId: PROFILE_ID });
+  });
+});
+
+describe("the invite token reaches the tier list", () => {
+  it("forwards `?invite=` as inviteToken", async () => {
+    window.history.replaceState(null, "", "/i/membership?invite=tok-123");
+    mount([tier("inv", { joinMode: "invite" })]);
+    await cardOf("Tier inv");
+
+    const get = sent.find((r) => r.url.includes("/public/membership-tiers"))!;
+    expect(get.params).toEqual({ profileId: PROFILE_ID, inviteToken: "tok-123" });
+  });
+
+  it("sends no inviteToken without one", async () => {
+    mount([tier("open")]);
+    await cardOf("Tier open");
+
+    const get = sent.find((r) => r.url.includes("/public/membership-tiers"))!;
+    expect(get.params).toEqual({ profileId: PROFILE_ID });
+  });
+});

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

@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, 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 type { MembershipTier } from "../../../types/models";
+import { MembershipTiers } from "../MembershipTiers";
+
+/**
+ * The tier card with a free trial: the badge and the "Start free trial" button
+ * appear only when this fan would get the trial, an application tier keeps
+ * "Apply to join", and a member with a live subscription (changing tier) is
+ * offered no trial.
+ */
+
+let realAdapter: AxiosAdapter | undefined;
+
+const tier = (id: string, overrides: Partial<MembershipTier> = {}): MembershipTier => ({
+  id,
+  name: `Tier ${id}`,
+  description: "",
+  priceMonthly: 10,
+  payWhatYouWant: false,
+  benefits: [],
+  ...overrides,
+});
+
+function mount(tiers: MembershipTier[], user: unknown = null) {
+  const adapter: AxiosAdapter = async (config: InternalAxiosRequestConfig) =>
+    ({ data: (config.url ?? "").includes("/public/membership-tiers") ? tiers : {}, status: 200, statusText: "OK", headers: {}, config }) as never;
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = adapter;
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider value={{ user, isInitialized: true, isAuthenticated: !!user } as never}>
+          <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+            <MembershipTiers />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+});
+
+const cardOf = async (name: string) => (await screen.findByRole("heading", { name })).parentElement as HTMLElement;
+const badge = (card: HTMLElement) => card.querySelector('[data-testid="membership-tier-trial-badge"]');
+
+describe("MembershipTiers: free trial badge and button", () => {
+  it("shows the badge and Start free trial when eligible, including for a signed-out visitor", async () => {
+    mount([tier("eligible", { trialDays: 14, trialEligible: true }), tier("anon", { trialDays: 7 })]);
+
+    const eligible = await cardOf("Tier eligible");
+    expect(badge(eligible)?.textContent).toBe("14-day free trial");
+    expect(eligible.querySelector("button")?.textContent).toBe("Start free trial");
+
+    const anon = await cardOf("Tier anon");
+    expect(badge(anon)?.textContent).toBe("7-day free trial");
+    expect(anon.querySelector("button")?.textContent).toBe("Start free trial");
+  });
+
+  it("shows no badge and the plain button to a fan who already had a trial, or on a tier without one", async () => {
+    mount([tier("used", { trialDays: 14, trialEligible: false }), tier("none", { trialDays: null })]);
+
+    for (const name of ["Tier used", "Tier none"]) {
+      const card = await cardOf(name);
+      expect(badge(card), name).toBeNull();
+      expect(card.querySelector("button")?.textContent, name).toBe("Select");
+    }
+  });
+
+  it("keeps Apply to join on an application tier, with the trial badge", async () => {
+    mount([tier("app", { joinMode: "application", trialDays: 30 })]);
+    const card = await cardOf("Tier app");
+    expect(badge(card)?.textContent).toBe("30-day free trial");
+    expect(card.querySelector("button")?.textContent).toBe("Apply to join");
+  });
+
+  it("offers no trial to a member with a live paid subscription (a tier change)", async () => {
+    mount([tier("t", { trialDays: 14, trialEligible: true })], {
+      id: "account-1",
+      membership: { paymentProviderSubscriptionId: "sub_1", status: "active", membershipTierId: "other" },
+    });
+    const card = await cardOf("Tier t");
+    expect(badge(card)).toBeNull();
+    expect(card.querySelector("button")?.textContent).toBe("Select");
+  });
+});