@designsystemsinternational/email 0.0.2 → 0.0.4

package/dist/esm/index.js

@@ -0,0 +1,620 @@
+import posthtml from 'posthtml';
+import removeTags from 'posthtml-remove-tags';
+import removeAttributes from 'posthtml-remove-attributes';
+import matchHelper from 'posthtml-match-helper';
+import colorConvert from 'color-convert';
+import unescape from 'lodash.unescape';
+import compressing from 'compressing';
+import getStream from 'get-stream';
+import mailchimpAPI from '@mailchimp/mailchimp_marketing';
+import AWS from 'aws-sdk';
+import nodemailer from 'nodemailer';
+
+/**
+ * Generates a deterministic random string based on the input string.
+ *
+ * @param {string} str Input string
+ * @return {string} hash of str
+ */
+const hashFromString = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash.toString();
+};
+
+/**
+ * Formats a string to a filename by turning it into kebab case
+ *
+ * @param {string} text
+ * @return {string} formatted filename
+ */
+const formatFilename = (text) => {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, ' ')
+    .trim()
+    .replace(/\s+/g, '-');
+};
+
+/**
+ * Converts all rgb defined colors with their hex equivalent
+ * as some email clients only support hex color format.
+ */
+const convertRgbToHex = () => {
+  return (tree) => {
+    tree.match(matchHelper('[style]'), (node) => {
+      let styleBlock = node.attrs.style;
+      styleBlock = styleBlock.replace(
+        /rgb\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3}\)/g,
+        (match) => {
+          const values = match
+            .replace(/[rgb() ]/g, '')
+            .split(',')
+            .map((n) => parseInt(n));
+          return '#' + colorConvert.rgb.hex(values);
+        },
+      );
+      node.attrs.style = styleBlock;
+      return node;
+    });
+
+    return tree;
+  };
+};
+
+/**
+ * Prepares HTML by only returning the body tag, to make sure
+ */
+const onlyReturnBody = () => {
+  return (tree) => {
+    tree.match({ tag: 'body' }, (node) => {
+      return node.content;
+    });
+
+    return tree;
+  };
+};
+
+/**
+ * Rewrites the markup by turning all conditional comments returned from the
+ * <ConditionalComment> component into true conditional comments that can be
+ * picked up by Outlook.
+ */
+const injectConditionalComments = () => {
+  return (tree) => {
+    tree.match(matchHelper('[data-conditional-comment]'), (node) => {
+      const comment = node.attrs['data-conditional-comment'];
+
+      // Remove HTML comment delimiters
+      const cleanedComment = unescape(comment).replace(/<!--|-->/g, '');
+
+      // Remove Line breaks from comment
+      const cleanedCommentLines = cleanedComment.split('\n').join('');
+
+      node = `<!--${cleanedCommentLines}-->`;
+      return node;
+    });
+    return tree;
+  };
+};
+
+/**
+ * Rewrites the markup by adding all styles defined in the data-mso-style
+ * attribute to the <style> tag. This is needed because the mso styles are
+ * non-standard CSS, so they cannot be added to React's style tag.
+ */
+const injectMsoStyles = () => {
+  return (tree) => {
+    tree.match(matchHelper('[data-mso-style]'), (node) => {
+      if (node.attrs?.style == null) node.attrs.style = '';
+      node.attrs.style += node.attrs['data-mso-style'];
+      node.attrs['data-mso-style'] = null;
+      return node;
+    });
+    return tree;
+  };
+};
+
+/**
+ * Collects all inline styles defined in the components, de-dedupes them and
+ * moves them to a single unified style tag in the head of the document.
+ */
+const moveInlineStylesToHead = () => {
+  let styles = {};
+
+  return (tree) => {
+    tree.match({ tag: 'style' }, (node) => {
+      if (!node.content) return '';
+      const styleBlock = node.content[0].trim();
+      const hash = hashFromString(styleBlock);
+
+      if (styleBlock) {
+        styles[hash] = styleBlock;
+      }
+
+      // Remove the inline style node
+      return '';
+    });
+
+    tree.match({ tag: 'head' }, (node) => {
+      node.content.push({
+        tag: 'style',
+        content: Object.values(styles).join(''),
+      });
+
+      return node;
+    });
+
+    return tree;
+  };
+};
+
+const prepareHtmlFactory = (plugins) => {
+  const htmlProcessor = posthtml();
+
+  plugins.forEach((plugin) => {
+    htmlProcessor.use(plugin);
+  });
+
+  return async (body, template = (str) => str) => {
+    const content = template(body);
+
+    const processed = await htmlProcessor.process(content);
+
+    return processed.html;
+  };
+};
+
+/**
+ * This default pipeline removes all script and link tags from the HTML,
+ * moves all inline styles to the head and wraps everything in the email template.
+ *
+ * @param {string} body - the html body
+ * @param {function} template - the template function, defaults to no template
+ */
+const defaultPipeline = prepareHtmlFactory([
+  onlyReturnBody(),
+  removeTags({ tags: ['script', 'link'] }),
+  convertRgbToHex(),
+  moveInlineStylesToHead(),
+  injectMsoStyles(),
+  injectConditionalComments(),
+  removeAttributes(['data-reactid', 'data-reactroot']),
+]);
+
+const BASE64_REGEX = /data:image\/([a-zA-Z]*);base64,(.*)/;
+
+// NODE.JS packacking factory
+
+/**
+ * Turns base64 inlined images into image buffers and updates their src
+ * attribute accordingly. Returns an object containing the updated html and
+ * an array of image buffers. Different adapters can then hook into this to
+ * process the email into a ZIP archive or pushing it to an API.
+ *
+ * @param {string} body - the prepared html body
+ * @return {object} the processed html and buffers for all images
+ */
+const preparePackageFactory =
+  ({ urlPrefix = '', handlePackage }) =>
+  async (body, opts = {}) => {
+    let counter = 0;
+    const images = [];
+
+    const processed = await posthtml()
+      .use((tree) => {
+        tree.match({ tag: 'img' }, (node) => {
+          const { src, alt } = node.attrs;
+
+          if (BASE64_REGEX.test(src)) {
+            const [_, ext, data] = src.match(
+              /data:image\/([a-zA-Z]*);base64,(.*)/,
+            );
+
+            const hash = hashFromString(`${data}`);
+
+            const filename = alt
+              ? `${formatFilename(alt)}-text-${hash}.${ext}`
+              : `image-${counter}.${ext}`;
+
+            node.attrs.src = `${urlPrefix}${filename}`;
+
+            const imgBuffer = Buffer.from(data, 'base64');
+
+            images.push({
+              filename,
+              buffer: imgBuffer,
+            });
+
+            counter++;
+          }
+          return node;
+        });
+
+        return tree;
+      })
+      .process(body);
+
+    return await handlePackage(
+      {
+        html: processed.html,
+        images,
+      },
+      opts,
+    );
+  };
+
+const makeDefaultTemplate =
+  ({ lang = 'en-US', dir = 'ltr' } = {}) =>
+  (body) =>
+    `<!doctype html>
+<html
+  lang="${lang}"
+  xml:lang="${lang}"
+  dir="${dir}"
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:o="urn:schemas-microsoft-com:office:office"
+>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Chief</title>
+    <!--[if mso]>
+      <style type="text/css">
+        table {
+          border-collapse: collapse;
+          border: 0;
+          border-spacing: 0;
+          margin: 0;
+          mso-table-lspace: 0pt !important;
+          mso-table-rspace: 0pt !important;
+        }
+
+        img {
+          display: block !important;
+        }
+
+        div, td {padding:0;}
+
+        div {margin:0 !important;}
+
+        .notMso {
+          display: none;
+          mso-hide: all;
+        }
+      </style>
+      <noscript>
+        <xml>
+          <o:OfficeDocumentSettings>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+          </o:OfficeDocumentSettings>
+        </xml>
+      </noscript>
+    <![endif]-->
+    <meta name="x-apple-disable-message-reformatting" />
+    <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="color-scheme" content="light" />
+    <meta name="supported-color-schemes" content="light" />
+
+    <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="date=no">
+    <meta name="format-detection" content="address=no">
+    <meta name="format-detection" content="email=no">
+
+    <style>
+      a[x-apple-data-detectors] {
+        color: inherit !important;
+
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+        text-decoration: inherit !important;
+      }
+      
+      #MessageViewBody a:not([style]) {
+        color: inherit !important;
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+        text-decoration: inherit !important;
+      }
+    </style>
+  </head>
+  <body class="body" style="padding:0;">
+    ${body}
+  </body>
+</html>`;
+
+const defaultTemplate = makeDefaultTemplate();
+
+/**
+ * Turns an HTML email into a ZIP package and saves that ZIP file to disk.
+ *
+ * @param {string} body - the prepared html body
+ * @return {Buffer} the zip file buffer
+ */
+const packageToZip = preparePackageFactory({
+  urlPrefix: '',
+  handlePackage: async ({ html, images }) => {
+    const zipStream = new compressing.zip.Stream();
+    const htmlEntry = Buffer.from(html, 'utf8');
+    zipStream.addEntry(htmlEntry, { relativePath: `./index.html` });
+
+    images.forEach(({ filename, buffer }) => {
+      zipStream.addEntry(buffer, { relativePath: `./${filename}` });
+    });
+
+    const zipBuffer = await getStream.buffer(zipStream);
+    return zipBuffer;
+  },
+});
+
+const defaultOptions = {
+  mailchimpId: null,
+  mailchimpAPIKey: null,
+  mailchimpServerPrefix: null,
+};
+
+const getIdForCampaign = async (campaignId, mailchimpApi, offset = 0) => {
+  if (!campaignId) throw new Error('No campaign ID provided');
+
+  const count = 100;
+
+  try {
+    const response = await mailchimpApi.campaigns.list({
+      count,
+      offset,
+      sortField: 'create_time',
+      sortDir: 'DESC',
+    });
+
+    const campaign = response.campaigns.find(
+      (campaign) => campaign.web_id == campaignId,
+    );
+
+    if (!campaign && response.total_items > count + offset) {
+      return await getIdForCampaign(campaignId, offset + count);
+    }
+    if (!campaign) {
+      throw new Error(`No mailchimp campaign found for ${campaignId}`);
+    }
+    if (['sending', 'sent'].includes(campaign.status)) {
+      throw new Error("Campaign already sent. Can't update content  ¯_(ツ)_/¯");
+    }
+
+    return { campaignId: campaign?.id };
+  } catch (e) {
+    throw new Error(e.message);
+  }
+};
+
+const publish = async (campaignId, zipFile, mailchimpApi) => {
+  if (!campaignId) throw new Error('No campaign ID provided');
+  if (!zipFile) throw new Error('No zip file provided');
+
+  try {
+    const response = await mailchimpApi.campaigns.setContent(campaignId, {
+      archive: {
+        archive_type: 'tar',
+        archive_content: zipFile,
+      },
+    });
+
+    return response;
+  } catch (e) {
+    throw new Error(e.message);
+  }
+};
+
+const prepareEmailToTarBuffer = async (html, images) => {
+  const tarStream = new compressing.tar.Stream();
+
+  const htmlEntry = Buffer.from(html, 'utf8');
+  tarStream.addEntry(htmlEntry, { relativePath: `./index.html` });
+
+  images.forEach(({ filename, buffer }) => {
+    tarStream.addEntry(buffer, { relativePath: `./${filename}` });
+  });
+
+  const tarBuffer = await getStream.buffer(tarStream);
+
+  return tarBuffer.toString('base64');
+};
+
+/**
+ * Publishes the eamil to mailchimp
+ *
+ * @param {string} body - the prepared html body
+ * @param {object} options - the options object containing { mailchimpId, mailchimpAPIKey, mailchimpServerPrefix }
+ */
+const packageToMailchimp = preparePackageFactory({
+  urlPrefix: '',
+  handlePackage: async ({ html, images }, opts) => {
+    const config = Object.assign({}, defaultOptions, opts);
+
+    const { mailchimpId, mailchimpAPIKey } = config;
+    if (mailchimpId === null) throw new Error('mailchimpId is required');
+    if (mailchimpAPIKey === null) throw new Error('mailchimpAPIKey is quired');
+
+    const mailchimpServerPrefix =
+      config.mailchimpServerPrefix || mailchimpAPIKey.split('-').pop();
+
+    mailchimpAPI.setConfig({
+      apiKey: mailchimpAPIKey,
+      server: mailchimpServerPrefix,
+    });
+
+    const { campaignId } = await getIdForCampaign(mailchimpId, mailchimpAPI);
+    const tarBuffer = await prepareEmailToTarBuffer(html, images);
+    await publish(campaignId, tarBuffer, mailchimpAPI);
+
+    return campaignId;
+  },
+});
+
+/**
+ * Extracts the images from the HTML and publishes the package to S3
+ * Returns the HTML with all image URLs updated to point to S3
+ *
+ * @param {string} body - the prepared html body
+ * @param {object} options - the options object containing { awsAccessKeyId, awsSecretAccessKey, awsBucket, url, prefix }
+ * @return {string} HTML of the mail with all image URLs updated to point to S3
+ */
+const packageToS3 = async (body, opts = {}) => {
+  const {
+    awsAccessKeyId,
+    awsSecretAccessKey,
+    awsBucket,
+    url,
+    prefix = '',
+  } = opts;
+
+  if (!awsAccessKeyId) throw new Error('awsAccessKeyId is required');
+  if (!awsSecretAccessKey) throw new Error('awsSecretAccessKey is required');
+  if (!awsBucket) throw new Error('awsBucket is required');
+
+  const s3 = new AWS.S3({
+    accessKeyId: awsAccessKeyId,
+    secretAccessKey: awsSecretAccessKey,
+  });
+
+  const uploadFileToS3 = async (buffer, filename) => {
+    await s3
+      .upload({
+        Bucket: awsBucket,
+        Key: `${prefix}${filename}`,
+        Body: buffer,
+        ACL: 'public-read',
+        CacheControl: 'no-store',
+      })
+      .promise();
+  };
+
+  const runUpload = preparePackageFactory({
+    urlPrefix: `${url}${prefix}`,
+    handlePackage: async ({ html, images }) => {
+      const htmlBuffer = Buffer.from(html, 'utf8');
+      await uploadFileToS3(htmlBuffer, 'index.html');
+
+      for (const image of images) {
+        await uploadFileToS3(image.buffer, image.filename);
+      }
+
+      return html;
+    },
+  });
+
+  return await runUpload(body);
+};
+
+const sendEmailSes = async (
+  { fromName, fromEmail, toName, toEmail, subject, plainBody, htmlBody },
+  opts = {},
+) => {
+  const { awsAccessKeyId, awsSecretAccessKey } = opts;
+
+  if (!awsAccessKeyId) throw new Error('awsAccessKeyId is required');
+  if (!awsSecretAccessKey) throw new Error('awsSecretAccessKey is required');
+
+  const fromAddress = fromName ? `"${fromName}" <${fromEmail}>` : fromEmail;
+  const toAddress = toName ? `"${toName}" <${toEmail}>` : toEmail;
+
+  const ses = new AWS.SES({
+    accessKeyId: awsAccessKeyId,
+    secretAccessKey: awsSecretAccessKey,
+    region: 'us-east-1',
+    httpOptions: { timeout: 5000 },
+  });
+
+  const emailRes = await ses
+    .sendEmail({
+      Source: fromAddress,
+      Destination: {
+        ToAddresses: [toAddress],
+      },
+      Message: {
+        Subject: {
+          Charset: 'UTF-8',
+          Data: subject,
+        },
+        Body: {
+          Html: {
+            Charset: 'UTF-8',
+            Data: htmlBody,
+          },
+          Text: {
+            Charset: 'UTF-8',
+            Data: plainBody,
+          },
+        },
+      },
+    })
+    .promise();
+  if (!emailRes.MessageId) {
+    throw new Error('Failed to send email');
+  } else {
+    return true;
+  }
+};
+
+/**
+ * Turns nodemailer's callback style API into a promise
+ */
+const performSend = async (transporter, message) => {
+  return new Promise((resolve, reject) => {
+    transporter.sendMail(message, (error, info) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(info);
+      }
+    });
+  });
+};
+
+/**
+ * Sends an email via SMTP
+ *
+ * @param {object} email - The email object { fromName, fromEmail, toName, toEmail, subject, plainBody, htmlBody }
+ * @param {object} options - The options object { smtpHost, smtpPort, smtpUser, smtpPass, useTLS }
+ */
+const sendEmailSMTP = async (
+  { fromName, fromEmail, toName, toEmail, subject, plainBody, htmlBody },
+  { smtpHost, smtpPort = 25, smtpUser, smtpPass, useTLS = true } = {},
+) => {
+  if (!smtpHost) throw new Error('SMTP host is required');
+  if (!smtpUser) throw new Error('SMTP user is required');
+  if (!smtpPass) throw new Error('SMTP pass is required');
+
+  const fromAddress = fromName ? `"${fromName}" <${fromEmail}>` : fromEmail;
+  const toAddress = toName ? `"${toName}" <${toEmail}>` : toEmail;
+
+  const transporter = nodemailer.createTransport({
+    host: smtpHost,
+    port: smtpPort,
+    secure: useTLS,
+    auth: {
+      user: smtpUser,
+      pass: smtpPass,
+    },
+  });
+
+  const message = {
+    from: fromAddress,
+    to: toAddress,
+    subject,
+    text: plainBody,
+    html: htmlBody,
+  };
+
+  await performSend(transporter, message);
+};
+
+export { defaultTemplate, makeDefaultTemplate, packageToMailchimp, packageToS3, packageToZip, defaultPipeline as prepareHtml, prepareHtmlFactory, preparePackageFactory, sendEmailSMTP, sendEmailSes };