@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/headless/_tests/useCommunityJoin.spec.tsx

@@ -27,7 +27,7 @@ vi.mock("../../../utils/paystackCheckout", async (importOriginal) => ({
 /**
  * The join sheet's step machine, driven with no markup.
  *
- *     email -> code -> tier -> questions -> payment -> inside
+ *     email -> code -> (profile) -> tier -> questions -> payment -> inside
  *
  * Every step that does not apply is skipped, every success lands INSIDE the
  * community (never `/i/account`), invites preset their tier and lock their
@@ -36,9 +36,13 @@ vi.mock("../../../utils/paystackCheckout", async (importOriginal) => ({
 
 const HOME = "/i/communities/fan-club/home";
 let onJoined: ReturnType<typeof vi.fn>;
+/** Whether the email-first verify finds an account for the address. */
+let existingAccount = false;
+const TICKET = "ab".repeat(32);
 
 beforeEach(() => {
   onJoined = vi.fn();
+  existingAccount = false;
   paystack.open.mockClear();
   window.history.replaceState(null, "", "/i/communities/fan-club");
 });
@@ -63,6 +67,7 @@ function routes({
 }): Route[] {
   return [
     ...extra,
+    ...emailRoutes(),
     get(/^\/public\/communities\/fan-club\/invite$/, () => invite),
     meRoute(me),
     detailRoute((req) => ({
@@ -80,22 +85,47 @@ function routes({
   ];
 }
 
-async function signUp(result: { current: ReturnType<typeof useCommunityJoin> }, email = "fan@example.com") {
-  act(() => {
-    result.current.signup.setFirstName("Fan");
-    result.current.signup.setLastName("Person");
-    if (!result.current.emailLocked) result.current.signup.setEmail(email);
-    result.current.signup.setPassword("password123");
-    result.current.signup.setAcceptedTerms(true);
-  });
+/** A session as `/public/sessions/email/verify` and `/complete` answer it. */
+const signedIn = (email: string) => ({
+  status: "signed_in",
+  account: account(email),
+  token: "access-1",
+  refreshToken: "refresh-1",
+  associationId: "assoc-1",
+});
+
+/** The email-first endpoints. A code of `000000` is wrong; `existingAccount` decides the verify answer. */
+function emailRoutes(): Route[] {
+  return [
+    post("/public/sessions/email/start", (req) => ({ status: "code_sent", email: req.body?.email })),
+    post("/public/sessions/email/verify", (req) => {
+      if (req.body?.code === "000000") throw { status: 400, message: "Invalid or expired code." };
+      return existingAccount ? signedIn(String(req.body?.email)) : { status: "needs_profile", ticket: TICKET };
+    }),
+    post("/public/sessions/email/complete", (req) => signedIn(String(req.body?.email))),
+  ];
+}
+
+const press = async (result: { current: ReturnType<typeof useCommunityJoin> }) => {
   await act(async () => {
     await result.current.next();
   });
+};
+
+/** Email first, for someone new: email, code, then a name and the terms. */
+async function signUp(result: { current: ReturnType<typeof useCommunityJoin> }, email = "fan@example.com") {
+  if (!result.current.emailLocked) act(() => result.current.emailFlow.setEmail(email));
+  await press(result);
   expect(result.current.step).toBe("code");
   act(() => result.current.setCode("123456"));
-  await act(async () => {
-    await result.current.next();
+  await press(result);
+  expect(result.current.step).toBe("profile");
+  act(() => {
+    result.current.emailFlow.setFirstName("Fan");
+    result.current.emailFlow.setLastName("Person");
+    result.current.emailFlow.setAcceptedTerms(true);
   });
+  await press(result);
 }
 
 describe("the step order", () => {
@@ -115,6 +145,7 @@ describe("the step order", () => {
   it.each<[string, Partial<CommunityJoinStepInput>, string]>([
     ["anonymous asks who the fan is", { isAuthenticated: false }, "email"],
     ["then the emailed code", { isAuthenticated: false, awaitingCode: true }, "code"],
+    ["then a name, for someone new", { isAuthenticated: false, awaitingCode: true, needsProfile: true }, "profile"],
     ["a mismatched invite stays on identity even when signed in", { emailMismatch: true }, "email"],
     ["no tier chosen yet", { hasSelectedTier: false }, "tier"],
     ["a tier with a choice to make", { tierStepOpen: true }, "tier"],
@@ -316,7 +347,7 @@ describe("invites", () => {
     installAdapter(routes({ tiers: [free], invite: emailInvite("valid") }));
     const { result } = renderHook(() => useCommunityJoin({ invite: "tok-1", onJoined }), { wrapper: wrapper() });
     await waitFor(() => expect(result.current.emailLocked).toBe(true));
-    expect(result.current.signup.email).toBe("invited@example.com");
+    expect(result.current.emailFlow.email).toBe("invited@example.com");
     expect(result.current.lockedEmail).toBe("invited@example.com");
 
     await signUp(result);
@@ -342,9 +373,9 @@ describe("invites", () => {
       await result.current.signInAsInvited();
     });
     expect(logout).toHaveBeenCalledTimes(1);
-    expect(result.current.mode).toBe("signin");
+    expect(result.current.mode).toBe("email");
     expect(result.current.emailMismatch).toBeNull();
-    await waitFor(() => expect(result.current.login.email).toBe("invited@example.com"));
+    await waitFor(() => expect(result.current.emailFlow.email).toBe("invited@example.com"));
     expect(result.current.emailLocked).toBe(true);
   });
 
@@ -380,3 +411,186 @@ describe("invites", () => {
     expect(calls("post", "/public/payments/subscriptions/free")[0].body).not.toHaveProperty("joinToken");
   });
 });
+
+describe("email first", () => {
+  it("an address with an account: start, code, signed in by the code alone, then joined", async () => {
+    existingAccount = true;
+    const adopted = vi.fn();
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ controls: { adopted } }) });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.step).toBe("email");
+    expect(result.current.mode).toBe("email");
+
+    act(() => result.current.emailFlow.setEmail("  known@example.com "));
+    await press(result);
+    expect(result.current.step).toBe("code");
+    expect(result.current.codeEmail).toBe("  known@example.com ");
+    expect(calls("post", "/public/sessions/email/start").map((r) => r.body)).toEqual([
+      { profileId: "profile-1", email: "known@example.com" },
+    ]);
+
+    act(() => result.current.setCode("123456"));
+    await press(result);
+    expect(calls("post", "/public/sessions/email/verify").map((r) => r.body)).toEqual([
+      { profileId: "profile-1", email: "known@example.com", code: "123456" },
+    ]);
+    // The session went through the context's one storage path, untouched.
+    expect(adopted).toHaveBeenCalledWith({ token: "access-1", refreshToken: "refresh-1", account: account("known@example.com") });
+    expect(calls("post", "/public/sessions/email/complete")).toHaveLength(0);
+
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(calls("post", "/public/payments/subscriptions/free")[0].body).toMatchObject({ membershipTierId: "tier-free" });
+  });
+
+  it("a new address: the code is right, then a name and the terms, then signed in and joined", async () => {
+    const adopted = vi.fn();
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ controls: { adopted } }) });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    act(() => result.current.emailFlow.setEmail("new@example.com"));
+    await press(result);
+    act(() => result.current.setCode("654321"));
+    await press(result);
+    expect(result.current.step).toBe("profile");
+    expect(adopted).not.toHaveBeenCalled();
+
+    // The terms are required before anything is sent.
+    act(() => {
+      result.current.emailFlow.setFirstName(" New ");
+      result.current.emailFlow.setLastName(" Person ");
+    });
+    await press(result);
+    expect(result.current.error).toBe("You must accept the Terms and Privacy Policy.");
+    expect(calls("post", "/public/sessions/email/complete")).toHaveLength(0);
+
+    act(() => result.current.emailFlow.setAcceptedTerms(true));
+    await press(result);
+    expect(calls("post", "/public/sessions/email/complete").map((r) => r.body)).toEqual([
+      {
+        profileId: "profile-1",
+        email: "new@example.com",
+        ticket: TICKET,
+        firstName: "New",
+        lastName: "Person",
+        acceptedTerms: true,
+        acceptedPrivacy: true,
+      },
+    ]);
+    expect(adopted).toHaveBeenCalledWith({ token: "access-1", refreshToken: "refresh-1", account: account("new@example.com") });
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(onJoined).toHaveBeenCalledWith({ pending: false, requiresConfirmation: false, path: `${HOME}?welcome=1` });
+  });
+
+  it("a wrong code says so and stays on the code step", async () => {
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    act(() => result.current.emailFlow.setEmail("fan@example.com"));
+    await press(result);
+    act(() => result.current.setCode("000000"));
+    await press(result);
+    expect(result.current.step).toBe("code");
+    expect(result.current.error).toBe("Invalid or expired code.");
+  });
+
+  it("a code that is not six digits is refused before anything is sent", async () => {
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    act(() => result.current.emailFlow.setEmail("fan@example.com"));
+    await press(result);
+    act(() => result.current.setCode("123"));
+    await press(result);
+    expect(result.current.error).toBe("Enter the 6-digit code we emailed you.");
+    expect(calls("post", "/public/sessions/email/verify")).toHaveLength(0);
+  });
+
+  it("an invalid email is refused before a code is asked for", async () => {
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    act(() => result.current.emailFlow.setEmail("not-an-email"));
+    await press(result);
+    expect(result.current.step).toBe("email");
+    expect(result.current.error).toBe("Please enter a valid email.");
+    expect(calls("post", "/public/sessions/email/start")).toHaveLength(0);
+  });
+
+  it("resend asks for another code; a throttled resend shows the server's message", async () => {
+    let throttle = false;
+    installAdapter(
+      routes({
+        tiers: [free],
+        extra: [
+          post("/public/sessions/email/start", (req) => {
+            if (throttle) throw { status: 400, message: "A code was already sent. Please wait a minute." };
+            return { status: "code_sent", email: req.body?.email };
+          }),
+        ],
+      }),
+    );
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    act(() => result.current.emailFlow.setEmail("fan@example.com"));
+    await press(result);
+    await act(async () => {
+      await result.current.resendCode();
+    });
+    expect(calls("post", "/public/sessions/email/start")).toHaveLength(2);
+    expect(calls("post", "/public/sessions/email/start")[1].body).toEqual({ profileId: "profile-1", email: "fan@example.com" });
+    expect(result.current.emailFlow.resent).toBe(true);
+
+    throttle = true;
+    await act(async () => {
+      await result.current.resendCode();
+    });
+    expect(result.current.error).toBe("A code was already sent. Please wait a minute.");
+    expect(result.current.step).toBe("code");
+  });
+
+  it("use a different email goes back to the email step, keeping the address to correct", async () => {
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    act(() => result.current.emailFlow.setEmail("typo@example.con"));
+    await press(result);
+    act(() => result.current.setCode("12"));
+    act(() => result.current.back());
+    expect(result.current.step).toBe("email");
+    expect(result.current.emailFlow.email).toBe("typo@example.con");
+    expect(result.current.code).toBe("");
+  });
+
+  it("use your password instead: the email and password sign-in, with the address carried over", async () => {
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    act(() => result.current.emailFlow.setEmail("pw@example.com"));
+    act(() => result.current.switchToPassword());
+    expect(result.current.mode).toBe("signin");
+    expect(result.current.login.email).toBe("pw@example.com");
+    act(() => result.current.login.setPassword("password123"));
+    await press(result);
+    expect(result.current.step).toBe("code");
+    expect(result.current.codeEmail).toBe("pw@example.com");
+    act(() => result.current.setCode("123456"));
+    await press(result);
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(calls("post", "/public/sessions/email/start")).toHaveLength(0);
+
+  });
+
+  it("switching back from the password sign-in returns to email first", async () => {
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    act(() => result.current.switchToPassword());
+    act(() => result.current.login.setEmail("back@example.com"));
+    act(() => result.current.switchToEmailCode());
+    expect(result.current.mode).toBe("email");
+    expect(result.current.step).toBe("email");
+    expect(result.current.emailFlow.email).toBe("back@example.com");
+  });
+});

package/src/ui/headless/_tests/useCommunityMembership.spec.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { communityDowngradeTiers, useCommunityMembership } from "../communities/useCommunityMembership";
+import { communityDowngradeTiers, communityMembershipBilling, useCommunityMembership } from "../communities/useCommunityMembership";
 import { account, calls, detailRoute, installAdapter, meRoute, post, restoreAdapter, tier, viewer, wrapper } from "./communityHarness";
 
 /**
@@ -63,6 +63,34 @@ describe("communityDowngradeTiers", () => {
   });
 });
 
+describe("communityMembershipBilling", () => {
+  it("reads the member's own subscription: amount, currency and cycle", () => {
+    expect(communityMembershipBilling({ amount: 12.5, currency: "EUR", billingCycle: "year" }, basic)).toEqual({
+      isPaid: true,
+      amount: 12.5,
+      currency: "EUR",
+      cycle: "year",
+    });
+  });
+
+  it("no price on the row is a free membership, whatever the tier says", () => {
+    expect(communityMembershipBilling({ amount: null, currency: null, billingCycle: null }, gold)).toEqual({
+      isPaid: false,
+      amount: null,
+      currency: null,
+      cycle: null,
+    });
+    expect(communityMembershipBilling({ amount: 0, currency: "USD", billingCycle: "month" }, gold).isPaid).toBe(false);
+  });
+
+  it("until the row arrives, the tier's own price decides paid or free, with no amount shown", () => {
+    expect(communityMembershipBilling(null, gold)).toEqual({ isPaid: true, amount: null, currency: null, cycle: null });
+    expect(communityMembershipBilling(null, free).isPaid).toBe(false);
+    expect(communityMembershipBilling(null, yearlyCheap).isPaid).toBe(true);
+    expect(communityMembershipBilling(undefined, null).isPaid).toBe(false);
+  });
+});
+
 describe("useCommunityMembership", () => {
   it("shows the tier, the renewal date and what it can move down to", async () => {
     state = onGold();