Aman Ganapathy 485fa9d623 [Refactor][Feat][Fix] Rework Email Section With New Sent Page, Better Drafts Page, and Settings Page (#1221) ... ### Context We didn't have an easy place for a user to see their domain statistics and track their sent emails, either overall or by draft. Additionally, there was scope creep with the sidebar, where we were supporting more pages. Our emails landing page was also rather confusing, especially toggling/ working with different email server types. So, we decide to add a "sent" page, to track email logs and email statistics, as well as let users temporarily override their sending limits if need be. Additionally, a user may want to see a particular email in more detail: what stage is it in? How did it proceed through time? How can I pause the sending of this email or change the scheduled time or edit the code? We allow for that to happen. ### Summary of Changes #### New Pages 1. **Sent Page:** A Domain Reputation card lets you track how many of your sent emails were bounced or marked as spam as well as how much capacity you have left. We also provide a temporary override, where you can use up to 4 times your capacity for a limited period of time. Additionally, we provide an email log that lets you see the recently sent emails. You can also toggle this view from a "list all emails" to "group by template/draft" which shows stats for each template/draft id (i.e a bar showing how many emails were sent, are pending, were marked as spam, were bounced etc, and the total number of emails sent with that template or draft). Clicking on an email in the list all view takes you to the "email-viewer" endpoint for that email (see below). Clicking on a template/draft in the group by view takes you to a page where you can see the statistics for that template/draft in more detail (the "send" stage view for that template/draft, as referenced below). 2. **Settings Page:** This is a new page we created because the old "emails" landing page wasn't doing its job. This page is to track all the email settings. Currently, we put in 2 sections. A "theme settings" card where users can see their active theme and click on a button to be navigated to the themes page. This is necessary as we remove themes from the sidebar. The other section is a card for email server and domain configuration - you can change your server type and adjust the settings or send a test email. It's cleaner and less noisy. 3. **Drafts Page**: There are a lot of changes here. On the landing page, we actually separate out the drafts into "active drafts" and "draft history" because drafts are meant to be fire-and-forget, not reusable. We also add the functionality to create a draft from a template. This was tricky to manage because templates rely on template variables which sent to the backend along with the code and injected during render time. We deal with this by having AI rewrite the template source code to remove any references to template variables and to make the draft standalone. The drafts page has been separated into a stepper-controlled multi stage process: draft->recipients->schedule->sent. Sent is a read only view that shows you the statistics of the emails sent using that draft, as mentioned earlier. You can also see the sent view of a historical draft. You can also bulk pause/cancel any unsent emails from the sent view of the drafts. 4. **Sidebar Updates**: The email sidebar now doesn't show "themes" or "emails" (the old landing page), but it does show "settings" and "sent", and the default landing page for emails is "sent". 5. **Email Viewer**: When you click on an individual email, you get navigated here. This has a timeline showing the progress of the email on the right, and some optional info for the user that's toggleable on the right bottom, while having either a preview of the email if it's sent or a way to edit it. You can also change the scheduledAt date of an email if it hasn't already been sent. #### Bug Fixes 1. **Search in `TeamMemberSearchTable`**: This was broken. Every time you tried to enter or remove a character, it would trigger skeleton loading that overlapped the search bar too, preventing you from adding/removing more. This was caused because the `useUser` hook eventually ended up calling a `use` hook, which throws a promise that triggers a suspense. This, coupled with the fact that the implementation of `TeamMemberSearchTable` involved a prop-drilling/ dependency inversion approach to passing down its toolbar to a base table component, meant the suspense would cover the toolbar too and couldn't be scoped to just the table. A refactor has gotten rid of the need for those base components while fixing tables in `payments/customers`, `teams/team_id`, and `payments/transactions` on top of the existing use in email drafts recipients stage. We also dedupped some code. 2. **Stale draft fetches on draft landing page**: `useEmailDrafts` uses an asyncCache to cache the fetched drafts. It is used on the drafts landing page to render the drafts. When a draft is sent, its `sentAt` is marked versus when it is still active, it is marked as null. The cache was stale and so navigating to the landing page after firing off a draft would errorneously represent that draft as still active and indeed, even allow you to edit it and fire it again. This violated the principle of drafts being fire and forget. This has been dealt with by adding functionality to refresh the draft cache upon firing off a draft. #### Other Changes 1. We bumped up the base time for the exponential send attempt retry backoff in `email-queue-step` to 20 seconds. The previous base was two seconds, and this effectively just made it wait until the next iteration of the `email-queue-step` cron job or at most an iteration that wasn't too far away. When an outage with our provider happens, it may take a while for it to be resolved, so a longer backoff is justified 2. We transitioned the themes page and the templates page to using the new components, though deeper UI refactors for them were out of scope for this ticket. 3. We implement a "temporarily increase capacity" button, that bumps up the throughput/ capacity limit fourfold for a user for a given period of time. It works like this: > Clicking the button sets a boost expiredat time. > When this time is set and still valid, the capacity rate is multiplied by 4. > When the button is clicked, trigger a loading spinner until the route finishes processing. > When the timer runs out, we reset the button back to its original state. > We dont need to wrap the onclick with runAsyncWithAlert because the component does that already. 4. We add a new default theme: a colorful theme with a lavender base. This was mainly done so we could have three times in a theme showcase in the settings page. ### UI Demos **Sent Page Demo:** https://github.com/user-attachments/assets/19294a90-bb65-4f00-9a97-111f6c08287f **Drafts Page Demo** https://github.com/user-attachments/assets/847609ef-d699-470c-a699-297bb9e17f04 **Settings Page Demo** https://github.com/user-attachments/assets/190a3829-036a-4f57-89c0-a873bef5a7ce **Email Viewer Page Demo** https://github.com/user-attachments/assets/3bc50159-4acb-4865-a4dd-830c84ee4235 --------- Co-authored-by: Konstantin Wohlwend <n2d4xc@gmail.com>		2026-03-11 12:01:36 -07:00
..
migrations	[Refactor][Feat][Fix] Rework Email Section With New Sent Page, Better Drafts Page, and Settings Page (#1221)	2026-03-11 12:01:36 -07:00
schema.prisma	[Refactor][Feat][Fix] Rework Email Section With New Sent Page, Better Drafts Page, and Settings Page (#1221)	2026-03-11 12:01:36 -07:00
seed.ts	Local emulator base (#1233)	2026-03-10 15:15:06 -07:00