TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-23 03:42:27 +03:00
Code Issues Projects Releases Wiki Activity

Updated tips & donations settings and email notification design (#17679)

Browse Source 
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 2023-08-10 18:35:42 +01:00 committed by GitHub
parent 733135d3ff
commit aeff42811c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/settings/tips-and-donations.hbs
View File

@ -2,7 +2,7 @@
<div class="gh-expandable-header"> <div class="gh-expandable-header">
<div> <div>
<h4 class="gh-expandable-title">Tips or donations</h4> <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> </div>
{{#if this.membersUtils.isStripeEnabled}} {{#if this.membersUtils.isStripeEnabled}}
<button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}> <button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>

4
ghost/admin/app/styles/layouts/settings.css
View File

@ -2519,10 +2519,6 @@ p.theme-validation-details {
font-size: 1.25rem; font-size: 1.25rem;
} }
.gh-setting-members-tierscontainer .gh-expandable:not(:first-of-type) {
margin-top: 20px;
}
.gh-setting-members-portal-mock { .gh-setting-members-portal-mock {
display: flex; display: flex;
position: relative; position: relative;

5
ghost/admin/app/templates/settings/membership.hbs
View File

@ -125,8 +125,6 @@
{{/liquid-if}} {{/liquid-if}}
</div> </div>
</div> </div>
</section>
<section class="gh-expandable">
<div class="gh-expandable-block"> <div class="gh-expandable-block">
<div class="gh-expandable-header"> <div class="gh-expandable-header">
<div> <div>
@ -167,11 +165,10 @@
{{/liquid-if}} {{/liquid-if}}
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</section> </section>
<section class="gh-main-section"> <section class="gh-main-section">
<h4 class="gh-main-section-header small bn">Growth</h4> <h4 class="gh-main-section-header small bn">Growth</h4>
<div class="gh-expandable"> <div class="gh-expandable">

37
ghost/staff-service/lib/email-templates/donation.hbs
View File

@ -3,7 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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}} {{> styles}}
</head> </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%;"> <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%;"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<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: 14px; vertical-align: top;"> <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: 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 <span style="font-weight: bold; color: #15212A;">donation of {{donation.amount}}</span> from {{donation.name}} ({{donation.email}}).</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}}
{{#if memberData}} <a style="color:{{accentColor}}" href="{{memberData.adminUrl}}">{{donation.name}} ({{donation.email}})</a>
<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;"> {{else}}
<tbody> {{donation.name}} ({{donation.email}})
<tr> {{/if}}
<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;"> :</p>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"> <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> <tbody>
<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: 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> <td align="center" style="padding: 32px 24px; text-align: center;">
</tr> <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>
</tbody> </td>
</table> </tr>
</td> </tbody>
</tr> </table>
</tbody>
</table>
{{/if}}
</td> </td>
</tr> </tr>

4
ghost/staff-service/lib/email-templates/donation.txt.js
View File

@ -1,9 +1,9 @@
module.exports = function (data) { module.exports = function (data) {
// Be careful when you indent the email, because whitespaces are visible in emails! // Be careful when you indent the email, because whitespaces are visible in emails!
return ` 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}".
--- ---

2
ghost/staff-service/test/staff-service.test.js
View File

@ -925,7 +925,7 @@ describe('StaffService', function () {
mailStub.calledOnce.should.be.true(); mailStub.calledOnce.should.be.true();
mailStub.calledWith( 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(); ).should.be.true();
}); });
}); });