npm - @vrplatform/email - Versions diffs - 1.0.2-stage.37478928158 → 1.0.2-stage.37579320177 - Mend

@vrplatform/email 1.0.2-stage.37478928158 → 1.0.2-stage.37579320177

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/build/main/templates/OwnerStatementEmailTemplate.d.ts CHANGED Viewed

@@ -1,9 +1,14 @@
-import { type ActionEmailData, type ActionEmailTemplateProps } from '../components/ActionEmailTemplate';
+import type { ActionEmailData, ActionEmailTemplateProps } from '../components/ActionEmailTemplate';
 export declare const getDefaultOwnerStatementEmailData: (mode: "tag" | "text", args: {
     appName: string;
     ownerStatementHref: string;
     listingName: string;
     userName: string;
     month: string;
+    /** The owner opens the statement through an emailed link, without a login. */
+    noLogin?: boolean;
 }) => ActionEmailData;
-export declare const OwnerStatementEmailTemplate: (props: ActionEmailTemplateProps) => import("react").JSX.Element;
+export declare const OwnerStatementEmailTemplate: ({ data, tenant, themeColors, mode, user, listing, month, unsubscribeHref, renewHref, }: ActionEmailTemplateProps & {
+    /** Requests a new no-login link once the emailed one has expired. */
+    renewHref?: string;
+}) => import("react").JSX.Element;

package/build/main/templates/OwnerStatementEmailTemplate.js CHANGED Viewed

@@ -2,13 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OwnerStatementEmailTemplate = exports.getDefaultOwnerStatementEmailData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const heading_1 = require("@react-email/heading");
+const text_1 = require("@react-email/text");
 const extensions_1 = require("../extensions");
-const ActionEmailTemplate_1 = require("../components/ActionEmailTemplate");
+const Button_1 = require("../components/Button");
+const EmailContainer_1 = require("../components/EmailContainer");
+const utils_1 = require("../components/utils");
 const getDefaultOwnerStatementEmailData = (mode, args) => {
     const ownerStatementHref = mode === 'tag' ? extensions_1.EMAIL_ACTION_LINK_COMPONENT : args.ownerStatementHref;
     const listingName = mode === 'tag' ? extensions_1.EMAIL_LISTING_COMPONENT : args.listingName;
     const month = mode === 'tag' ? extensions_1.EMAIL_DATE_COMPONENT : args.month;
     const userName = mode === 'tag' ? extensions_1.EMAIL_USER_NAME_COMPONENT : args.userName;
+    if (args.noLogin) {
+        return {
+            subject: `Your ${args.month} owner statement for ${args.listingName}`,
+            shortDescription: `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,
+        };
+    }
     return {
         subject: 'Owner statement was published',
         shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,
@@ -20,8 +35,69 @@ const getDefaultOwnerStatementEmailData = (mode, args) => {
     };
 };
 exports.getDefaultOwnerStatementEmailData = getDefaultOwnerStatementEmailData;
-const OwnerStatementEmailTemplate = (props) => {
-    return (0, jsx_runtime_1.jsx)(ActionEmailTemplate_1.ActionEmailTemplate, { ...props });
+const mutedColor = '#737373';
+const borderColor = '#e5e7eb';
+const OwnerStatementEmailTemplate = ({ data, tenant, themeColors, mode, user, listing, month, unsubscribeHref, renewHref, }) => {
+    const parse = (html) => (0, utils_1.parseEmailHtml)(html, {
+        href: data.href,
+        userName: user.firstName || '',
+        date: month || '',
+        listingName: listing || '',
+    });
+    return ((0, jsx_runtime_1.jsxs)(EmailContainer_1.EmailContainer, { title: data.subject, shortDescription: data.shortDescription, tenant: tenant, mode: mode, unsubscribeHref: unsubscribeHref, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                    color: themeColors[8],
+                    fontSize: 12,
+                    fontWeight: 600,
+                    letterSpacing: '0.08em',
+                    textTransform: 'uppercase',
+                    margin: '0 0 8px',
+                }, children: "Owner statement" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { style: {
+                    fontSize: 26,
+                    fontWeight: 600,
+                    lineHeight: '34px',
+                    margin: '0 0 32px',
+                }, children: data.header?.trim() || 'Your owner statement is ready' }), data.banner?.trim() && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                    padding: '16px 20px',
+                    backgroundColor: '#f8f9fa',
+                    borderLeft: `3px solid ${themeColors[8]}`,
+                    borderRadius: '4px',
+                    margin: '0 0 32px',
+                    whiteSpace: 'pre-line',
+                }, children: data.banner.trim() })), (0, jsx_runtime_1.jsx)("div", {
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml
+                dangerouslySetInnerHTML: { __html: parse(data.bodyOne) } }), (listing || month) && ((0, jsx_runtime_1.jsx)("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, width: "100%", style: {
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: '8px',
+                    borderCollapse: 'separate',
+                    margin: '24px 0 0',
+                }, children: (0, jsx_runtime_1.jsx)("tbody", { children: [
+                        ['Property', listing],
+                        ['Statement', month],
+                    ].map(([label, value], index) => value ? ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { style: {
+                                    padding: '14px 20px',
+                                    color: mutedColor,
+                                    fontSize: 14,
+                                    borderTop: index ? `1px solid ${borderColor}` : 'none',
+                                }, children: label }), (0, jsx_runtime_1.jsx)("td", { style: {
+                                    padding: '14px 20px',
+                                    fontSize: 14,
+                                    fontWeight: 600,
+                                    textAlign: 'right',
+                                    borderTop: index ? `1px solid ${borderColor}` : 'none',
+                                }, children: value })] }, label)) : null) }) })), (0, jsx_runtime_1.jsx)(Button_1.Button, { href: data.href, mode: mode, "data-testid": "view-owner-statement-button", label: data.buttonText?.trim() || 'View statement', themeColors: themeColors, style: { marginTop: '24px', marginBottom: '32px' } }), renewHref && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: '20px',
+                    backgroundColor: '#f8f9fa',
+                    borderRadius: '8px',
+                    marginBottom: '32px',
+                }, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: { fontWeight: 600, margin: '0 0 4px' }, children: "Link expired?" }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: { color: mutedColor, fontSize: 14, margin: 0 }, children: "For your security, this link opens only this statement and works for 7 days. After that, request a new one and we'll email it to this address." }), (0, jsx_runtime_1.jsx)(Button_1.Button, { href: renewHref, mode: mode, "data-testid": "renew-owner-statement-link-button", label: "Send me a new link", themeColors: themeColors, style: {
+                            background: '#ffffff',
+                            border: `1px solid ${themeColors[8]}`,
+                            color: themeColors[8],
+                            marginTop: '16px',
+                            marginBottom: 0,
+                        } })] })), (0, jsx_runtime_1.jsx)("div", {
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml
+                dangerouslySetInnerHTML: { __html: parse(data.bodyTwo) } })] }));
 };
 exports.OwnerStatementEmailTemplate = OwnerStatementEmailTemplate;
 //# sourceMappingURL=OwnerStatementEmailTemplate.js.map

package/build/main/templates/OwnerStatementEmailTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OwnerStatementEmailTemplate.js","sourceRoot":"src/","sources":["templates/OwnerStatementEmailTemplate.tsx"],"names":[],"mappings":";;;;AAAA,8CAKuB;AACvB,2EAI2C;AAEpC,MAAM,iCAAiC,GAAG,CAC/C,IAAoB,EACpB,IAMC,EACgB,EAAE;IACnB,MAAM,kBAAkB,GACtB,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,wCAA2B,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;IAEzE,MAAM,WAAW,GACf,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,oCAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAC9D,MAAM,KAAK,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,iCAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACjE,MAAM,QAAQ,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,sCAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE5E,OAAO;QACL,OAAO,EAAE,+BAA+B;QACxC,gBAAgB,EAAE,kDAAkD,IAAI,CAAC,OAAO,kBAAkB;QAClG,MAAM,EAAE,+BAA+B;QACvC,OAAO,EAAE,SAAS,QAAQ,YAAY,KAAK,iCAAiC,WAAW,gCAAgC,IAAI,CAAC,OAAO,sEAAsE;QACzM,UAAU,EAAE,sBAAsB;QAClC,OAAO,EAAE,wGAAwG,kBAAkB,MAAM;QACzI,IAAI,EAAE,IAAI,CAAC,kBAAkB;KAC9B,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,iCAAiC,qCA2B5C;AAEK,MAAM,2BAA2B,GAAG,CACzC,KAA+B,EAC/B,EAAE;IACF,OAAO,uBAAC,yCAAmB,OAAK,KAAK,GAAI,CAAC;AAC5C,CAAC,CAAC;AAJW,QAAA,2BAA2B,+BAItC","sourcesContent":["import {\n EMAIL_ACTION_LINK_COMPONENT,\n EMAIL_DATE_COMPONENT,\n EMAIL_LISTING_COMPONENT,\n EMAIL_USER_NAME_COMPONENT,\n} from '../extensions';\nimport {\n type ActionEmailData,\n ActionEmailTemplate,\n type ActionEmailTemplateProps,\n} from '../components/ActionEmailTemplate';\n\nexport const getDefaultOwnerStatementEmailData = (\n mode: 'tag' \| 'text',\n args: {\n appName: string;\n ownerStatementHref: string;\n listingName: string;\n userName: string;\n month: string;\n }\n): ActionEmailData => {\n const ownerStatementHref =\n mode === 'tag' ? EMAIL_ACTION_LINK_COMPONENT : args.ownerStatementHref;\n\n const listingName =\n mode === 'tag' ? EMAIL_LISTING_COMPONENT : args.listingName;\n const month = mode === 'tag' ? EMAIL_DATE_COMPONENT : args.month;\n const userName = mode === 'tag' ? EMAIL_USER_NAME_COMPONENT : args.userName;\n\n return {\n subject: 'Owner statement was published',\n shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,\n header: 'Owner statement was published',\n 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>`,\n buttonText: 'View Owner statement',\n bodyTwo: `<p>If you have any trouble with the button, you can copy and paste the link below into your browser: ${ownerStatementHref}</p>`,\n href: args.ownerStatementHref,\n };\n};\n\nexport const OwnerStatementEmailTemplate = (\n props: ActionEmailTemplateProps\n) => {\n return <ActionEmailTemplate {...props} />;\n};\n"]}
1	+ {"version":3,"file":"OwnerStatementEmailTemplate.js","sourceRoot":"src/","sources":["templates/OwnerStatementEmailTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Heading } from '@react-email/heading';\nimport { Text } from '@react-email/text';\nimport {\n EMAIL_ACTION_LINK_COMPONENT,\n EMAIL_DATE_COMPONENT,\n EMAIL_LISTING_COMPONENT,\n EMAIL_USER_NAME_COMPONENT,\n} from '../extensions';\nimport type {\n ActionEmailData,\n ActionEmailTemplateProps,\n} from '../components/ActionEmailTemplate';\nimport { Button } from '../components/Button';\nimport { EmailContainer } from '../components/EmailContainer';\nimport { parseEmailHtml } from '../components/utils';\n\nexport const getDefaultOwnerStatementEmailData = (\n mode: 'tag' \| 'text',\n args: {\n appName: string;\n ownerStatementHref: string;\n listingName: string;\n userName: string;\n month: string;\n /** The owner opens the statement through an emailed link, without a login. /\n noLogin?: boolean;\n }\n): ActionEmailData => {\n const ownerStatementHref =\n mode === 'tag' ? EMAIL_ACTION_LINK_COMPONENT : args.ownerStatementHref;\n\n const listingName =\n mode === 'tag' ? EMAIL_LISTING_COMPONENT : args.listingName;\n const month = mode === 'tag' ? EMAIL_DATE_COMPONENT : args.month;\n const userName = mode === 'tag' ? EMAIL_USER_NAME_COMPONENT : args.userName;\n\n if (args.noLogin) {\n return {\n subject: `Your ${args.month} owner statement for ${args.listingName}`,\n shortDescription: `Your ${args.month} statement for ${args.listingName} is ready. Open it with one click, no login needed.`,\n header: 'Your owner statement is ready',\n 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>`,\n buttonText: 'View statement',\n bodyTwo: `<p style=\"color:#737373;font-size:13px\">If the button doesn't work, copy this link into your browser: ${ownerStatementHref}</p>`,\n href: args.ownerStatementHref,\n };\n }\n\n return {\n subject: 'Owner statement was published',\n shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,\n header: 'Owner statement was published',\n 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>`,\n buttonText: 'View Owner statement',\n bodyTwo: `<p>If you have any trouble with the button, you can copy and paste the link below into your browser: ${ownerStatementHref}</p>`,\n href: args.ownerStatementHref,\n };\n};\n\nconst mutedColor = '#737373';\nconst borderColor = '#e5e7eb';\n\nexport const OwnerStatementEmailTemplate = ({\n data,\n tenant,\n themeColors,\n mode,\n user,\n listing,\n month,\n unsubscribeHref,\n renewHref,\n}: ActionEmailTemplateProps & {\n /* Requests a new no-login link once the emailed one has expired. */\n renewHref?: string;\n}) => {\n const parse = (html: string) =>\n parseEmailHtml(html, {\n href: data.href,\n userName: user.firstName \|\| '',\n date: month \|\| '',\n listingName: listing \|\| '',\n });\n\n return (\n <EmailContainer\n title={data.subject}\n shortDescription={data.shortDescription}\n tenant={tenant}\n mode={mode}\n unsubscribeHref={unsubscribeHref}\n >\n <Text\n style={{\n color: themeColors[8],\n fontSize: 12,\n fontWeight: 600,\n letterSpacing: '0.08em',\n textTransform: 'uppercase',\n margin: '0 0 8px',\n }}\n >\n Owner statement\n </Text>\n <Heading\n style={{\n fontSize: 26,\n fontWeight: 600,\n lineHeight: '34px',\n margin: '0 0 32px',\n }}\n >\n {data.header?.trim() \|\| 'Your owner statement is ready'}\n </Heading>\n\n {data.banner?.trim() && (\n <Text\n style={{\n padding: '16px 20px',\n backgroundColor: '#f8f9fa',\n borderLeft: `3px solid ${themeColors[8]}`,\n borderRadius: '4px',\n margin: '0 0 32px',\n whiteSpace: 'pre-line',\n }}\n >\n {data.banner.trim()}\n </Text>\n )}\n\n <div\n // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml\n dangerouslySetInnerHTML={{ __html: parse(data.bodyOne) }}\n />\n\n {(listing \|\| month) && (\n <table\n role=\"presentation\"\n cellPadding={0}\n cellSpacing={0}\n width=\"100%\"\n style={{\n border: `1px solid ${borderColor}`,\n borderRadius: '8px',\n borderCollapse: 'separate',\n margin: '24px 0 0',\n }}\n >\n <tbody>\n {[\n ['Property', listing],\n ['Statement', month],\n ].map(([label, value], index) =>\n value ? (\n <tr key={label}>\n <td\n style={{\n padding: '14px 20px',\n color: mutedColor,\n fontSize: 14,\n borderTop: index ? `1px solid ${borderColor}` : 'none',\n }}\n >\n {label}\n </td>\n <td\n style={{\n padding: '14px 20px',\n fontSize: 14,\n fontWeight: 600,\n textAlign: 'right',\n borderTop: index ? `1px solid ${borderColor}` : 'none',\n }}\n >\n {value}\n </td>\n </tr>\n ) : null\n )}\n </tbody>\n </table>\n )}\n\n <Button\n href={data.href}\n mode={mode}\n data-testid=\"view-owner-statement-button\"\n label={data.buttonText?.trim() \|\| 'View statement'}\n themeColors={themeColors}\n style={{ marginTop: '24px', marginBottom: '32px' }}\n />\n\n {renewHref && (\n <div\n style={{\n padding: '20px',\n backgroundColor: '#f8f9fa',\n borderRadius: '8px',\n marginBottom: '32px',\n }}\n >\n <Text style={{ fontWeight: 600, margin: '0 0 4px' }}>\n Link expired?\n </Text>\n <Text style={{ color: mutedColor, fontSize: 14, margin: 0 }}>\n For your security, this link opens only this statement and works for\n 7 days. After that, request a new one and we'll email it to this\n address.\n </Text>\n <Button\n href={renewHref}\n mode={mode}\n data-testid=\"renew-owner-statement-link-button\"\n label=\"Send me a new link\"\n themeColors={themeColors}\n style={{\n background: '#ffffff',\n border: `1px solid ${themeColors[8]}`,\n color: themeColors[8],\n marginTop: '16px',\n marginBottom: 0,\n }}\n />\n </div>\n )}\n\n <div\n // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml\n dangerouslySetInnerHTML={{ __html: parse(data.bodyTwo) }}\n />\n </EmailContainer>\n );\n};\n"]}

package/build/module/templates/OwnerStatementEmailTemplate.d.ts CHANGED Viewed

@@ -1,9 +1,14 @@
-import { type ActionEmailData, type ActionEmailTemplateProps } from '../components/ActionEmailTemplate';
+import type { ActionEmailData, ActionEmailTemplateProps } from '../components/ActionEmailTemplate';
 export declare const getDefaultOwnerStatementEmailData: (mode: "tag" | "text", args: {
     appName: string;
     ownerStatementHref: string;
     listingName: string;
     userName: string;
     month: string;
+    /** The owner opens the statement through an emailed link, without a login. */
+    noLogin?: boolean;
 }) => ActionEmailData;
-export declare const OwnerStatementEmailTemplate: (props: ActionEmailTemplateProps) => import("react").JSX.Element;
+export declare const OwnerStatementEmailTemplate: ({ data, tenant, themeColors, mode, user, listing, month, unsubscribeHref, renewHref, }: ActionEmailTemplateProps & {
+    /** Requests a new no-login link once the emailed one has expired. */
+    renewHref?: string;
+}) => import("react").JSX.Element;

package/build/module/templates/OwnerStatementEmailTemplate.js CHANGED Viewed

@@ -1,11 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading } from '@react-email/heading';
+import { Text } from '@react-email/text';
 import { EMAIL_ACTION_LINK_COMPONENT, EMAIL_DATE_COMPONENT, EMAIL_LISTING_COMPONENT, EMAIL_USER_NAME_COMPONENT, } from '../extensions';
-import { ActionEmailTemplate, } from '../components/ActionEmailTemplate';
+import { Button } from '../components/Button';
+import { EmailContainer } from '../components/EmailContainer';
+import { parseEmailHtml } from '../components/utils';
 export const getDefaultOwnerStatementEmailData = (mode, args) => {
     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;
+    if (args.noLogin) {
+        return {
+            subject: `Your ${args.month} owner statement for ${args.listingName}`,
+            shortDescription: `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,
+        };
+    }
     return {
         subject: 'Owner statement was published',
         shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,
@@ -16,7 +31,68 @@ export const getDefaultOwnerStatementEmailData = (mode, args) => {
         href: args.ownerStatementHref,
     };
 };
-export const OwnerStatementEmailTemplate = (props) => {
-    return _jsx(ActionEmailTemplate, { ...props });
+const mutedColor = '#737373';
+const borderColor = '#e5e7eb';
+export const OwnerStatementEmailTemplate = ({ data, tenant, themeColors, mode, user, listing, month, unsubscribeHref, renewHref, }) => {
+    const parse = (html) => parseEmailHtml(html, {
+        href: data.href,
+        userName: user.firstName || '',
+        date: month || '',
+        listingName: listing || '',
+    });
+    return (_jsxs(EmailContainer, { title: data.subject, shortDescription: data.shortDescription, tenant: tenant, mode: mode, unsubscribeHref: unsubscribeHref, children: [_jsx(Text, { style: {
+                    color: themeColors[8],
+                    fontSize: 12,
+                    fontWeight: 600,
+                    letterSpacing: '0.08em',
+                    textTransform: 'uppercase',
+                    margin: '0 0 8px',
+                }, children: "Owner statement" }), _jsx(Heading, { style: {
+                    fontSize: 26,
+                    fontWeight: 600,
+                    lineHeight: '34px',
+                    margin: '0 0 32px',
+                }, children: data.header?.trim() || 'Your owner statement is ready' }), data.banner?.trim() && (_jsx(Text, { style: {
+                    padding: '16px 20px',
+                    backgroundColor: '#f8f9fa',
+                    borderLeft: `3px solid ${themeColors[8]}`,
+                    borderRadius: '4px',
+                    margin: '0 0 32px',
+                    whiteSpace: 'pre-line',
+                }, children: data.banner.trim() })), _jsx("div", {
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml
+                dangerouslySetInnerHTML: { __html: parse(data.bodyOne) } }), (listing || month) && (_jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, width: "100%", style: {
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: '8px',
+                    borderCollapse: 'separate',
+                    margin: '24px 0 0',
+                }, children: _jsx("tbody", { children: [
+                        ['Property', listing],
+                        ['Statement', month],
+                    ].map(([label, value], index) => value ? (_jsxs("tr", { children: [_jsx("td", { style: {
+                                    padding: '14px 20px',
+                                    color: mutedColor,
+                                    fontSize: 14,
+                                    borderTop: index ? `1px solid ${borderColor}` : 'none',
+                                }, children: label }), _jsx("td", { style: {
+                                    padding: '14px 20px',
+                                    fontSize: 14,
+                                    fontWeight: 600,
+                                    textAlign: 'right',
+                                    borderTop: index ? `1px solid ${borderColor}` : 'none',
+                                }, children: value })] }, label)) : null) }) })), _jsx(Button, { href: data.href, mode: mode, "data-testid": "view-owner-statement-button", label: data.buttonText?.trim() || 'View statement', themeColors: themeColors, style: { marginTop: '24px', marginBottom: '32px' } }), renewHref && (_jsxs("div", { style: {
+                    padding: '20px',
+                    backgroundColor: '#f8f9fa',
+                    borderRadius: '8px',
+                    marginBottom: '32px',
+                }, children: [_jsx(Text, { style: { fontWeight: 600, margin: '0 0 4px' }, children: "Link expired?" }), _jsx(Text, { style: { color: mutedColor, fontSize: 14, margin: 0 }, children: "For your security, this link opens only this statement and works for 7 days. After that, request a new one and we'll email it to this address." }), _jsx(Button, { href: renewHref, mode: mode, "data-testid": "renew-owner-statement-link-button", label: "Send me a new link", themeColors: themeColors, style: {
+                            background: '#ffffff',
+                            border: `1px solid ${themeColors[8]}`,
+                            color: themeColors[8],
+                            marginTop: '16px',
+                            marginBottom: 0,
+                        } })] })), _jsx("div", {
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml
+                dangerouslySetInnerHTML: { __html: parse(data.bodyTwo) } })] }));
 };
 //# sourceMappingURL=OwnerStatementEmailTemplate.js.map

package/build/module/templates/OwnerStatementEmailTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OwnerStatementEmailTemplate.js","sourceRoot":"src/","sources":["templates/OwnerStatementEmailTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,2BAA2B,EAC3B,oBAAoB,EACpB,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,mBAAmB,GAEpB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAC/C,IAAoB,EACpB,IAMC,EACgB,EAAE;IACnB,MAAM,kBAAkB,GACtB,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;IAEzE,MAAM,WAAW,GACf,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAC9D,MAAM,KAAK,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACjE,MAAM,QAAQ,GAAG,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE5E,OAAO;QACL,OAAO,EAAE,+BAA+B;QACxC,gBAAgB,EAAE,kDAAkD,IAAI,CAAC,OAAO,kBAAkB;QAClG,MAAM,EAAE,+BAA+B;QACvC,OAAO,EAAE,SAAS,QAAQ,YAAY,KAAK,iCAAiC,WAAW,gCAAgC,IAAI,CAAC,OAAO,sEAAsE;QACzM,UAAU,EAAE,sBAAsB;QAClC,OAAO,EAAE,wGAAwG,kBAAkB,MAAM;QACzI,IAAI,EAAE,IAAI,CAAC,kBAAkB;KAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,KAA+B,EAC/B,EAAE;IACF,OAAO,KAAC,mBAAmB,OAAK,KAAK,GAAI,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import {\n EMAIL_ACTION_LINK_COMPONENT,\n EMAIL_DATE_COMPONENT,\n EMAIL_LISTING_COMPONENT,\n EMAIL_USER_NAME_COMPONENT,\n} from '../extensions';\nimport {\n type ActionEmailData,\n ActionEmailTemplate,\n type ActionEmailTemplateProps,\n} from '../components/ActionEmailTemplate';\n\nexport const getDefaultOwnerStatementEmailData = (\n mode: 'tag' \| 'text',\n args: {\n appName: string;\n ownerStatementHref: string;\n listingName: string;\n userName: string;\n month: string;\n }\n): ActionEmailData => {\n const ownerStatementHref =\n mode === 'tag' ? EMAIL_ACTION_LINK_COMPONENT : args.ownerStatementHref;\n\n const listingName =\n mode === 'tag' ? EMAIL_LISTING_COMPONENT : args.listingName;\n const month = mode === 'tag' ? EMAIL_DATE_COMPONENT : args.month;\n const userName = mode === 'tag' ? EMAIL_USER_NAME_COMPONENT : args.userName;\n\n return {\n subject: 'Owner statement was published',\n shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,\n header: 'Owner statement was published',\n 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>`,\n buttonText: 'View Owner statement',\n bodyTwo: `<p>If you have any trouble with the button, you can copy and paste the link below into your browser: ${ownerStatementHref}</p>`,\n href: args.ownerStatementHref,\n };\n};\n\nexport const OwnerStatementEmailTemplate = (\n props: ActionEmailTemplateProps\n) => {\n return <ActionEmailTemplate {...props} />;\n};\n"]}
1	+ {"version":3,"file":"OwnerStatementEmailTemplate.js","sourceRoot":"src/","sources":["templates/OwnerStatementEmailTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Heading } from '@react-email/heading';\nimport { Text } from '@react-email/text';\nimport {\n EMAIL_ACTION_LINK_COMPONENT,\n EMAIL_DATE_COMPONENT,\n EMAIL_LISTING_COMPONENT,\n EMAIL_USER_NAME_COMPONENT,\n} from '../extensions';\nimport type {\n ActionEmailData,\n ActionEmailTemplateProps,\n} from '../components/ActionEmailTemplate';\nimport { Button } from '../components/Button';\nimport { EmailContainer } from '../components/EmailContainer';\nimport { parseEmailHtml } from '../components/utils';\n\nexport const getDefaultOwnerStatementEmailData = (\n mode: 'tag' \| 'text',\n args: {\n appName: string;\n ownerStatementHref: string;\n listingName: string;\n userName: string;\n month: string;\n /** The owner opens the statement through an emailed link, without a login. /\n noLogin?: boolean;\n }\n): ActionEmailData => {\n const ownerStatementHref =\n mode === 'tag' ? EMAIL_ACTION_LINK_COMPONENT : args.ownerStatementHref;\n\n const listingName =\n mode === 'tag' ? EMAIL_LISTING_COMPONENT : args.listingName;\n const month = mode === 'tag' ? EMAIL_DATE_COMPONENT : args.month;\n const userName = mode === 'tag' ? EMAIL_USER_NAME_COMPONENT : args.userName;\n\n if (args.noLogin) {\n return {\n subject: `Your ${args.month} owner statement for ${args.listingName}`,\n shortDescription: `Your ${args.month} statement for ${args.listingName} is ready. Open it with one click, no login needed.`,\n header: 'Your owner statement is ready',\n 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>`,\n buttonText: 'View statement',\n bodyTwo: `<p style=\"color:#737373;font-size:13px\">If the button doesn't work, copy this link into your browser: ${ownerStatementHref}</p>`,\n href: args.ownerStatementHref,\n };\n }\n\n return {\n subject: 'Owner statement was published',\n shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,\n header: 'Owner statement was published',\n 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>`,\n buttonText: 'View Owner statement',\n bodyTwo: `<p>If you have any trouble with the button, you can copy and paste the link below into your browser: ${ownerStatementHref}</p>`,\n href: args.ownerStatementHref,\n };\n};\n\nconst mutedColor = '#737373';\nconst borderColor = '#e5e7eb';\n\nexport const OwnerStatementEmailTemplate = ({\n data,\n tenant,\n themeColors,\n mode,\n user,\n listing,\n month,\n unsubscribeHref,\n renewHref,\n}: ActionEmailTemplateProps & {\n /* Requests a new no-login link once the emailed one has expired. */\n renewHref?: string;\n}) => {\n const parse = (html: string) =>\n parseEmailHtml(html, {\n href: data.href,\n userName: user.firstName \|\| '',\n date: month \|\| '',\n listingName: listing \|\| '',\n });\n\n return (\n <EmailContainer\n title={data.subject}\n shortDescription={data.shortDescription}\n tenant={tenant}\n mode={mode}\n unsubscribeHref={unsubscribeHref}\n >\n <Text\n style={{\n color: themeColors[8],\n fontSize: 12,\n fontWeight: 600,\n letterSpacing: '0.08em',\n textTransform: 'uppercase',\n margin: '0 0 8px',\n }}\n >\n Owner statement\n </Text>\n <Heading\n style={{\n fontSize: 26,\n fontWeight: 600,\n lineHeight: '34px',\n margin: '0 0 32px',\n }}\n >\n {data.header?.trim() \|\| 'Your owner statement is ready'}\n </Heading>\n\n {data.banner?.trim() && (\n <Text\n style={{\n padding: '16px 20px',\n backgroundColor: '#f8f9fa',\n borderLeft: `3px solid ${themeColors[8]}`,\n borderRadius: '4px',\n margin: '0 0 32px',\n whiteSpace: 'pre-line',\n }}\n >\n {data.banner.trim()}\n </Text>\n )}\n\n <div\n // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml\n dangerouslySetInnerHTML={{ __html: parse(data.bodyOne) }}\n />\n\n {(listing \|\| month) && (\n <table\n role=\"presentation\"\n cellPadding={0}\n cellSpacing={0}\n width=\"100%\"\n style={{\n border: `1px solid ${borderColor}`,\n borderRadius: '8px',\n borderCollapse: 'separate',\n margin: '24px 0 0',\n }}\n >\n <tbody>\n {[\n ['Property', listing],\n ['Statement', month],\n ].map(([label, value], index) =>\n value ? (\n <tr key={label}>\n <td\n style={{\n padding: '14px 20px',\n color: mutedColor,\n fontSize: 14,\n borderTop: index ? `1px solid ${borderColor}` : 'none',\n }}\n >\n {label}\n </td>\n <td\n style={{\n padding: '14px 20px',\n fontSize: 14,\n fontWeight: 600,\n textAlign: 'right',\n borderTop: index ? `1px solid ${borderColor}` : 'none',\n }}\n >\n {value}\n </td>\n </tr>\n ) : null\n )}\n </tbody>\n </table>\n )}\n\n <Button\n href={data.href}\n mode={mode}\n data-testid=\"view-owner-statement-button\"\n label={data.buttonText?.trim() \|\| 'View statement'}\n themeColors={themeColors}\n style={{ marginTop: '24px', marginBottom: '32px' }}\n />\n\n {renewHref && (\n <div\n style={{\n padding: '20px',\n backgroundColor: '#f8f9fa',\n borderRadius: '8px',\n marginBottom: '32px',\n }}\n >\n <Text style={{ fontWeight: 600, margin: '0 0 4px' }}>\n Link expired?\n </Text>\n <Text style={{ color: mutedColor, fontSize: 14, margin: 0 }}>\n For your security, this link opens only this statement and works for\n 7 days. After that, request a new one and we'll email it to this\n address.\n </Text>\n <Button\n href={renewHref}\n mode={mode}\n data-testid=\"renew-owner-statement-link-button\"\n label=\"Send me a new link\"\n themeColors={themeColors}\n style={{\n background: '#ffffff',\n border: `1px solid ${themeColors[8]}`,\n color: themeColors[8],\n marginTop: '16px',\n marginBottom: 0,\n }}\n />\n </div>\n )}\n\n <div\n // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml\n dangerouslySetInnerHTML={{ __html: parse(data.bodyTwo) }}\n />\n </EmailContainer>\n );\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vrplatform/email",
-  "version": "1.0.2-stage.37478928158",
+  "version": "1.0.2-stage.37579320177",
   "description": "VRTrust transactional email templates and Postmark transport",
   "license": "ISC",
   "main": "build/main/index.js",

package/src/templates/OwnerStatementEmailTemplate.tsx CHANGED Viewed

@@ -1,14 +1,18 @@
+import { Heading } from '@react-email/heading';
+import { Text } from '@react-email/text';
 import {
   EMAIL_ACTION_LINK_COMPONENT,
   EMAIL_DATE_COMPONENT,
   EMAIL_LISTING_COMPONENT,
   EMAIL_USER_NAME_COMPONENT,
 } from '../extensions';
-import {
-  type ActionEmailData,
-  ActionEmailTemplate,
-  type ActionEmailTemplateProps,
+import type {
+  ActionEmailData,
+  ActionEmailTemplateProps,
 } from '../components/ActionEmailTemplate';
+import { Button } from '../components/Button';
+import { EmailContainer } from '../components/EmailContainer';
+import { parseEmailHtml } from '../components/utils';
 export const getDefaultOwnerStatementEmailData = (
   mode: 'tag' | 'text',
@@ -18,6 +22,8 @@ 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 =
@@ -28,6 +34,18 @@ 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) {
+    return {
+      subject: `Your ${args.month} owner statement for ${args.listingName}`,
+      shortDescription: `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,
+    };
+  }
   return {
     subject: 'Owner statement was published',
     shortDescription: `An owner statement is ready for you. Log in to ${args.appName} now to view it.`,
@@ -39,8 +57,177 @@ export const getDefaultOwnerStatementEmailData = (
   };
 };
-export const OwnerStatementEmailTemplate = (
-  props: ActionEmailTemplateProps
-) => {
-  return <ActionEmailTemplate {...props} />;
+const mutedColor = '#737373';
+const borderColor = '#e5e7eb';
+export const OwnerStatementEmailTemplate = ({
+  data,
+  tenant,
+  themeColors,
+  mode,
+  user,
+  listing,
+  month,
+  unsubscribeHref,
+  renewHref,
+}: ActionEmailTemplateProps & {
+  /** Requests a new no-login link once the emailed one has expired. */
+  renewHref?: string;
+}) => {
+  const parse = (html: string) =>
+    parseEmailHtml(html, {
+      href: data.href,
+      userName: user.firstName || '',
+      date: month || '',
+      listingName: listing || '',
+    });
+  return (
+    <EmailContainer
+      title={data.subject}
+      shortDescription={data.shortDescription}
+      tenant={tenant}
+      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',
+        }}
+      >
+        {data.header?.trim() || 'Your owner statement is ready'}
+      </Heading>
+      {data.banner?.trim() && (
+        <Text
+          style={{
+            padding: '16px 20px',
+            backgroundColor: '#f8f9fa',
+            borderLeft: `3px solid ${themeColors[8]}`,
+            borderRadius: '4px',
+            margin: '0 0 32px',
+            whiteSpace: 'pre-line',
+          }}
+        >
+          {data.banner.trim()}
+        </Text>
+      )}
+      <div
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml
+        dangerouslySetInnerHTML={{ __html: parse(data.bodyOne) }}
+      />
+      {(listing || month) && (
+        <table
+          role="presentation"
+          cellPadding={0}
+          cellSpacing={0}
+          width="100%"
+          style={{
+            border: `1px solid ${borderColor}`,
+            borderRadius: '8px',
+            borderCollapse: 'separate',
+            margin: '24px 0 0',
+          }}
+        >
+          <tbody>
+            {[
+              ['Property', listing],
+              ['Statement', month],
+            ].map(([label, value], index) =>
+              value ? (
+                <tr key={label}>
+                  <td
+                    style={{
+                      padding: '14px 20px',
+                      color: mutedColor,
+                      fontSize: 14,
+                      borderTop: index ? `1px solid ${borderColor}` : 'none',
+                    }}
+                  >
+                    {label}
+                  </td>
+                  <td
+                    style={{
+                      padding: '14px 20px',
+                      fontSize: 14,
+                      fontWeight: 600,
+                      textAlign: 'right',
+                      borderTop: index ? `1px solid ${borderColor}` : 'none',
+                    }}
+                  >
+                    {value}
+                  </td>
+                </tr>
+              ) : null
+            )}
+          </tbody>
+        </table>
+      )}
+      <Button
+        href={data.href}
+        mode={mode}
+        data-testid="view-owner-statement-button"
+        label={data.buttonText?.trim() || 'View statement'}
+        themeColors={themeColors}
+        style={{ marginTop: '24px', marginBottom: '32px' }}
+      />
+      {renewHref && (
+        <div
+          style={{
+            padding: '20px',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '8px',
+            marginBottom: '32px',
+          }}
+        >
+          <Text style={{ fontWeight: 600, margin: '0 0 4px' }}>
+            Link expired?
+          </Text>
+          <Text style={{ color: mutedColor, fontSize: 14, margin: 0 }}>
+            For your security, this link opens only this statement and works for
+            7 days. After that, request a new one and we'll email it to this
+            address.
+          </Text>
+          <Button
+            href={renewHref}
+            mode={mode}
+            data-testid="renew-owner-statement-link-button"
+            label="Send me a new link"
+            themeColors={themeColors}
+            style={{
+              background: '#ffffff',
+              border: `1px solid ${themeColors[8]}`,
+              color: themeColors[8],
+              marginTop: '16px',
+              marginBottom: 0,
+            }}
+          />
+        </div>
+      )}
+      <div
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: values are escaped by parseEmailHtml
+        dangerouslySetInnerHTML={{ __html: parse(data.bodyTwo) }}
+      />
+    </EmailContainer>
+  );
 };