@remit/web-client 0.0.302 → 0.0.304

package/src/components/mail/detail-surface.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import {
+	composeWorld,
+	INBOX,
+	messageUrl,
+} from "@/mocks/story-frame/compose-world";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+
+const world = composeWorld();
+
+const meta = {
+	title: "Playground/Shipped/Mail/Detail surface",
+	component: AppStory,
+	args: { url: "/mail/brief" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = () => within(document.body);
+
+const rows = (): HTMLElement[] =>
+	Array.from(document.querySelectorAll<HTMLElement>("[data-list-row]"));
+
+const unsent = ["Design review notes", "Re: contract"];
+
+const composeAndSearch = async () => {
+	await userEvent.click(await page().findByRole("button", { name: "Compose" }));
+	await expect(await page().findByLabelText("To:")).toBeVisible();
+	const search = page().getByLabelText("Search mail");
+	await userEvent.type(search, "invoice");
+	await expect(search).toHaveFocus();
+	await expect(page().getAllByLabelText("To:")).toHaveLength(1);
+};
+
+export const SheetOpensOverTheRail: Story = {
+	args: { url: `${messageUrl("q3-planning")}#intelligence` },
+	globals: { viewport: { value: "desktop", isRotated: false } },
+	play: async () => {
+		await expect(await page().findByText("Intelligence")).toBeInTheDocument();
+
+		await userEvent.keyboard("?");
+		const sheet = await page().findByRole("dialog", {
+			name: "Keyboard shortcuts",
+		});
+		await expect(sheet).toBeVisible();
+		await expect(page().getByText("Intelligence")).toBeInTheDocument();
+
+		await userEvent.keyboard("j");
+		await expect(page().getByRole("dialog")).toBeVisible();
+		await expect(page().getByText("Intelligence")).toBeInTheDocument();
+
+		await userEvent.keyboard("{Escape}");
+		await waitFor(() => expect(page().queryByRole("dialog")).toBeNull());
+		await expect(page().getByText("Intelligence")).toBeInTheDocument();
+	},
+};
+
+export const DeleteConfirmOutlastsAKeystroke: Story = {
+	args: { url: `/mail/${INBOX}` },
+	play: async () => {
+		await page().findByText("Q3 planning");
+		rows()[0]?.focus();
+		await userEvent.keyboard("j");
+		await userEvent.keyboard("k");
+		await userEvent.keyboard("#");
+		const dialog = await page().findByRole("dialog");
+		await expect(
+			within(dialog).getByText("Move 1 message to Trash?"),
+		).toBeVisible();
+
+		await userEvent.keyboard("j");
+		await expect(page().getByRole("dialog")).toBeVisible();
+
+		await userEvent.click(
+			within(dialog).getByRole("button", { name: "Cancel" }),
+		);
+		await waitFor(() => expect(page().queryByRole("dialog")).toBeNull());
+		await expect(rows()[0]).toHaveTextContent("Q3 planning");
+	},
+};
+
+export const ComposeOverTheBrief: Story = {
+	play: async () => {
+		await page().findByText("Q3 planning");
+		await composeAndSearch();
+	},
+};
+
+export const ComposeOverStarred: Story = {
+	args: { url: "/mail/flagged" },
+	play: async () => {
+		await page().findByText("Invoice #1042");
+		await composeAndSearch();
+		await expect(page().getByText("Invoice #1042")).toBeVisible();
+	},
+};
+
+export const ComposeOverAFolder: Story = {
+	args: { url: `/mail/${INBOX}` },
+	play: async () => {
+		await page().findByText("Q3 planning");
+		await userEvent.click(page().getByRole("button", { name: "Compose" }));
+		await expect(await page().findByLabelText("To:")).toBeVisible();
+		await expect(page().getByText("Q3 planning")).toBeVisible();
+	},
+};
+
+export const ComposeOnThePhone: Story = {
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	play: async () => {
+		await page().findByText("Q3 planning");
+		await userEvent.click(
+			page().getByRole("button", { name: "Compose new message" }),
+		);
+		const sheet = await page().findByRole("dialog");
+		await expect(within(sheet).getByLabelText("To:")).toBeVisible();
+	},
+};
+
+export const EditADraftFromTheOutbox: Story = {
+	args: { url: "/mail/outbox" },
+	play: async () => {
+		await page().findByText("Design review notes");
+		const edits = page().getAllByRole("button", { name: "Edit as draft" });
+		const [first] = edits;
+		if (!first) throw new Error("no outbox row offers Edit as draft");
+		let row: HTMLElement = first;
+		while (
+			row.parentElement &&
+			within(row.parentElement).queryAllByRole("button", {
+				name: "Edit as draft",
+			}).length === 1
+		)
+			row = row.parentElement;
+		const subject = unsent.find((candidate) =>
+			row.textContent?.includes(candidate),
+		);
+		await userEvent.click(first);
+
+		const field = await page().findByPlaceholderText("Subject");
+		await waitFor(() => expect(field).toHaveValue(subject));
+		const others = unsent.filter((candidate) => candidate !== subject);
+		await expect(page().getByText(others[0] ?? "")).toBeVisible();
+	},
+};
+
+export const ReplyUnderTheMessage: Story = {
+	args: { url: messageUrl("q3-planning") },
+	play: async () => {
+		await page().findByRole("heading", { level: 1, name: "Q3 planning" });
+		await userEvent.click(page().getByRole("button", { name: "Reply" }));
+
+		const subject = await page().findByPlaceholderText("Subject");
+		await waitFor(() => expect(subject).toHaveValue("Re: Q3 planning"));
+		await expect(page().getByTestId("conversation-messages")).toBeVisible();
+
+		const search = page().getByLabelText("Search mail");
+		await userEvent.type(search, "invoice");
+		await expect(search).toHaveFocus();
+		await expect(page().getAllByLabelText("To:")).toHaveLength(1);
+		await expect(subject).toHaveValue("Re: Q3 planning");
+		await expect(page().getByTestId("conversation-messages")).toBeVisible();
+	},
+};

package/src/components/mail/mail-pickers.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	mailboxIdFor,
+	mailWorld,
+	senderAddress,
+	WORK,
+} from "@/mocks/story-frame/mail-world";
+
+const openMessage = `/mail/${mailboxIdFor(WORK, "Inbox")}/thread-q3-planning/msg-q3-planning`;
+
+const world = mailWorld();
+
+const meta = {
+	title: "Playground/Shipped/Mail/Mail pickers",
+	component: AppStory,
+	args: { url: openMessage },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = () => within(document.body);
+
+export const MovePicker: Story = {
+	play: async () => {
+		await page().findByRole("heading", { level: 1, name: "Q3 planning" });
+		const trigger = await waitFor(() => {
+			const button = page().getByRole("button", { name: "Move to mailbox" });
+			expect(button).toHaveAttribute("aria-haspopup", "tree");
+			return button;
+		});
+		await userEvent.click(trigger);
+		const filter = await page().findByLabelText("Filter folders");
+		await expect(filter).toBeVisible();
+		for (const folder of ["Archive", "Trash"]) {
+			await expect(
+				await page().findByRole("treeitem", { name: new RegExp(folder) }),
+			).toBeVisible();
+		}
+	},
+};
+
+export const ReclassifyDialog: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers({
+				...world,
+				addresses: world.threads
+					.filter((row) => row.messageId === "msg-q3-planning")
+					.map(senderAddress),
+			}),
+		},
+	},
+	args: { url: `${openMessage}#intelligence` },
+	globals: { viewport: { value: "desktop", isRotated: false } },
+	play: async () => {
+		const reclassify = await page().findByRole("button", {
+			name: "reclassify",
+		});
+		await waitFor(() => expect(reclassify).toBeEnabled());
+		await userEvent.click(reclassify);
+		const dialog = await page().findByRole("dialog", {
+			name: "Reclassify sender",
+		});
+		await expect(
+			within(dialog).getByText("Reclassify this sender"),
+		).toBeVisible();
+		await expect(
+			within(dialog).getByRole("button", { name: /Newsletter/ }),
+		).toBeVisible();
+		await expect(
+			within(dialog).getByRole("button", { name: "Cancel" }),
+		).toBeVisible();
+	},
+};

package/src/components/mail/search.stories.tsx

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	HOUR,
+	mailboxIdFor,
+	mailWorld,
+	PERSONAL,
+	threadRow,
+	WORK,
+} from "@/mocks/story-frame/mail-world";
+
+const base = mailWorld();
+const world = {
+	...base,
+	threads: [
+		...base.threads,
+		threadRow({
+			id: "spam-invoice",
+			accountId: PERSONAL,
+			role: "Junk",
+			fromName: "Accounts Dept",
+			fromEmail: "billing@lottery.example",
+			subject: "Overdue invoice, act now",
+			snippet: "Pay within 24 hours to avoid suspension.",
+			category: "marketing",
+			ago: 3 * HOUR,
+		}),
+		threadRow({
+			id: "spam-invoice-2",
+			accountId: PERSONAL,
+			role: "Junk",
+			fromName: "Prize Desk",
+			fromEmail: "claims@lottery.example",
+			subject: "Invoice for your prize",
+			snippet: "Claim your prize by settling the attached invoice.",
+			category: "marketing",
+			ago: 4 * HOUR,
+		}),
+	],
+};
+const inbox = mailboxIdFor(WORK, "Inbox");
+const junk = mailboxIdFor(PERSONAL, "Junk");
+const phone = { viewport: { value: "mobile", isRotated: false } };
+const widePhone = { viewport: { value: "mobileShort", isRotated: false } };
+
+const meta = {
+	title: "Playground/Shipped/Mail/Search",
+	component: AppStory,
+	args: { url: "/mail/brief?q=invoice" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = () => within(document.body);
+
+const shown = async (text: string): Promise<HTMLElement> => {
+	const [match] = await page().findAllByText(
+		(_, element) =>
+			element?.textContent === text &&
+			![...element.children].some((child) => child.textContent === text),
+	);
+	if (!match) throw new Error(`"${text}" is not on screen`);
+	return match;
+};
+
+const skeletonRows = (): number =>
+	document.querySelectorAll(".animate-pulse").length;
+
+const openPhoneSearch = async () => {
+	await page().findByText("Q3 planning");
+	await userEvent.click(page().getByRole("button", { name: "Search" }));
+};
+
+const recentSearches = {
+	beforeEach: () => {
+		localStorage.setItem(
+			"remit.recentSearches",
+			JSON.stringify(["invoice", "from:ada"]),
+		);
+		return () => localStorage.removeItem("remit.recentSearches");
+	},
+};
+
+export const Global: Story = {
+	play: async () => {
+		await expect(await shown("Invoice #1042")).toBeVisible();
+		await expect(page().queryByText("Overdue invoice, act now")).toBeNull();
+		const offer = await page().findByRole("button", { name: "Go to Spam" });
+		await expect(offer.parentElement).toHaveTextContent("2 results from Spam");
+		await expect(page().queryByText("Q3 planning")).toBeNull();
+	},
+};
+
+export const GoToSpam: Story = {
+	play: async () => {
+		await userEvent.click(
+			await page().findByRole("button", { name: "Go to Spam" }),
+		);
+		await expect(
+			await page().findByText("Overdue invoice, act now"),
+		).toBeVisible();
+		await expect(page().getByText("Invoice for your prize")).toBeVisible();
+		await expect(page().queryByText("Invoice #1042")).toBeNull();
+	},
+};
+
+export const ScopedToSpam: Story = {
+	args: { url: `/mail/${junk}?q=invoice` },
+	play: async () => {
+		await expect(
+			await page().findByText("Overdue invoice, act now"),
+		).toBeVisible();
+		await expect(
+			page().queryByRole("button", { name: "Go to Spam" }),
+		).toBeNull();
+	},
+};
+
+export const ScopedToFolder: Story = {
+	args: { url: `/mail/${inbox}?q=invoice` },
+	play: async () => {
+		await expect(await shown("Invoice #1042")).toBeVisible();
+		await expect(page().queryByText("Q3 planning")).toBeNull();
+		await expect(page().queryByText("Overdue invoice, act now")).toBeNull();
+		await expect(
+			page().getByRole("button", { name: "Make this a filter" }),
+		).toBeVisible();
+	},
+};
+
+export const UnsearchedFolder: Story = {
+	args: { url: `/mail/${inbox}` },
+	play: async () => {
+		await expect(await page().findByText("Q3 planning")).toBeVisible();
+		await expect(page().getByLabelText("Expand filters")).toBeVisible();
+		await expect(
+			page().queryByRole("button", { name: "Make this a filter" }),
+		).toBeNull();
+	},
+};
+
+export const NothingToConvert: Story = {
+	args: { url: `/mail/${inbox}?q=has:attachment` },
+	play: async () => {
+		await userEvent.click(
+			await page().findByRole("button", { name: "Make this a filter" }),
+		);
+		await expect(
+			await page().findByText(/isn't a filter condition/, { selector: "p" }),
+		).toBeVisible();
+	},
+};
+
+export const Loading: Story = {
+	args: { url: "/mail/brief" },
+	parameters: {
+		msw: { handlers: mailHandlers(world, { search: "holds" }) },
+	},
+	play: async () => {
+		await page().findByText("Q3 planning");
+		await userEvent.type(page().getByLabelText("Search mail"), "invoice");
+		await waitFor(() => expect(skeletonRows()).toBeGreaterThan(0));
+		await expect(page().queryByText("Invoice #1042")).toBeNull();
+	},
+};
+
+export const NoMatches: Story = {
+	args: { url: "/mail/brief?q=hedgehog" },
+	play: async () => {
+		await expect(
+			await page().findByText("No threads match these filters."),
+		).toBeVisible();
+	},
+};
+
+export const SuggestingTokens: Story = {
+	args: { url: `/mail/${inbox}` },
+	globals: { viewport: { value: "tablet", isRotated: false } },
+	play: async () => {
+		await page().findByText("Q3 planning");
+		await userEvent.click(page().getByRole("button", { name: "Search" }));
+		await userEvent.type(page().getByLabelText("Search mail"), "is:u");
+		const suggestions = await page().findByRole("listbox", {
+			name: "Search suggestions",
+		});
+		await expect(
+			within(suggestions).getByRole("option", { name: "Unread" }),
+		).toBeVisible();
+	},
+};
+
+export const PhoneTakeover: Story = {
+	args: { url: `/mail/${inbox}` },
+	globals: phone,
+	play: async () => {
+		await openPhoneSearch();
+		await userEvent.type(page().getByLabelText("Search mail"), "invoice");
+		await expect(await shown("Invoice #1042")).toBeVisible();
+		await expect(
+			page().getByRole("button", { name: "Clear and close search" }),
+		).toBeVisible();
+	},
+};
+
+export const PhoneWithFilterTokens: Story = {
+	args: { url: "/mail/brief" },
+	globals: phone,
+	play: async () => {
+		await openPhoneSearch();
+		await userEvent.type(
+			page().getByLabelText("Search mail"),
+			"from:billing invoice",
+		);
+		await expect(await shown("Invoice #1042")).toBeVisible();
+		await expect(
+			await page().findByRole("button", { name: /^Remove filter: .*billing/ }),
+		).toBeVisible();
+	},
+};
+
+export const PhoneBriefTakeover: Story = {
+	args: { url: "/mail/brief" },
+	globals: widePhone,
+	play: async () => {
+		await openPhoneSearch();
+		await userEvent.type(page().getByLabelText("Search mail"), "invoice");
+		await expect(await shown("Invoice #1042")).toBeVisible();
+		await expect(
+			page().getByRole("button", { name: "Clear and close search" }),
+		).toBeVisible();
+	},
+};
+
+export const PhoneFolderTakeover: Story = {
+	args: { url: `/mail/${inbox}` },
+	globals: widePhone,
+	play: async () => {
+		await openPhoneSearch();
+		await userEvent.type(page().getByLabelText("Search mail"), "invoice");
+		await expect(await shown("Invoice #1042")).toBeVisible();
+		await expect(
+			page().getByRole("button", { name: "Make this a filter" }),
+		).toBeVisible();
+	},
+};
+
+export const PhoneSuggestingFolders: Story = {
+	args: { url: "/mail/brief" },
+	globals: widePhone,
+	play: async () => {
+		await openPhoneSearch();
+		await userEvent.type(page().getByLabelText("Search mail"), "in:");
+		const suggestions = await page().findByRole("listbox", {
+			name: "Search suggestions",
+		});
+		await expect(
+			within(suggestions).getByRole("option", { name: /Archive/ }),
+		).toBeVisible();
+	},
+};
+
+export const PhoneRecentSearches: Story = {
+	...recentSearches,
+	args: { url: `/mail/${inbox}` },
+	globals: phone,
+	play: async () => {
+		await openPhoneSearch();
+		await expect(await page().findByText("from:ada")).toBeVisible();
+		await userEvent.click(page().getByText("invoice"));
+		await expect(page().getByLabelText("Search mail")).toHaveValue("invoice");
+		await expect(await shown("Invoice #1042")).toBeVisible();
+	},
+};

package/src/components/mail/selection-wizard.stories.tsx

@@ -0,0 +1,160 @@
+import { matchDoorLabel } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailboxIdFor, mailWorld, WORK } from "@/mocks/story-frame/mail-world";
+import { longPress } from "@/mocks/story-frame/touch";
+
+const inbox = `/mail/${mailboxIdFor(WORK, "Inbox")}`;
+const desktop = { viewport: { value: "desktop", isRotated: false } };
+
+const meta = {
+	title: "Playground/Shipped/Mail/Selection wizard",
+	component: AppStory,
+	args: { url: inbox },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+	globals: desktop,
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = () => within(document.body);
+
+const rows = (): HTMLElement[] =>
+	Array.from(document.querySelectorAll<HTMLElement>("[data-list-row]"));
+
+const tick = async (count: number) => {
+	await page().findByText("Q3 planning");
+	for (const row of rows().slice(0, count)) {
+		const toggle = row.querySelector<HTMLElement>(
+			'[aria-label="Select message"]',
+		);
+		if (toggle) await userEvent.click(toggle);
+	}
+	await page().findByText(`${count} messages selected`);
+};
+
+const openWizard = async (count: number, verb: string) => {
+	await tick(count);
+	await userEvent.click(page().getByRole("button", { name: verb }));
+};
+
+const cont = () =>
+	userEvent.click(page().getByRole("button", { name: "Continue" }));
+
+export const OrganizeTickedRows: Story = {
+	play: async () => {
+		await openWizard(3, "Organize selected messages");
+		await expect(
+			await page().findByText("What should this apply to?"),
+		).toBeVisible();
+		await expect(page().getByText(matchDoorLabel("selected", 3))).toBeVisible();
+		await expect(
+			page().getByText(matchDoorLabel("properties", 3)),
+		).toBeVisible();
+	},
+};
+
+export const OrganizePropertiesDoor: Story = {
+	play: async () => {
+		await openWizard(3, "Organize selected messages");
+		await userEvent.click(
+			await page().findByText(matchDoorLabel("properties", 3)),
+		);
+		await cont();
+		await expect(
+			await page().findByText("Which properties have to match?"),
+		).toBeVisible();
+	},
+};
+
+export const DeleteReview: Story = {
+	play: async () => {
+		await openWizard(2, "Move selected messages to Trash");
+		await page().findByText("What should this apply to?");
+		await cont();
+		await expect(await page().findByText("Check before it runs")).toBeVisible();
+	},
+};
+
+export const MoveFolder: Story = {
+	play: async () => {
+		await openWizard(2, "Move selected messages");
+		await page().findByText("What should this apply to?");
+		await cont();
+		await expect(await page().findByText("Pick a destination")).toBeVisible();
+		await expect(
+			await page().findByRole("treeitem", { name: /Archive/ }),
+		).toBeVisible();
+	},
+};
+
+export const MakeThisAFilter: Story = {
+	args: { url: `${inbox}?q=invoice` },
+	play: async () => {
+		await userEvent.click(
+			await page().findByRole("button", { name: "Make this a filter" }),
+		);
+		await expect(
+			await page().findByText("Which properties have to match?"),
+		).toBeVisible();
+		await waitFor(() =>
+			expect(page().getAllByText(/invoice/i).length).toBeGreaterThan(0),
+		);
+	},
+};
+
+export const SearchThenSelect: Story = {
+	args: { url: `${inbox}?q=the` },
+	play: async () => {
+		await page().findByText("Linus mentioned you in #design");
+		for (const row of rows()) {
+			const toggle = row.querySelector<HTMLElement>(
+				'[aria-label="Select message"]',
+			);
+			if (toggle) await userEvent.click(toggle);
+		}
+		await page().findByText("All 2 loaded selected");
+		await userEvent.click(
+			page().getByRole("button", { name: "Organize selected messages" }),
+		);
+		await expect(
+			await page().findByText("What should this apply to?"),
+		).toBeVisible();
+		await expect(page().getByText(matchDoorLabel("selected", 2))).toBeVisible();
+	},
+};
+
+export const MakeThisAFilterFromStarred: Story = {
+	args: { url: "/mail/flagged?q=invoice" },
+	play: async () => {
+		await userEvent.click(
+			await page().findByRole("button", { name: "Make this a filter" }),
+		);
+		await expect(
+			await page().findByText("Which properties have to match?"),
+		).toBeVisible();
+	},
+};
+
+export const Phone: Story = {
+	args: { url: "/mail/brief" },
+	globals: { viewport: { value: "mobileShort", isRotated: false } },
+	play: async () => {
+		await page().findByText("Q3 planning");
+		const first = rows()[0];
+		if (first) await longPress(first);
+		await page().findByText("1 message selected");
+		await userEvent.click(
+			page().getByRole("button", { name: "Organize selected messages" }),
+		);
+		await expect(
+			await page().findByText("What should this apply to?"),
+		).toBeVisible();
+	},
+};