Welcome template (#416)

* add new welcome template

* pull over new templates

* update snaps

* Create silly-boats-mix.md

* fix

* code review

* add new assets

* trigger

.changeset/silly-boats-mix.md

@@ -0,0 +1,6 @@
+---
+"mailing": patch
+"mailing-core": patch
+---
+
+Add new Welcome template to emails.

.lintstagedrc

@@ -1,5 +1,6 @@
 {
   "*.{js,jsx,ts,tsx}": "eslint --fix",
   "*.rb": "rubocop --autocorrect",
-  "packages/cli/src/emails/**/*.{ts,tsx}": "scripts/generate-emails-js"
+  "packages/cli/src/__mocks__/emails/**/*.{ts,tsx}": "scripts/generate-emails __mocks__/emails",
+  "packages/cli/src/emails/**/*.{ts,tsx}": "scripts/generate-emails emails"
 }

e2e/mailing_tests/cypress/e2e/index.cy.js

@@ -4,34 +4,17 @@ describe("index page tests", () => {
   });
 
   it("should redirect index to previewFunction with tree", () => {
-    cy.location("pathname").should(
-      "eq",
-      "/previews/AccountCreated/accountCreated"
-    );
+    cy.location("pathname").should("eq", "/previews/Welcome/preview");
 
-    cy.contains("accountCreated")
+    cy.contains("preview")
       .should("have.attr", "aria-selected", "true")
       .should("have.attr", "role", "treeitem");
     cy.contains("Emails")
       .should("have.attr", "aria-expanded", "true")
       .should("have.attr", "aria-selected", "false")
       .should("have.attr", "role", "treeitem");
-    cy.contains("Reservation")
-      .should("have.attr", "aria-expanded", "true")
-      .should("have.attr", "role", "treeitem")
-      .should("have.attr", "role", "treeitem");
-    cy.contains("ResetPassword")
-      .should("have.attr", "aria-expanded", "true")
-      .should("have.attr", "role", "treeitem");
-
-    cy.contains("reservationChanged").click();
-    cy.location("pathname").should(
-      "eq",
-      "/previews/Reservation/reservationChanged"
-    );
-
     cy.contains("Compact view").click();
 
-    cy.get("[aria-selected=true]").contains("reservationChanged");
+    cy.get("[aria-selected=true]").contains("preview");
   });
 });

e2e/mailing_tests/jest/__snapshots__/exportPreviews.test.js.snap

@@ -3,29 +3,26 @@
 exports[`exportPreviews command cli --minify runs on templates 1`] = `
 "mailing Exporting minified preview html to
 mailing ./previews_html/
-mailing   |-- account_created_account_created.html
-mailing   |-- new_sign_in_new_sign_in.html
-mailing   |-- reservation_reservation_changed.html
-mailing   |-- reservation_reservation_confirmed.html
-mailing   |-- reservation_reservation_with_error.html
-mailing   |-- reset_password_reset_password.html
-mailing ✅ Processed 6 previews
+mailing   |-- welcome_preview.html
+mailing ✅ Processed 1 previews
 
 "
 `;
 
-exports[`exportPreviews command cli halts on lint errors runs on templates 1`] = `""`;
+exports[`exportPreviews command cli halts on lint errors runs on templates 1`] = `
+"mailing Exporting preview html to
+mailing ./previews_html/
+mailing   |-- welcome_preview.html
+mailing ✅ Processed 1 previews
+
+"
+`;
 
 exports[`exportPreviews command cli runs on templates 1`] = `
 "mailing Exporting preview html to
 mailing ./previews_html/
-mailing   |-- account_created_account_created.html
-mailing   |-- new_sign_in_new_sign_in.html
-mailing   |-- reservation_reservation_changed.html
-mailing   |-- reservation_reservation_confirmed.html
-mailing   |-- reservation_reservation_with_error.html
-mailing   |-- reset_password_reset_password.html
-mailing ✅ Processed 6 previews
+mailing   |-- welcome_preview.html
+mailing ✅ Processed 1 previews
 
 "
 `;

packages/cli/cypress/e2e/index.cy.js

@@ -6,34 +6,17 @@ describe("index page tests", () => {
   });
 
   it("should redirect index to previewFunction with tree", () => {
-    cy.location("pathname").should(
-      "eq",
-      "/previews/AccountCreated/accountCreated"
-    );
+    cy.location("pathname").should("eq", "/previews/Welcome/preview");
 
-    cy.contains("accountCreated")
+    cy.contains("preview")
       .should("have.attr", "aria-selected", "true")
       .should("have.attr", "role", "treeitem");
     cy.contains("Emails")
       .should("have.attr", "aria-expanded", "true")
       .should("have.attr", "aria-selected", "false")
       .should("have.attr", "role", "treeitem");
-    cy.contains("Reservation")
-      .should("have.attr", "aria-expanded", "true")
-      .should("have.attr", "role", "treeitem")
-      .should("have.attr", "role", "treeitem");
-    cy.contains("ResetPassword")
-      .should("have.attr", "aria-expanded", "true")
-      .should("have.attr", "role", "treeitem");
-
-    cy.contains("reservationChanged").click();
-    cy.location("pathname").should(
-      "eq",
-      "/previews/Reservation/reservationChanged"
-    );
-
     cy.contains("Compact view").click();
 
-    cy.get("[aria-selected=true]").contains("reservationChanged");
+    cy.get("[aria-selected=true]").contains("preview");
   });
 });

packages/cli/src/__mocks__/emails-js/components/BaseLayout.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import {
+  Mjml,
+  MjmlBody,
+  MjmlHead,
+  MjmlFont,
+  MjmlStyle,
+  MjmlAttributes,
+  MjmlAll,
+  MjmlRaw,
+  MjmlPreview,
+} from "mjml-react";
+import { colors, screens, themeDefaults, spacing } from "../theme";
+
+export default function BaseLayout({ width, children, preview }) {
+  return (
+    <Mjml>
+      <MjmlHead>
+        {preview && <MjmlPreview>{preview}</MjmlPreview>}
+        <MjmlRaw>
+          <meta name="color-scheme" content="light dark" />
+          <meta name="supported-color-schemes" content="light dark" />
+        </MjmlRaw>
+        <MjmlFont
+          name="Inter"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700"
+        />
+        <MjmlAttributes>
+          <MjmlAll {...themeDefaults} />
+        </MjmlAttributes>
+        <MjmlStyle>{`
+          body {
+            -webkit-font-smoothing: antialiased;
+          }
+          a {
+            color: inherit
+          }
+          .gutter {
+            padding-left: ${spacing.s7}px;
+            padding-right: ${spacing.s7}px;
+          }
+          .no-wrap {
+            white-space: nowrap;
+          }
+          .dark-mode {
+            display: none;
+            max-width: 0px;
+            max-height: 0px;
+            overflow: hidden;
+            mso-hide: all;
+          }
+          .hidden {
+            display: none;
+            max-width: 0px;
+            max-height: 0px;
+            overflow: hidden;
+            mso-hide: all;
+          }
+          .lg-hidden {
+            display: none;
+            max-width: 0px;
+            max-height: 0px;
+            overflow: hidden;
+            mso-hide: all;
+          }
+
+          /* Large screens */
+          @media (min-width:${screens.xs}) {
+            .lg-gutter {
+              padding-left: ${spacing.s7}px !important;
+              padding-right: ${spacing.s7}px !important;
+            }
+            .sm-hidden {
+              display: none;
+              max-width: 0px;
+              max-height: 0px;
+              overflow: hidden;
+              mso-hide: all;
+            }
+            .lg-hidden {
+              display: block !important;
+              max-width: none !important;
+              max-height: none !important;
+              overflow: visible !important;
+              mso-hide: none !important;
+            }
+          }
+
+          /* Dark Mode */
+          @media (prefers-color-scheme: dark) {
+            body {
+              background: ${colors.black};
+            }
+            .invert > * {
+              filter: invert(1) !important;
+            }
+            .text > * {
+              color: #fff !important;
+            }
+            .dark-mode {
+              display: inherit !important;
+              max-width: none !important;
+              max-height: none !important;
+              overflow: visible !important;
+              mso-hide: none !important;
+            }
+            .light-mode {
+              display: none;
+              max-width: 0px;
+              max-height: 0px;
+              overflow: hidden;
+              mso-hide: all;
+            }
+          }
+      `}</MjmlStyle>
+      </MjmlHead>
+
+      <MjmlBody width={width}>{children}</MjmlBody>
+    </Mjml>
+  );
+}

packages/cli/src/__mocks__/emails-js/components/Button.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { MjmlButton } from "mjml-react";
+import { colors, fontSize, borderRadius, lineHeight, spacing } from "../theme";
+
+export default function Button(props) {
+  return (
+    <>
+      <MjmlButton
+        lineHeight={lineHeight.tight}
+        fontSize={fontSize.base}
+        height={spacing.s8}
+        align="left"
+        backgroundColor={colors.black}
+        color={colors.neutral100}
+        borderRadius={borderRadius.base}
+        cssClass="light-mode"
+        {...props}
+      />
+      <MjmlButton
+        lineHeight={lineHeight.tight}
+        fontSize={fontSize.base}
+        height={spacing.s8}
+        align="left"
+        backgroundColor={colors.gold}
+        color={colors.black}
+        borderRadius={borderRadius.base}
+        cssClass="dark-mode"
+        {...props}
+      />
+    </>
+  );
+}

packages/cli/src/__mocks__/emails-js/components/Footer.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { MjmlSection, MjmlColumn, MjmlText } from "mjml-react";
+import { EMAIL_PREFERENCES_URL } from "mailing-core";
+import { colors, fontSize, spacing } from "../theme";
+
+export default function Footer({ includeUnsubscribe }) {
+  return (
+    <MjmlSection cssClass="gutter">
+      <MjmlColumn>
+        <MjmlText
+          paddingTop={spacing.s9}
+          paddingBottom={spacing.s10}
+          fontSize={fontSize.sm}
+          color={colors.neutral400}
+        >
+          © {new Date().getFullYear()} BookBook
+          {includeUnsubscribe && (
+            <>
+              &nbsp;&nbsp;·&nbsp;&nbsp;
+              <a
+                href={EMAIL_PREFERENCES_URL}
+                target="_blank"
+                rel="noreferrer"
+                style={{ textDecoration: "none" }}
+              >
+                Unsubscribe
+              </a>
+            </>
+          )}
+        </MjmlText>
+      </MjmlColumn>
+    </MjmlSection>
+  );
+}

packages/cli/src/__mocks__/emails-js/components/Header.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { MjmlSection, MjmlColumn, MjmlImage } from "mjml-react";
+
+const Header = ({ loose }) => {
+  return (
+    <MjmlSection padding={loose ? "48px 0 40px" : "48px 0 24px"}>
+      <MjmlColumn>
+        <MjmlImage
+          padding="0 24px 0"
+          width="49px"
+          height="54px"
+          align="center"
+          src="https://s3.amazonaws.com/lab.campsh.com/bb-transparent%402x.png"
+          cssClass="invert"
+        />
+      </MjmlColumn>
+    </MjmlSection>
+  );
+};
+export default Header;

packages/cli/src/__mocks__/emails-js/components/Heading.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Text from "./Text";
+import { fontFamily, lineHeight, fontWeight, fontSize } from "../theme";
+
+const defaultProps = {
+  fontFamily: fontFamily.sans,
+  fontWeight: fontWeight.normal,
+  lineHeight: lineHeight.tight,
+  fontSize: fontSize.lg,
+};
+export default function Heading(props) {
+  return (
+    <Text {...defaultProps} {...props}>
+      {props.children}
+    </Text>
+  );
+}

packages/cli/src/__mocks__/emails-js/components/Text.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { MjmlText } from "mjml-react";
+
+export default function Text({ children, maxWidth, ...props }) {
+  if (maxWidth) {
+    return (
+      <MjmlText {...props} cssClass="text">
+        <div style={{ maxWidth }}>{children}</div>
+      </MjmlText>
+    );
+  } else
+    return (
+      <MjmlText {...props} cssClass="text">
+        {children}
+      </MjmlText>
+    );
+}

packages/cli/src/__mocks__/emails-js/index.js

@@ -0,0 +1,19 @@
+import nodemailer from "nodemailer";
+import { buildSendMail } from "mailing-core";
+
+const transport = nodemailer.createTransport({
+  pool: true,
+  host: "smtp.example.com",
+  port: 465,
+  secure: true,
+  auth: {
+    user: "username",
+    pass: "password",
+  },
+});
+const sendMail = buildSendMail({
+  transport,
+  defaultFrom: "[email protected]",
+  configPath: "./mailing.config.json",
+});
+export default sendMail;