@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -0,0 +1,596 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { communityJoinStep, tierHasChoice, useCommunityJoin, type CommunityJoinStepInput } from "../communities/useCommunityJoin";
+import type { CommunityInviteState } from "../../../data/queries/useCommunities";
+import {
+  account,
+  calls,
+  detailRoute,
+  get,
+  installAdapter,
+  meRoute,
+  post,
+  restoreAdapter,
+  tier,
+  viewer,
+  wrapper,
+  type Route,
+} from "./communityHarness";
+
+const paystack = vi.hoisted(() => ({ open: vi.fn(async () => "opened" as const) }));
+vi.mock("../../../utils/paystackCheckout", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../../utils/paystackCheckout")>()),
+  openPaystackCheckout: paystack.open,
+}));
+
+/**
+ * The join sheet's step machine, driven with no markup.
+ *
+ *     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
+ * email, and a dead invite falls back to the normal join without its token.
+ */
+
+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");
+});
+afterEach(restoreAdapter);
+
+const free = tier({ id: "tier-free", name: "Free" });
+const paid = tier({ id: "tier-paid", name: "Paid", priceMonthly: 10 });
+const both = tier({ id: "tier-both", name: "Both", priceMonthly: 10, priceYearly: 100 });
+const apply = tier({ id: "tier-apply", name: "Apply", joinMode: "application" });
+const invited = tier({ id: "tier-vip", name: "VIP", joinMode: "invite" });
+
+function routes({
+  tiers,
+  me = () => viewer(),
+  invite,
+  extra = [],
+}: {
+  tiers: ReturnType<typeof tier>[];
+  me?: () => ReturnType<typeof viewer>;
+  invite?: CommunityInviteState;
+  extra?: Route[];
+}): Route[] {
+  return [
+    ...extra,
+    ...emailRoutes(),
+    get(/^\/public\/communities\/fan-club\/invite$/, () => invite),
+    meRoute(me),
+    detailRoute((req) => ({
+      // The invite-only tier is listed only with a valid token, as on the server.
+      tiers: req.params?.invite || req.params?.join ? [...tiers, invited] : tiers,
+    })),
+    post("/public/payments/subscriptions/free", () => ({ membershipId: "m-1", communitySlug: "fan-club" })),
+    post("/public/payments/subscriptions", () => ({
+      membershipId: "m-1",
+      subscriptionId: "s-1",
+      clientSecret: "pi_1_secret_2",
+      requiresPayment: true,
+    })),
+    get("/public/websites/site-config", () => ({ currency: "USD" })),
+  ];
+}
+
+/** 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 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", () => {
+  const base: CommunityJoinStepInput = {
+    isAuthenticated: true,
+    awaitingCode: false,
+    emailMismatch: false,
+    joined: false,
+    pending: false,
+    alreadyMember: false,
+    isProcessing: false,
+    hasPaymentStep: false,
+    hasSelectedTier: true,
+    tierStepOpen: false,
+    questionsOpen: false,
+  };
+  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"],
+    ["questions after the tier", { questionsOpen: true }, "questions"],
+    ["the card once a paid join started", { hasPaymentStep: true, questionsOpen: true }, "payment"],
+    ["in flight", { isProcessing: true }, "submitting"],
+    ["nothing left to ask submits", {}, "submitting"],
+    ["an application lodged", { pending: true }, "pending"],
+    ["joined", { joined: true }, "joined"],
+    ["already a member goes inside", { alreadyMember: true }, "joined"],
+  ])("%s", (_label, patch, step) => {
+    expect(communityJoinStep({ ...base, ...patch })).toBe(step);
+  });
+
+  it("a tier asks for a choice only with two cycles or a pay-what-you-want amount", () => {
+    expect(tierHasChoice(free)).toBe(false);
+    expect(tierHasChoice(paid)).toBe(false);
+    expect(tierHasChoice(both)).toBe(true);
+    expect(tierHasChoice(tier({ payWhatYouWant: true, payWhatYouWantMinimum: 5 }))).toBe(true);
+  });
+});
+
+describe("signed out, one free tier: the code is the last step", () => {
+  it("email -> code -> joined free, landing inside with welcome", async () => {
+    installAdapter(routes({ tiers: [free] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.step).toBe("email");
+
+    await signUp(result);
+
+    await waitFor(() => expect(calls("post", "/public/payments/subscriptions/free")).toHaveLength(1));
+    expect(calls("post", "/public/payments/subscriptions/free")[0].body).toMatchObject({
+      membershipTierId: "tier-free",
+      profileId: "profile-1",
+    });
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(onJoined).toHaveBeenCalledWith({ pending: false, requiresConfirmation: false, path: `${HOME}?welcome=1` });
+    expect(JSON.stringify(onJoined.mock.calls)).not.toContain("/i/account");
+  });
+});
+
+describe("signed in", () => {
+  it("several tiers: asks which, then joins the chosen one", async () => {
+    installAdapter(routes({ tiers: [free, paid] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.step).toBe("tier"));
+    expect(result.current.hasTierChoice).toBe(true);
+    act(() => result.current.selectTier(free));
+    await act(async () => {
+      await result.current.next();
+    });
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(calls("post", "/public/payments/subscriptions/free")[0].body).toMatchObject({ membershipTierId: "tier-free" });
+  });
+
+  it("?tier= preselects a tier; a tier with a cycle choice still asks", async () => {
+    installAdapter(routes({ tiers: [free, both] }));
+    const { result } = renderHook(() => useCommunityJoin({ tierId: "tier-both", onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.selectedTier?.id).toBe("tier-both"));
+    expect(result.current.step).toBe("tier");
+    act(() => result.current.setBillingCycle("year"));
+    await act(async () => {
+      await result.current.next();
+    });
+    await waitFor(() => expect(result.current.step).toBe("payment"));
+    expect(calls("post", "/public/payments/subscriptions")[0].body).toMatchObject({
+      membershipTierId: "tier-both",
+      billingCycle: "year",
+      amount: 100,
+    });
+  });
+
+  it("questions: a blank required answer is refused before anything is sent, then the answers go with the join", async () => {
+    const withQuestions = tier({
+      id: "tier-q",
+      questionnaire: [{ id: "q-why", question: "Why?", type: "text", optional: false }] as never,
+    });
+    installAdapter(routes({ tiers: [withQuestions] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.step).toBe("questions"));
+
+    await act(async () => {
+      await result.current.next();
+    });
+    expect(result.current.questionnaireRefusal?.id).toBe("q-why");
+    expect(result.current.step).toBe("questions");
+    expect(calls("post", "/public/payments/subscriptions/free")).toHaveLength(0);
+
+    act(() => result.current.setQuestionnaireAnswer("q-why", "Big fan"));
+    await act(async () => {
+      await result.current.next();
+    });
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(calls("post", "/public/payments/subscriptions/free")[0].body?.questionnaire).toEqual([
+      expect.objectContaining({ id: "q-why", answer: "Big fan" }),
+    ]);
+  });
+
+  it("paid on Stripe: the card step, returning to the community home to reconcile", async () => {
+    installAdapter(routes({ tiers: [paid] }));
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.step).toBe("payment"));
+    expect(result.current.clientSecret).toBe("pi_1_secret_2");
+    expect(result.current.paymentKind).toBe("payment");
+    expect(result.current.returnUrl).toBe(`${window.location.origin}${HOME}?confirmSubscription=1`);
+    expect(calls("post", "/public/payments/subscriptions")[0].body?.returnUrl).toBe(
+      `${window.location.origin}${HOME}?confirmSubscription=1`,
+    );
+
+    await act(async () => {
+      await result.current.onPaymentSucceeded();
+    });
+    expect(onJoined).toHaveBeenCalledWith({ pending: false, requiresConfirmation: true, path: `${HOME}?confirmSubscription=1` });
+    expect(result.current.step).toBe("joined");
+  });
+
+  it("paid on Paystack: the card step opens the provider's checkout", async () => {
+    installAdapter(
+      routes({
+        tiers: [paid],
+        extra: [
+          post("/public/payments/subscriptions", () => ({
+            membershipId: "m-1",
+            subscriptionId: "s-1",
+            accessCode: "ac_1",
+            checkoutUrl: "https://paystack.test/ac_1",
+            requiresPayment: true,
+          })),
+        ],
+      }),
+    );
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.step).toBe("payment"));
+    expect(result.current.isPaystack).toBe(true);
+    expect(result.current.clientSecret).toBeUndefined();
+    expect(paystack.open).toHaveBeenCalledWith(
+      expect.objectContaining({ accessCode: "ac_1", returnUrl: `${window.location.origin}${HOME}?confirmSubscription=1` }),
+      expect.anything(),
+    );
+    expect(onJoined).not.toHaveBeenCalled();
+  });
+
+  it("apply-to-join lands inside, pending", async () => {
+    installAdapter(
+      routes({
+        tiers: [apply],
+        extra: [
+          post("/public/membership-applications", () => ({
+            application: { id: "app-1", membershipTierId: "tier-apply", status: "pending", createdAt: "2026-09-27T00:00:00.000Z" },
+            requiresCard: false,
+            clientSecret: null,
+          })),
+        ],
+      }),
+    );
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.step).toBe("pending"));
+    expect(calls("post", "/public/membership-applications")[0].body).toMatchObject({ membershipTierId: "tier-apply" });
+    expect(onJoined).toHaveBeenCalledWith({ pending: true, requiresConfirmation: false, path: HOME });
+  });
+
+  it("a member of THIS community is taken straight inside, and nothing is sent", async () => {
+    installAdapter(
+      routes({
+        tiers: [free],
+        me: () =>
+          viewer({
+            state: "member",
+            membership: {
+              id: "m-1",
+              tierId: "tier-free",
+              tierName: "Free",
+              status: "active",
+              cancelAtPeriodEnd: false,
+              currentPeriodEnd: null,
+              pendingDowngradeTierId: null,
+            },
+          }),
+      }),
+    );
+    const { result } = renderHook(() => useCommunityJoin({ onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(result.current.alreadyMember).toBe(true);
+    await waitFor(() => expect(onJoined).toHaveBeenCalledWith({ pending: false, requiresConfirmation: false, path: HOME }));
+    expect(calls("post", /\/public\/payments\/subscriptions/)).toHaveLength(0);
+  });
+});
+
+describe("invites", () => {
+  const emailInvite = (state: CommunityInviteState["state"], invitedEmail = "invited@example.com"): CommunityInviteState => ({
+    kind: "email",
+    state,
+    invitedEmail,
+    tier: state === "valid" || state === "email_mismatch" ? invited : null,
+  });
+
+  it("a per-email invite presets its (invite-only) tier, prefills and locks the email, and forwards the token", async () => {
+    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.emailFlow.email).toBe("invited@example.com");
+    expect(result.current.lockedEmail).toBe("invited@example.com");
+
+    await signUp(result);
+
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    const [join] = calls("post", "/public/payments/subscriptions/free");
+    expect(join.body).toMatchObject({ membershipTierId: "tier-vip", inviteToken: "tok-1" });
+    expect(join.body).not.toHaveProperty("joinToken");
+  });
+
+  it("signed in as someone else: the mismatch is shown with Sign in as, which signs out into a locked sign-in", async () => {
+    const logout = vi.fn();
+    installAdapter(routes({ tiers: [free], invite: emailInvite("valid") }));
+    const { result } = renderHook(() => useCommunityJoin({ invite: "tok-1", onJoined }), {
+      wrapper: wrapper({ user: account("other@example.com"), controls: { logout } }),
+    });
+    await waitFor(() => expect(result.current.emailMismatch).not.toBeNull());
+    expect(result.current.step).toBe("email");
+    expect(result.current.emailMismatch).toEqual({ invitedEmail: "invited@example.com", signedInEmail: "other@example.com" });
+    expect(calls("post", /\/public\/payments\/subscriptions/)).toHaveLength(0);
+
+    await act(async () => {
+      await result.current.signInAsInvited();
+    });
+    expect(logout).toHaveBeenCalledTimes(1);
+    expect(result.current.mode).toBe("email");
+    expect(result.current.emailMismatch).toBeNull();
+    await waitFor(() => expect(result.current.emailFlow.email).toBe("invited@example.com"));
+    expect(result.current.emailLocked).toBe(true);
+  });
+
+  it.each(["expired", "revoked", "used", "not_found"] as const)(
+    "a %s invite says why and falls back to the normal join, without the token",
+    async (state) => {
+      installAdapter(routes({ tiers: [free], invite: emailInvite(state) }));
+      const { result } = renderHook(() => useCommunityJoin({ invite: "tok-dead", onJoined }), { wrapper: wrapper({ user: account() }) });
+      await waitFor(() => expect(result.current.inviteProblem).toBe(state));
+      expect(result.current.emailLocked).toBe(false);
+      await waitFor(() => expect(result.current.step).toBe("joined"));
+      const [join] = calls("post", "/public/payments/subscriptions/free");
+      expect(join.body).toMatchObject({ membershipTierId: "tier-free" });
+      expect(join.body).not.toHaveProperty("inviteToken");
+    },
+  );
+
+  it("a shareable link presets its tier with no email lock and forwards the join token", async () => {
+    installAdapter(routes({ tiers: [free], invite: { kind: "link", state: "valid", invitedEmail: null, tier: invited } }));
+    const { result } = renderHook(() => useCommunityJoin({ join: "link-1", onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    expect(result.current.emailLocked).toBe(false);
+    const [join] = calls("post", "/public/payments/subscriptions/free");
+    expect(join.body).toMatchObject({ membershipTierId: "tier-vip", joinToken: "link-1" });
+    expect(join.body).not.toHaveProperty("inviteToken");
+  });
+
+  it("a used-up shareable link falls back without its token", async () => {
+    installAdapter(routes({ tiers: [free], invite: { kind: "link", state: "used_up", invitedEmail: null, tier: null } }));
+    const { result } = renderHook(() => useCommunityJoin({ join: "link-1", onJoined }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.inviteProblem).toBe("used_up"));
+    await waitFor(() => expect(result.current.step).toBe("joined"));
+    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");
+  });
+});