feat(server): display date in yyyy-MM-dd format on email (#10916)

packages/backend/server/src/mails/components/date.tsx

@@ -0,0 +1,11 @@
+import { format } from 'date-fns';
+
+import { Bold } from './template';
+
+export interface DateProps {
+  value: Date;
+}
+
+export const IOSDate = (props: DateProps) => {
+  return <Bold>{format(props.value, 'yyyy-MM-dd')}</Bold>;
+};

packages/backend/server/src/mails/components/index.ts

@@ -1,3 +1,4 @@
+export * from './date';
 export * from './template';
 export * from './user';
 export * from './workspace';

packages/backend/server/src/mails/teams/delete-in-1m.tsx

@@ -1,8 +1,8 @@
 import { TEST_WORKSPACE } from '../common';
 import {
-  Bold,
   Button,
   Content,
+  IOSDate,
   P,
   Template,
   Text,
@@ -27,10 +27,9 @@ export default function TeamDeleteInOneMonth(props: TeamDeleteInOneMonthProps) {
       <Content>
         <P>
           Your <Workspace {...workspace} /> team workspace expired on{' '}
-          <Bold>{expirationDate.toLocaleDateString()}</Bold>. All workspace data
-          will be permanently deleted on{' '}
-          <Bold>{deletionDate.toLocaleDateString()}</Bold> (180 days after
-          expiration). To prevent data loss, please either:
+          <IOSDate value={expirationDate} />. All workspace data will be
+          permanently deleted on <IOSDate value={deletionDate} /> (180 days
+          after expiration). To prevent data loss, please either:
           <li>
             <Text>Renew your subscription to restore team features</Text>
           </li>

packages/backend/server/src/mails/teams/delete-in-24h.tsx

@@ -1,8 +1,8 @@
 import { TEST_WORKSPACE } from '../common';
 import {
-  Bold,
   Button,
   Content,
+  IOSDate,
   P,
   Template,
   Text,
@@ -26,9 +26,8 @@ export default function TeamDeleteIn24Hours(props: TeamDeleteIn24HoursProps) {
       <Content>
         <P>
           Your <Workspace {...workspace} /> team workspace data will be
-          permanently deleted in 24 hours on{' '}
-          <Bold>{deletionDate.toLocaleDateString()}</Bold>. To prevent data
-          loss, please take immediate action:
+          permanently deleted in 24 hours on <IOSDate value={deletionDate} />.
+          To prevent data loss, please take immediate action:
           <li>
             <Text>Renew your subscription to restore team features</Text>
           </li>

packages/backend/server/src/mails/teams/expire-soon.tsx

@@ -1,8 +1,8 @@
 import { TEST_WORKSPACE } from '../common';
 import {
-  Bold,
   Button,
   Content,
+  IOSDate,
   P,
   Template,
   Title,
@@ -25,9 +25,9 @@ export default function TeamExpireSoon(props: TeamExpireSoonProps) {
       <Content>
         <P>
           Your <Workspace {...workspace} /> team workspace will expire on{' '}
-          <Bold>{expirationDate.toLocaleDateString()}</Bold>. After expiration,
-          you won&apos;t be able to sync or collaborate with team members.
-          Please renew your subscription to continue using all team features.
+          <IOSDate value={expirationDate} />. After expiration, you won&apos;t
+          be able to sync or collaborate with team members. Please renew your
+          subscription to continue using all team features.
         </P>
         <Button href={url}>Go to Billing</Button>
       </Content>

packages/backend/server/src/mails/teams/expired.tsx

@@ -1,8 +1,8 @@
 import { TEST_WORKSPACE } from '../common';
 import {
-  Bold,
   Button,
   Content,
+  IOSDate,
   P,
   Template,
   Title,
@@ -25,9 +25,9 @@ export default function TeamExpired(props: TeamExpiredProps) {
       <Content>
         <P>
           Your <Workspace {...workspace} /> team workspace expired on{' '}
-          <Bold>{expirationDate.toLocaleDateString()}</Bold>. Your workspace
-          can&apos;t sync or collaborate with team members. Please renew your
-          subscription to restore all team features.
+          <IOSDate value={expirationDate} />. Your workspace can&apos;t sync or
+          collaborate with team members. Please renew your subscription to
+          restore all team features.
         </P>
         <Button href={url}>Go to Billing</Button>
       </Content>