From e3a0bb535f1b5604242b79d3ca0cb39c5352367d Mon Sep 17 00:00:00 2001
From: Rishabh Garg <zrishabhgarg@gmail.com>
Date: Tue, 8 Sep 2020 12:49:36 +0530
Subject: [PATCH] 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      | 23 ++++++++-
 core/frontend/helpers/ghost_head.js   |  2 +
 core/frontend/helpers/tpl/content.hbs | 16 +++++++
 core/frontend/helpers/tpl/styles.js   | 69 +++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 core/frontend/helpers/tpl/content.hbs
 create mode 100644 core/frontend/helpers/tpl/styles.js

diff --git a/core/frontend/helpers/content.js b/core/frontend/helpers/content.js
index 673f00e7e9..aea3348e5d 100644
--- a/core/frontend/helpers/content.js
+++ b/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)
diff --git a/core/frontend/helpers/ghost_head.js b/core/frontend/helpers/ghost_head.js
index 80687e9fca..5baf6ac49e 100644
--- a/core/frontend/helpers/ghost_head.js
+++ b/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;
 }
diff --git a/core/frontend/helpers/tpl/content.hbs b/core/frontend/helpers/tpl/content.hbs
new file mode 100644
index 0000000000..15386861f3
--- /dev/null
+++ b/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>
diff --git a/core/frontend/helpers/tpl/styles.js b/core/frontend/helpers/tpl/styles.js
new file mode 100644
index 0000000000..861462e56d
--- /dev/null
+++ b/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;
\ No newline at end of file