simplify email template dates with z.coerce.date()

Author: emma-sg

emails/emails/failed-bg-job.tsx

@@ -1,27 +1,21 @@
 import z from "zod";
 import { Template } from "../templates/btrix.js";
-import { formatDateTime, parseDate } from "../lib/date.js";
-import {
-  CodeInline,
-  Column,
-  Row,
-  Section,
-  Text,
-} from "@react-email/components";
+import { formatDateTime } from "../lib/date.js";
+import { CodeInline } from "@react-email/components";
 
 export const schema = z.object({
   org: z.string().optional(),
   job: z.object({
     id: z.string(),
     oid: z.string().optional(),
     type: z.string(),
-    started: z.string(),
+    started: z.coerce.date(),
     object_type: z.string().optional(),
     object_id: z.string().optional(),
     file_path: z.string().optional(),
     replica_storage: z.string().optional(),
   }),
-  finished: z.string(),
+  finished: z.coerce.date(),
 });
 
 export type FailedBgJobEmailProps = z.infer<typeof schema>;
@@ -61,12 +55,8 @@ export const FailedBgJobEmail = ({
       linky={{ version: "concerned", caption: false }}
     >
       <table align="center" width="100%">
-        <DataRow label="Started At">
-          {formatDateTime(parseDate(job.started))}
-        </DataRow>
-        <DataRow label="Finished At">
-          {formatDateTime(parseDate(finished))}
-        </DataRow>
+        <DataRow label="Started At">{formatDateTime(job.started)}</DataRow>
+        <DataRow label="Finished At">{formatDateTime(finished)}</DataRow>
         {org && (
           <DataRow label="Organization">
             <Code>{org}</Code>
@@ -110,13 +100,13 @@ FailedBgJobEmail.PreviewProps = {
     id: "1234567890",
     oid: "1234567890",
     type: "type",
-    started: new Date().toISOString(),
+    started: new Date(),
     object_type: "object_type",
     object_id: "object_id",
     file_path: "file_path",
     replica_storage: "replica_storage",
   },
-  finished: new Date().toISOString(),
+  finished: new Date(),
 } satisfies FailedBgJobEmailProps;
 
 export default FailedBgJobEmail;

emails/emails/invite.tsx

@@ -4,10 +4,8 @@ import { Template } from "../templates/btrix.js";
 import {
   differenceInDays,
   formatDate,
-  formatRelativeDate,
   formatRelativeDateToParts,
   offsetDays,
-  reRenderDate,
 } from "../lib/date.js";
 import { formatNumber } from "../lib/number.js";
 import { Button } from "../components/button.js";
@@ -21,7 +19,7 @@ export const schema = z.object({
   invite_url: z.string(),
   support_email: z.email().optional(),
   validity_period_days: z.number().int().positive().optional(),
-  trial_end_date: z.string().nullish(),
+  trial_end_date: z.coerce.date().nullish(),
 });
 
 export type InviteUserEmailProps = z.infer<typeof schema>;
@@ -35,9 +33,7 @@ export const InviteUserEmail = ({
   validity_period_days = 7,
   trial_end_date,
 }: InviteUserEmailProps) => {
-  const daysLeft = trial_end_date
-    ? differenceInDays(new Date(trial_end_date))
-    : null;
+  const daysLeft = trial_end_date ? differenceInDays(trial_end_date) : null;
   const relativeParts = daysLeft
     ? formatRelativeDateToParts(daysLeft, "days")
     : null;
@@ -348,7 +344,7 @@ InviteUserEmail.PreviewProps = {
   invite_url: "https://app.browsertrix.com/invite-url-123-demo",
   support_email: "support@webrecorder.net",
   validity_period_days: 7,
-  trial_end_date: offsetDays(7).toISOString(),
+  trial_end_date: offsetDays(7),
 } satisfies InviteUserEmailProps;
 
 export default InviteUserEmail;

emails/emails/subscription-cancel.tsx

@@ -1,4 +1,4 @@
-import { Heading, Link, Text } from "@react-email/components";
+import { Link, Text } from "@react-email/components";
 
 import { Template } from "../templates/btrix.js";
 import { formatDate, offsetDays } from "../lib/date.js";
@@ -12,23 +12,13 @@ export const schema = z.object({
   user_name: z.string(),
   org_name: z.string(),
   org_url: z.string().transform(trimTrailingSlash),
-  cancel_date: z.string(),
+  cancel_date: z.coerce.date(),
   survey_url: z.string().optional(),
   support_email: z.email().optional(),
 });
 
 export type SubscriptionCancelEmailProps = z.infer<typeof schema>;
 
-function reRenderDate(date: string) {
-  try {
-    const parsedDate = new Date(date);
-    return formatDate(parsedDate);
-  } catch (error) {
-    console.error("Error parsing date:", error);
-    return date;
-  }
-}
-
 export const SubscriptionCancelEmail = ({
   user_name,
   org_name,
@@ -37,7 +27,7 @@ export const SubscriptionCancelEmail = ({
   survey_url,
   support_email,
 }: SubscriptionCancelEmailProps) => {
-  const date = reRenderDate(cancel_date);
+  const date = formatDate(cancel_date);
   return (
     <Template
       preview={"Your Browsertrix subscription is cancelling"}
@@ -146,7 +136,7 @@ export const SubscriptionCancelEmail = ({
 SubscriptionCancelEmail.PreviewProps = {
   user_name: "Emma",
   org_name: "Emma’s Archives",
-  cancel_date: offsetDays(7).toISOString(),
+  cancel_date: offsetDays(7),
   survey_url: "https://example.com/survey",
   org_url: "https://dev.browsertrix.com/orgs/default-org",
   support_email: "support@webrecorder.net",
@@ -155,6 +145,6 @@ SubscriptionCancelEmail.PreviewProps = {
 export default SubscriptionCancelEmail;
 
 export const subject = ({ cancel_date }: SubscriptionCancelEmailProps) => {
-  const date = reRenderDate(cancel_date);
+  const date = formatDate(cancel_date);
   return `Your Browsertrix subscription will be cancelled on ${date}`;
 };

emails/emails/trial-ending-soon.tsx

@@ -7,7 +7,6 @@ import {
   formatRelativeDate,
   formatRelativeDateToParts,
   offsetDays,
-  reRenderDate,
 } from "../lib/date.js";
 import { Warning } from "../components/warning.js";
 
@@ -18,7 +17,7 @@ export const schema = z.object({
   user_name: z.string(),
   org_name: z.string(),
   org_url: z.url().transform(trimTrailingSlash),
-  trial_end_date: z.string(),
+  trial_end_date: z.coerce.date(),
   behavior_on_trial_end: z.enum(["cancel", "continue"]).optional(),
   support_email: z.email().optional(),
 });
@@ -33,7 +32,7 @@ export const TrialEndingSoonEmail = ({
   behavior_on_trial_end = "continue",
   support_email,
 }: TrialEndingSoonEmailProps) => {
-  const date = reRenderDate(trial_end_date);
+  const date = formatDate(trial_end_date);
   const daysLeft = differenceInDays(new Date(trial_end_date));
   const relative = formatRelativeDate(daysLeft, "days");
   const relativeParts = formatRelativeDateToParts(daysLeft, "days");
@@ -182,7 +181,7 @@ export const TrialEndingSoonEmail = ({
 TrialEndingSoonEmail.PreviewProps = {
   user_name: "Emma",
   org_name: "Emma’s Archives",
-  trial_end_date: offsetDays(7).toISOString(),
+  trial_end_date: offsetDays(7),
   org_url: "https://dev.browsertrix.com/orgs/default-org",
   behavior_on_trial_end: "cancel",
   support_email: "support@webrecorder.net",
@@ -191,7 +190,7 @@ TrialEndingSoonEmail.PreviewProps = {
 export default TrialEndingSoonEmail;
 
 export const subject = ({ trial_end_date }: TrialEndingSoonEmailProps) => {
-  const date = reRenderDate(trial_end_date);
+  const date = formatDate(trial_end_date);
   const daysLeft = differenceInDays(new Date(trial_end_date));
   const relative = formatRelativeDate(daysLeft, "days");
   return `Your Browsertrix trial ends ${relative}`;

emails/lib/date.ts

@@ -1,22 +1,3 @@
-export function parseDate(date: string) {
-  try {
-    return new Date(date);
-  } catch (error) {
-    console.error("Error parsing date:", error);
-    throw new Error("Invalid date format");
-  }
-}
-
-export function reRenderDate(date: string) {
-  try {
-    const parsedDate = new Date(date);
-    return formatDate(parsedDate);
-  } catch (error) {
-    console.error("Error parsing date:", error);
-    return date;
-  }
-}
-
 export const offsetDays = (days: number, from = new Date()) => {
   const date = new Date(from);
   date.setDate(date.getDate() + days);