@remit/web-client 0.0.303 → 0.0.305

package/src/components/onboarding/onboarding.stories.tsx

@@ -458,3 +458,93 @@ export const SyncStalled: Story = {
 		);
 	},
 };
+
+const OUTLOOK = makeAccount({
+	accountId: "acc-outlook",
+	email: "alice@outlook.com",
+	authType: "oauthMicrosoft",
+	syncedServices: ["Calendar"],
+	grantedScopes: ["https://graph.microsoft.com/Calendars.Read"],
+});
+
+const withOutlook = mailWorld({
+	accounts: [...mailWorld().accounts, OUTLOOK],
+});
+
+export const MicrosoftServiceChoice: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toMicrosoft(canvas);
+		await expect(canvas.getByRole("checkbox", { name: /^Mail/ })).toBeChecked();
+		await expect(
+			canvas.getByRole("checkbox", { name: /^Calendar/ }),
+		).toBeChecked();
+	},
+};
+
+export const MicrosoftNothingPicked: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const signIn = await toMicrosoft(canvas);
+		await userEvent.click(canvas.getByRole("checkbox", { name: /^Mail/ }));
+		await userEvent.click(canvas.getByRole("checkbox", { name: /^Calendar/ }));
+		await userEvent.click(signIn);
+		await expect(await canvas.findByRole("alert")).toHaveTextContent(
+			"Pick at least one",
+		);
+		await expect(signIn).toBeEnabled();
+	},
+};
+
+export const MicrosoftGranted: Story = {
+	args: { url: `/settings/accounts?connected=${OUTLOOK.accountId}` },
+	parameters: handlers({}, withOutlook),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(`Connected ${OUTLOOK.email}`),
+		).toBeVisible();
+		await expect(canvas.getByText("Access granted — syncing")).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Continue" }),
+		).toBeEnabled();
+	},
+};
+
+export const MicrosoftScopeNotGranted: Story = {
+	args: {
+		url: "/settings/accounts?oauthError=scope_not_granted&oauthEmail=bob%40outlook.com&missingServices=Calendar",
+	},
+	parameters: handlers({}, mailWorld()),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/did not grant access to Calendar/),
+		).toBeVisible();
+		await expect(canvas.getByLabelText("Email address (optional)")).toHaveValue(
+			"bob@outlook.com",
+		);
+		await expect(
+			canvas.getByRole("button", { name: "Sign in with Microsoft" }),
+		).toBeEnabled();
+	},
+};
+
+export const MicrosoftReconnectScopeNotGranted: Story = {
+	args: {
+		url: `/settings/accounts?oauthError=scope_not_granted&oauthEmail=${encodeURIComponent(OUTLOOK.email)}&missingServices=Calendar`,
+	},
+	parameters: handlers({}, withOutlook),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(`Reconnect ${OUTLOOK.email}`),
+		).toBeVisible();
+		await expect(
+			canvas.getByText(/did not grant access to Calendar/),
+		).toBeVisible();
+		await expect(canvas.getByLabelText("Email address (optional)")).toHaveValue(
+			OUTLOOK.email,
+		);
+	},
+};

package/src/components/settings/AccountServices.render.test.ts

@@ -130,7 +130,10 @@ describe("AccountServices", () => {
 		const mounted = await mount(outlook());
 
 		mounted.click(switchFor(mounted, "calendar"));
-		await mounted.waitFor(() => patches().length > 0, "the save to start");
+		await mounted.waitFor(
+			() => patches().length > 0 && switchFor(mounted, "calendar").disabled,
+			"the save to start",
+		);
 
 		assert.equal(checked(mounted, "calendar"), "true");
 		assert.equal(switchFor(mounted, "mail").disabled, true);

package/src/components/settings/accounts.stories.tsx

@@ -199,6 +199,11 @@ export const AccountsOauthSuccess: Story = {
 	args: { url: "/settings/accounts?connected=acc-personal" },
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
+		await expect(await canvas.findByText(/^Connected /)).toBeVisible();
+		await expect(canvas.getByText(/Access granted/)).toBeVisible();
+		await userEvent.click(
+			canvas.getByRole("button", { name: /Go to inbox|Continue/ }),
+		);
 		await expect(
 			await canvas.findByText("Account connected successfully."),
 		).toBeVisible();

package/src/mocks/story-frame/compose-world.ts

@@ -0,0 +1,191 @@
+import type {
+	RemitImapOutboxMessageResponse,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	DAY,
+	HOUR,
+	type MailWorld,
+	MINUTE,
+	mailboxIdFor,
+	mailWorld,
+	outboxMessage,
+	threadRow,
+	WORK,
+} from "./mail-world";
+
+export const INBOX = mailboxIdFor(WORK, "Inbox");
+
+export const LUNCH_SUBJECT = "Lunch Thursday?";
+export const LUNCH_BODY = "Are we still on for Thursday? I can do 12:30.";
+export const LONG_SUBJECT = "Billing migration owners";
+export const TURNS_SUBJECT = "Offsite venue";
+export const SCANS_SUBJECT = "Scans";
+export const MISSPELT_DRAFT =
+	"<p>Ths report is redy today, and the notes are attachd.</p>";
+export const PLAIN_DRAFT = [
+	"Thanks, that works for me.",
+	"",
+	"| Region | Total |",
+	"| --- | --- |",
+	"| EMEA | 412 |",
+].join("\n");
+
+const longBody = [
+	"Longer context, so the pane has more message than it has room for.",
+	...Array.from(
+		{ length: 14 },
+		(_, index) =>
+			`Point ${index + 1}. The billing migration touches the export path, the dunning schedule and the invoice numbering, and each of those has a different owner today.`,
+	),
+].join("\n\n");
+
+const longDraft = [
+	"<p>That works. Before Thursday, three things I want written down:</p>",
+	...Array.from(
+		{ length: 24 },
+		(_, index) =>
+			`<p>Point ${index + 1}. Whoever owns the dunning mail after self-serve ships also owns the invoice numbering, and today those are two different people on two different rotas.</p>`,
+	),
+].join("");
+
+const conversations: RemitImapThreadMessageResponse[] = [
+	threadRow({
+		id: "lunch",
+		accountId: WORK,
+		fromName: "Ada Lovelace",
+		fromEmail: "ada@acme.example",
+		subject: LUNCH_SUBJECT,
+		snippet: LUNCH_BODY,
+		category: "personal",
+		ago: 30 * MINUTE,
+	}),
+	threadRow({
+		id: "billing",
+		accountId: WORK,
+		fromName: "Priya Raman",
+		fromEmail: "priya@acme.example",
+		subject: LONG_SUBJECT,
+		snippet:
+			"Longer context, so the pane has more message than it has room for.",
+		category: "personal",
+		ago: 3 * HOUR,
+	}),
+	threadRow({
+		id: "venue-1",
+		inThread: "venue",
+		accountId: WORK,
+		role: "Archive",
+		fromName: "Linus Berg",
+		fromEmail: "linus@acme.example",
+		subject: TURNS_SUBJECT,
+		snippet: "Two options for the offsite: the boathouse or the old mill.",
+		category: "personal",
+		ago: 3 * DAY,
+		isRead: true,
+	}),
+	threadRow({
+		id: "venue-2",
+		inThread: "venue",
+		accountId: WORK,
+		role: "Sent",
+		fromName: "Alice Tan",
+		fromEmail: "alice.tan@acme.example",
+		subject: `Re: ${TURNS_SUBJECT}`,
+		snippet: "The boathouse, if it still has the long table.",
+		category: "personal",
+		ago: 2 * DAY,
+		isRead: true,
+	}),
+	threadRow({
+		id: "venue-3",
+		inThread: "venue",
+		accountId: WORK,
+		fromName: "Linus Berg",
+		fromEmail: "linus@acme.example",
+		subject: `Re: ${TURNS_SUBJECT}`,
+		snippet: "It does. Shall I book it for the 14th?",
+		category: "personal",
+		ago: 4 * HOUR,
+	}),
+	threadRow({
+		id: "scans",
+		accountId: WORK,
+		fromName: "Office Scanner",
+		fromEmail: "scanner@acme.example",
+		subject: SCANS_SUBJECT,
+		snippet: "",
+		category: "automated",
+		ago: 5 * HOUR,
+		hasAttachment: true,
+	}),
+];
+
+const drafts: RemitImapOutboxMessageResponse[] = [
+	{
+		...outboxMessage({
+			id: "misspelt",
+			accountId: WORK,
+			to: "ada@acme.example",
+			subject: "Report",
+			body: "Ths report is redy today, and the notes are attachd.",
+			status: "draft",
+			ago: 5 * MINUTE,
+		}),
+		htmlBody: MISSPELT_DRAFT,
+	},
+	outboxMessage({
+		id: "plain",
+		accountId: WORK,
+		to: "ada@acme.example",
+		subject: "Re: Q3 planning",
+		body: PLAIN_DRAFT,
+		status: "draft",
+		ago: 6 * MINUTE,
+	}),
+	{
+		...outboxMessage({
+			id: "long-reply",
+			accountId: WORK,
+			to: "ada@acme.example",
+			subject: `Re: ${LUNCH_SUBJECT}`,
+			body: "That works.",
+			status: "draft",
+			ago: 7 * MINUTE,
+		}),
+		htmlBody: longDraft,
+	},
+];
+
+export const composeWorld = (overrides: Partial<MailWorld> = {}): MailWorld => {
+	const base = mailWorld();
+	return {
+		...base,
+		accounts: base.accounts.map((account) =>
+			account.accountId === WORK
+				? { ...account, composeLanguages: ["en", "nl", "de"] }
+				: account,
+		),
+		threads: [...base.threads, ...conversations],
+		outbox: [...base.outbox, ...drafts],
+		bodies: { "msg-billing": longBody },
+		...overrides,
+	};
+};
+
+export const withoutSmtp = (world: MailWorld): MailWorld => ({
+	...world,
+	accounts: world.accounts.map((account) => ({
+		...account,
+		smtpEnabled: false,
+	})),
+});
+
+export const messageUrl = (id: string, mailboxId: string = INBOX): string =>
+	`/mail/${mailboxId}/thread-${id}/msg-${id}`;
+
+export const threadUrl = (
+	threadId: string,
+	messageId: string,
+	mailboxId: string = INBOX,
+): string => `/mail/${mailboxId}/thread-${threadId}/msg-${messageId}`;

package/src/mocks/story-frame/mail-handlers.ts

@@ -2,19 +2,30 @@ import type {
 	AccountDetailOperationsUpdateAccountResponse,
 	AddressDetailOperationsUpdateAddressResponse,
 	AddressOperationsSearchAddressesResponse,
+	CalendarEventOperationsListCalendarEventsResponse,
+	CalendarOperationsListCalendarsResponse,
+	CalendarSuggestionOperationsListCalendarSuggestionsResponse,
 	FilterOperationsListFiltersResponse,
 	LabelOperationsListLabelsResponse,
 	MailboxDetailOperationsRenameMailboxResponse,
 	MailboxOperationsListMailboxesResponse,
 	MeOperationsListQuarantineResponse,
 	MeOperationsListVipSuggestionsResponse,
+	MessageBulkOperationsDeleteMessagesData,
+	MessageBulkOperationsDeleteMessagesResponse,
+	MessageBulkOperationsMoveMessagesData,
+	MessageBulkOperationsMoveMessagesResponse,
 	MessageBulkOperationsUpdateFlagsResponse,
 	MessageCalendarSuggestionOperationsListMessageCalendarSuggestionsResponse,
+	OrganizeOperationsPreviewOrganizeResponse,
 	OutboxOperationsListOutboxMessagesResponse,
 	RemitImapConfigDescriptionResponse,
+	RemitImapCreateOutboxMessageInput,
 	RemitImapDescribeMessageResponse,
+	RemitImapOutboxMessageResponse,
 	RemitImapThreadMessageResponse,
 	RemitImapThreadSearchResponse,
+	RemitImapUpdateOutboxMessageInput,
 	SemanticSearchOperationsSemanticSearchResponse,
 	SyncOperationsGetSyncStatusResponse,
 	SyncOperationsTriggerSyncResponse,
@@ -32,11 +43,45 @@ export interface MailHandlerOptions {
 	withholdCounts?: boolean;
 	pageSize?: number;
 	holdLaterPages?: boolean;
+	draftSave?: "saves" | "refused";
+	send?: "sends" | "holds";
+	search?: "answers" | "holds";
+	config?: "answers" | "holds";
 }
 
 const contentPath = (row: RemitImapThreadMessageResponse): string =>
 	`/content/accounts/${row.accountConfigId}/${row.accountId}/messages/${row.messageId}/parts/1`;
 
+const attachmentOnly = (row: RemitImapThreadMessageResponse): boolean =>
+	row.hasAttachment && !row.snippet;
+
+const bodyPartsOf = (
+	row: RemitImapThreadMessageResponse,
+): RemitImapDescribeMessageResponse["bodyParts"] =>
+	attachmentOnly(row)
+		? [
+				{
+					bodyPartId: `part-${row.messageId}`,
+					mediaType: "APPLICATION",
+					mediaSubtype: "pdf",
+					sizeOctets: 48_000,
+					isMultipart: false,
+					disposition: "attachment",
+					dispositionFilename: "scan.pdf",
+					contentUrl: contentPath(row),
+				},
+			]
+		: [
+				{
+					bodyPartId: `part-${row.messageId}`,
+					mediaType: "TEXT",
+					mediaSubtype: "plain",
+					sizeOctets: (row.snippet ?? "").length,
+					isMultipart: false,
+					contentUrl: contentPath(row),
+				},
+			];
+
 const describe = (
 	row: RemitImapThreadMessageResponse,
 ): RemitImapDescribeMessageResponse => ({
@@ -71,16 +116,7 @@ const describe = (
 		senderTrust: row.senderTrust,
 	},
 	flags: row.isRead ? ["\\Seen"] : [],
-	bodyParts: [
-		{
-			bodyPartId: `part-${row.messageId}`,
-			mediaType: "TEXT",
-			mediaSubtype: "plain",
-			sizeOctets: (row.snippet ?? "").length,
-			isMultipart: false,
-			contentUrl: contentPath(row),
-		},
-	],
+	bodyParts: bodyPartsOf(row),
 	references: [],
 });
 
@@ -167,11 +203,23 @@ export const mailHandlers = (
 		),
 	);
 
+	const outbox = new Map(
+		world.outbox.map((message) => [message.outboxMessageId, message]),
+	);
+	let draftsCreated = 0;
+	const refuseSave = () =>
+		HttpResponse.json(
+			{ status: 409, message: "The mail server did not accept the draft." },
+			{ status: 409 },
+		);
+
 	return [
 		http.get(`${API}/config`, () =>
-			HttpResponse.json<RemitImapConfigDescriptionResponse>(
-				makeConfig(world.accounts),
-			),
+			options.config === "holds"
+				? pending()
+				: HttpResponse.json<RemitImapConfigDescriptionResponse>(
+						makeConfig(world.accounts),
+					),
 		),
 		http.patch(
 			`${API}/accounts/:accountId/mailboxes/:mailboxId`,
@@ -277,11 +325,38 @@ export const mailHandlers = (
 				failureCount: 0,
 			}),
 		),
+		http.post(`${API}/messages/delete`, async ({ request }) => {
+			const { messageIds } =
+				(await request.json()) as MessageBulkOperationsDeleteMessagesData["body"];
+			return HttpResponse.json<MessageBulkOperationsDeleteMessagesResponse>({
+				successCount: messageIds.length,
+				failureCount: 0,
+			});
+		}),
+		http.post(`${API}/messages/move`, async ({ request }) => {
+			const { messageIds } =
+				(await request.json()) as MessageBulkOperationsMoveMessagesData["body"];
+			return HttpResponse.json<MessageBulkOperationsMoveMessagesResponse>({
+				successCount: messageIds.length,
+				failureCount: 0,
+			});
+		}),
+		http.post(`${API}/accounts/:accountId/organize/preview`, ({ params }) => {
+			const matched = world.threads.filter(
+				(row) => row.accountId === params.accountId,
+			);
+			return HttpResponse.json<OrganizeOperationsPreviewOrganizeResponse>({
+				matchedCount: matched.length,
+				messageIds: matched.map((row) => row.messageId),
+			});
+		}),
 		http.get(
 			"/content/accounts/:accountConfigId/:accountId/messages/:messageId/parts/*",
 			({ params }) =>
 				HttpResponse.text(
-					byMessageId.get(String(params.messageId))?.snippet ?? "",
+					world.bodies[String(params.messageId)] ??
+						byMessageId.get(String(params.messageId))?.snippet ??
+						"",
 				),
 		),
 		http.get(`${API}/threads/:threadId/messages`, ({ params }) =>
@@ -300,21 +375,25 @@ export const mailHandlers = (
 			);
 			if (options.holdLaterPages && params.has("continuationToken"))
 				return pending();
+			if (searching && options.search === "holds") return pending();
 			return HttpResponse.json(listing(narrow(scope, params), params, options));
 		}),
 		http.get(
 			`${API}/mailboxes/:mailboxId/threads/search`,
-			({ request, params }) =>
-				HttpResponse.json(
+			({ request, params }) => {
+				const search = new URL(request.url).searchParams;
+				if (search.has("query") && options.search === "holds") return pending();
+				return HttpResponse.json(
 					listing(
 						narrow(
 							world.threads.filter((row) => row.mailboxId === params.mailboxId),
-							new URL(request.url).searchParams,
+							search,
 						),
-						new URL(request.url).searchParams,
+						search,
 						options,
 					),
-				),
+				);
+			},
 		),
 		http.get(`${API}/mailboxes/:mailboxId/threads`, ({ params }) =>
 			HttpResponse.json<ThreadOperationsListThreadsResponse>({
@@ -325,14 +404,108 @@ export const mailHandlers = (
 		),
 		http.get(`${API}/outbox`, () =>
 			HttpResponse.json<OutboxOperationsListOutboxMessagesResponse>({
-				items: world.outbox,
+				items: [...outbox.values()],
 			}),
 		),
-		http.get(`${API}/search/semantic`, () =>
-			HttpResponse.json<SemanticSearchOperationsSemanticSearchResponse>({
+		http.post(`${API}/outbox`, async ({ request }) => {
+			if (options.draftSave === "refused") return refuseSave();
+			const input = (await request.json()) as RemitImapCreateOutboxMessageInput;
+			draftsCreated += 1;
+			const account = world.accounts.find(
+				(candidate) => candidate.accountId === input.accountId,
+			);
+			const created: RemitImapOutboxMessageResponse = {
+				outboxMessageId: `out-created-${draftsCreated}`,
+				accountId: input.accountId,
+				fromAddress: account?.email ?? "",
+				fromName: account?.displayName,
+				toAddresses: input.toAddresses,
+				ccAddresses: input.ccAddresses ?? [],
+				bccAddresses: input.bccAddresses ?? [],
+				subject: input.subject,
+				textBody: input.textBody,
+				htmlBody: input.htmlBody,
+				references: input.references ?? [],
+				status: "draft",
+				createdAt: Date.UTC(2026, 8, 24, 13, 0),
+				updatedAt: Date.UTC(2026, 8, 24, 13, 0),
+				attachments: [],
+			};
+			outbox.set(created.outboxMessageId, created);
+			return HttpResponse.json<RemitImapOutboxMessageResponse>(created);
+		}),
+		http.get(`${API}/outbox/:outboxMessageId`, ({ params }) => {
+			const message = outbox.get(String(params.outboxMessageId));
+			if (!message)
+				return HttpResponse.json(
+					{ status: 404, message: "Outbox message not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<RemitImapOutboxMessageResponse>(message);
+		}),
+		http.patch(
+			`${API}/outbox/:outboxMessageId`,
+			async ({ params, request }) => {
+				if (options.draftSave === "refused") return refuseSave();
+				const id = String(params.outboxMessageId);
+				const current = outbox.get(id);
+				if (!current)
+					return HttpResponse.json(
+						{ status: 404, message: "Outbox message not found" },
+						{ status: 404 },
+					);
+				const input =
+					(await request.json()) as RemitImapUpdateOutboxMessageInput;
+				const { attachmentIds: _attachmentIds, ...fields } = input;
+				const updated: RemitImapOutboxMessageResponse = {
+					...current,
+					...fields,
+					status: "draft",
+				};
+				outbox.set(id, updated);
+				return HttpResponse.json<RemitImapOutboxMessageResponse>(updated);
+			},
+		),
+		http.post(`${API}/outbox/:outboxMessageId/send`, ({ params }) => {
+			if (options.send === "holds") return pending();
+			const id = String(params.outboxMessageId);
+			const current = outbox.get(id);
+			if (!current)
+				return HttpResponse.json(
+					{ status: 404, message: "Outbox message not found" },
+					{ status: 404 },
+				);
+			const queued: RemitImapOutboxMessageResponse = {
+				...current,
+				status: "queued",
+			};
+			outbox.set(id, queued);
+			return HttpResponse.json<RemitImapOutboxMessageResponse>(queued);
+		}),
+		http.delete(`${API}/outbox/:outboxMessageId`, ({ params }) => {
+			outbox.delete(String(params.outboxMessageId));
+			return new HttpResponse(null, { status: 204 });
+		}),
+		http.get(`${API}/calendars`, () =>
+			HttpResponse.json<CalendarOperationsListCalendarsResponse>({ items: [] }),
+		),
+		http.get(`${API}/calendar-events`, () =>
+			HttpResponse.json<CalendarEventOperationsListCalendarEventsResponse>({
 				items: [],
 			}),
 		),
+		http.get(`${API}/calendar-suggestions`, () =>
+			HttpResponse.json<CalendarSuggestionOperationsListCalendarSuggestionsResponse>(
+				{ items: [] },
+			),
+		),
+		http.get(`${API}/search/semantic`, () =>
+			options.search === "holds"
+				? pending()
+				: HttpResponse.json<SemanticSearchOperationsSemanticSearchResponse>({
+						items: [],
+					}),
+		),
 		http.get(`${API}/me/quarantine`, () =>
 			HttpResponse.json<MeOperationsListQuarantineResponse>({
 				entries: world.quarantine,