192 lines
7.6 KiB
TypeScript
192 lines
7.6 KiB
TypeScript
/* eslint-disable @next/next/no-head-element */
|
|
import BaseTable from "./BaseTable";
|
|
import EmailBodyLogo from "./EmailBodyLogo";
|
|
import EmailHead from "./EmailHead";
|
|
import EmailScheduledBodyHeaderContent from "./EmailScheduledBodyHeaderContent";
|
|
import EmailSchedulingBodyDivider from "./EmailSchedulingBodyDivider";
|
|
import EmailSchedulingBodyHeader, { BodyHeadType } from "./EmailSchedulingBodyHeader";
|
|
import RawHtml from "./RawHtml";
|
|
import Row from "./Row";
|
|
|
|
const Html = (props: { children: React.ReactNode }) => (
|
|
<>
|
|
<RawHtml html="<!doctype html>" />
|
|
<html>{props.children}</html>
|
|
</>
|
|
);
|
|
|
|
export const V2BaseEmailHtml = (props: {
|
|
children: React.ReactNode;
|
|
callToAction?: React.ReactNode;
|
|
subject: string;
|
|
title?: string;
|
|
subtitle?: React.ReactNode;
|
|
headerType?: BodyHeadType;
|
|
}) => {
|
|
return (
|
|
<Html>
|
|
<EmailHead title={props.subject} />
|
|
<body style={{ wordSpacing: "normal", backgroundColor: "#F3F4F6" }}>
|
|
<div style={{ backgroundColor: "#F3F4F6" }}>
|
|
<RawHtml
|
|
html={`<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
|
/>
|
|
<div style={{ margin: "0px auto", maxWidth: 600 }}>
|
|
<Row align="center" border="0" style={{ width: "100%" }}>
|
|
<td
|
|
style={{
|
|
direction: "ltr",
|
|
fontSize: "0px",
|
|
padding: "0px",
|
|
paddingTop: "40px",
|
|
textAlign: "center",
|
|
}}>
|
|
<RawHtml
|
|
html={`<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->`}
|
|
/>
|
|
</td>
|
|
</Row>
|
|
</div>
|
|
{props.headerType && <EmailSchedulingBodyHeader headerType={props.headerType} />}
|
|
{props.title && <EmailScheduledBodyHeaderContent title={props.title} subtitle={props.subtitle} />}
|
|
{(props.headerType || props.title || props.subtitle) && <EmailSchedulingBodyDivider />}
|
|
|
|
<RawHtml
|
|
html={`<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" className="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
|
/>
|
|
<div
|
|
style={{
|
|
margin: "0px auto",
|
|
maxWidth: 600,
|
|
}}>
|
|
<Row align="center" border="0" style={{ width: "100%" }}>
|
|
<td
|
|
style={{
|
|
direction: "ltr",
|
|
fontSize: 0,
|
|
padding: 0,
|
|
textAlign: "center",
|
|
}}>
|
|
<RawHtml
|
|
html={`<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td className="" style="vertical-align:top;width:598px;" ><![endif]-->`}
|
|
/>
|
|
<div
|
|
className="mj-column-per-100 mj-outlook-group-fix"
|
|
style={{
|
|
fontSize: 0,
|
|
textAlign: "left",
|
|
direction: "ltr",
|
|
display: "inline-block",
|
|
verticalAlign: "top",
|
|
width: "100%",
|
|
border: "1px solid #E1E1E1",
|
|
borderRadius: "6px",
|
|
}}>
|
|
<Row
|
|
border="0"
|
|
style={{
|
|
verticalAlign: "top",
|
|
borderRadius: "6px",
|
|
background: "#FFFFFF",
|
|
backgroundColor: "#FFFFFF",
|
|
}}
|
|
width="100%">
|
|
<td
|
|
align="left"
|
|
style={{
|
|
fontSize: 0,
|
|
padding: "40px",
|
|
|
|
wordBreak: "break-word",
|
|
}}>
|
|
<div
|
|
style={{
|
|
fontFamily: "Roboto, Helvetica, sans-serif",
|
|
fontSize: 16,
|
|
fontWeight: 500,
|
|
lineHeight: 1,
|
|
textAlign: "left",
|
|
color: "#3E3E3E",
|
|
}}>
|
|
{props.children}
|
|
</div>
|
|
</td>
|
|
</Row>
|
|
</div>
|
|
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
|
</td>
|
|
</Row>
|
|
</div>
|
|
{props.callToAction && <EmailSchedulingBodyDivider />}
|
|
<RawHtml
|
|
html={`<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" className="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->`}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
margin: "0px auto",
|
|
maxWidth: 600,
|
|
}}>
|
|
<Row align="center" border="0" style={{ width: "100%" }}>
|
|
<td
|
|
style={{
|
|
direction: "ltr",
|
|
fontSize: 0,
|
|
padding: 0,
|
|
textAlign: "center",
|
|
}}>
|
|
<RawHtml
|
|
html={`<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td className="" style="vertical-align:top;width:598px;" ><![endif]-->`}
|
|
/>
|
|
{props.callToAction && (
|
|
<div
|
|
className="mj-column-per-100 mj-outlook-group-fix"
|
|
style={{
|
|
fontSize: 0,
|
|
textAlign: "left",
|
|
direction: "ltr",
|
|
display: "inline-block",
|
|
verticalAlign: "top",
|
|
width: "100%",
|
|
}}>
|
|
<BaseTable border="0" style={{ verticalAlign: "top" }} width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td
|
|
align="center"
|
|
vertical-align="middle"
|
|
style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
|
{props.callToAction}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
align="left"
|
|
style={{ fontSize: 0, padding: "10px 25px", wordBreak: "break-word" }}>
|
|
<div
|
|
style={{
|
|
fontFamily: "Roboto, Helvetica, sans-serif",
|
|
fontSize: 13,
|
|
lineHeight: 1,
|
|
textAlign: "left",
|
|
color: "#000000",
|
|
}}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</BaseTable>
|
|
</div>
|
|
)}
|
|
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
|
</td>
|
|
</Row>
|
|
</div>
|
|
<EmailBodyLogo />
|
|
<RawHtml html="<!--[if mso | IE]></td></tr></table><![endif]-->" />
|
|
</div>
|
|
</body>
|
|
</Html>
|
|
);
|
|
};
|