🐛 Fixed default content CTA message to reflect page vs post

closes https://github.com/TryGhost/Team/issues/1898

- the default content cta always used the terminology as `post` when showing message that users don't have access to some content
- this caused confusion when users were looking at a page and message showed "This post is for subscribers only"
- updates the message to correctly reflect `page` vs `post` on the default cta
This commit is contained in:
Rishabh 2022-09-26 15:52:10 +05:30 committed by Rishabh Garg
parent e3db911108
commit 1410a4237e
3 changed files with 70 additions and 6 deletions

View File

@ -2,13 +2,13 @@
<aside class="gh-post-upgrade-cta">
<div class="gh-post-upgrade-cta-content" style="background-color: {{accentColor}}">
{{#has visibility="paid"}}
<h2>This post is for paying subscribers only</h2>
<h2>This {{#is "page"}}page{{else}}post{{/is}} is for paying subscribers only</h2>
{{/has}}
{{#has visibility="members"}}
<h2>This post is for subscribers only</h2>
<h2>This {{#is "page"}}page{{else}}post{{/is}} is for subscribers only</h2>
{{/has}}
{{#has visibility="tiers"}}
<h2>This post is for subscribers on the {{tiers}} only </h2>
<h2>This {{#is "page"}}page{{else}}post{{/is}} is for subscribers on the {{tiers}} only </h2>
{{/has}}
{{#if @member}}
<a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Upgrade your account</a>

View File

@ -5,6 +5,8 @@ const path = require('path');
// Stuff we are testing
const content = require('../../../../core/frontend/helpers/content');
const has = require('../../../../core/frontend/helpers/has');
const is = require('../../../../core/frontend/helpers/is');
describe('{{content}} helper', function () {
before(function (done) {
@ -85,6 +87,9 @@ describe('{{content}} helper with no access', function () {
hbs.cachePartials(function () {
done();
});
hbs.registerHelper('has', has);
hbs.registerHelper('is', is);
});
beforeEach(function () {
@ -116,6 +121,34 @@ describe('{{content}} helper with no access', function () {
rendered.string.should.containEql('gh-post-upgrade-cta-content');
rendered.string.should.containEql('"background-color: #abcdef"');
});
it('can render default template with right message for post resource', function () {
// html will be included when there is free content available
const html = 'Free content';
optionsData.data.root = {
post: {}
};
const rendered = content.call({html: html, access: false, visibility: 'members'}, optionsData);
rendered.string.should.containEql('Free content');
rendered.string.should.containEql('gh-post-upgrade-cta');
rendered.string.should.containEql('gh-post-upgrade-cta-content');
rendered.string.should.containEql('"background-color: #abcdef"');
rendered.string.should.containEql('This post is for');
});
it('can render default template with right message for page resource', function () {
// html will be included when there is free content available
const html = 'Free content';
optionsData.data.root = {
context: ['page']
};
const rendered = content.call({html: html, access: false, visibility: 'members'}, optionsData);
rendered.string.should.containEql('Free content');
rendered.string.should.containEql('gh-post-upgrade-cta');
rendered.string.should.containEql('gh-post-upgrade-cta-content');
rendered.string.should.containEql('"background-color: #abcdef"');
rendered.string.should.containEql('This page is for');
});
});
describe('{{content}} helper with custom template', function () {
@ -126,6 +159,9 @@ describe('{{content}} helper with custom template', function () {
hbs.cachePartials(function () {
done();
});
hbs.registerHelper('has', has);
hbs.registerHelper('is', is);
});
it('can render custom template', function () {
@ -137,4 +173,20 @@ describe('{{content}} helper with custom template', function () {
should.exist(rendered);
});
it('can correctly render message for page', function () {
// html will be included when there is free content available
const html = 'Free content';
const rendered = content.call({html: html, access: false, visibility: 'members'}, {
data: {
root: {
context: ['page']
}
}
});
rendered.string.should.not.containEql('gh-post-upgrade-cta');
rendered.string.should.containEql('custom-post-upgrade-cta');
rendered.string.should.containEql('custom-post-upgrade-cta-content');
rendered.string.should.containEql('This page is for');
});
});

View File

@ -1,13 +1,25 @@
<aside class="custom-post-upgrade-cta">
<div class="custom-post-upgrade-cta-content" style="background-color: {{accentColor}}">
{{#has visibility="paid"}}
<h2>This post is for paying subscribers only</h2>
{{#is "page"}}
<h2>This page is for paying subscribers only</h2>
{{else}}
<h2>This post is for paying subscribers only</h2>
{{/is}}
{{/has}}
{{#has visibility="members"}}
<h2>This post is for subscribers only</h2>
{{#is "page"}}
<h2>This page is for subscribers only</h2>
{{else}}
<h2>This post is for subscribers only</h2>
{{/is}}
{{/has}}
{{#has visibility="tiers"}}
<h2>This post is for subscribers on the {{tiers}} only </h2>
{{#is "page"}}
<h2>This page is for subscribers on the {{tiers}} only </h2>
{{else}}
<h2>This post is for subscribers on the {{tiers}} only </h2>
{{/is}}
{{/has}}
{{#if @member}}
<a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Account upgrade link</a>