ghost 5.110.4 → 5.112.0

package/core/server/services/staff/StaffServiceEmails.js

@@ -0,0 +1,527 @@
+const {promises: fs, readFileSync} = require('fs');
+const path = require('path');
+const moment = require('moment');
+const glob = require('glob');
+const {EmailAddressParser} = require('@tryghost/email-addresses');
+
+class StaffServiceEmails {
+    constructor({logging, models, mailer, settingsHelpers, settingsCache, blogIcon, urlUtils, labs}) {
+        this.logging = logging;
+        this.models = models;
+        this.mailer = mailer;
+        this.settingsHelpers = settingsHelpers;
+        this.settingsCache = settingsCache;
+        this.blogIcon = blogIcon;
+        this.urlUtils = urlUtils;
+        this.labs = labs;
+
+        this.Handlebars = require('handlebars').create();
+        this.registerPartials();
+        this.registerHelpers();
+    }
+
+    async notifyFreeMemberSignup({
+        member, attribution
+    }, options) {
+        const users = await this.models.User.getEmailAlertUsers('free-signup', options);
+
+        for (const user of users) {
+            const to = user.email;
+            const memberData = this.getMemberData(member);
+
+            const subject = `🥳 Free member signup: ${memberData.name}`;
+
+            let attributionTitle = attribution?.title || '';
+            // In case of a homepage attribution, we want to show the title as "Homepage" on email
+            if (attributionTitle === 'homepage') {
+                attributionTitle = 'Homepage';
+            }
+
+            let staffUrl = this.urlUtils.urlJoin(this.urlUtils.urlFor('admin', true), '#', `/settings/staff/${user.slug}`);
+
+            const templateData = {
+                memberData,
+                attributionTitle,
+                attributionUrl: attribution?.url || '',
+                referrerSource: attribution?.referrerSource,
+                siteTitle: this.settingsCache.get('title'),
+                siteIconUrl: this.blogIcon.getIconUrl({absolute: true, fallbackToDefault: false}),
+                siteUrl: this.urlUtils.getSiteUrl(),
+                siteDomain: this.siteDomain,
+                accentColor: this.settingsCache.get('accent_color'),
+                fromEmail: this.fromEmailAddress,
+                toEmail: to,
+                staffUrl: staffUrl
+            };
+
+            const {html, text} = await this.renderEmailTemplate('new-free-signup', templateData);
+
+            await this.sendMail({
+                to,
+                subject,
+                html,
+                text
+            });
+        }
+    }
+
+    async notifyPaidSubscriptionStarted({member, subscription, offer, tier, attribution}, options = {}) {
+        const users = await this.models.User.getEmailAlertUsers('paid-started', options);
+
+        for (const user of users) {
+            const to = user.email;
+            const memberData = this.getMemberData(member);
+
+            const subject = `💸 Paid subscription started: ${memberData.name}`;
+
+            const amount = this.getAmount(subscription?.amount);
+            const formattedAmount = this.getFormattedAmount({currency: subscription?.currency, amount});
+            const interval = subscription?.interval || '';
+            const tierData = {
+                name: tier?.name || '',
+                details: `${formattedAmount}/${interval}`
+            };
+
+            const subscriptionData = {
+                startedOn: this.getFormattedDate(subscription.startDate)
+            };
+
+            let offerData = this.getOfferData(offer);
+
+            let attributionTitle = attribution?.title || '';
+            // In case of a homepage attribution, we want to show the title as "Homepage" on email
+            if (attributionTitle === 'homepage') {
+                attributionTitle = 'Homepage';
+            }
+
+            let staffUrl = this.urlUtils.urlJoin(this.urlUtils.urlFor('admin', true), '#', `/settings/staff/${user.slug}`);
+
+            const templateData = {
+                memberData,
+                attributionTitle,
+                attributionUrl: attribution?.url || '',
+                referrerSource: attribution?.referrerSource,
+                tierData,
+                offerData,
+                subscriptionData,
+                siteTitle: this.settingsCache.get('title'),
+                siteIconUrl: this.blogIcon.getIconUrl({absolute: true, fallbackToDefault: false}),
+                siteUrl: this.urlUtils.getSiteUrl(),
+                siteDomain: this.siteDomain,
+                accentColor: this.settingsCache.get('accent_color'),
+                fromEmail: this.fromEmailAddress,
+                toEmail: to,
+                staffUrl: staffUrl
+            };
+
+            const {html, text} = await this.renderEmailTemplate('new-paid-started', templateData);
+
+            await this.sendMail({
+                to,
+                subject,
+                html,
+                text
+            });
+        }
+    }
+
+    async notifyPaidSubscriptionCanceled({member, tier, subscription, cancelNow, expiryAt, canceledAt}, options = {}) {
+        const users = await this.models.User.getEmailAlertUsers('paid-canceled', options);
+
+        for (const user of users) {
+            const to = user.email;
+            const memberData = this.getMemberData(member);
+            const subject = `⚠️ Cancellation: ${memberData.name}`;
+
+            const amount = this.getAmount(subscription?.amount);
+            const formattedAmount = this.getFormattedAmount({currency: subscription?.currency, amount});
+            const interval = subscription?.interval;
+            const tierDetail = `${formattedAmount}/${interval}`;
+            const tierData = {
+                name: tier?.name || '',
+                details: tierDetail
+            };
+
+            const subscriptionData = {
+                expiryAt: this.getFormattedDate(expiryAt),
+                cancelNow: cancelNow,
+                canceledAt: this.getFormattedDate(canceledAt),
+                cancellationReason: subscription.cancellationReason || ''
+            };
+
+            let staffUrl = this.urlUtils.urlJoin(this.urlUtils.urlFor('admin', true), '#', `/settings/staff/${user.slug}`);
+
+            const templateData = {
+                memberData,
+                tierData,
+                subscriptionData,
+                siteTitle: this.settingsCache.get('title'),
+                siteIconUrl: this.blogIcon.getIconUrl({absolute: true, fallbackToDefault: false}),
+                siteUrl: this.urlUtils.getSiteUrl(),
+                siteDomain: this.siteDomain,
+                accentColor: this.settingsCache.get('accent_color'),
+                fromEmail: this.fromEmailAddress,
+                toEmail: to,
+                staffUrl: staffUrl
+            };
+
+            const {html, text} = await this.renderEmailTemplate('new-paid-cancellation', templateData);
+
+            await this.sendMail({
+                to,
+                subject,
+                html,
+                text
+            });
+        }
+    }
+
+    /**
+     * @param {object} recipient
+     * @param {string} recipient.email
+     * @param {string} recipient.slug
+     */
+    async getSharedData(recipient) {
+        let staffUrl = this.urlUtils.urlJoin(this.urlUtils.urlFor('admin', true), '#', `/settings/staff/${recipient.slug}`);
+
+        return {
+            siteTitle: this.settingsCache.get('title'),
+            siteIconUrl: this.blogIcon.getIconUrl({absolute: true, fallbackToDefault: false}),
+            siteUrl: this.urlUtils.getSiteUrl(),
+            siteDomain: this.siteDomain,
+            accentColor: this.settingsCache.get('accent_color'),
+            fromEmail: this.fromEmailAddress,
+            toEmail: recipient.email,
+            staffUrl: staffUrl
+        };
+    }
+
+    /**
+     *
+     * @param {object} eventData
+     * @param {object} eventData.milestone
+     *
+     * @returns {Promise<void>}
+     */
+    async notifyMilestoneReceived({milestone}) {
+        if (!milestone?.emailSentAt || milestone?.meta?.reason) {
+            // Do not send an email when no email was set to be sent or a reason
+            // not to send provided
+            return;
+        }
+
+        const formattedValue = this.getFormattedAmount({currency: milestone?.currency, amount: milestone.value, maximumFractionDigits: 0});
+        const milestoneEmailConfig = require('./milestone-email-config')(this.settingsCache.get('title'), formattedValue);
+
+        const emailData = milestoneEmailConfig?.[milestone.type]?.[milestone.value];
+
+        if (!emailData || Object.keys(emailData).length === 0) {
+            // Do not attempt to send an email with invalid or missing data
+            this.logging.warn('No Milestone email sent. Invalid or missing data.');
+            return;
+        }
+
+        const emailPromises = [];
+        const users = await this.models.User.getEmailAlertUsers('milestone-received');
+
+        for (const user of users) {
+            const to = user.email;
+
+            let staffUrl = this.urlUtils.urlJoin(this.urlUtils.urlFor('admin', true), '#', `/settings/staff/${user.slug}`);
+
+            const templateData = {
+                siteTitle: this.settingsCache.get('title'),
+                siteUrl: this.urlUtils.getSiteUrl(),
+                siteDomain: this.siteDomain,
+                fromEmail: this.fromEmailAddress,
+                ...emailData,
+                partial: `milestones/${milestone.value}`,
+                toEmail: to,
+                adminUrl: this.urlUtils.urlFor('admin', true),
+                staffUrl: staffUrl
+            };
+
+            const {html, text} = await this.renderEmailTemplate('new-milestone-received', templateData);
+
+            emailPromises.push(await this.sendMail({
+                to,
+                subject: emailData.subject,
+                html,
+                text
+            }));
+        }
+
+        const results = await Promise.allSettled(emailPromises);
+
+        for (const result of results) {
+            if (result.status === 'rejected') {
+                this.logging.warn(result?.reason);
+            }
+        }
+    }
+
+    /**
+     *
+     * @param {object} eventData
+     * @param {import('@tryghost/donations').DonationPaymentEvent} eventData.donationPaymentEvent
+     *
+     * @returns {Promise<void>}
+     */
+    async notifyDonationReceived({donationPaymentEvent}) {
+        const emailPromises = [];
+        const users = await this.models.User.getEmailAlertUsers('donation');
+        const formattedAmount = this.getFormattedAmount({currency: donationPaymentEvent.currency, amount: donationPaymentEvent.amount / 100});
+
+        const subject = `💰 One-time payment received: ${formattedAmount} from ${donationPaymentEvent.name ?? donationPaymentEvent.email}`;
+        const memberData = donationPaymentEvent.memberId ? this.getMemberData({
+            id: donationPaymentEvent.memberId,
+            name: donationPaymentEvent.name ?? null,
+            email: donationPaymentEvent.email
+        }) : null;
+
+        for (const user of users) {
+            const to = user.email;
+
+            let staffUrl = this.urlUtils.urlJoin(this.urlUtils.urlFor('admin', true), '#', `/settings/staff/${user.slug}`);
+
+            const templateData = {
+                siteTitle: this.settingsCache.get('title'),
+                siteUrl: this.urlUtils.getSiteUrl(),
+                siteIconUrl: this.blogIcon.getIconUrl({absolute: true, fallbackToDefault: false}),
+                siteDomain: this.siteDomain,
+                fromEmail: this.fromEmailAddress,
+                toEmail: to,
+                adminUrl: this.urlUtils.urlFor('admin', true),
+                staffUrl: staffUrl,
+                donation: {
+                    name: donationPaymentEvent.name ?? donationPaymentEvent.email,
+                    email: donationPaymentEvent.email,
+                    amount: formattedAmount,
+                    donationMessage: donationPaymentEvent.donationMessage
+                },
+                memberData,
+                accentColor: this.settingsCache.get('accent_color')
+            };
+
+            const {html, text} = await this.renderEmailTemplate('donation', templateData);
+
+            emailPromises.push(await this.sendMail({
+                to,
+                subject,
+                html,
+                text
+            }));
+        }
+
+        const results = await Promise.allSettled(emailPromises);
+
+        for (const result of results) {
+            if (result.status === 'rejected') {
+                this.logging.warn(result?.reason);
+            }
+        }
+    }
+
+    // Utils
+
+    /** @private */
+    getMemberData(member) {
+        let name = member?.name || member?.email;
+        return {
+            name,
+            email: member?.email,
+            showEmail: !!member?.name,
+            adminUrl: this.urlUtils.urlJoin(this.urlUtils.urlFor('admin', true), '#', `/members/${member.id}`),
+            initials: this.extractInitials(name),
+            location: this.getGeolocationData(member.geolocation),
+            createdAt: member.created_at ? moment(member.created_at).format('D MMM YYYY') : null
+        };
+    }
+
+    /** @private */
+    getGeolocationData(geolocation) {
+        if (!geolocation) {
+            return null;
+        }
+
+        try {
+            const geolocationData = JSON.parse(geolocation);
+            return geolocationData?.country || null;
+        } catch (e) {
+            return null;
+        }
+    }
+
+    /** @private */
+    getFormattedAmount({amount = 0, currency, maximumFractionDigits = 2}) {
+        if (!currency) {
+            return amount > 0 ? Intl.NumberFormat('en', {maximumFractionDigits}).format(amount) : '';
+        }
+
+        return Intl.NumberFormat('en', {
+            style: 'currency',
+            currency,
+            currencyDisplay: 'symbol',
+            maximumFractionDigits,
+            // see https://github.com/andyearnshaw/Intl.js/issues/123
+            minimumFractionDigits: maximumFractionDigits
+        }).format(amount);
+    }
+
+    /** @private */
+    getAmount(amount) {
+        if (!amount) {
+            return 0;
+        }
+
+        return amount / 100;
+    }
+
+    /** @private */
+    getFormattedDate(date) {
+        if (!date) {
+            return '';
+        }
+
+        return moment(date).format('D MMM YYYY');
+    }
+
+    /** @private */
+    getOfferData(offer) {
+        if (offer) {
+            let offAmount = '';
+            let offDuration = '';
+
+            if (offer.duration === 'once') {
+                offDuration = ', first payment';
+            } else if (offer.duration === 'repeating') {
+                offDuration = `, first ${offer.durationInMonths} months`;
+            } else if (offer.duration === 'forever') {
+                offDuration = `, forever`;
+            } else if (offer.duration === 'trial') {
+                offDuration = '';
+            }
+            if (offer.type === 'percent') {
+                offAmount = `${offer.amount}% off`;
+            } else if (offer.type === 'fixed') {
+                const amount = this.getAmount(offer.amount);
+                offAmount = `${this.getFormattedAmount({currency: offer.currency, amount})} off`;
+            } else if (offer.type === 'trial') {
+                offAmount = `${offer.amount} days free`;
+            }
+
+            return {
+                name: offer.name,
+                details: `${offAmount}${offDuration}`
+            };
+        }
+    }
+
+    get siteDomain() {
+        const [, siteDomain] = this.urlUtils.getSiteUrl()
+            .match(new RegExp('^https?://([^/:?#]+)(?:[/:?#]|$)', 'i'));
+
+        return siteDomain;
+    }
+
+    get defaultEmailDomain() {
+        return this.settingsHelpers.getDefaultEmailDomain();
+    }
+
+    get fromEmailAddress() {
+        return EmailAddressParser.stringify(this.settingsHelpers.getDefaultEmail());
+    }
+
+    extractInitials(name = '') {
+        const names = name.split(' ');
+        const initials = names.length > 1 ? [names[0][0], names[names.length - 1][0]] : [names[0][0]];
+        return initials.join('').toUpperCase();
+    }
+
+    async sendMail(message) {
+        if (process.env.NODE_ENV !== 'production') {
+            this.logging.warn(message.text);
+        }
+
+        let msg = Object.assign({
+            from: this.fromEmailAddress,
+            forceTextContent: true
+        }, message);
+
+        return this.mailer.send(msg);
+    }
+
+    registerPartials() {
+        const rootDirname = './email-templates/partials/';
+        const files = glob.sync('*.hbs', {cwd: path.join(__dirname, rootDirname)});
+        files.forEach((fileName) => {
+            const name = fileName.replace(/.hbs$/, '');
+            const filePath = path.join(__dirname, rootDirname, `${name}.hbs`);
+            const content = readFileSync(filePath, 'utf8');
+            this.Handlebars.registerPartial(name, content);
+        });
+    }
+
+    registerHelpers() {
+        this.Handlebars.registerHelper('eq', function (arg, value, options) {
+            if (arg === value) {
+                return options.fn(this);
+            } else {
+                return options.inverse(this);
+            }
+        });
+
+        this.Handlebars.registerHelper('limit', function (array, limit) {
+            if (!Array.isArray(array)) {
+                return [];
+            }
+            return array.slice(0,limit);
+        });
+
+        this.Handlebars.registerHelper('encodeURIComponent', function (string) {
+            return encodeURIComponent(string);
+        });
+    }
+
+    async renderHTML(templateName, data) {
+        const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `${templateName}.hbs`), 'utf8');
+        const htmlTemplate = this.Handlebars.compile(Buffer.from(htmlTemplateSource).toString());
+
+        let sharedData = {};
+        if (data.recipient) {
+            sharedData = await this.getSharedData(data.recipient);
+        }
+
+        const html = htmlTemplate({
+            ...data,
+            ...sharedData
+        });
+
+        const juice = require('juice');
+
+        return juice(html, {inlinePseudoElements: true, removeStyleTags: true});
+    }
+
+    async renderText(templateName, data) {
+        const textTemplate = require(`./email-templates/${templateName}.txt.js`);
+
+        let sharedData = {};
+        if (data.recipient) {
+            sharedData = await this.getSharedData(data.recipient);
+        }
+
+        return textTemplate({
+            ...data,
+            ...sharedData
+        });
+    }
+
+    async renderEmailTemplate(templateName, data) {
+        const html = await this.renderHTML(templateName, data);
+        const text = await this.renderText(templateName, data);
+
+        return {html, text};
+    }
+}
+
+module.exports = StaffServiceEmails;

package/core/server/services/staff/email-templates/donation.hbs

@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>💰 One-time payment received: {{donation.amount}} from {{donation.name}}</title>
+    {{> styles}}
+  </head>
+  <body style="background-color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+    <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+      <tr>
+        <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">&nbsp;</td>
+        <td class="container" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 540px; padding: 10px; width: 540px;">
+          <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 600px; padding: 30px 20px;">
+
+            <!-- START CENTERED CONTAINER -->
+
+            <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 8px;">
+
+              <!-- START MAIN CONTENT AREA -->
+              <tr>
+                <td class="wrapper" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top; box-sizing: border-box;">
+                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+                    {{#if siteIconUrl}}
+                      <tr>
+                        <td align="center" style="padding-bottom: 56px; text-align: center;"><a href="{{siteUrl}}"><img src="{{siteIconUrl}}" alt="{{siteTitle}}" border="0" width="48" height="48"></a></td>
+                      </tr>
+                    {{/if}}
+                    <tr>
+                      <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">
+                        <h1 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 26px; color: #15212A; font-weight: bold; line-height: 28px; margin: 0; padding-bottom: 24px;">Cha-ching! You received a&nbsp;tip.</h1>
+                        <table width="100" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; width: 100%; min-width: 100%; box-sizing: border-box; background: #F4F5F6; border-radius: 8px;">
+                          <tbody>
+                            <tr>
+                              <td align="left" style="padding: 24px;">
+                                <table border="0" cellpadding="0" cellspacing="0">
+                                  <tr>
+                                    <td style="padding-right: 8px; background-color: #F4F5F6; text-align: left; vertical-align: middle;" valign="middle">
+                                      <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 26px; padding: 0; text-align: left; margin: 0; color: #15171A; font-weight: 400;">From:</p>
+                                      <p class="text-link-accent-large" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; line-height: 26px; padding: 0; padding-bottom: 24px; text-align: left; margin: 0; color: #15171A; font-weight: 700;">{{donation.name}} {{#if memberData}}&bull; <a href="{{memberData.adminUrl}}" target="_blank" style="display: inline; color: {{accentColor}} !important; text-decoration: none !important;">View</a>{{/if}}</p>
+                                      <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 26px; padding: 0; text-align: left; margin: 0; color: #15171A; font-weight: 400;">Amount received:</p>
+                                      <p class="large" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; line-height: 26px; padding: 0; padding-bottom: 24px; text-align: left; margin: 0; color: #15171A; font-weight: 700;">{{donation.amount}}</p>
+                                      {{#if donation.donationMessage}}
+                                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 22px; padding: 0; padding-bottom: 28px; text-align: left; margin: 0; color: #15171A; font-weight: 400;">“{{donation.donationMessage}}”</p>
+                                      {{/if}}
+                                    </td>
+                                  </tr>
+                                </table>
+                                <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
+                                  <tbody>
+                                    <tr>
+                                      <td align="left" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top;">
+                                        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
+                                          <tbody>
+                                            <tr>
+                                              {{#if donation.donationMessage}}
+                                                <td align="left" style="padding: 0;">
+                                                  <table border="0" cellpadding="0" cellspacing="0">
+                                                    <tr>
+                                                      <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; vertical-align: top; background-color: {{accentColor}}; border-radius: 8px; text-align: center;">
+                                                        <a href="mailto:{{donation.email}}" target="_blank" style="display: inline-block; color: #ffffff; background-color: {{accentColor}}; border: solid 1px {{accentColor}}; border-radius: 8px; padding: 10px 20px; text-decoration: none;">Reply</a>
+                                                      </td>
+                                                    </tr>
+                                                  </table>
+                                                </td>
+                                              {{else}}
+                                                <td align="left" style="padding: 0;">
+                                                  <table border="0" cellpadding="0" cellspacing="0">
+                                                    <tr>
+                                                      <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; vertical-align: top; background-color: {{accentColor}}; border-radius: 8px; text-align: center;">
+                                                        <a href="mailto:{{donation.email}}" target="_blank" style="display: inline-block; color: #ffffff; background-color: {{accentColor}}; border: solid 1px {{accentColor}}; border-radius: 8px; padding: 10px 20px; text-decoration: none;">Say thanks</a>
+                                                      </td>
+                                                    </tr>
+                                                  </table>
+                                                </td>
+                                              {{/if}}
+                                            </tr>
+                                          </tbody>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+
+                    <!-- START FOOTER -->
+                    <tr>
+                      <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 12px; vertical-align: top; padding-top: 56px;">
+                        <p class="small" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 18px; font-size: 12px; color: #7C8B9A; font-weight: normal; margin: 0;">This message was sent from <a class="small" href="{{siteUrl}}" style="text-decoration: underline; color: #7C8B9A; font-size: 12px;">{{siteDomain}}</a> to <a class="small" href="mailto:{{toEmail}}" style="text-decoration: underline; color: #7C8B9A; font-size: 12px;">{{toEmail}}</a></p>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 12px; vertical-align: top;">
+                        <p class="small" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 18px; font-size: 12px; color: #7C8B9A; font-weight: normal; margin: 0;">Don’t want to receive these emails? Manage your preferences <a class="small" href="{{staffUrl}}" style="text-decoration: underline; color: #7C8B9A; font-size: 12px;">here</a>.</p>
+                      </td>
+                    </tr>
+
+                    <!-- END FOOTER -->
+                  </table>
+                </td>
+              </tr>
+
+            <!-- END MAIN CONTENT AREA -->
+            </table>
+
+
+          <!-- END CENTERED CONTAINER -->
+          </div>
+        </td>
+        <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">&nbsp;</td>
+      </tr>
+    </table>
+  </body>
+</html>

package/core/server/services/staff/email-templates/donation.txt.js

@@ -0,0 +1,15 @@
+module.exports = function (data) {
+    // Be careful when you indent the email, because whitespaces are visible in emails!
+    return `
+Cha-ching!
+
+You received a one-time payment from of ${data.donation.amount} from "${data.donation.name}".
+
+Message: ${data.donation.donationMessage ? data.donation.donationMessage : 'No message provided'}
+
+---
+
+Sent to ${data.toEmail} from ${data.siteDomain}.
+If you would no longer like to receive these notifications you can adjust your settings at ${data.staffUrl}.
+    `;
+};