Updated tips & donations settings and email notification design (#17679)
refs https://github.com/TryGhost/Product/issues/3693, https://github.com/TryGhost/Product/issues/3666 - Updated Tips&Donations email notification design to put focus onto the amount - Removed unnecessary gap between Free and Premium tiers in Membership settings - Improved the copy to better explain the feature
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
733135d3ff
commit
aeff42811c
@ -2,7 +2,7 @@
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Tips or donations</h4>
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work</p>
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work, no membership required</p>
|
||||
</div>
|
||||
{{#if this.membersUtils.isStripeEnabled}}
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
|
||||
|
||||
@ -2519,10 +2519,6 @@ p.theme-validation-details {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.gh-setting-members-tierscontainer .gh-expandable:not(:first-of-type) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.gh-setting-members-portal-mock {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
@ -125,8 +125,6 @@
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
@ -167,11 +165,10 @@
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Growth</h4>
|
||||
<div class="gh-expandable">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>💸 Received a donation of {{donation.amount}} from {{donation.name}}</title>
|
||||
<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%;">
|
||||
@ -28,25 +28,22 @@
|
||||
<table border="0" cellpadding="0" cellspacing="0" 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;">
|
||||
<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: 20px; color: #15212A; font-weight: bold; line-height: 25px; margin: 0; margin-bottom: 15px;">Congratulations!</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: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 25px; margin-bottom: 32px;">You received a <span style="font-weight: bold; color: #15212A;">donation of {{donation.amount}}</span> from {{donation.name}} ({{donation.email}}).</p>
|
||||
{{#if memberData}}
|
||||
<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; padding-top: 32px; padding-bottom: 12px;">
|
||||
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
|
||||
<tbody>
|
||||
<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: 16px; vertical-align: top; background-color: {{accentColor}}; border-radius: 5px; text-align: center;"> <a href="{{memberData.adminUrl}}" target="_blank" style="display: inline-block; color: #ffffff; background-color: {{accentColor}}; border: solid 1px {{accentColor}}; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 16px; font-weight: normal; margin: 0; padding: 9px 22px 10px; border-color: {{accentColor}};">View member</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{/if}}
|
||||
<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: 20px; color: #15212A; font-weight: bold; line-height: 25px; margin: 0; margin-bottom: 15px;">Cha-ching!</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: 16px; color: #3A464C; font-weight: normal; margin: 0; line-height: 25px; margin-bottom: 32px;">You received a one-time payment from {{#if memberData}}
|
||||
<a style="color:{{accentColor}}" href="{{memberData.adminUrl}}">{{donation.name}} ({{donation.email}})</a>
|
||||
{{else}}
|
||||
{{donation.name}} ({{donation.email}})
|
||||
{{/if}}
|
||||
:</p>
|
||||
<table width="100" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" 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: #F9F9FA; border-radius: 7px;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" style="padding: 32px 24px; text-align: center;">
|
||||
<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: 48px; line-height: 48px; padding: 0; text-align: center; margin: 0; color: #15171A; font-weight: 700;">{{donation.amount}}</h1>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
module.exports = function (data) {
|
||||
// Be careful when you indent the email, because whitespaces are visible in emails!
|
||||
return `
|
||||
Congratulations!
|
||||
Cha-ching!
|
||||
|
||||
You received a donation of ${data.donation.amount} from "${data.donation.name}".
|
||||
You received a one-time payment from of ${data.donation.amount} from "${data.donation.name}".
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -925,7 +925,7 @@ describe('StaffService', function () {
|
||||
mailStub.calledOnce.should.be.true();
|
||||
|
||||
mailStub.calledWith(
|
||||
sinon.match.has('html', sinon.match('donation of €15.00 from Simon'))
|
||||
sinon.match.has('html', sinon.match('One-time payment received: €15.00 from Simon'))
|
||||
).should.be.true();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user