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

packages/backend/server/package.json

@@ -66,6 +66,7 @@
     "@socket.io/redis-adapter": "^8.3.0",
     "bullmq": "^5.40.2",
     "cookie-parser": "^1.4.7",
+    "date-fns": "^4.0.0",
     "dotenv": "^16.4.7",
     "eventemitter2": "^6.4.9",
     "eventsource-parser": "^3.0.0",

packages/backend/server/src/__tests__/__snapshots__/mailer.spec.ts.md

@@ -1403,9 +1403,9 @@ Generated by [AVA](https://avajs.dev).
                       >Test Workspace</span␊
                     >␊
                     team workspace expired on<!-- -->␊
-                    <span style="font-weight:600">1/1/2025</span>. All workspace␊
+                    <span style="font-weight:600">2025-01-01</span>. All workspace␊
-                    data will be permanently deleted on<!-- -->␊
+                    data will be permanently deleted on␊
-                    <span style="font-weight:600">1/31/2025</span> (180 days after␊
+                    <span style="font-weight:600">2025-01-31</span> (180 days after␊
                     expiration). To prevent data loss, please either:␊
                     <li>␊
                       <span␊
@@ -1510,8 +1510,8 @@ Generated by [AVA](https://avajs.dev).
                       style="font-weight:600"␊
                       >Test Workspace</span␊
                     >␊
-                    team workspace data will be permanently deleted in 24 hours on<!-- -->␊
+                    team workspace data will be permanently deleted in 24 hours on␊
-                    <span style="font-weight:600">1/31/2025</span>. To prevent data␊
+                    <span style="font-weight:600">2025-01-31</span>. To prevent data␊
                     loss, please take immediate action:␊
                     <li>␊
                       <span␊
@@ -1775,10 +1775,10 @@ Generated by [AVA](https://avajs.dev).
                       >Test Workspace</span␊
                     >␊
                     team workspace will expire on<!-- -->␊
-                    <span style="font-weight:600">1/1/2025</span>. After expiration,␊
+                    <span style="font-weight:600">2025-01-01</span>. After␊
-                    you won&#x27;t be able to sync or collaborate with team members.␊
+                    expiration, you won&#x27;t be able to sync or collaborate with␊
-                    Please renew your subscription to continue using all team␊
+                    team members. Please renew your subscription to continue using␊
-                    features.␊
+                    all team features.␊
                   </p>␊
                 </tr>␊
               </tbody>␊
@@ -1870,7 +1870,7 @@ Generated by [AVA](https://avajs.dev).
                       >Test Workspace</span␊
                     >␊
                     team workspace expired on<!-- -->␊
-                    <span style="font-weight:600">1/1/2025</span>. Your workspace␊
+                    <span style="font-weight:600">2025-01-01</span>. Your workspace␊
                     can&#x27;t sync or collaborate with team members. Please renew␊
                     your subscription to restore all team features.␊
                   </p>␊

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
+          <IOSDate value={expirationDate} />. All workspace data will be
-          will be permanently deleted on{' '}
+          permanently deleted on <IOSDate value={deletionDate} /> (180 days
-          <Bold>{deletionDate.toLocaleDateString()}</Bold> (180 days after
+          after expiration). To prevent data loss, please either:
-          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{' '}
+          permanently deleted in 24 hours on <IOSDate value={deletionDate} />.
-          <Bold>{deletionDate.toLocaleDateString()}</Bold>. To prevent data
+          To prevent data loss, please take immediate action:
-          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,
+          <IOSDate value={expirationDate} />. After expiration, you won&apos;t
-          you won&apos;t be able to sync or collaborate with team members.
+          be able to sync or collaborate with team members. Please renew your
-          Please renew your subscription to continue using all team features.
+          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
+          <IOSDate value={expirationDate} />. Your workspace can&apos;t sync or
-          can&apos;t sync or collaborate with team members. Please renew your
+          collaborate with team members. Please renew your subscription to
-          subscription to restore all team features.
+          restore all team features.
         </P>
         <Button href={url}>Go to Billing</Button>
       </Content>

yarn.lock

@@ -905,6 +905,7 @@ __metadata:
     c8: "npm:^10.1.3"
     cookie-parser: "npm:^1.4.7"
     cross-env: "npm:^7.0.3"
+    date-fns: "npm:^4.0.0"
     dotenv: "npm:^16.4.7"
     eventemitter2: "npm:^6.4.9"
     eventsource-parser: "npm:^3.0.0"