[TAS-504] ✨ Add basic v2 template

example/index.html

@@ -17,6 +17,15 @@ <h2>Basic</h2>
       </li>
     </ul>
 
+    <h2>Basic V2</h2>
+    <ul>
+      <li>
+        <a href="/v2/basic?title=Lorem Ipsum&subtitle=Lorem Ipsum&content=<p>Lorem <b>Ipsum</b></p>">
+          Default
+        </a>
+      </li>
+    </ul>
+
     <h2>New supporter</h2>
     <ul>
       <li>

example/index.ts

@@ -18,6 +18,7 @@ import {
   getNFTNotificationTransferTemplate,
   getNFTNotificationPurchaseTemplate,
   getNFTNotificationPurchaseMultipleTemplate,
+  getBasicV2Template,
 } from '../dist';
 
 import {
@@ -55,6 +56,11 @@ handleRequest('/basic', (req, res) => {
   res.send(body);
 });
 
+handleRequest('/v2/basic', (req, res) => {
+  const { body } = getBasicV2Template({ ...req.query, ...req.body });
+  res.send(body);
+});
+
 handleRequest('/basic/avatar', (req, res) => {
   const { body } = getBasicWithAvatarTemplate({ ...req.query, ...req.body });
   res.send(body);

src/constants/index.ts

@@ -1,7 +1,7 @@
 export const ASSETS_ROOT =
   process.env.NODE_ENV === 'production'
     ? 'https://static.like.co/edm'
-    : 'http://localhost:3000/static';
+    : `http://localhost:${process.env.PORT || '3000'}/static`;
 
 export const DEFAULT_AVATAR_URL = `${ASSETS_ROOT}/default-avatar.jpg`;
 

src/index.tsx

@@ -60,6 +60,7 @@ import {
   NFTNotificationPurchaseMultipleTemplate,
   NFTNotificationPurchaseMultipleTemplateProps,
 } from './templates/nft/notification/purchase-multiple';
+import { BasicV2Template, BasicV2TemplateProps } from './templates/basic-v2';
 
 export const getBasicTemplate = (
   props: BasicTemplateProps,
@@ -73,6 +74,18 @@ export const getBasicTemplate = (
   return { subject, body };
 };
 
+export const getBasicV2Template = (
+  props: BasicV2TemplateProps,
+  options?: Mjml2HtmlOptions
+) => {
+  const { html: body } = render(<BasicV2Template {...props} />, {
+    minify: false,
+    ...options,
+  });
+  const { subject } = props;
+  return { subject, body };
+};
+
 export const getBasicWithAvatarTemplate = (
   props: BasicWithAvatarTemplateProps,
   options?: Mjml2HtmlOptions

src/templates/basic-v2.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { MjmlColumn, MjmlText } from 'mjml-react';
+
+import * as Colors from '../constants/colors';
+
+import { ContentSection } from '../components/content';
+import { CivicLikerCTASection } from '../components/cta-civic-liker';
+import { WritingNFTCTASection } from '../components/cta-writing-nft';
+import { FooterSection } from '../components/footer';
+import { HeaderSection } from '../components/header';
+import { BasicSection } from '../components/sections/basic';
+import { TemplateBase } from '../components/template-base';
+
+export interface BasicV2TemplateProps {
+  subject?: string;
+  title?: string;
+  titleTop?: React.ReactElement;
+  subtitle?: string;
+  subtitlePrepend?: React.ReactElement;
+  avatarURL?: string;
+  isCivicLiker?: boolean;
+  content?: string;
+  cta?: string;
+  unsubscribeLink?: string;
+  language?: string;
+}
+
+export const BasicV2Template = ({
+  subject,
+  title,
+  titleTop,
+  subtitle,
+  subtitlePrepend,
+  content,
+  cta = 'writing-nft',
+  unsubscribeLink,
+  language,
+}: BasicV2TemplateProps) => {
+  return (
+    <TemplateBase language={language} subject={subject}>
+      <HeaderSection />
+      <BasicSection
+        backgroundColor={Colors.LikeGreen}
+        paddingTop={48}
+        paddingBottom={48}
+      >
+        <MjmlColumn>
+          {titleTop}
+          <MjmlText color="white" fontSize={36} fontWeight={600} align="left">
+            {title}
+          </MjmlText>
+          {subtitle && (
+            <MjmlText
+              color={Colors.LighterCyan}
+              fontSize={24}
+              align="left"
+              paddingTop={16}
+            >
+              {subtitlePrepend}
+              {subtitle}
+            </MjmlText>
+          )}
+        </MjmlColumn>
+      </BasicSection>
+      <ContentSection content={content} />
+      {cta === 'civic-liker' && <CivicLikerCTASection />}
+      {cta === 'writing-nft' && <WritingNFTCTASection />}
+      <FooterSection unsubscribeLink={unsubscribeLink} />
+    </TemplateBase>
+  );
+};