Merge pull request #166 from CriticalMoments/sv5_templates

Move email templates to handlebars.js
CriticalMoments · Nov 3, 2024 · 2ec70e0 · 2ec70e0
2 parents 47ba79b + 8d742b8
commit 2ec70e0
Show file tree

Hide file tree

Showing 10 changed files with 305 additions and 333 deletions.
diff --git a/email_docs.md b/email_docs.md
@@ -28,6 +28,8 @@ To customize the email:
 - edit the plaintext email content in src/lib/emails/welcome_email_text.svelte
 - edit the html email content in src/lib/emails/welcome_email_html.svelte - don't forget address and preheader text which won't render in a preview, but will in the client's email client.
 
+**Note**: use triple braces for properties in plaintext emails, and double braces for html emails. See the [handlebars documentation](https://handlebarsjs.com/guide/expressions.html#html-escaping) for more information.
+
 You can also delete the welcome email by removing the call to sendTemplatedEmail in src/routes/(admin)/account/api/+page.server.ts
 
 ## Adding Admin Emails
@@ -38,7 +40,7 @@ Simply add a call to sendAdminEmail() in the appropriate place, passing a subjec
 
 ## Adding Additional User Emails
 
-You can add more user emails. Create a template in src/lib/emails, using the welcome email as a guide. You should have both a plaintext and html version of the email (see welcome_email_text.svelte and welcome_email_html.svelte), although it will work with just one.
+You can add more user emails. Create a template in src/lib/emails, using the welcome email as a guide. You should have both a plaintext and html version of the email (see welcome_email_text.svelte and welcome_email_html.svelte for examples), although it will work with just one.
 
 When you want to send the email, call sendUserEmail() with the appropriate parameters, including the name of the email template.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@supabase/auth-ui-svelte": "^0.2.9",
     "@supabase/ssr": "^0.5.1",
     "@supabase/supabase-js": "^2.45.2",
+    "handlebars": "^4.7.8",
     "resend": "^3.5.0",
     "stripe": "^13.3.0"
   },

diff --git a/src/lib/emails/welcome_email_html.hbs b/src/lib/emails/welcome_email_html.hbs
@@ -0,0 +1,207 @@
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Welcome Email</title>
+    <style media="all" type="text/css">
+      @media all { .btn-primary table td:hover { background-color: #ec0867
+      !important; } .btn-primary a:hover { background-color: #ec0867 !important;
+      border-color: #ec0867 !important; } } @media only screen and (max-width:
+      640px) { .main p, .main td, .main span { font-size: 16px !important; }
+      .wrapper { padding: 8px !important; } .content { padding: 0 !important; }
+      .container { padding: 0 !important; padding-top: 8px !important; width:
+      100% !important; } .main { border-left-width: 0 !important; border-radius:
+      0 !important; border-right-width: 0 !important; } .btn table { max-width:
+      100% !important; width: 100% !important; } .btn a { font-size: 16px
+      !important; max-width: 100% !important; width: 100% !important; } } @media
+      all { .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p,
+      .ExternalClass span, .ExternalClass font, .ExternalClass td,
+      .ExternalClass div { line-height: 100%; } .apple-link a { color: inherit
+      !important; font-family: inherit !important; font-size: inherit
+      !important; font-weight: inherit !important; line-height: inherit
+      !important; text-decoration: none !important; } #MessageViewBody a {
+      color: inherit; text-decoration: none; font-size: inherit; font-family:
+      inherit; font-weight: inherit; line-height: inherit; } }
+    </style>
+  </head>
+  <body
+    style="font-family: Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.3; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f4f5f6; margin: 0; padding: 0;"
+  >
+    <table
+      role="presentation"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      class="body"
+      style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f4f5f6; width: 100%;"
+      width="100%"
+      bgcolor="#f4f5f6"
+    >
+      <tr>
+        <td
+          style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top;"
+          valign="top"
+        >&nbsp;</td>
+        <td
+          class="container"
+          style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; max-width: 600px; padding: 0; padding-top: 24px; width: 600px; margin: 0 auto;"
+          width="600"
+          valign="top"
+        >
+          <div
+            class="content"
+            style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px; padding: 0;"
+          >
+            <!-- START CENTERED WHITE CONTAINER -->
+            <span
+              class="preheader"
+              style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"
+            >Welcome to
+              {{companyName}}. We're excited to have you on board.</span>
+            <table
+              role="presentation"
+              border="0"
+              cellpadding="0"
+              cellspacing="0"
+              class="main"
+              style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border: 1px solid #eaebed; border-radius: 16px; width: 100%;"
+              width="100%"
+            >
+              <!-- START MAIN CONTENT AREA -->
+              <tr>
+                <td
+                  class="wrapper"
+                  style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; box-sizing: border-box; padding: 24px;"
+                  valign="top"
+                >
+                  <p
+                    style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
+                  >
+                    Welcome to
+                    {{companyName}}!
+                  </p>
+                  <p
+                    style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
+                  >
+                    This is a quick sample of a welcome email. You can customize
+                    this email to fit your needs.
+                  </p>
+                  <table
+                    role="presentation"
+                    border="0"
+                    cellpadding="0"
+                    cellspacing="0"
+                    class="btn btn-primary"
+                    style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; min-width: 100%;"
+                    width="100%"
+                  >
+                    <tr>
+                      <td
+                        align="left"
+                        style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; padding-bottom: 16px;"
+                        valign="top"
+                      >
+                        <table
+                          role="presentation"
+                          border="0"
+                          cellpadding="0"
+                          cellspacing="0"
+                          style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"
+                        >
+                          <tr>
+                            <td
+                              style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; border-radius: 4px; text-align: center; background-color: #0867ec;"
+                              valign="top"
+                              align="center"
+                            >
+                              <a
+                                href="https://github.com/CriticalMoments/CMSaasStarter"
+                                target="_blank"
+                                style="border: solid 2px #0867ec; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; margin: 0; padding: 12px 24px; text-decoration: none; text-transform: capitalize; background-color: #0867ec; border-color: #0867ec; color: #ffffff;"
+                              >View SaaS Starter Docs</a>
+                            </td>
+                          </tr>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                  <p
+                    style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
+                  >
+                    Thanks for using
+                    {{companyName}}!
+                  </p>
+                </td>
+              </tr>
+              <!-- END MAIN CONTENT AREA -->
+            </table>
+
+            <!-- START FOOTER -->
+            <div
+              class="footer"
+              style="clear: both; padding-top: 24px; text-align: center; width: 100%;"
+            >
+              <table
+                role="presentation"
+                border="0"
+                cellpadding="0"
+                cellspacing="0"
+                style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;"
+                width="100%"
+              >
+                <tr>
+                  <td
+                    class="content-block"
+                    style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 16px; text-align: center;"
+                    valign="top"
+                    align="center"
+                  >
+                    <span
+                      class="apple-link"
+                      style="color: #9a9ea6; font-size: 16px; text-align: center;"
+                    >Company Inc, 123 Main St, Toronto, Canada</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    class="content-block powered-by"
+                    style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 16px; text-align: center;"
+                    valign="top"
+                    align="center"
+                  >
+                    Email Template by
+                    <a
+                      href="http://htmlemail.io"
+                      style="color: #9a9ea6; font-size: 16px; text-align: center; text-decoration: none;"
+                    >HTMLemail.io</a>
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    class="content-block"
+                    style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 14px; text-align: center;"
+                    valign="top"
+                    align="center"
+                  >
+                    <a
+                      href="{{WebsiteBaseUrl}}/account/settings/change_email_subscription"
+                      style="color: #4382ff; font-size: 16px; text-align: center; text-decoration: underline;"
+                    >Unsubscribe</a>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            <!-- END FOOTER -->
+
+            <!-- END CENTERED WHITE CONTAINER -->
+          </div>
+        </td>
+        <td
+          style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top;"
+          valign="top"
+        >&nbsp;</td>
+      </tr>
+    </table>
+  </body>
+</html>