@vrplatform/email 1.0.0

package/src/components/ActionEmailTemplate.tsx

@@ -0,0 +1,97 @@
+import { Heading } from '@react-email/heading';
+import { Text } from '@react-email/text';
+import { EmailContainer } from './EmailContainer';
+import type { EmailBaseProps } from '../types';
+import { parseEmailHtml } from './utils';
+import { Button } from './Button';
+
+export type ActionEmailData = {
+  subject: string;
+  shortDescription: string;
+  banner?: string;
+  header: string;
+  bodyOne: string;
+  bodyTwo: string;
+  href: string;
+  buttonText: string;
+};
+
+export interface ActionEmailTemplateProps extends EmailBaseProps {
+  data: ActionEmailData;
+}
+
+export const ActionEmailTemplate = ({
+  data,
+  tenant,
+  themeColors,
+  mode,
+  user,
+  listing,
+  month,
+}: ActionEmailTemplateProps) => {
+  return (
+    <EmailContainer
+      title={data.subject}
+      shortDescription={data.shortDescription}
+      tenant={{
+        logo: tenant.logo,
+      }}
+      mode={mode}
+    >
+      <Heading
+        style={{
+          fontSize: 28,
+          fontWeight: 600,
+          marginBottom: '50px',
+        }}
+      >
+        {data.header?.trim() || `Welcome to ${tenant.name}!`}
+      </Heading>
+
+      {data.banner?.trim() && (
+        <Text
+          style={{
+            padding: '24px',
+            backgroundColor: '#f2f3f3',
+            borderRadius: '4px',
+            marginBottom: '40px',
+          }}
+        >
+          {data.banner.trim()}
+        </Text>
+      )}
+
+      <div
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{
+          __html: parseEmailHtml(data.bodyOne, {
+            href: data.href,
+            userName: user.firstName || '',
+            date: month || '',
+            listingName: listing || '',
+          }),
+        }}
+      />
+
+      <Button
+        href={data.href}
+        mode={mode}
+        data-testid="accept-invite-button"
+        label={data.buttonText?.trim() || 'Accept Invitation'}
+        themeColors={themeColors}
+      />
+
+      <div
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{
+          __html: parseEmailHtml(data.bodyTwo, {
+            href: data.href,
+            userName: user.firstName || '',
+            date: month || '',
+            listingName: listing || '',
+          }),
+        }}
+      />
+    </EmailContainer>
+  );
+};

package/src/components/Button.tsx

@@ -0,0 +1,40 @@
+import { Button as ReactEmailButton } from '@react-email/button';
+import type { ComponentProps } from 'react';
+import type { EmailBaseProps } from '../types';
+
+type Props = {
+  mode: EmailBaseProps['mode'];
+  href: string;
+  themeColors: EmailBaseProps['themeColors'];
+  label: string;
+} & ComponentProps<typeof ReactEmailButton>;
+
+export const Button = ({
+  href,
+  mode,
+  label,
+  themeColors,
+  style,
+  ...props
+}: Props) => (
+  <ReactEmailButton
+    href={mode === 'send' ? href : undefined}
+    style={{
+      width: '100%',
+      textAlign: 'center',
+      display: 'block',
+      padding: '13px 0',
+      background: `linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), ${
+        themeColors[8]
+      }`,
+      color: '#fff',
+      borderRadius: '8px',
+      marginTop: '30px',
+      marginBottom: '60px',
+      ...style,
+    }}
+    {...props}
+  >
+    {label.trim()}
+  </ReactEmailButton>
+);

package/src/components/EmailContainer.tsx

@@ -0,0 +1,161 @@
+import { Body } from '@react-email/body';
+import { Font } from '@react-email/font';
+import { Head } from '@react-email/head';
+import { Hr } from '@react-email/hr';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Preview } from '@react-email/preview';
+import { Text } from '@react-email/text';
+import type { EmailBaseProps } from '../types';
+
+type Props = {
+  children: React.ReactNode;
+  title: string;
+  tenant: Omit<EmailBaseProps['tenant'], 'name'>;
+  mode: EmailBaseProps['mode'];
+  shortDescription?: string;
+};
+
+export const EmailContainer = (props: Props) => {
+  const { children, shortDescription, title } = props;
+
+  const contentWrapperStyle = {
+    paddingInline: '20px',
+    paddingBlock: '10px',
+    maxWidth: '500px',
+    margin: '0 auto',
+  };
+
+  if (props.mode !== 'send') {
+    return (
+      <div style={contentWrapperStyle}>
+        <Content {...props}>{children}</Content>
+      </div>
+    );
+  }
+
+  return (
+    <Html lang="en">
+      <Head>
+        <title>{title}</title>
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Verdana"
+          webFont={{
+            url: 'https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2',
+            format: 'woff2',
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Verdana"
+          webFont={{
+            url: 'https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2',
+            format: 'woff2',
+          }}
+          fontWeight={600}
+          fontStyle="normal"
+        />
+      </Head>
+      {shortDescription && <Preview>{shortDescription}</Preview>}
+      <Body style={contentWrapperStyle}>
+        <Content {...props}>{children}</Content>
+      </Body>
+    </Html>
+  );
+};
+
+const Content = ({ children, tenant: { logo: tenantLogo }, mode }: Props) => {
+  return (
+    <>
+      {tenantLogo ? (
+        <div
+          style={{
+            marginBottom: '60px',
+            padding: '5px',
+            // border: '1px solid rgb(233,236,239)',
+            borderRadius: '5px',
+            width: '80px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Img src={tenantLogo} alt={'Logo'} width={70} />
+        </div>
+      ) : mode === 'send' ? (
+        <Img
+          src={'https://staging.portal.vrplatform.app/logo.png'}
+          alt={'Logo'}
+          width={70}
+          style={{ marginBottom: '60px' }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '60px',
+          }}
+        >
+          <VrpLogo />
+        </div>
+      )}
+
+      {children}
+
+      <Footer />
+    </>
+  );
+};
+
+const Footer = () => (
+  <>
+    <Hr
+      style={{
+        marginTop: '30px',
+        marginBottom: '50px',
+      }}
+    />
+
+    <Text
+      style={{
+        color: '#737373',
+      }}
+    >
+      © {new Date().getFullYear()} VRPlatform Ventures Ltd. All rights reserved.
+    </Text>
+    <Text
+      style={{
+        color: '#737373',
+      }}
+    >
+      VR Technologies, LLC, a company incorporated and registered in the United
+      States of America with company number 20201965158
+    </Text>
+  </>
+);
+
+const VrpLogo = () => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 28 29"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.2549 8.25161C18.2549 5.89704 20.1636 3.98828 22.5182 3.98828C24.8728 3.98828 26.7815 5.89704 26.7815 8.25161C26.7815 10.6062 24.8728 12.5149 22.5182 12.5149C20.1636 12.5149 18.2549 10.6062 18.2549 8.25161Z"
+      fill="#172554"
+    />
+    <path
+      d="M7.02441 8.46593C7.02441 6.01867 9.20858 3.99805 11.6558 3.99805C14.1031 3.99805 15.0558 5.59785 16.5612 7.52728C17.1957 8.34054 20.7921 13.3413 20.7921 13.3413C20.7921 13.3413 21.566 14.6863 21.566 15.7894C21.566 18.5287 17.1993 22.8381 17.1993 22.8381L7.66841 10.6799C7.66841 10.6799 7.02441 10.0502 7.02441 8.46593Z"
+      fill="#172554"
+      fillOpacity="0.8"
+    />
+    <path
+      d="M1.24707 8.42687C1.24707 5.97961 3.43123 3.95898 5.8785 3.95898C8.32576 3.95898 9.27845 5.55879 10.7839 7.48824C11.4184 8.30147 14.6041 12.4888 16.8247 15.5727C18.3585 17.703 18.474 17.705 18.474 20.3439C18.474 22.9827 15.1592 24.1379 14.1483 24.1914C12.0203 24.304 10.5418 22.4681 10.5418 22.4681L1.89106 10.6408C1.89106 10.6408 1.24707 10.0111 1.24707 8.42687Z"
+      fill="#172554"
+    />
+  </svg>
+);

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './EmailContainer';
+export * from './ActionEmailTemplate';

package/src/components/utils/index.ts

@@ -0,0 +1 @@
+export * from './parse-email-html';

package/src/components/utils/parse-email-html.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'bun:test';
+import { parseEmailHtml } from './parse-email-html';
+
+describe('parseEmailHtml', () => {
+  it('should replace <action-link-component></action-link-component> with the sign-in link anchor tag', () => {
+    const html = '<div><action-link-component></action-link-component></div>';
+    const args: Parameters<typeof parseEmailHtml>[1] = {
+      href: 'https://example.com/signin',
+      userName: 'John Doe',
+      date: '2023-01-01',
+      listingName: '123 Main St',
+    };
+    const result = parseEmailHtml(html, args);
+    expect(result).toBe(
+      '<div><a href="https://example.com/signin" target="_blank">https://example.com/signin</a></div>'
+    );
+  });
+
+  it('should replace <user-name-component></user-name-component> with the user name', () => {
+    const html =
+      '<div>Hello <user-name-component></user-name-component>!</div>';
+    const args: Parameters<typeof parseEmailHtml>[1] = {
+      href: 'https://example.com/signin',
+      userName: 'John Doe',
+      date: '2023-01-01',
+      listingName: '123 Main St',
+    };
+    const result = parseEmailHtml(html, args);
+    expect(result).toBe('<div>Hello John Doe!</div>');
+  });
+
+  it('should replace both <action-link-component> and <user-name-component> appropriately', () => {
+    const html = `
+      <div>
+        <action-link-component></action-link-component>
+        <user-name-component></user-name-component>
+      </div>
+    `;
+    const args: Parameters<typeof parseEmailHtml>[1] = {
+      href: 'https://example.com/signin',
+      userName: 'Jane Doe',
+      date: '2023-01-01',
+      listingName: '123 Main St',
+    };
+    const result = parseEmailHtml(html, args);
+    expect(result).toBe(`
+      <div>
+        <a href="https://example.com/signin" target="_blank">https://example.com/signin</a>
+        Jane Doe
+      </div>
+    `);
+  });
+
+  it('should return the input HTML unchanged if there are no components to replace', () => {
+    const html = '<div>No components to replace here</div>';
+    const args: Parameters<typeof parseEmailHtml>[1] = {
+      href: 'https://example.com/signin',
+      userName: 'John Doe',
+      date: '2023-01-01',
+      listingName: '123 Main St',
+    };
+    const result = parseEmailHtml(html, args);
+    expect(result).toBe('<div>No components to replace here</div>');
+  });
+});

package/src/components/utils/parse-email-html.ts

@@ -0,0 +1,28 @@
+export const parseEmailHtml = (
+  html: string,
+  args: {
+    href: string;
+    userName: string;
+    listingName: string;
+    date: string;
+  }
+) => {
+  // parse out any html scripts of type : <team-name-component></team-name-component> or <user-name-component></user-name-component>
+  // and replace them with the appropriate component
+  // return the parsed html
+
+  return html
+    .replaceAll(
+      /<action\-link\-component><\/action\-link\-component>/g,
+      `<a href="${args.href}" target="_blank">${args.href}</a>`
+    )
+    .replaceAll(
+      /<user\-name\-component><\/user\-name\-component>/g,
+      args.userName
+    )
+    .replaceAll(
+      /<listing\-name\-component><\/listing\-name\-component>/g,
+      args.listingName
+    )
+    .replaceAll(/<date\-component><\/date\-component>/g, args.date);
+};

package/src/const.ts

@@ -0,0 +1,6 @@
+export const VRP_PLATFORM = {
+  name: 'VRPlatform',
+  from: 'notifications@vrplatform.app',
+  portal: 'https://portal.vrplatform.app',
+  logo: 'https://images.clerk.dev/uploaded/img_2HU8qby65rUiwkf3k2bC0XnUxVz.png',
+} as const;

package/src/extensions.ts

@@ -0,0 +1,7 @@
+export const EMAIL_USER_NAME_COMPONENT =
+  '<user-name-component></user-name-component>';
+export const EMAIL_ACTION_LINK_COMPONENT =
+  '<action-link-component></action-link-component>';
+export const EMAIL_LISTING_COMPONENT =
+  '<listing-name-component></listing-name-component>';
+export const EMAIL_DATE_COMPONENT = '<date-component></date-component>';

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './templates';
+export * from './utils'; // send email utils
+export * from './theme';
+export * from './extensions';
+export { VRP_PLATFORM } from './const';
+export type { ActionEmailData } from './components';
+
+export { render } from '@react-email/render';

package/src/templates/InviteOwnerEmailTemplate.tsx

@@ -0,0 +1,66 @@
+import { EMAIL_ACTION_LINK_COMPONENT } from '../extensions';
+import {
+  type ActionEmailData,
+  ActionEmailTemplate,
+  type ActionEmailTemplateProps,
+} from '../components';
+
+export const getDefaultInviteOwnerEmailData = (
+  mode: 'tag' | 'text',
+  args: {
+    appName: string;
+    signInLink: string;
+  }
+): ActionEmailData => {
+  const signInLink =
+    mode === 'tag' ? EMAIL_ACTION_LINK_COMPONENT : args.signInLink;
+
+  return {
+    bodyOne: `<p>You are invited to join us on ${args.appName}.</p><p>To start using ${args.appName}, accept the invitation and verify your email address.</p>`,
+    bodyTwo: `<p>If you have any trouble with the button, you can copy and paste the link below into your browser: ${signInLink}</p>`,
+    buttonText: 'Accept Invitation',
+    header: 'Welcome to the team!',
+    shortDescription:
+      'You have been invited to join the team. To start using VRPlatform, verify your email address at link below.',
+    href: args.signInLink,
+    subject: `You are invited to join your team on ${args.appName}`,
+  };
+};
+
+export const InviteOwnerEmailTemplate = (props: ActionEmailTemplateProps) => {
+  return <ActionEmailTemplate {...props} />;
+};
+
+const Preview = () => (
+  <ActionEmailTemplate
+    mode="send"
+    tenant={{
+      name: 'Pineapple Mountain',
+      logo: 'https://imagedelivery.net/Ftdv9WftbW1DctaiLSVfFA/fbd8c31f-478f-4eb0-74ac-c8eeb47b5000/256x256',
+    }}
+    data={getDefaultInviteOwnerEmailData('text', {
+      appName: 'VRPlatform',
+      signInLink: 'https://example.com',
+    })}
+    user={{
+      firstName: 'John',
+    }}
+    listing={undefined}
+    month={undefined}
+    themeColors={[
+      // portal.brown
+      '#9E9390',
+      '#8D7C78',
+      '#7C6964',
+      '#6E5954',
+      '#614B46',
+      '#573F39',
+      '#4E342E',
+      '#3F2D29',
+      '#332725',
+      '#2A2220',
+    ]}
+  />
+);
+
+export default Preview;

package/src/templates/InvitePmEmailTemplate.tsx

@@ -0,0 +1,83 @@
+import { EMAIL_ACTION_LINK_COMPONENT } from '../extensions';
+import {
+  type ActionEmailData,
+  ActionEmailTemplate,
+  type ActionEmailTemplateProps,
+} from '../components';
+
+export const getDefaultInvitePropertyManagerEmailData = (
+  mode: 'tag' | 'text',
+  args: {
+    appName: string;
+    signInLink: string;
+  }
+): ActionEmailData => {
+  const signInLink =
+    mode === 'tag'
+      ? EMAIL_ACTION_LINK_COMPONENT
+      : `<a href='${args.signInLink}' target='_blank'>${args.signInLink}</a>`;
+
+  return {
+    bodyOne: `<p>You are invited to join us on ${args.appName}.</p><p>To start using ${args.appName}, accept the invitation and verify your email address.</p>`,
+    bodyTwo: `<p>If you have any trouble with the button, you can use the following link below: ${signInLink}</p>`,
+    buttonText: 'Accept Invitation',
+    header: 'Welcome to the team!',
+    shortDescription:
+      'You have been invited to join the team. To start using VRPlatform, verify your email address at link below.',
+    href: args.signInLink,
+    subject: `You are invited to join your team on ${args.appName}`,
+  };
+};
+
+export const InvitePmEmailTemplate = (props: ActionEmailTemplateProps) => {
+  return (
+    <ActionEmailTemplate
+      {...props}
+      tenant={{
+        logo: undefined,
+        name: props.tenant.name,
+      }}
+    />
+  );
+};
+
+const Preview = () => (
+  <ActionEmailTemplate
+    mode="send"
+    tenant={{
+      name: 'Pineapple Mountain',
+      logo: 'https://imagedelivery.net/Ftdv9WftbW1DctaiLSVfFA/fbd8c31f-478f-4eb0-74ac-c8eeb47b5000/256x256',
+    }}
+    data={{
+      bodyOne:
+        'Hello, <br /> <br /> You have been invited to join Pineapple Mountain. <br /> <br />',
+      bodyTwo:
+        'Please click the button below to accept the invitation. <br /> <br />',
+      buttonText: 'Accept Invitation',
+      header: 'Welcome to Pineapple Mountain!',
+      shortDescription: 'You have been invited to join Pineapple Mountain.',
+      href: 'https://example.com',
+      subject: 'You are invited to join Pineapple Mountain',
+    }}
+    user={{
+      firstName: 'John',
+    }}
+    listing={undefined}
+    month={undefined}
+    themeColors={[
+      // baseColor: vrp primary palette
+      '#E6F1FF',
+      '#B8D9FE',
+      '#8BC0FE',
+      '#5DA8FD',
+      '#308FFD',
+      '#0377FC',
+      '#025FCA',
+      '#024797',
+      '#012F65',
+      '#011832',
+    ]}
+  />
+);
+
+export default Preview;

package/src/templates/OwnerStatementEmailTemplate.tsx

@@ -0,0 +1,93 @@
+import {
+  EMAIL_ACTION_LINK_COMPONENT,
+  EMAIL_DATE_COMPONENT,
+  EMAIL_LISTING_COMPONENT,
+  EMAIL_USER_NAME_COMPONENT,
+} from '../extensions';
+import {
+  type ActionEmailData,
+  ActionEmailTemplate,
+  type ActionEmailTemplateProps,
+} from '../components/ActionEmailTemplate';
+
+export const getDefaultOwnerStatementEmailData = (
+  mode: 'tag' | 'text',
+  args: {
+    appName: string;
+    ownerStatementHref: string;
+    listingName: string;
+    userName: string;
+    month: string;
+  }
+): ActionEmailData => {
+  const ownerStatementHref =
+    mode === 'tag' ? EMAIL_ACTION_LINK_COMPONENT : args.ownerStatementHref;
+
+  const listingName =
+    mode === 'tag' ? EMAIL_LISTING_COMPONENT : args.listingName;
+  const month = mode === 'tag' ? EMAIL_DATE_COMPONENT : args.month;
+  const userName = mode === 'tag' ? EMAIL_USER_NAME_COMPONENT : args.userName;
+
+  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>`,
+    href: args.ownerStatementHref,
+  };
+};
+
+export const OwnerStatementEmailTemplate = (
+  props: ActionEmailTemplateProps
+) => {
+  return <ActionEmailTemplate {...props} />;
+};
+
+const Preview = () => {
+  const defaultListing = '1502 Amelia Way';
+  const defaultMonth = `May ${new Date().getFullYear()}`;
+  const defaultName = 'John';
+
+  return (
+    <ActionEmailTemplate
+      mode="send"
+      tenant={{
+        name: 'Pineapple Mountain',
+        logo: 'https://imagedelivery.net/Ftdv9WftbW1DctaiLSVfFA/fbd8c31f-478f-4eb0-74ac-c8eeb47b5000/256x256',
+      }}
+      data={{
+        banner:
+          'This month there was a $1000 charge for the property. That charge was split between the two owners.',
+        ...getDefaultOwnerStatementEmailData('text', {
+          appName: 'VRPlatform',
+          ownerStatementHref: 'https://example.com',
+          listingName: defaultListing,
+          month: defaultMonth,
+          userName: defaultName,
+        }),
+      }}
+      user={{
+        firstName: 'John',
+      }}
+      listing={defaultListing}
+      month={defaultMonth}
+      themeColors={[
+        // portal.brown
+        '#9E9390',
+        '#8D7C78',
+        '#7C6964',
+        '#6E5954',
+        '#614B46',
+        '#573F39',
+        '#4E342E',
+        '#3F2D29',
+        '#332725',
+        '#2A2220',
+      ]}
+    />
+  );
+};
+
+export default Preview;