feat: add email templating component

packages/components/AWSSES-server/CHANGELOG.md

-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-<a name="0.1.0"></a>
-
-# 0.1.0 (2018-02-16)
-
-### Bug Fixes
-
-* **component:** fix tests ([bf9d13e](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/bf9d13e))
-
-### Features
-
-* **component:** add aws ses package ([2e34627](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/2e34627))

packages/components/EmailTemplating-server/README.md

+# Email Templating
+
+## About
+
+The `email-templating` component contains an `EmailTemplate` class with one main instance method `sendEmail` for sending the email using the `send-email` component from PubSweet.
+
+1.  `sendEmail()`:
+    * uses the `send-email` component from PubSweet to actually send the email based on the Email properties passed in the constructor
+
+The `Email` class also provides a `constructor` whose properties will be used when sending the email:
+
+1.  `type`: a String that can be either `user` or `system` which can be used in the unsubscribe process
+2.  `fromEmail`: a String indicating the from name and from email address: `Coko <team@coko.foundation>`
+3.  `toUser`: an Object with two properties: `email` and `name`. The `name` property will be used when addressing the recipient in the email content - for example: "Dear Dr. Rachel Smith".
+4.  `content`: an Object which contains properties about the email:
+    * `subject`
+    * `paragraph`: the main text part of the email body which informs the recipient
+    * `signatureName` - the name which will appear in the signature
+    * `ctaLink` - the URL which will be placed in the button
+    * `ctaText` - the text which appears on the button
+    * `unsubscribeLink`
+    * `signatureJournal` - the journal or company name which will appear in the signature
+5.  `bodyProps`:
+    * `hasLink`: a boolean which indicates if the email body contains a CTA (big button) or not
+    * `hasIntro`: a boolean which indicates if the email body contains the "Dear Dr. John" introduction or not.
+    * `hasSignature`: a boolean which indicates if the email body contains a typical "Kind regards," signature or not
+
+## Usage
+
+1.  **Config**
+
+    In order to use this component, you need the to add the following data in your main config file:
+
+    ```javascript
+      journal: {
+        name: 'Coko Foundation',
+        staffEmail: 'Coko <team@coko.foundation>',
+        logo: 'https://coko.foundation/wp-content/uploads/2017/11/logo-coko.png',
+        ctaColor: '#EE2B77', // the color of the email button
+        logoLink: 'https://coko.foundation/',
+        publisher: 'Coko Foundation', // this will appear in the email footer
+        privacy: '', // a text containing information about the privacy policy that will appear in the email footer
+        address: '2973 16th St., Suite 300, San Francisco, CA 94103', // the address in the footer
+      },
+    ```
+
+1.  **Dependencies**
+
+    * [Pubsweet's Send Email](https://www.npmjs.com/package/@pubsweet/component-send-email)
+    * [Configure your Node.js Applications](https://www.npmjs.com/package/config)
+    * [Handlebars.js](https://www.npmjs.com/package/handlebars)
+
+1.  **Notifications**
+
+    These are the most basic emails, which contain at least a piece of text, called a paragraph, and may or may not contain an intro, an action button and a signature.
+
+    ![notification](https://gitlab.coko.foundation/xpub/xpub-faraday/uploads/27cb6acc8ff4a07758f55e5ea0504d28/notification.png)
+
+    ```javascript
+    const EmailTemplate = require('@pubsweet/component-email-template')
+    const config = require('config')
+
+    const { name: journalName, fromEmail: staffEmail } = config.get('journal')
+
+    const paragraph = `We are please to inform you that the manuscript has passed the technical check process and is now submitted. Please click the link below to access the manuscript.`
+
+    const sendNotifications = ({ user, editor, collection, fragment }) => {
+      const email = new EmailTemplate({
+        type: 'user',
+        fromEmail,
+        toUser: {
+          email: user.email,
+          name: `${user.lastName}`,
+        },
+        content: {
+          ctaText: 'MANUSCRIPT DETAILS',
+          signatureJournal: journalName,
+          signatureName: `${editor.name}`,
+          subject: `${collection.customId}: Manuscript Update`,
+          paragraph,
+          unsubscribeLink: `http://localhost:3000/unsubscribe/${user.id}`,
+          ctaLink: `http://localhost:3000/projects/${collection.id}/versions/${
+            fragment.id
+          }/details`,
+        },
+        bodyProps: {
+          hasLink: true,
+          hasIntro: true,
+          hasSignature: true,
+        },
+      })
+
+      return email.sendEmail()
+    }
+    ```
+
+1.  **Reviewer Invitation**
+    This email template is specific to Hindawi and it requires some data that might not be available in other PubSweet apps.
+
+    ![invitation](https://gitlab.coko.foundation/xpub/xpub-faraday/uploads/438af32b5da5532ed2bd6ca46588be50/Screen_Shot_2018-08-14_at_12.49.37.png)

packages/components/EmailTemplating-server/index.js

+module.exports = require('./src/EmailTemplate')

packages/components/EmailTemplating-server/package.json

+{
+  "name": "@pubsweet/component-email-templating",
+  "version": "0.0.1",
+  "description": "Send journal emails using templates from xPub/PubSweet",
+  "license": "MIT",
+  "author": "Collaborative Knowledge Foundation",
+  "files": [
+    "src"
+  ],
+  "main": "index.js",
+  "dependencies": {
+    "@pubsweet/component-send-email": "^0.2.4",
+    "handlebars": "^4.0.2"
+  },
+  "peerDependencies": {
+    "@pubsweet/logger": "^0.0.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.coko.foundation/pubsweet/pubsweet",
+    "path": "EmailTemplating"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/components/EmailTemplating-server/src/EmailTemplate.js

+const config = require('config')
+const htmlTemplateService = require('./HTMLTemplateService')
+const SendEmail = require('@pubsweet/component-send-email')
+const logger = require('@pubsweet/logger')
+
+const configData = {
+  logo: config.get('journal.logo'),
+  address: config.get('journal.address'),
+  privacy: config.get('journal.privacy'),
+  ctaColor: config.get('journal.ctaColor'),
+  logoLink: config.get('journal.logoLink'),
+  publisher: config.get('journal.publisher'),
+}
+class EmailTemplate {
+  constructor({
+    type = 'system',
+    templateType = 'notification',
+    fromEmail = config.get('journal.staffEmail'),
+    toUser = {
+      id: '',
+      email: '',
+      name: '',
+    },
+    content = {
+      subject: '',
+      ctaLink: '',
+      ctaText: '',
+      paragraph: '',
+      signatureName: '',
+      unsubscribeLink: '',
+      signatureJournal: '',
+    },
+    bodyProps = { hasLink: false, hasIntro: false, hasSignature: false },
+  }) {
+    this.type = type
+    this.toUser = toUser
+    this.content = content
+    this.bodyProps = bodyProps
+    this.fromEmail = fromEmail
+    this.templateType = templateType
+  }
+
+  set _toUser(newToUser) {
+    this.toUser = newToUser
+  }
+
+  set _subject(newSubject) {
+    this.subject = newSubject
+  }
+
+  set _content(newContent) {
+    this.content = newContent
+  }
+
+  _getInvitationBody() {
+    return {
+      html: htmlTemplateService.getCompiledInvitationBody({
+        replacements: {
+          ...configData,
+          ...this.content,
+          ...this.bodyProps,
+          toEmail: this.toUser.email,
+          toUserName: this.toUser.name,
+        },
+      }),
+      text: `${this.bodyProps.resend} ${this.bodyProps.upperContent} ${
+        this.bodyProps.manuscriptText
+      } ${this.bodyProps.lowerContent} ${this.content.signatureName}`,
+    }
+  }
+
+  _getNotificationBody() {
+    return {
+      html: htmlTemplateService.getCompiledNotificationBody({
+        replacements: {
+          ...configData,
+          ...this.content,
+          ...this.bodyProps,
+          toEmail: this.toUser.email,
+          toUserName: this.toUser.name,
+        },
+      }),
+      text: `${this.content.paragraph} ${this.content.ctaLink} ${
+        this.content.ctaText
+      } ${this.content.signatureName}`,
+    }
+  }
+
+  _getEmailTemplate() {
+    return this.templateType === 'notification'
+      ? this._getNotificationBody()
+      : this._getInvitationBody()
+  }
+
+  async sendEmail() {
+    const { html, text } = this._getEmailTemplate()
+
+    const { fromEmail: from } = this
+    const { email: to } = this.toUser
+    const { subject } = this.content
+
+    const mailData = {
+      to,
+      text,
+      html,
+      from,
+      subject,
+    }
+
+    try {
+      const email = await SendEmail.send(mailData)
+      logger.info(
+        `Sent email from: ${from} to: ${to} with subject: "${subject}"`,
+      )
+      logger.debug(
+        `Sent email from: ${from} to: ${to} with subject: "${subject}"`,
+      )
+      return email
+    } catch (e) {
+      logger.error(e)
+      throw new Error(e)
+    }
+  }
+}
+
+module.exports = EmailTemplate

packages/components/EmailTemplating-server/src/HTMLTemplateService.js

+const fs = require('fs')
+const handlebars = require('handlebars')
+
+const getCompiledNotificationBody = ({ replacements }) => {
+  handlePartial('header', replacements)
+  if (replacements.hasIntro) handlePartial('intro', replacements)
+  handlePartial('footer', replacements)
+  if (replacements.hasSignature) handlePartial('signature', replacements)
+  if (replacements.hasLink) handlePartial('button', replacements)
+  handlePartial('body', replacements)
+
+  return compileBody({ fileName: 'notification', context: replacements })
+}
+
+const getCompiledInvitationBody = ({ replacements }) => {
+  handlePartial('invHeader', replacements)
+  handlePartial('footer', replacements)
+  handlePartial('invUpperContent', replacements)
+  handlePartial('invButtons', replacements)
+  handlePartial('invManuscriptData', replacements)
+  handlePartial('signature', replacements)
+  handlePartial('invLowerContent', replacements)
+
+  return compileBody({ fileName: 'invitation', context: replacements })
+}
+
+const readFile = path => fs.readFileSync(path, 'utf-8')
+
+const handlePartial = (partialName, context = {}) => {
+  let partial = readFile(`${__dirname}/templates/partials/${partialName}.hbs`)
+  const template = handlebars.compile(partial)
+  partial = template(context)
+  handlebars.registerPartial(partialName, partial)
+}
+
+const compileBody = ({ fileName, context }) => {
+  const htmlFile = readFile(`${__dirname}/templates/${fileName}.html`)
+  const htmlTemplate = handlebars.compile(htmlFile)
+  const htmlBody = htmlTemplate(context)
+  return htmlBody
+}
+
+module.exports = {
+  getCompiledNotificationBody,
+  getCompiledInvitationBody,
+}

packages/components/EmailTemplating-server/src/templates/invitation.html

+{{> invHeader }}
+{{> invUpperContent }}
+{{> invButtons }}
+{{> invLowerContent }}
+{{> footer }}
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/notification.html

+{{> header }}
+{{> body }}
+{{> footer}}
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/body.hbs

+<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+  <tr>
+    <td style="padding:30px 23px 0px 23px;background-color:#ffffff;" height="100%" valign="top" bgcolor="#ffffff">
+      <div>
+        {{#if hasIntro}}
+          {{> intro}}
+        {{/if}}
+        <p>&nbsp;</p>
+        <p>
+          {{{paragraph}}}
+        </p>
+        <p>&nbsp;</p>
+        <p>
+          {{#if hasLink }}
+            {{> button }}
+          {{/if}}
+        </p>
+        {{#if hasSignature }}
+          {{> signature}}
+        {{/if}}
+        <p>&nbsp;</p>
+      </div>
+    </td>
+  </tr>
+</table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/button.hbs

+<table border="0" cellPadding="0" cellSpacing="0" class="module" data-role="module-button" data-type="button" role="module"
+  style="table-layout:fixed" width="100%">
+  <tbody>
+    <tr>
+      <td align="center" bgcolor="#FFFFFF" class="outer-td" style="padding:0px 0px 30px 0px;background-color:#FFFFFF">
+        <table border="0" cellPadding="0" cellSpacing="0" class="button-css__deep-table___2OZyb wrapper-mobile" style="text-align:center">
+          <tbody>
+            <tr>
+              <td align="center" bgcolor="{{ctaColor}}" class="inner-td" style="border-radius:6px;font-size:16px;text-align:center;background-color:inherit">
+                <a href="{{ ctaLink }}" style="background-color:{{ctaColor}};border:1px solid #333333;border-color:{{ctaColor}};border-radius:0px;border-width:1px;color:#ffffff;display:inline-block;font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:normal;letter-spacing:0px;line-height:16px;padding:12px 18px 12px 18px;text-align:center;text-decoration:none"
+                  target="_blank">{{ ctaText }}</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/footer.hbs

+<div data-role="module-unsubscribe" class="module unsubscribe-css__unsubscribe___2CDlR" role="module" data-type="unsubscribe"
+  style="color:#444444;font-size:12px;line-height:20px;padding:16px 16px 16px 16px;text-align:center">
+  <p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:20px;text-align:left">
+    This email was sent to <span class="footer-link">{{toEmail}}</span>. You have received this email in regards to the account creation, submission, or
+    peer review process of a paper submitted to a journal published by {{ publisher }}.
+  </p>
+  <div class="Unsubscribe--addressLine">
+    <p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:20px;text-align:left">
+      {{ address }}
+    </p>
+  </div>
+  <p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:20px;text-align:left">
+  </p>
+  <p style="font-family:Arial, Helvetica, sans-serif;font-size:11px;line-height:20px;text-align:left">
+    {{{ privacy }}}
+  </p>
+  <p style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:20px">
+    <a class="Unsubscribe--unsubscribeLink" href="{{ unsubscribeLink }}">Unsubscribe</a>
+  </p>
+</div>
+</td>
+</tr>
+</table>
+<!--[if mso]>
+                          </td></tr></table>
+                          </center>
+                          <![endif]-->
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</td>
+</tr>
+</table>
+</div>
+</center>
+</body>
+
+</html>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/header.hbs

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <!--<![endif]-->
+  <!--[if (gte mso 9)|(IE)]>
+    <xml>
+    <o:OfficeDocumentSettings>
+    <o:AllowPNG/>
+    <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    <![endif]-->
+  <!--[if (gte mso 9)|(IE)]>
+    <style type="text/css">
+      body {width: 600px;margin: 0 auto;}
+      table {border-collapse: collapse;}
+      table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
+      img {-ms-interpolation-mode: bicubic;}
+    </style>
+    <![endif]-->
+
+  <style type="text/css">
+    body,
+    p,
+    div {
+      font-family: helvetica, arial, sans-serif;
+      font-size: 14px;
+    }
+
+    body {
+      color: #626262;
+    }
+
+    body a {
+      color: #0D78F2;
+      text-decoration: none;
+    }
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    table.wrapper {
+      width: 100% !important;
+      table-layout: fixed;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: 100%;
+      -moz-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+
+    img.max-width {
+      max-width: 100% !important;
+    }
+
+    .column.of-2 {
+      width: 50%;
+    }
+
+    .column.of-3 {
+      width: 33.333%;
+    }
+
+    .column.of-4 {
+      width: 25%;
+    }
+
+    @media screen and (max-width:480px) {
+      .preheader .rightColumnContent,
+      .footer .rightColumnContent {
+        text-align: left !important;
+      }
+      .preheader .rightColumnContent div,
+      .preheader .rightColumnContent span,
+      .footer .rightColumnContent div,
+      .footer .rightColumnContent span {
+        text-align: left !important;
+      }
+      .preheader .rightColumnContent,
+      .preheader .leftColumnContent {
+        font-size: 80% !important;
+        padding: 5px 0;
+      }
+      table.wrapper-mobile {
+        width: 100% !important;
+        table-layout: fixed;
+      }
+      img.max-width {
+        height: auto !important;
+        max-width: 480px !important;
+      }
+      a.bulletproof-button {
+        display: block !important;
+        width: auto !important;
+        font-size: 80%;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+      .columns {
+        width: 100% !important;
+      }
+      .column {
+        display: block !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+    }
+  </style>
+  <!--user entered Head Start-->
+
+  <!--End Head user entered-->
+</head>
+
+<body>
+  <center class="wrapper" data-link-color="#0D78F2" data-body-style="font-size: 14px; font-family: helvetica,arial,sans-serif; color: #626262; background-color: #F4F4F4;">
+    <div class="webkit">
+      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#F4F4F4">
+        <tr>
+          <td valign="top" bgcolor="#F4F4F4" width="100%">
+            <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
+              <tr>
+                <td width="100%">
+                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                    <tr>
+                      <td>
+                        <!--[if mso]>
+                          <center>
+                          <table><tr><td width="600">
+                          <![endif]-->
+                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
+                          <tr>
+                            <td role="modules-container" style="padding: 0px 0px 0px 0px; color: #626262; text-align: left;" bgcolor="#F4F4F4" width="100%"
+                              align="left">
+
+                              <table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0"
+                                width="100%" style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
+                                <tr>
+                                  <td role="module-content">
+                                    <p>you have a new notification</p>
+                                  </td>
+                                </tr>
+                              </table>
+
+                              <table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+                                <tr>
+                                  <td style="font-size:6px;line-height:10px;padding:20px 0px 20px 0px;" valign="top" align="center">
+                                   <a href="{{ logoLink }}">
+                                      <img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:10% !important;width:10%;height:auto !important;"
+                                        src="{{ logo }}"
+                                        alt="" width="60">
+                                    </a>
+                                  </td>
+                                </tr>
+                              </table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/intro.hbs

+<p data-pm-slice="1 1 []">Dear Dr. {{toUserName}},</p>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/invButtons.hbs

+<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns"
+  data-version="2" style="padding:0px 0px 0px 0px;box-sizing:border-box;" bgcolor="">
+  <tr role='module-content'>
+    <td height="100%" valign="top">
+      <!--[if (gte mso 9)|(IE)]>
+              <center>
+                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing:0;border-collapse:collapse;table-layout: fixed;" >
+                  <tr>
+            <![endif]-->
+
+      <!--[if (gte mso 9)|(IE)]>
+      <td width="300.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
+    <![endif]-->
+
+      <table width="300.000" style="width:'50%';border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
+        cellpadding="0" cellspacing="0" align="left" border="0" bgcolor="" class="column column-0 of-2
+                  empty">
+        <tr>
+          <td style="padding:0px;margin:0px;border-spacing:0;">
+            <table border="0" cellPadding="0" cellSpacing="0" class="module" data-role="module-button" data-type="button"
+              role="module" style="table-layout:fixed" width="100%">
+              <tbody>
+                <tr>
+                  <td align="center" class="outer-td padding-decline">
+                    <table border="0" cellPadding="0" cellSpacing="0" class="button-css__deep-table___2OZyb wrapper-mobile"
+                      style="text-align:center">
+                      <tbody>
+                        <tr>
+                          <td align="center" bgcolor="#f6f6f6" class="inner-td" style="border-radius:6px;font-size:16px;text-align:center;background-color:inherit"><a
+                              style="background-color:#f6f6f6;border:1px solid #333333;border-color:#586971;border-radius:5px;border-width:2px;color:#586971;display:inline-block;font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:15px;padding:12px 18px 12px 18px;text-align:center;text-decoration:none;width:172px"
+                              href="{{ declineLink }} " target="_blank">DECLINE</a></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </table>
+
+      <!--[if (gte mso 9)|(IE)]>
+      </td>
+    <![endif]-->
+      <!--[if (gte mso 9)|(IE)]>
+      <td width="300.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
+    <![endif]-->
+
+      <table width="300.000" style="width:'50%';border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
+        cellpadding="0" cellspacing="0" align="left" border="0" bgcolor="" class="column column-1 of-2
+                  empty">
+        <tr>
+          <td style="padding:0px;margin:0px;border-spacing:0;">
+            <table border="0" cellPadding="0" cellSpacing="0" class="module" data-role="module-button" data-type="button"
+              role="module" style="table-layout:fixed" width="100%">
+              <tbody>
+                <tr>
+                  <td align="center" class="outer-td padding-agree">
+                    <table border="0" cellPadding="0" cellSpacing="0" class="button-css__deep-table___2OZyb wrapper-mobile"
+                      style="text-align:center">
+                      <tbody>
+                        <tr>
+                          <td align="center" bgcolor="#63a945" class="inner-td" style="border-radius:6px;font-size:16px;text-align:center;background-color:inherit"><a
+                              style="background-color:#63a945;border:1px solid #333333;border-color:#63A945;border-radius:5px;border-width:2px;color:#f6f6f6;display:inline-block;font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:15px;padding:12px 18px 12px 18px;text-align:center;text-decoration:none;width:172px"
+                              href="{{ agreeLink }}" target="_blank">AGREE</a></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </table>
+
+      <!--[if (gte mso 9)|(IE)]>
+      </td>
+    <![endif]-->
+      <!--[if (gte mso 9)|(IE)]>
+                  <tr>
+                </table>
+              </center>
+            <![endif]-->
+    </td>
+  </tr>
+</table>
+
+<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+  <tr>
+    <td style="padding:8px 50px 32px 50px;line-height:20px;text-align:inherit;" height="100%" valign="top" bgcolor="">
+      <div>
+        <div>
+          <div>
+            <div style="text-align: center;" tabindex="1"><span style="font-size:12px;">{{ subText }}</span></div>
+          </div>
+        </div>
+      </div>
+    </td>
+  </tr>
+</table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/invHeader.hbs

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <!--<![endif]-->
+  <!--[if (gte mso 9)|(IE)]>
+    <xml>
+    <o:OfficeDocumentSettings>
+    <o:AllowPNG/>
+    <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    <![endif]-->
+  <!--[if (gte mso 9)|(IE)]>
+    <style type="text/css">
+      body {width: 600px;margin: 0 auto;}
+      table {border-collapse: collapse;}
+      table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
+      img {-ms-interpolation-mode: bicubic;}
+    </style>
+    <![endif]-->
+
+  <style type="text/css">
+    body,
+    p,
+    div {
+      font-family: helvetica, arial, sans-serif;
+      font-size: 14px;
+    }
+
+    body {
+      color: #626262;
+    }
+
+    body a {
+      color: #007e92;
+      text-decoration: none;
+    }
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    table.wrapper {
+      width: 100% !important;
+      table-layout: fixed;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-size-adjust: 100%;
+      -moz-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+
+    img.max-width {
+      max-width: 100% !important;
+    }
+
+    .column.of-2 {
+      width: 50%;
+    }
+
+    .column.of-3 {
+      width: 33.333%;
+    }
+
+    .column.of-4 {
+      width: 25%;
+    }
+
+    .footer-link a {
+      color: #444444;
+      text-decoration: none;
+    }
+
+    .padding-decline {
+      padding:0px 0px 0px 50px;
+    }
+
+    .padding-agree {
+      padding:0px 50px 0px 0px;
+    }
+
+    @media screen and (max-width:480px) {
+
+      .preheader .rightColumnContent,
+      .footer .rightColumnContent {
+        text-align: left !important;
+      }
+
+      .preheader .rightColumnContent div,
+      .preheader .rightColumnContent span,
+      .footer .rightColumnContent div,
+      .footer .rightColumnContent span {
+        text-align: left !important;
+      }
+
+      .preheader .rightColumnContent,
+      .preheader .leftColumnContent {
+        font-size: 80% !important;
+        padding: 5px 0;
+      }
+
+      table.wrapper-mobile {
+        width: 100% !important;
+        table-layout: fixed;
+      }
+
+      img.max-width {
+        height: auto !important;
+        max-width: 480px !important;
+      }
+
+      a.bulletproof-button {
+        display: block !important;
+        width: auto !important;
+        font-size: 80%;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+
+      .columns {
+        width: 100% !important;
+      }
+
+      .column {
+        display: block !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+
+      .padding-decline {
+        padding: 0px;
+      }
+
+      .padding-agree {
+        padding: 10px 0px 0px 0px;
+      }
+    }
+  </style>
+  <!--user entered Head Start-->
+
+  <!--End Head user entered-->
+</head>
+
+<body>
+  <center class="wrapper" data-link-color="#0D78F2" data-body-style="font-size: 14px; font-family: helvetica,arial,sans-serif; color: #626262; background-color: #F4F4F4;">
+    <div class="webkit">
+      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#F4F4F4">
+        <tr>
+          <td valign="top" bgcolor="#F4F4F4" width="100%">
+            <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0"
+              border="0">
+              <tr>
+                <td width="100%">
+                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                    <tr>
+                      <td>
+                        <!--[if mso]>
+                          <center>
+                          <table><tr><td width="600">
+                          <![endif]-->
+                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;"
+                          align="center">
+                          <tr>
+                            <td role="modules-container" style="padding: 0px 0px 0px 0px; color: #626262; text-align: left;"
+                              bgcolor="#F4F4F4" width="100%" align="left">
+
+                              <table class="wrapper" role="module" data-type="image" border="0" cellpadding="0"
+                                cellspacing="0" width="100%" style="table-layout: fixed;">
+                                <tr>
+                                  <td style="font-size:6px;line-height:10px;padding:32px 0px 24px 0px;" valign="top"
+                                    align="center">
+                                    <a href="{{ logoLink }}">
+                                      <img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:10% !important;width:10%;height:auto !important;"
+                                        src="{{ logo }}" alt="Hindawi Logo" width="60">
+                                    </a>
+                                  </td>
+                                </tr>
+                              </table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/invLowerContent.hbs

+{{#unless resend }}
+{{> invManuscriptData }}
+{{/unless}}
+
+<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+  <tr>
+    <td style="padding:0px 50px 0px 50px;line-height:18px;text-align:inherit;" height="100%" valign="top" bgcolor="">
+      <div>
+        <span style="font-size:14px;">
+          <span style="color:#242424;">
+            {{{ lowerContent }}}
+            {{ lowerContentLink }}
+          </span>
+        </span>
+      </div>
+      <div>&nbsp;</div>
+      {{> signature}}
+    </td>
+  </tr>
+</table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/invManuscriptData.hbs

+<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns"
+  data-version="2" style="padding:0px 34px 17px 34px;box-sizing:border-box;" bgcolor="">
+  <tr role='module-content'>
+    <td height="100%" valign="top">
+      <!--[if (gte mso 9)|(IE)]>
+              <center>
+                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-spacing:0;border-collapse:collapse;table-layout: fixed;" >
+                  <tr>
+            <![endif]-->
+
+      <!--[if (gte mso 9)|(IE)]>
+      <td width="532.000px" valign="top" style="padding: 0px 0px 0px 0px;border-collapse: collapse;" >
+    <![endif]-->
+
+      <table width="532.000" style="width:532.000px;border-spacing:0;border-collapse:collapse;margin:0px 0px 0px 0px;"
+        cellpadding="0" cellspacing="0" align="left" border="0" bgcolor="" class="column column-0 of-1
+                  empty">
+        <tr>
+          <td style="padding:0px;margin:0px;border-spacing:0;">
+
+            <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%"
+              style="table-layout: fixed;">
+              <tr>
+                <td style="box-shadow: 0px 1px 2px 1px #dbdbdb;background-color:#ffffff;padding:16px 16px 16px 16px;line-height:20px;text-align:inherit;border-radius:3px;"
+                  height="100%" valign="top" bgcolor="#ffffff">
+                  <div><span style="font-size:18px;font-weight:600;"><span style="color:#007e92;">{{ title }}</span></span></div>
+
+                  <div>&nbsp;</div>
+
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <p tabindex="1"><span style="color:#242424;"><span style="font-size:14px;">{{ authorsList }}</span></span></p>
+
+                          <p tabindex="1">&nbsp;</p>
+
+                          <p tabindex="1"><span style="color:#242424;"><span style="font-size:14px;">{{ abstract }}</span></span></p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                </td>
+              </tr>
+            </table>
+
+          </td>
+        </tr>
+      </table>
+
+      <!--[if (gte mso 9)|(IE)]>
+      </td>
+    <![endif]-->
+      <!--[if (gte mso 9)|(IE)]>
+                  <tr>
+                </table>
+              </center>
+            <![endif]-->
+    </td>
+  </tr>
+</table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/invUpperContent.hbs

+<table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+  <tr>
+    <td style="padding:0px 50px 32px 50px;line-height:18px;" height="100%" valign="top" bgcolor="">
+      <div>
+        <div data-pm-slice="1 1 []"><span style="color:#242424;"><span style="font-size:14px;">
+              Dear Dr. {{ toUserName}},<br>
+
+              <div data-pm-slice="1 1 []">&nbsp;</div>
+
+              <div data-pm-slice="1 1 []">
+                <span style="color:#242424;">
+                  <span style="font-size:14px;">
+                    {{{ upperContent }}}
+                    {{{ manuscriptText }}}
+                  </span>
+                </span>
+              </div>
+        </div>
+    </td>
+  </tr>
+</table>
\ No newline at end of file

packages/components/EmailTemplating-server/src/templates/partials/signature.hbs

+<div><span style="font-size:14px;"><span style="color:#242424;">Kind regards,</span></span></div>
+
+<div><span style="font-size:14px;"><span style="color:#242424;">{{ signatureName }}</span></span></div>
+
+<div><span style="font-size:14px;"><span style="color:#242424;">{{ signatureJournal }}</span></span></div>
\ No newline at end of file