create-ailk 0.18.0 → 0.19.1

package/templates/apps/web/app/[locale]/(authed)/account/__tests__/popups.test.tsx

@@ -0,0 +1,451 @@
+/**
+ * Tests for the New menu's three popups (#8233, spec
+ * docs/specs/8233-member-new-menu-the-new-spec.md D5–D10; AC-3, AC-4, AC-5).
+ *
+ * The Inbox page renders with every action offered; each case opens a popup
+ * through the menu, so the popup runs its real server action
+ * (`new-actions.ts`) against the mocked member reads and writes.
+ *
+ * Covers:
+ *   1. Request quote renders the request-quote magnet's CURRENT steps, read
+ *      on each open — a step the provider adds shows on the next open — and
+ *      posts the typed answers, a blank optional one omitted (AC-3).
+ *   2. Send message posts subject, body and an optional link; Schedule
+ *      service lists only the member's meeting types, reads a picked type's
+ *      slots over 14 days in the browser's time zone, and books as the
+ *      caller; with no type it says so and offers Send message. A success
+ *      closes the popup and refreshes the Inbox (AC-4).
+ *   3. A refusal shows a plain message, keeps every typed value and leaves
+ *      the popup open; a taken slot re-reads the slots (AC-5).
+ *   4. No popup asks for a name or an email.
+ */
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+
+jest.mock("next-intl/server", () => {
+  const msgs: unknown = require("../../../../../messages/en.json");
+  const dig = (obj: unknown, path: string): unknown =>
+    path.split(".").reduce<unknown>(
+      (acc, k) => (acc !== null && typeof acc === "object" ? (acc as Record<string, unknown>)[k] : undefined),
+      obj,
+    );
+  return {
+    __esModule: true,
+    getTranslations: async (arg: string | { namespace?: string; locale?: string }) => {
+      const ns = typeof arg === "string" ? arg : (arg.namespace ?? "");
+      const messages = dig(msgs, ns);
+      return (key: string, values?: Record<string, unknown>): string => {
+        const value = dig(messages, key);
+        if (typeof value !== "string") return `${ns}.${key}`;
+        return value.replace(/\{(\w+)\}/g, (m, name: string) =>
+          values && name in values ? String(values[name]) : m,
+        );
+      };
+    },
+  };
+});
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue(new Headers()),
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+const mockGetSession = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth.ts's lazy Better-Auth singleton has no HTTP/DB boundary a unit test of the session fields can mock without standing up Prisma.
+jest.mock("../../../../../auth", () => ({
+  __esModule: true,
+  auth: { api: { getSession: (...args: unknown[]) => mockGetSession(...args) } },
+}));
+
+const mockNotFound = jest.fn();
+const mockMemberMessages = jest.fn();
+const mockMemberMeetingTypes = jest.fn();
+const mockMemberAvailability = jest.fn();
+const mockMemberRequestForm = jest.fn();
+const mockMemberRequestQuote = jest.fn();
+const mockMemberSendMessage = jest.fn();
+const mockMemberBook = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistSignups: { me: jest.fn() },
+  subscription: { me: (...args: unknown[]) => mockNotFound(...args) },
+  member: {
+    pieces: (...args: unknown[]) => mockNotFound(...args),
+    purchases: (...args: unknown[]) => mockNotFound(...args),
+    appointments: (...args: unknown[]) => mockNotFound(...args),
+    messages: (...args: unknown[]) => mockMemberMessages(...args),
+    meetingTypes: (...args: unknown[]) => mockMemberMeetingTypes(...args),
+    availability: (...args: unknown[]) => mockMemberAvailability(...args),
+    requestForm: (...args: unknown[]) => mockMemberRequestForm(...args),
+    requestQuote: (...args: unknown[]) => mockMemberRequestQuote(...args),
+    sendMessage: (...args: unknown[]) => mockMemberSendMessage(...args),
+    book: (...args: unknown[]) => mockMemberBook(...args),
+  },
+}));
+
+const mockPush = jest.fn();
+const mockRefresh = jest.fn();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  useRouter: () => ({ push: mockPush, refresh: mockRefresh }),
+  usePathname: () => "/account",
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+import { PhoneTabProvider } from "@working-theory/templates/account";
+import { requestQuoteFlowConfig } from "@working-theory/validation";
+
+import Page from "../page";
+
+const SESSION = {
+  user: {
+    id: "user_1",
+    name: "Ada",
+    email: "ada@example.com",
+    emailVerified: true,
+    createdAt: new Date("2026-09-01T00:00:00.000Z"),
+  },
+};
+
+/** The cookie a single site forwards (`forwardedCookieInit()`). */
+const INIT = { headers: { cookie: "session=abc" } };
+
+const notFound = {
+  ok: false,
+  status: 404,
+  body: { ok: false, error: { code: "not_found", message: "Not found" } },
+};
+const refusal = (status: number, code: string) => ({
+  ok: false,
+  status,
+  body: { ok: false, error: { code, message: "x" } },
+});
+const ok = <T,>(body: T) => ({ ok: true, body });
+
+const TYPES = [
+  { slug: "consult", title: "Consultation", durationMinutes: 30 },
+  { slug: "review", title: "Design review", durationMinutes: 60 },
+];
+const SLOTS = [
+  { start: "2026-10-20T15:00:00.000Z", end: "2026-10-20T15:30:00.000Z" },
+  { start: "2026-10-21T16:00:00.000Z", end: "2026-10-21T16:30:00.000Z" },
+];
+const AVAILABILITY = {
+  event: { title: "Consultation", durationMinutes: 30, timeZone: "UTC" },
+  slots: SLOTS,
+};
+
+const FORM = {
+  form: { title: "Request a quote", defaultLocale: "en", steps: requestQuoteFlowConfig.steps },
+};
+const FORM_PLUS_STEP = {
+  form: {
+    ...FORM.form,
+    steps: [
+      ...requestQuoteFlowConfig.steps,
+      {
+        key: "extra",
+        type: "field",
+        copy: { title: { en: "A little more" } },
+        fields: [{ name: "deadline", inputType: "text", copy: { label: { en: "Deadline" } } }],
+      },
+    ],
+  },
+};
+
+const RECEIPT = ok({ id: "intx_1", createdAt: "2026-10-11T10:00:00.000Z" });
+const BROWSER_TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+beforeAll(() => {
+  if (typeof globalThis.PointerEvent === "undefined") {
+    // eslint-disable-next-line no-restricted-syntax -- a MouseEvent stands in for jsdom's missing PointerEvent
+    globalThis.PointerEvent = MouseEvent as unknown as typeof PointerEvent;
+  }
+});
+
+beforeEach(() => {
+  window.localStorage.clear();
+  mockPush.mockReset();
+  mockRefresh.mockReset();
+  mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockNotFound.mockReset().mockResolvedValue(notFound);
+  mockMemberMessages.mockReset().mockResolvedValue(ok({ items: [] }));
+  mockMemberMeetingTypes.mockReset().mockResolvedValue(ok({ items: TYPES }));
+  mockMemberAvailability.mockReset().mockResolvedValue(ok(AVAILABILITY));
+  mockMemberRequestForm.mockReset().mockResolvedValue(ok(FORM));
+  mockMemberRequestQuote.mockReset().mockResolvedValue(RECEIPT);
+  mockMemberSendMessage.mockReset().mockResolvedValue(RECEIPT);
+  mockMemberBook.mockReset().mockResolvedValue(ok({ bookingId: "bk_1" }));
+});
+
+async function renderInbox(): Promise<void> {
+  const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+  render(<PhoneTabProvider tab="inbox">{element}</PhoneTabProvider>);
+}
+
+/** Opens one New action's popup and returns it. */
+async function openPopup(label: string): Promise<HTMLElement> {
+  fireEvent.pointerDown(screen.getByTestId("account-new-menu-trigger"), {
+    button: 0,
+    ctrlKey: false,
+    pointerType: "mouse",
+  });
+  fireEvent.click(screen.getByRole("menuitem", { name: label }));
+  return screen.findByTestId("account-new-popup");
+}
+
+async function closePopup(popup: HTMLElement): Promise<void> {
+  fireEvent.click(within(popup).getByRole("button", { name: "Close" }));
+  await waitFor(() => expect(screen.queryByTestId("account-new-popup")).not.toBeInTheDocument());
+}
+
+function type(control: HTMLElement, value: string): void {
+  fireEvent.change(control, { target: { value } });
+}
+
+function expectNoIdentityFields(popup: HTMLElement): void {
+  expect(within(popup).queryAllByLabelText(/name|e-?mail/i)).toEqual([]);
+  expect(popup.querySelector('input[type="email"]')).toBeNull();
+}
+
+// ── Request quote ────────────────────────────────────────────────────────────
+
+describe("Request quote — the magnet's current steps, read on each open (AC-3)", () => {
+  it("renders the four default fields, need required, and no identity field", async () => {
+    await renderInbox();
+    const popup = await openPopup("Request quote");
+    await within(popup).findByLabelText("What do you need?");
+    expect(within(popup).getAllByRole("textbox")).toHaveLength(4);
+    for (const label of ["When do you need it?", "Budget range", "Link"]) {
+      expect(within(popup).getByLabelText(label)).not.toBeRequired();
+    }
+    expect(within(popup).getByLabelText("What do you need?")).toBeRequired();
+    expectNoIdentityFields(popup);
+  });
+
+  it("shows a step the provider added on the next open, with no page re-render", async () => {
+    await renderInbox();
+    let popup = await openPopup("Request quote");
+    await within(popup).findByLabelText("What do you need?");
+    expect(within(popup).queryByLabelText("Deadline")).not.toBeInTheDocument();
+    await closePopup(popup);
+
+    mockMemberRequestForm.mockResolvedValue(ok(FORM_PLUS_STEP));
+    popup = await openPopup("Request quote");
+    expect(await within(popup).findByLabelText("Deadline")).toBeInTheDocument();
+    expect(within(popup).getAllByRole("textbox")).toHaveLength(5);
+  });
+
+  it("posts the typed answers through member.requestQuote, a blank optional answer omitted", async () => {
+    await renderInbox();
+    const popup = await openPopup("Request quote");
+    type(await within(popup).findByLabelText("What do you need?"), "A logo");
+    fireEvent.click(within(popup).getByTestId("new-quote-submit"));
+    await waitFor(() => expect(mockMemberRequestQuote).toHaveBeenCalledTimes(1));
+    expect(mockMemberRequestQuote).toHaveBeenCalledWith({ answers: { need: "A logo" } }, INIT);
+    await waitFor(() => expect(screen.queryByTestId("account-new-popup")).not.toBeInTheDocument());
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it("with the form switched off since the menu loaded, says Requests are off", async () => {
+    await renderInbox();
+    mockMemberRequestForm.mockResolvedValue(ok({ form: null }));
+    const popup = await openPopup("Request quote");
+    expect(await within(popup).findByText("Requests are switched off right now.")).toBeInTheDocument();
+    expect(within(popup).queryAllByRole("textbox")).toEqual([]);
+  });
+
+  it("a failed read shows the load error, and Try again reads once more", async () => {
+    await renderInbox();
+    mockMemberRequestForm.mockResolvedValue(refusal(500, "failed"));
+    const popup = await openPopup("Request quote");
+    expect(await within(popup).findByText("This could not load.")).toBeInTheDocument();
+    mockMemberRequestForm.mockResolvedValue(ok(FORM));
+    fireEvent.click(within(popup).getByRole("button", { name: "Try again" }));
+    expect(await within(popup).findByLabelText("What do you need?")).toBeInTheDocument();
+  });
+});
+
+// ── Send message ─────────────────────────────────────────────────────────────
+
+describe("Send message — subject, body and an optional https link (AC-4)", () => {
+  async function fill(popup: HTMLElement, link: string): Promise<void> {
+    type(within(popup).getByLabelText("Subject"), "Hello");
+    type(within(popup).getByLabelText("Message"), "Line 1\nLine 2");
+    type(within(popup).getByLabelText("Link"), link);
+    fireEvent.click(within(popup).getByTestId("new-message-submit"));
+  }
+
+  it("posts the three values as typed, closes and refreshes the Inbox", async () => {
+    await renderInbox();
+    const popup = await openPopup("Send message");
+    expectNoIdentityFields(popup);
+    await fill(popup, "https://example.com/brief");
+    await waitFor(() => expect(mockMemberSendMessage).toHaveBeenCalledTimes(1));
+    expect(mockMemberSendMessage).toHaveBeenCalledWith(
+      { subject: "Hello", body: "Line 1\nLine 2", link: "https://example.com/brief" },
+      INIT,
+    );
+    await waitFor(() => expect(screen.queryByTestId("account-new-popup")).not.toBeInTheDocument());
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it("with the link left blank, posts no link key", async () => {
+    await renderInbox();
+    const popup = await openPopup("Send message");
+    await fill(popup, "   ");
+    await waitFor(() => expect(mockMemberSendMessage).toHaveBeenCalledTimes(1));
+    expect(mockMemberSendMessage.mock.calls[0]![0]).toEqual({
+      subject: "Hello",
+      body: "Line 1\nLine 2",
+    });
+  });
+});
+
+// ── Schedule service ─────────────────────────────────────────────────────────
+
+describe("Schedule service — the member's meeting types, booked as the caller (AC-4)", () => {
+  it("lists exactly the types member.meetingTypes returns", async () => {
+    await renderInbox();
+    const popup = await openPopup("Schedule service");
+    await within(popup).findByTestId("new-schedule-type-consult");
+    expect(within(popup).getAllByRole("radio").map((r) => r.getAttribute("value"))).toEqual([
+      "consult",
+      "review",
+    ]);
+    expect(within(popup).getByText("Consultation")).toBeInTheDocument();
+    expect(within(popup).getByText("Design review")).toBeInTheDocument();
+    expectNoIdentityFields(popup);
+  });
+
+  it("picking a type reads its slots once: that slug, 14 days, the browser's time zone", async () => {
+    await renderInbox();
+    const popup = await openPopup("Schedule service");
+    fireEvent.click(await within(popup).findByTestId("new-schedule-type-consult"));
+    await within(popup).findByTestId("new-schedule-slot-0");
+    expect(mockMemberAvailability).toHaveBeenCalledTimes(1);
+    const [query, init] = mockMemberAvailability.mock.calls[0]! as [
+      { slug: string; from: string; to: string; timeZone: string },
+      unknown,
+    ];
+    expect(init).toEqual(INIT);
+    expect(query.slug).toBe("consult");
+    expect(query.timeZone).toBe(BROWSER_TIME_ZONE);
+    expect(Date.parse(query.to) - Date.parse(query.from)).toBe(14 * DAY_MS);
+  });
+
+  it("books a listed slot with slug, start, time zone and notes — no name or email", async () => {
+    await renderInbox();
+    const popup = await openPopup("Schedule service");
+    fireEvent.click(await within(popup).findByTestId("new-schedule-type-consult"));
+    fireEvent.click(await within(popup).findByTestId("new-schedule-slot-1"));
+    type(within(popup).getByLabelText(/Notes/), "Bring the brief");
+    fireEvent.click(within(popup).getByTestId("new-schedule-submit"));
+    await waitFor(() => expect(mockMemberBook).toHaveBeenCalledTimes(1));
+    expect(mockMemberBook).toHaveBeenCalledWith(
+      {
+        slug: "consult",
+        start: SLOTS[1]!.start,
+        timeZone: BROWSER_TIME_ZONE,
+        notes: "Bring the brief",
+      },
+      INIT,
+    );
+    await waitFor(() => expect(screen.queryByTestId("account-new-popup")).not.toBeInTheDocument());
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it("with no type offered says so, and its Send a message switches to Send message", async () => {
+    mockMemberMeetingTypes.mockResolvedValue(ok({ items: [] }));
+    await renderInbox();
+    const popup = await openPopup("Schedule service");
+    expect(
+      await within(popup).findByText("No times are offered right now. You can send a message instead."),
+    ).toBeInTheDocument();
+    fireEvent.click(within(popup).getByRole("button", { name: "Send a message" }));
+    const next = await screen.findByTestId("account-new-popup");
+    await waitFor(() =>
+      expect(within(next).getByRole("heading", { name: "Send message" })).toBeInTheDocument(),
+    );
+    expect(within(next).getByLabelText("Subject")).toBeInTheDocument();
+  });
+});
+
+// ── Refusals ─────────────────────────────────────────────────────────────────
+
+describe("a refusal shows a plain message and keeps every typed value (AC-5)", () => {
+  it("Send message: link_not_https keeps subject, body and link, and stays open", async () => {
+    mockMemberSendMessage.mockResolvedValue(refusal(400, "link_not_https"));
+    await renderInbox();
+    const popup = await openPopup("Send message");
+    type(within(popup).getByLabelText("Subject"), "Hello");
+    type(within(popup).getByLabelText("Message"), "Line 1\nLine 2");
+    type(within(popup).getByLabelText("Link"), "http://example.com");
+    fireEvent.click(within(popup).getByTestId("new-message-submit"));
+    expect(await within(popup).findByText("A link must start with https://.")).toBeInTheDocument();
+    expect(mockMemberSendMessage.mock.calls[0]![0]).toMatchObject({ link: "http://example.com" });
+    expect(within(popup).getByLabelText("Subject")).toHaveValue("Hello");
+    expect(within(popup).getByLabelText("Message")).toHaveValue("Line 1\nLine 2");
+    expect(within(popup).getByLabelText("Link")).toHaveValue("http://example.com");
+    expect(screen.getByTestId("account-new-popup")).toBeInTheDocument();
+    expect(mockRefresh).not.toHaveBeenCalled();
+  });
+
+  it("Request quote: a bare-domain link is sent as typed, refused, and all four answers kept", async () => {
+    mockMemberRequestQuote.mockResolvedValue(refusal(400, "link_not_https"));
+    await renderInbox();
+    const popup = await openPopup("Request quote");
+    const values: Record<string, string> = {
+      "What do you need?": "A logo",
+      "When do you need it?": "Next month",
+      "Budget range": "$1k",
+      Link: "example.com",
+    };
+    for (const [label, value] of Object.entries(values)) {
+      type(await within(popup).findByLabelText(label), value);
+    }
+    fireEvent.click(within(popup).getByTestId("new-quote-submit"));
+    expect(await within(popup).findByText("A link must start with https://.")).toBeInTheDocument();
+    expect(mockMemberRequestQuote).toHaveBeenCalledWith(
+      { answers: { need: "A logo", timing: "Next month", budget: "$1k", link: "example.com" } },
+      INIT,
+    );
+    for (const [label, value] of Object.entries(values)) {
+      expect(within(popup).getByLabelText(label)).toHaveValue(value);
+    }
+    expect(screen.getByTestId("account-new-popup")).toBeInTheDocument();
+    expect(mockRefresh).not.toHaveBeenCalled();
+  });
+
+  it("Schedule service: slot_unavailable re-reads the slots and keeps the type and the notes", async () => {
+    mockMemberBook.mockResolvedValue(refusal(409, "slot_unavailable"));
+    await renderInbox();
+    const popup = await openPopup("Schedule service");
+    fireEvent.click(await within(popup).findByTestId("new-schedule-type-consult"));
+    fireEvent.click(await within(popup).findByTestId("new-schedule-slot-0"));
+    type(within(popup).getByLabelText(/Notes/), "Bring the brief");
+    fireEvent.click(within(popup).getByTestId("new-schedule-submit"));
+    expect(
+      await within(popup).findByText("That time was just taken. Pick another."),
+    ).toBeInTheDocument();
+    await waitFor(() => expect(mockMemberAvailability).toHaveBeenCalledTimes(2));
+    expect(within(popup).getByTestId("new-schedule-type-consult")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(within(popup).getByLabelText(/Notes/)).toHaveValue("Bring the brief");
+    expect(mockRefresh).not.toHaveBeenCalled();
+  });
+
+  it("an unlisted refusal code shows the generic message", async () => {
+    mockMemberSendMessage.mockResolvedValue(refusal(503, "tenant_unresolved"));
+    await renderInbox();
+    const popup = await openPopup("Send message");
+    type(within(popup).getByLabelText("Subject"), "Hello");
+    type(within(popup).getByLabelText("Message"), "Hi");
+    fireEvent.click(within(popup).getByTestId("new-message-submit"));
+    expect(await within(popup).findByText("This could not be sent. Try again.")).toBeInTheDocument();
+    expect(within(popup).getByLabelText("Subject")).toHaveValue("Hello");
+  });
+});