Added default CTA to content helper (#12157)

no issue

ATM users have to add logic to their themes in order to automatically hide restricted content. The {{content}} helper is updated to return a default CTA box instead of the post content for restricted posts with default static text using site's accent color and opening Portal for relevant action. This is currently behind the dev experiment flag.

- Adds new default content helper template in case of restricted content
- Updates content helper to trigger new CTA template in case of restricted content

core/frontend/helpers/content.js

@@ -5,11 +5,28 @@
 // escape it or tell handlebars to leave it alone with a triple-brace.
 //
 // Enables tag-safe truncation of content by characters or words.
+//
+// Dev flag feature: In case of restricted content access for member-only posts, shows CTA box
 
-const {SafeString} = require('../services/proxy');
+const {templates, hbs, config, SafeString} = require('../services/proxy');
 const downsize = require('downsize');
+const _ = require('lodash');
+const createFrame = hbs.handlebars.createFrame;
+
+function restrictedCta(options) {
+    options = options || {};
+    options.data = options.data || {};
+    _.merge(this, {
+        accentColor: (options.data.site && options.data.site.accent_color) || '#3db0ef'
+    });
+    const data = createFrame(options.data);
+    return templates.execute('content', this, {data});
+}
 
 module.exports = function content(options = {}) {
+    let self = this;
+    let args = arguments;
+
     const hash = options.hash || {};
     const truncateOptions = {};
     let runTruncate = false;
@@ -25,6 +42,10 @@ module.exports = function content(options = {}) {
         this.html = '';
     }
 
+    if (!this.access && !!config.get('enableDeveloperExperiments')) {
+        return restrictedCta.apply(self, args);
+    }
+
     if (runTruncate) {
         return new SafeString(
             downsize(this.html, truncateOptions)

core/frontend/helpers/ghost_head.js

@@ -5,6 +5,7 @@
 const {metaData, escapeExpression, SafeString, logging, settingsCache, config, blogIcon, labs, urlUtils} = require('../services/proxy');
 const _ = require('lodash');
 const debug = require('ghost-ignition').debug('ghost_head');
+const templateStyles = require('./tpl/styles');
 
 const getMetaData = metaData.get;
 const getAssetUrl = metaData.getAssetUrl;
@@ -47,6 +48,7 @@ function getMembersHelper() {
     }
     if ((!!stripeDirectSecretKey && !!stripeDirectPublishableKey) || !!stripeConnectAccountId) {
         membersHelper += '<script async src="https://js.stripe.com/v3/"></script>';
+        membersHelper += (`<style type='text/css'> ${templateStyles}</style>`);
     }
     return membersHelper;
 }

core/frontend/helpers/tpl/content.hbs

@@ -0,0 +1,16 @@
+<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>
+        {{/has}}
+        {{#has visibility="members"}}
+            <h2>This post is for subscribers only</h2>
+        {{/has}}
+        {{#if @member}}
+            <a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Subscribe now</a>
+        {{else}}
+            <a class="gh-btn" data-portal="signup" style="color:{{accentColor}}">Subscribe now</a>
+            <p><small>Already have an account? <a data-portal="signin">Sign in</a></small></p>
+        {{/if}}
+    </div>
+</aside>

core/frontend/helpers/tpl/styles.js

@@ -0,0 +1,69 @@
+/* Default CSS Styles for helpers which are appended in theme via ghost_head */
+const contentHelper = `.gh-post-upgrade-cta-content,
+.gh-post-upgrade-cta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    text-align: center;
+    width: 100%;
+    color: #ffffff;
+    font-size: 16px;
+}
+
+.gh-post-upgrade-cta-content {
+    border-radius: 8px;
+    padding: 40px 4vw;
+}
+
+.gh-post-upgrade-cta h2 {
+    color: #ffffff;
+    font-size: 28px;
+    letter-spacing: -0.2px;
+    margin: 0;
+    padding: 0;
+}
+
+.gh-post-upgrade-cta p {
+    margin: 20px 0 0;
+    padding: 0;
+}
+
+.gh-post-upgrade-cta small {
+    font-size: 16px;
+    letter-spacing: -0.2px;
+}
+
+.gh-post-upgrade-cta a {
+    color: #ffffff;
+    cursor: pointer;
+    font-weight: 500;
+    box-shadow: none;
+    text-decoration: underline;
+}
+
+.gh-post-upgrade-cta a:hover {
+    color: #ffffff;
+    opacity: 0.8;
+    box-shadow: none;
+    text-decoration: underline;
+}
+
+.gh-post-upgrade-cta a.gh-btn {
+    display: block;
+    background: #ffffff;
+    text-decoration: none;
+    margin: 28px 0 0;
+    padding: 8px 18px;
+    border-radius: 4px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.gh-post-upgrade-cta a.gh-btn:hover {
+    opacity: 0.92;
+}`;
+
+const styles = contentHelper;
+
+module.exports = styles;