@vrplatform/email 1.0.2-40176543866 → 1.0.2-40299030944

package/src/templates/OwnerStatementEmailTemplate.tsx

@@ -1,4 +1,3 @@
-import { Heading } from '@react-email/heading';
 import { Text } from '@react-email/text';
 import {
   EMAIL_ACTION_LINK_COMPONENT,
@@ -12,6 +11,7 @@ import type {
 } from '../components/ActionEmailTemplate';
 import { Button } from '../components/Button';
 import { EmailContainer } from '../components/EmailContainer';
+import { EmailHeading } from '../components/EmailHeading';
 import { parseEmailHtml } from '../components/utils';
 
 export const getDefaultOwnerStatementEmailData = (
@@ -22,8 +22,6 @@ export const getDefaultOwnerStatementEmailData = (
     listingName: string;
     userName: string;
     month: string;
-    /** The owner opens the statement through an emailed link, without a login. */
-    noLogin?: boolean;
   }
 ): ActionEmailData => {
   const ownerStatementHref =
@@ -34,33 +32,23 @@ export const getDefaultOwnerStatementEmailData = (
   const month = mode === 'tag' ? EMAIL_DATE_COMPONENT : args.month;
   const userName = mode === 'tag' ? EMAIL_USER_NAME_COMPONENT : args.userName;
 
-  if (args.noLogin) {
-    // Subject and preview text are plain text without tokens, so a saved
-    // template must not keep the editor's sample month and listing.
-    return {
-      subject:
-        mode === 'tag'
-          ? 'Your owner statement is ready'
-          : `Your ${args.month} owner statement for ${args.listingName}`,
-      shortDescription:
-        mode === 'tag'
-          ? 'Your owner statement is ready. Open it with one click, no login needed.'
-          : `Your ${args.month} statement for ${args.listingName} is ready. Open it with one click, no login needed.`,
-      header: 'Your owner statement is ready',
-      bodyOne: `<p>Hi ${userName},</p><p>${args.appName} published your ${month} owner statement for ${listingName}. Open it with the button below. You don't need a login.</p>`,
-      buttonText: 'View statement',
-      bodyTwo: `<p style="color:#737373;font-size:13px">If the button doesn't work, copy this link into your browser: ${ownerStatementHref}</p>`,
-      href: args.ownerStatementHref,
-    };
-  }
-
+  // Owners open the statement by link without a login and viewers log in to
+  // the owner portal, so the text names neither. Subject and preview text are
+  // plain text without tokens, so a saved template must not keep the editor's
+  // sample month and listing.
   return {
-    subject: 'Owner statement was published',
-    shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,
-    header: 'Owner statement was published',
-    bodyOne: `<p>Hi ${userName},<p>Your ${month} owner statement for property ${listingName} is ready for your review on ${args.appName}.</p><p>To access your statement, please click the button below:</p>`,
-    buttonText: 'View Owner statement',
-    bodyTwo: `<p>If you have any trouble with the button, you can copy and paste the link below into your browser: ${ownerStatementHref}</p>`,
+    subject:
+      mode === 'tag'
+        ? 'Your owner statement is ready'
+        : `Your ${args.month} owner statement for ${args.listingName}`,
+    shortDescription:
+      mode === 'tag'
+        ? 'Your owner statement is ready to view.'
+        : `Your ${args.month} statement for ${args.listingName} is ready to view.`,
+    header: 'Your owner statement is ready',
+    bodyOne: `<p>Hi ${userName},</p><p>${args.appName} published your ${month} owner statement for ${listingName}. Open it with the button below.</p>`,
+    buttonText: 'View statement',
+    bodyTwo: `<p style="color:#737373;font-size:13px">If the button doesn't work, copy this link into your browser: ${ownerStatementHref}</p>`,
     href: args.ownerStatementHref,
   };
 };
@@ -98,28 +86,9 @@ export const OwnerStatementEmailTemplate = ({
       mode={mode}
       unsubscribeHref={unsubscribeHref}
     >
-      <Text
-        style={{
-          color: themeColors[8],
-          fontSize: 12,
-          fontWeight: 600,
-          letterSpacing: '0.08em',
-          textTransform: 'uppercase',
-          margin: '0 0 8px',
-        }}
-      >
-        Owner statement
-      </Text>
-      <Heading
-        style={{
-          fontSize: 26,
-          fontWeight: 600,
-          lineHeight: '34px',
-          margin: '0 0 32px',
-        }}
-      >
+      <EmailHeading eyebrow="Owner statement" themeColors={themeColors}>
         {data.header?.trim() || 'Your owner statement is ready'}
-      </Heading>
+      </EmailHeading>
 
       {data.banner?.trim() && (
         <Text

package/src/templates/TenantDeletionEmailTemplate.tsx

@@ -1,6 +1,6 @@
-import { Heading } from '@react-email/heading';
 import { Text } from '@react-email/text';
-import { EmailContainer } from '../components';
+import { EmailContainer, EmailHeading } from '../components';
+import { THEME_COLORS } from '../theme';
 import type { EmailBaseProps } from '../types';
 
 export type TenantDeletionEmailTemplateProps = {
@@ -25,15 +25,14 @@ export const TenantDeletionEmailTemplate = ({
       }}
       mode={mode}
     >
-      <Heading
-        style={{
-          fontSize: 28,
-          fontWeight: 600,
-          marginBottom: '50px',
-        }}
+      <EmailHeading
+        eyebrow="Team deleted"
+        themeColors={THEME_COLORS.vrplatform}
       >
-        {user.firstName ? `Dear ${user.firstName},` : 'Hi there,'}
-      </Heading>
+        Your team was deleted
+      </EmailHeading>
+
+      <Text>{user.firstName ? `Dear ${user.firstName},` : 'Hi there,'}</Text>
 
       <Text>
         We wanted to inform you that the team account "{tenant.name}" has been

package/src/templates/TenantSuspensionEmailTemplate.tsx

@@ -1,6 +1,6 @@
-import { Heading } from '@react-email/heading';
 import { Text } from '@react-email/text';
-import { EmailContainer } from '../components';
+import { EmailContainer, EmailHeading } from '../components';
+import { THEME_COLORS } from '../theme';
 import type { EmailBaseProps } from '../types';
 
 export type TenantSuspensionEmailTemplateProps = {
@@ -25,15 +25,14 @@ export const TenantSuspensionEmailTemplate = ({
       }}
       mode={mode}
     >
-      <Heading
-        style={{
-          fontSize: 28,
-          fontWeight: 600,
-          marginBottom: '50px',
-        }}
+      <EmailHeading
+        eyebrow="Team suspended"
+        themeColors={THEME_COLORS.vrplatform}
       >
-        {user.firstName ? `Dear ${user.firstName},` : 'Hi there,'}
-      </Heading>
+        Your team access is suspended
+      </EmailHeading>
+
+      <Text>{user.firstName ? `Dear ${user.firstName},` : 'Hi there,'}</Text>
 
       <Text>
         We're reaching out to inform you that as of today, access to your team{' '}