✨ Update monthly report for Civic Liker Classic

example/index.html

@@ -57,6 +57,11 @@ <h2>Monthly Reports</h2>
           Civic Liker (2.0)
         </a>
       </li>
+      <li>
+        <a href="/monthly-reports/civic-liker/classic">
+          Civic Liker Classic (based on 2.0 template)
+        </a>
+      </li>
     </ul>
 
   </body>

example/index.ts

@@ -16,6 +16,7 @@ import {
 import {
   MonthlyReportCivicLikerV1SampleData,
   MonthlyReportCivicLikerV2SampleData,
+  MonthlyReportCivicLikerV2ClassicSampleData,
 } from './data/civic-liker';
 import {
   MonthlyReportCreatorTemplateSampleData,
@@ -90,6 +91,15 @@ handleRequest('/monthly-reports/civic-liker/v2', (req, res) => {
   res.send(subject.concat(body));
 });
 
+handleRequest('/monthly-reports/civic-liker/classic', (req, res) => {
+  const { subject, body } = getMonthlyReportCivicLikerV2Template({
+    ...MonthlyReportCivicLikerV2ClassicSampleData,
+    ...req.query,
+    ...req.body,
+  });
+  res.send(subject.concat(body));
+});
+
 app.get('/', (_, res) => {
   res.sendFile(path.join(__dirname, 'index.html'));
 });

package.json

@@ -54,7 +54,7 @@
     }
   ],
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^4.9.1",
+    "@size-limit/preset-small-lib": "^4.12.0",
     "@types/mjml": "^4.0.4",
     "@types/mjml-react": "^1.0.4",
     "@types/react": "^17.0.0",
@@ -66,7 +66,8 @@
   },
   "dependencies": {
     "@types/mjml-react": "^1.0.4",
-    "mjml": "^4.7.1",
+    "canvas": "^2.8.0",
+    "mjml": "^4.9.3",
     "mjml-react": "^1.0.63",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/components/avatar.tsx

@@ -13,6 +13,8 @@ export interface AvatarProps {
   src?: string;
   size?: number;
   align?: 'left' | 'center' | 'right';
+  display?: string;
+  lineHeight?: number;
 }
 
 export const Avatar = (props: AvatarProps) => {
@@ -23,25 +25,26 @@ export const Avatar = (props: AvatarProps) => {
     src = DEFAULT_AVATAR_URL,
     size = 40,
     align = 'center',
+    display = 'block',
+    lineHeight = 1,
   } = props;
   return (
     <MjmlRaw>
       <Link
         href={`${LIKER_LAND_ROOT}/${likerID}`}
         isWrapUtm={true}
         style={{
-          display: 'block',
+          display: display,
           textAlign: align,
-          padding: size * 0.08,
-          lineHeight: 1,
+          padding: Math.ceil(size * 0.08),
+          lineHeight: lineHeight,
           ...(isCivicLiker
             ? {
                 backgroundImage: `url(${getAssetPath(
                   '/avatar/halo/civic-liker.png'
                 )})`,
                 backgroundRepeat: 'no-repeat',
-                backgroundPositionX: align,
-                backgroundPositionY: 'center',
+                backgroundPosition: `center ${align}`,
                 backgroundSize: 'contain',
               }
             : {}),

src/components/classic-badge.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  BorderProps,
+  ClassNameProps,
+  MjmlColumn,
+  MjmlSectionProps,
+  MjmlImage,
+  PaddingProps,
+} from 'mjml-react';
+
+import { getAssetPath } from '../utils/url';
+
+import { BasicSection, BasicSectionProps } from './sections/basic';
+
+export const CivicLikerClassicBadge = (
+  props: BasicSectionProps &
+    MjmlSectionProps &
+    BorderProps &
+    PaddingProps &
+    ClassNameProps
+) => {
+  return (
+    <BasicSection
+      backgroundColor="white"
+      paddingTop={32}
+      paddingBottom={24}
+      {...props}
+    >
+      <MjmlColumn>
+        <MjmlImage
+          width={218}
+          src={getAssetPath('/badges/[email protected]')}
+        />
+      </MjmlColumn>
+    </BasicSection>
+  );
+};

src/components/header.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { MjmlColumn, MjmlImage } from 'mjml-react';
+import { MjmlColumn, MjmlImage, MjmlGroup, MjmlText } from 'mjml-react';
+import { FormattedMessage } from 'react-intl';
+import * as Colors from '../constants/colors';
+import { GetAppLink } from '../components/link';
 
 import { getAssetPath } from '../utils/url';
 
@@ -13,13 +16,38 @@ export const HeaderSection = () => {
       paddingLeft={40}
       paddingBottom={32}
     >
-      <MjmlColumn>
-        <MjmlImage
-          align="left"
-          width={90}
-          src={getAssetPath('/liker-land-logo.png')}
-        />
-      </MjmlColumn>
+      <MjmlGroup>
+        <MjmlColumn width="65%">
+          <MjmlImage
+            align="left"
+            width={145}
+            src={getAssetPath(
+              '/banners/[email protected]'
+            )}
+          />
+        </MjmlColumn>
+        <MjmlColumn width="15%" cssClass="hide_on_mobile">
+          <MjmlText
+            color={Colors.Grey4A}
+            fontSize={14}
+            fontWeight={600}
+            lineHeight="3.0"
+            align="right"
+          >
+            <FormattedMessage id="download" />
+          </MjmlText>
+        </MjmlColumn>
+        <MjmlColumn width="10%" cssClass="hide_on_mobile">
+          <MjmlText fontSize={14} lineHeight="3.0" align="center">
+            <GetAppLink>iOS</GetAppLink>
+          </MjmlText>
+        </MjmlColumn>
+        <MjmlColumn width="10%" cssClass="hide_on_mobile">
+          <MjmlText fontSize={14} lineHeight="3.0">
+            <GetAppLink>Android</GetAppLink>
+          </MjmlText>
+        </MjmlColumn>
+      </MjmlGroup>
     </BasicSection>
   );
 };

src/components/link.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import * as Colors from '../constants/colors';
 import { wrapUtm } from '../utils/url';
+import { LIKER_LAND_ROOT } from '../constants';
 
 export interface LinkProps
   extends React.DetailedHTMLProps<
@@ -10,15 +11,23 @@ export interface LinkProps
   > {
   isWrapUtm?: boolean;
   wrapUtmPrefix?: string;
+  textDecoration?: string;
 }
 
+export interface GetAppLinkProps
+  extends React.DetailedHTMLProps<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {}
+
 export const Link = (props: LinkProps) => {
   const {
     children,
     href,
     style,
     isWrapUtm = false,
     wrapUtmPrefix,
+    textDecoration = 'underline',
     ...restProps
   } = props;
 
@@ -29,7 +38,7 @@ export const Link = (props: LinkProps) => {
       rel="noreferrer noopener"
       style={{
         color: Colors.LikeGreen,
-        textDecoration: 'underline',
+        textDecoration: textDecoration,
         ...style,
       }}
       {...restProps}
@@ -38,3 +47,17 @@ export const Link = (props: LinkProps) => {
     </a>
   );
 };
+
+export const GetAppLink = (props: GetAppLinkProps) => {
+  const { children } = props;
+  return (
+    <a
+      href={`${LIKER_LAND_ROOT}/getapp`}
+      target="_blank"
+      rel="noreferrer noopener"
+      color={Colors.Grey9B}
+    >
+      {children}
+    </a>
+  );
+};

src/components/sections/monthly-report-header.tsx

@@ -1,16 +1,26 @@
 import * as React from 'react';
-import { MjmlColumn, MjmlText, MjmlWrapper } from 'mjml-react';
-import { FormattedMessage, useIntl } from 'react-intl';
-
+import {
+  MjmlColumn,
+  MjmlGroup,
+  MjmlText,
+  MjmlWrapper,
+  MjmlTable,
+  MjmlImage,
+} from 'mjml-react';
+import { useIntl } from 'react-intl';
+import { createCanvas } from 'canvas';
 import * as Colors from '../../constants/colors';
-
 import { getLocalizedMonthlyReportDate } from '../../utils/localization';
-
+import { getAssetPath } from '../../utils/url';
 import { User } from '../../types';
 
 import { Avatar } from '../avatar';
 import { BasicSection } from './basic';
 
+const canvas = createCanvas(200, 100);
+const ctx = canvas.getContext('2d');
+ctx.font = '18px monospace';
+
 export interface MonthlyReportHeaderSectionProps extends User {
   title?: React.ReactNode;
   timestamp?: number;
@@ -29,17 +39,51 @@ export const MonthlyReportHeaderSection = (
   } = props;
   const intl = useIntl();
   return (
-    <MjmlWrapper>
-      <BasicSection backgroundColor={Colors.LikeGreen}>
+    <MjmlWrapper backgroundColor={Colors.LikeGreen}>
+      <BasicSection backgroundColor={Colors.LikeGreen} paddingBottom={0}>
+        <MjmlGroup>
+          <MjmlColumn width="20%">
+            <MjmlImage
+              width={68}
+              height={65}
+              align="left"
+              src={getAssetPath('/icons/[email protected]')}
+            />
+          </MjmlColumn>
+          <MjmlColumn width="80%">
+            <MjmlTable paddingTop="8px" css-class="hoverTable" width="100%">
+              <tr
+                style={{
+                  borderBottom: 'none',
+                  color: 'white',
+                  fontWeight: 'bolder',
+                  fontSize: 18,
+                }}
+              >
+                <td>
+                  <Avatar
+                    src={avatarSrc}
+                    likerID={likerID}
+                    displayName={displayName}
+                    isCivicLiker={isCivicLiker}
+                    size={48}
+                    align="right"
+                    lineHeight={0.5}
+                  />
+                </td>
+                <td
+                  style={{ textAlign: 'right' }}
+                  width={ctx.measureText(likerID).width}
+                >
+                  <MjmlText>{likerID}</MjmlText>
+                </td>
+              </tr>
+            </MjmlTable>
+          </MjmlColumn>
+        </MjmlGroup>
+      </BasicSection>
+      <BasicSection backgroundColor={Colors.LikeGreen} paddingTop={0}>
         <MjmlColumn>
-          <Avatar
-            src={avatarSrc}
-            likerID={likerID}
-            displayName={displayName}
-            isCivicLiker={isCivicLiker}
-            size={108}
-            align="left"
-          />
           <MjmlText
             fontSize={28}
             fontWeight={600}
@@ -48,18 +92,12 @@ export const MonthlyReportHeaderSection = (
           >
             {title}
           </MjmlText>
+
           <MjmlText fontSize={18} fontWeight={600} color={Colors.LikeCyan}>
             {getLocalizedMonthlyReportDate(intl, timestamp)}
           </MjmlText>
         </MjmlColumn>
       </BasicSection>
-      <BasicSection backgroundColor="white" paddingBottom={0}>
-        <MjmlColumn>
-          <MjmlText color={Colors.LikeGreen} fontSize={16} fontWeight={600}>
-            <FormattedMessage id="greeting" values={{ name: displayName }} />
-          </MjmlText>
-        </MjmlColumn>
-      </BasicSection>
     </MjmlWrapper>
   );
 };

src/components/template-base.tsx

@@ -8,6 +8,7 @@ import {
   MjmlText,
   MjmlBreakpoint,
   MjmlTitle,
+  MjmlStyle,
 } from 'mjml-react';
 
 import * as Colors from '../constants/colors';
@@ -55,6 +56,14 @@ export const TemplateBase = (props: TemplateBaseProps) => {
               />
               <MjmlText lineHeight="1.5" />
             </MjmlAttributes>
+            <MjmlStyle>
+              {`
+                @media only screen and (max-width: 480px) { 
+                  *[class~=hide_on_mobile] { display: none !important;} 
+                  *[class~=hoverTable] { table-layout: auto !important;}
+                }
+              `}
+            </MjmlStyle>
             <MjmlBreakpoint width={576} />
           </MjmlHead>
           <MjmlBody backgroundColor="white" width={theme.templateWidth}>

src/components/unsubscribe-link.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from './link';
 
 export const UnsubscribeLink = () => (
-  <Link href={'https://like.co/in/settings/others'} isWrapUtm={true}>
+  <Link href="https://like.co/in/settings/others" isWrapUtm={true}>
     <FormattedMessage id="unsubscribe.text" />
   </Link>
 );