started adding mailing.run

yatharth1706 · Oct 7, 2022 · 33f134c · 33f134c
1 parent eacb377
commit 33f134c
Show file tree

Hide file tree

Showing 20 changed files with 2,800 additions and 47 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-/pages/api/scripts*
+/pages/api/scripts*
+.mailing
diff --git a/emails/AccountCreated.tsx b/emails/AccountCreated.tsx
@@ -0,0 +1,81 @@
+import Head from "./components/Head";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import {
+  Mjml,
+  MjmlBody,
+  MjmlSection,
+  MjmlColumn,
+  MjmlText,
+  MjmlImage,
+  MjmlSpacer,
+} from "mjml-react";
+import ButtonPrimary from "./components/ButtonPrimary";
+import {
+  leadingTight,
+  leadingRelaxed,
+  textBase,
+  textXl,
+} from "./components/theme";
+
+const AccountCreated = ({ name }: { name?: string }): JSX.Element => {
+  return (
+    <Mjml>
+      <Head />
+      <MjmlBody width={600}>
+        <Header loose />
+        <MjmlSection padding="0">
+          <MjmlColumn>
+            <MjmlImage
+              cssClass="hero"
+              padding="0 0 40px"
+              align="left"
+              src="https://s3.amazonaws.com/lab.campsh.com/bb-hero%402x.jpg"
+            />
+          </MjmlColumn>
+        </MjmlSection>
+        <MjmlSection padding="0 24px" cssClass="smooth">
+          <MjmlColumn>
+            <MjmlText
+              cssClass="paragraph"
+              padding="0"
+              fontSize={textXl}
+              lineHeight={leadingTight}
+            >
+              {name}, your table awaits.
+            </MjmlText>
+            <MjmlText
+              padding="24px 0 0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+              cssClass="paragraph"
+            >
+              Thank you for joining BookBook! We’re excited to help you enjoy
+              great meals without any begging, guessing, waiting or phone calls.
+              Just a couple taps, and the table is yours.
+            </MjmlText>
+            <MjmlSpacer height="24px" />
+            <ButtonPrimary
+              link={"https://app.dub.sh/"}
+              uiText={"Create a project"}
+            />
+            <MjmlSpacer height="24px" />
+            <MjmlText
+              padding="0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+              cssClass="paragraph"
+            >
+              Enjoy!
+              <br />
+              The BookBook Team
+            </MjmlText>
+          </MjmlColumn>
+        </MjmlSection>
+        <Footer />
+      </MjmlBody>
+    </Mjml>
+  );
+};
+
+export default AccountCreated;
diff --git a/emails/NewSignIn.tsx b/emails/NewSignIn.tsx
@@ -0,0 +1,98 @@
+import { ReactElement } from "react";
+import Head from "./components/Head";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import {
+  leadingTight,
+  leadingRelaxed,
+  textBase,
+  textLg,
+} from "./components/theme";
+
+import {
+  Mjml,
+  MjmlBody,
+  MjmlSection,
+  MjmlColumn,
+  MjmlText,
+  MjmlSpacer,
+  MjmlDivider,
+} from "mjml-react";
+
+type NewSignInProps = {
+  name: string;
+  headline: string;
+  body: ReactElement;
+  bulletedList: ReactElement;
+};
+
+const NewSignIn: React.FC<NewSignInProps> = ({
+  name,
+  headline,
+  body,
+  bulletedList,
+}) => {
+  return (
+    <Mjml>
+      <Head />
+      <MjmlBody width={400}>
+        <Header />
+        <MjmlSection padding="0 24px" cssClass="smooth">
+          <MjmlColumn>
+            <MjmlDivider
+              borderColor="#666"
+              borderStyle="dotted"
+              borderWidth="1px"
+              padding="8px 0"
+            ></MjmlDivider>
+            <MjmlText
+              padding="24px 0 8px"
+              fontSize={textLg}
+              lineHeight={leadingTight}
+              cssClass="paragraph"
+            >
+              {headline}
+            </MjmlText>
+            <MjmlText
+              padding="16px 0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+              cssClass="paragraph"
+            >
+              Hello {name},
+            </MjmlText>
+            <MjmlText
+              cssClass="paragraph"
+              padding="0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+            >
+              <>{body}</>
+            </MjmlText>
+            <MjmlSpacer height="16px" />
+            {bulletedList}
+            <MjmlText
+              padding="16px 0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+              cssClass="paragraph"
+            >
+              ♥,
+              <br />
+              The BookBook Team
+            </MjmlText>
+            <MjmlDivider
+              borderColor="#666"
+              borderStyle="dotted"
+              borderWidth="1px"
+              padding="20px 0 8px"
+            ></MjmlDivider>
+          </MjmlColumn>
+        </MjmlSection>
+        <Footer />
+      </MjmlBody>
+    </Mjml>
+  );
+};
+
+export default NewSignIn;
diff --git a/emails/Reservation.tsx b/emails/Reservation.tsx
@@ -0,0 +1,88 @@
+import { ReactElement } from "react";
+import Head from "./components/Head";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import ButtonPrimary from "./components/ButtonPrimary";
+import {
+  leadingTight,
+  leadingRelaxed,
+  textBase,
+  textLg,
+} from "./components/theme";
+
+import {
+  Mjml,
+  MjmlBody,
+  MjmlSection,
+  MjmlColumn,
+  MjmlText,
+  MjmlSpacer,
+  MjmlDivider,
+} from "mjml-react";
+
+type ReservationProps = {
+  headline: string;
+  body: ReactElement;
+  bulletedList: ReactElement;
+  ctaText?: string;
+};
+
+const Reservation: React.FC<ReservationProps> = ({
+  headline,
+  body,
+  bulletedList,
+  ctaText,
+}) => {
+  return (
+    <Mjml>
+      <Head />
+      <MjmlBody width={400}>
+        <Header />
+        <MjmlSection padding="0 24px" cssClass="smooth">
+          <MjmlColumn>
+            <MjmlDivider
+              borderColor="#666"
+              borderStyle="dotted"
+              borderWidth="1px"
+              padding="8px 0"
+            ></MjmlDivider>
+            <MjmlText
+              padding="24px 0"
+              fontSize={textLg}
+              lineHeight={leadingTight}
+              cssClass="paragraph"
+            >
+              {headline}
+            </MjmlText>
+            {bulletedList}
+            <MjmlSpacer height="16px" />
+            <MjmlText
+              cssClass="paragraph"
+              padding="0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+            >
+              <>{body}</>
+            </MjmlText>
+            {ctaText && (
+              <>
+                <MjmlSpacer height="24px" />
+                <ButtonPrimary link={"#"} uiText={ctaText} />
+                <MjmlSpacer height="8px" />
+              </>
+            )}
+            <MjmlDivider
+              borderColor="#666"
+              borderStyle="dotted"
+              borderWidth="1px"
+              padding="32px 0 0"
+            ></MjmlDivider>
+          </MjmlColumn>
+        </MjmlSection>
+        <Footer />
+      </MjmlBody>
+    </Mjml>
+  );
+};
+
+export default Reservation;
diff --git a/emails/ResetPassword.tsx b/emails/ResetPassword.tsx
@@ -0,0 +1,85 @@
+import { ReactElement } from "react";
+import Head from "./components/Head";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import ButtonPrimary from "./components/ButtonPrimary";
+import { leadingRelaxed, textBase } from "./components/theme";
+
+import {
+  Mjml,
+  MjmlBody,
+  MjmlSection,
+  MjmlColumn,
+  MjmlText,
+  MjmlSpacer,
+  MjmlDivider,
+} from "mjml-react";
+
+type ResetPasswordProps = {
+  name: string;
+  body: ReactElement;
+  ctaText: string;
+};
+
+const ResetPassword: React.FC<ResetPasswordProps> = ({
+  name,
+  body,
+  ctaText,
+}) => {
+  return (
+    <Mjml>
+      <Head />
+      <MjmlBody width={400}>
+        <Header />
+        <MjmlSection padding="0 24px" cssClass="smooth">
+          <MjmlColumn>
+            <MjmlDivider
+              borderColor="#666"
+              borderStyle="dotted"
+              borderWidth="1px"
+              padding="8px 0 16px 0"
+            ></MjmlDivider>
+            <MjmlText
+              padding="16px 0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+              cssClass="paragraph"
+            >
+              Hello {name},
+            </MjmlText>
+            <MjmlText
+              cssClass="paragraph"
+              padding="0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+            >
+              <>{body}</>
+            </MjmlText>
+            <MjmlSpacer height="24px" />
+            <ButtonPrimary link={"#"} uiText={ctaText} />
+            <MjmlSpacer height="8px" />
+            <MjmlText
+              padding="16px 0"
+              fontSize={textBase}
+              lineHeight={leadingRelaxed}
+              cssClass="paragraph"
+            >
+              ♥,
+              <br />
+              The BookBook Team
+            </MjmlText>
+            <MjmlDivider
+              borderColor="#666"
+              borderStyle="dotted"
+              borderWidth="1px"
+              padding="16px 0 0"
+            ></MjmlDivider>
+          </MjmlColumn>
+        </MjmlSection>
+        <Footer />
+      </MjmlBody>
+    </Mjml>
+  );
+};
+
+export default ResetPassword;
diff --git a/emails/components/BulletedList.tsx b/emails/components/BulletedList.tsx
@@ -0,0 +1,26 @@
+import { MjmlText } from "mjml-react";
+import { leadingRelaxed, textBase } from "./theme";
+
+type BulletedListProps = {
+  items: string[];
+};
+
+const BulletedList: React.FC<BulletedListProps> = ({ items }) => {
+  return (
+    <>
+      {items.map((item) => (
+        <MjmlText
+          padding="1px 0 0"
+          fontSize={textBase}
+          lineHeight={leadingRelaxed}
+          cssClass="li"
+          key={item}
+        >
+          •&nbsp;&nbsp;{item}
+        </MjmlText>
+      ))}
+    </>
+  );
+};
+
+export default BulletedList;