Website: deliver contact form submission via email (#20972)

Closes: #20904

Changes:
- Updated the `deliver-contact-form-message` action to send contact form
submissions to Fleet's support email address.
- Added an email template for contact form messages.

website/api/controllers/admin/view-email-template-preview.js

@@ -155,6 +155,14 @@ module.exports = {
           notes: 'Fake organization 2 is looking for a managed cloud MDM solution with a name that ends with "eet"',
         };
         break;
+      case 'email-contact-form':
+        fakeData = {
+          firstName: 'Jane',
+          lastName: 'Williamson',
+          emailAddress: 'jane@example.com',
+          message: 'Hi, this is a contact form message!',
+        };
+        break;
       default:
         layout = 'layout-email-newsletter';
         fakeData = {

website/api/controllers/deliver-contact-form-message.js

@@ -66,9 +66,26 @@ module.exports = {
       throw 'invalidEmailDomain';
     }
 
-    await sails.helpers.http.post(sails.config.custom.slackWebhookUrlForContactForm, {
-      text: `New contact form message: (Remember: we have to email back; can't just reply to this thread.) cc @sales `+
-      `Name: ${firstName + ' ' + lastName}, Email: ${emailAddress}, Message: ${message ? message : 'No message.'}`
+    // await sails.helpers.http.post(sails.config.custom.slackWebhookUrlForContactForm, {
+    //   text: `New contact form message: (Remember: we have to email back; can't just reply to this thread.) cc @sales `+
+    //   `Name: ${firstName + ' ' + lastName}, Email: ${emailAddress}, Message: ${message ? message : 'No message.'}`
+    // });
+
+    await sails.helpers.sendTemplateEmail.with({
+      to: sails.config.custom.fromEmailAddress,
+      replyTo: {
+        name: firstName + ' '+ lastName,
+        email: emailAddress,
+      },
+      subject: 'New contact form message',
+      layout: false,
+      template: 'email-contact-form',
+      templateData: {
+        emailAddress,
+        firstName,
+        lastName,
+        message,
+      },
     });
 
     sails.helpers.salesforce.updateOrCreateContactAndAccount.with({

website/api/helpers/send-template-email.js

@@ -55,6 +55,18 @@ module.exports = {
       example: 'Nola Thacker',
     },
 
+    replyTo: {
+      description: 'The reply to email address.',
+      example: {
+        email: 'anne.m.martin@example.com',
+        name: 'Anne M. Martin'
+      },
+      type: {
+        name: 'string',
+        email: 'string',
+      }
+    },
+
     subject: {
       description: 'The subject of the email.',
       example: 'Hello there.',
@@ -122,7 +134,7 @@ module.exports = {
   },
 
 
-  fn: async function({template, templateData, to, toName, subject, from, fromName, layout, ensureAck, bcc, attachments}) {
+  fn: async function({template, templateData, to, toName, subject, from, fromName, layout, replyTo, ensureAck, bcc, attachments}) {
 
     var path = require('path');
     var url = require('url');
@@ -247,6 +259,7 @@ module.exports = {
         subject: subjectLinePrefix+subject,
         from: from,
         fromName: fromName,
+        replyTo: replyTo,
         attachments
       };
 

website/package.json

@@ -13,7 +13,7 @@
     "moment": "2.29.4",
     "sails": "^1.5.11",
     "sails-hook-apianalytics": "^2.0.6",
-    "sails-hook-organics": "^2.2.2",
+    "sails-hook-organics": "^2.2.3",
     "sails-hook-orm": "^4.0.3",
     "sails-hook-sockets": "^3.0.0",
     "sails-postgresql": "^5.0.1"

website/views/emails/email-contact-form.ejs

@@ -0,0 +1,15 @@
+<% /* Note: This is NOT injected into an email layout` */ %>
+<div style="width: 100%; font-family: 'Inter','Helvetica','arial', sans-serif; box-sizing: border-box; padding: 0; margin: 0;">
+  <div style="color: #192147; font-size: 16px; box-sizing: border-box; padding: 40px 60px 80px 28px; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto;">
+    <div style="background: transparent; text-align: left;">
+      <a href="https://fleetdm.com"><img style="display: inline-block; width: 162px; height: 92px; width: auto;" alt="Logo" src="https://fleetdm.com/images/logo-blue-162x92@2x.png"/></a>
+    </div>
+    <div style="margin-bottom: 48px">
+      <p style="margin-bottom: 16px;"><strong>Message:</strong></p>
+      <pre ><code><%= message %></code></pre>
+      <p style="margin-bottom: 16px;"><strong>Submitter information:</strong></p>
+      <p style="margin-bottom: 16px;"><strong>Name:</strong> <%= firstName %> <%= lastName %></p>
+      <p style="margin-bottom: 16px;"><strong>Email address:</strong> <a href="mailto:<%= firstName %> <%= lastName %><<%= emailAddress %>>"><%= emailAddress %></a></p>
+    </div>
+  </div>
+</div>