0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00

Added placeholder comment CTA button to emails

fixes https://github.com/TryGhost/Team/issues/2725

- Added to emails if labs flag enabled, comments enabled and comment CTA button enabled
- Links to comment section
- Design and styling not added yet
This commit is contained in:
Simon Backx 2023-03-14 17:11:24 +01:00
parent 56cbb15e37
commit 66c20710ba
4 changed files with 132 additions and 8 deletions

View file

@ -25,6 +25,7 @@ class EmailServiceWrapper {
const sentry = require('../../../shared/sentry');
const membersRepository = membersService.api.members;
const limitService = require('../limits');
const labs = require('../../../shared/labs');
const mobiledocLib = require('../../lib/mobiledoc');
const lexicalLib = require('../../lib/lexical');
@ -68,7 +69,8 @@ class EmailServiceWrapper {
linkTracking,
memberAttributionService: memberAttribution.service,
audienceFeedbackService: audienceFeedback.service,
outboundLinkTagger: memberAttribution.outboundLinkTagger
outboundLinkTagger: memberAttribution.outboundLinkTagger,
labs
});
const sendingService = new SendingService({

View file

@ -59,6 +59,7 @@ class EmailRenderer {
#memberAttributionService;
#outboundLinkTagger;
#audienceFeedbackService;
#labs;
/**
* @param {object} dependencies
@ -76,6 +77,7 @@ class EmailRenderer {
* @param {object} dependencies.memberAttributionService
* @param {object} dependencies.audienceFeedbackService
* @param {object} dependencies.outboundLinkTagger
* @param {object} dependencies.labs
*/
constructor({
settingsCache,
@ -89,7 +91,8 @@ class EmailRenderer {
linkTracking,
memberAttributionService,
audienceFeedbackService,
outboundLinkTagger
outboundLinkTagger,
labs
}) {
this.#settingsCache = settingsCache;
this.#settingsHelpers = settingsHelpers;
@ -103,6 +106,7 @@ class EmailRenderer {
this.#memberAttributionService = memberAttributionService;
this.#audienceFeedbackService = audienceFeedbackService;
this.#outboundLinkTagger = outboundLinkTagger;
this.#labs = labs;
}
getSubject(post) {
@ -559,6 +563,9 @@ class EmailRenderer {
0
).href.replace('--uuid--', '%%{uuid}%%');
const commentUrl = new URL(postUrl);
commentUrl.hash = '#ghost-comments-root';
const data = {
site: {
title: this.#settingsCache.get('title'),
@ -574,6 +581,7 @@ class EmailRenderer {
post: {
title: post.get('title'),
url: postUrl,
commentUrl: commentUrl.href,
authors,
publishedAt,
feature_image: postFeatureImage,
@ -584,7 +592,8 @@ class EmailRenderer {
newsletter: {
name: newsletter.get('name'),
showPostTitleSection: newsletter.get('show_post_title_section')
showPostTitleSection: newsletter.get('show_post_title_section'),
showCommentCta: newsletter.get('show_comment_cta') && this.#settingsCache.get('comments_enabled') !== 'off' && this.#labs.isSet('makingItRain')
},
//CSS

View file

@ -82,7 +82,7 @@
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="{{classes.meta}}">
By {{post.authors}} <span class="post-meta-date">{{post.publishedAt}} </span><a href="{{post.url}}" class="view-online-link">View online →</a>
By {{post.authors}} <span class="post-meta-date">{{post.publishedAt}} </span><a href="{{post.url}}" class="view-online-link">View online →</a>{{#if newsletter.showCommentCta}} <a href="{{post.commentUrl}}" class="view-online-link">Comment</a>{{/if}}
</td>
</tr>
</table>
@ -129,14 +129,22 @@
<!-- END MAIN CONTENT AREA -->
{{#if feedbackButtons }}
{{#if (or feedbackButtons newsletter.showCommentCta) }}
<tr>
<td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 40px 4px; border-bottom: 1px solid #e5eff5" align="center">
<h3 style="text-align: center; margin-bottom: 22px; font-size: 17px; letter-spacing: -0.2px; margin-top: 0 !important;">Give feedback on this post</h3>
{{#if feedbackButtons }}
<h3 style="text-align: center; margin-bottom: 22px; font-size: 17px; letter-spacing: -0.2px; margin-top: 0 !important;">Give feedback on this post</h3>
{{/if}}
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin: auto; width: auto !important;">
<tr>
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" }}
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" }}
{{#if feedbackButtons }}
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" }}
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" }}
{{/if}}
{{#if newsletter.showCommentCta}}
{{!-- TODO: replace image with comment image --}}
{{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" }}
{{/if}}
</tr>
</table>
</td>

View file

@ -80,6 +80,9 @@ describe('Email renderer', function () {
emailRenderer = new EmailRenderer({
urlUtils: {
urlFor: () => 'http://example.com/subdirectory'
},
labs: {
isSet: () => true
}
});
newsletter = createModel({
@ -178,6 +181,9 @@ describe('Email renderer', function () {
const emailRenderer = new EmailRenderer({
urlUtils: {
urlFor: () => 'http://example.com'
},
labs: {
isSet: () => true
}
});
@ -220,6 +226,9 @@ describe('Email renderer', function () {
getNoReplyAddress: () => {
return 'reply@example.com';
}
},
labs: {
isSet: () => true
}
});
@ -277,6 +286,9 @@ describe('Email renderer', function () {
getNoReplyAddress: () => {
return 'reply@example.com';
}
},
labs: {
isSet: () => true
}
});
@ -317,6 +329,9 @@ describe('Email renderer', function () {
},
getPostUrl: () => {
return 'http://example.com/post-id';
},
labs: {
isSet: () => true
}
});
@ -353,6 +368,9 @@ describe('Email renderer', function () {
},
getPostUrl: () => {
return 'http://example.com/post-id';
},
labs: {
isSet: () => true
}
});
@ -378,6 +396,9 @@ describe('Email renderer', function () {
},
getPostUrl: () => {
return 'http://example.com/post-id';
},
labs: {
isSet: () => true
}
});
@ -467,6 +488,9 @@ describe('Email renderer', function () {
u.searchParams.append('source_tracking', newsletter?.get('name') ?? 'site');
return u;
}
},
labs: {
isSet: () => true
}
});
let basePost;
@ -913,6 +937,7 @@ describe('Email renderer', function () {
describe('getTemplateData', function () {
let settings = {};
let labsEnabled = true;
const emailRenderer = new EmailRenderer({
audienceFeedbackService: {
buildLink: (_uuid, _postId, score) => {
@ -937,11 +962,15 @@ describe('Email renderer', function () {
},
getPostUrl: () => {
return 'http://example.com';
},
labs: {
isSet: () => labsEnabled
}
});
beforeEach(function () {
settings = {};
labsEnabled = true;
});
it('uses default accent color', async function () {
@ -1014,6 +1043,82 @@ describe('Email renderer', function () {
body: 'post-content-sans-serif'
});
});
it('show comment CTA is disabled if labs disabled', async function () {
labsEnabled = false;
settings.comments_enabled = 'all';
const html = '';
const post = createModel({
posts_meta: createModel({}),
loaded: ['posts_meta'],
published_at: new Date(0)
});
const newsletter = createModel({
title_font_category: 'serif',
title_alignment: 'left',
body_font_category: 'sans_serif',
show_comment_cta: true
});
const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false});
assert.equal(data.newsletter.showCommentCta, false);
});
it('show comment CTA is disabled if comments disabled', async function () {
labsEnabled = true;
settings.comments_enabled = 'off';
const html = '';
const post = createModel({
posts_meta: createModel({}),
loaded: ['posts_meta'],
published_at: new Date(0)
});
const newsletter = createModel({
title_font_category: 'serif',
title_alignment: 'left',
body_font_category: 'sans_serif',
show_comment_cta: true
});
const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false});
assert.equal(data.newsletter.showCommentCta, false);
});
it('show comment CTA is disabled if disabled', async function () {
labsEnabled = true;
settings.comments_enabled = 'all';
const html = '';
const post = createModel({
posts_meta: createModel({}),
loaded: ['posts_meta'],
published_at: new Date(0)
});
const newsletter = createModel({
title_font_category: 'serif',
title_alignment: 'left',
body_font_category: 'sans_serif',
show_comment_cta: false
});
const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false});
assert.equal(data.newsletter.showCommentCta, false);
});
it('show comment CTA is enabled if all enabled', async function () {
labsEnabled = true;
settings.comments_enabled = 'all';
const html = '';
const post = createModel({
posts_meta: createModel({}),
loaded: ['posts_meta'],
published_at: new Date(0)
});
const newsletter = createModel({
title_font_category: 'serif',
title_alignment: 'left',
body_font_category: 'sans_serif',
show_comment_cta: true
});
const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false});
assert.equal(data.newsletter.showCommentCta, true);
});
});
describe('createUnsubscribeUrl', function () {