From ff7bb48b7e4f10d57fd11ff58cdb225f11e3ebcb Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 6 Jul 2022 11:01:57 +0200
Subject: [PATCH] Added Comment access dropdown to membership settings

---
 .../settings/members-comment-access.hbs       | 25 ++++++++++++
 .../settings/members-comment-access.js        | 39 +++++++++++++++++++
 .../settings/members-default-post-access.hbs  |  2 +-
 ghost/admin/app/services/settings.js          |  2 +-
 ghost/admin/app/styles/layouts/settings.css   | 18 +++++----
 .../app/templates/settings/membership.hbs     | 12 ++++--
 6 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 ghost/admin/app/components/settings/members-comment-access.hbs
 create mode 100644 ghost/admin/app/components/settings/members-comment-access.js

diff --git a/ghost/admin/app/components/settings/members-comment-access.hbs b/ghost/admin/app/components/settings/members-comment-access.hbs
new file mode 100644
index 0000000000..c80eb61322
--- /dev/null
+++ b/ghost/admin/app/components/settings/members-comment-access.hbs
@@ -0,0 +1,25 @@
+<div class="gh-setting-richdd-container comment-access-dropdown" data-test-members-subscription-access>
+    <div class="gh-expandable-header">
+        <div>
+            <h4 class="gh-expandable-title">Commenting</h4>
+            <p class="gh-expandable-description">Who can comment on posts?</p>
+        </div>
+    </div>
+
+    <PowerSelect
+        @options={{this.options}}
+        @selected={{this.selectedOption}}
+        @onChange={{this.setCommentAccess}}
+        @triggerClass="gh-setting-dropdown"
+        @dropdownClass="gh-setting-dropdown-list"
+        as |option|
+    >
+        <div class="gh-setting-dropdown-content" data-test-members-subscription-option={{option.value}}>
+            {{svg-jar option.icon class=(concat "w8 h8 mr2 fill-" (or option.icon_color "green"))}}
+            <div class="gh-radio-label">
+                {{option.name}}<br>
+                <div class="gh-radio-desc">{{option.description}}</div>
+            </div>
+        </div>
+    </PowerSelect>
+</div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/settings/members-comment-access.js b/ghost/admin/app/components/settings/members-comment-access.js
new file mode 100644
index 0000000000..7a5a246a71
--- /dev/null
+++ b/ghost/admin/app/components/settings/members-comment-access.js
@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class SettingsMembersCommentAccess extends Component {
+    @service settings;
+
+    get options() {
+        return [{
+            name: 'Nobody',
+            description: 'Disable commenting completely',
+            value: 'off',
+            icon: 'no-members',
+            icon_color: 'midlightgrey-d2'
+        }, {
+            name: 'All members',
+            description: 'Logged-in members',
+            value: 'all',
+            icon: 'members-all',
+            icon_color: 'blue'
+        }, {
+            name: 'Paid-members only',
+            description: 'Only logged-in members with an active Stripe subscription',
+            value: 'paid',
+            icon: 'members-paid',
+            icon_color: 'pink'
+        }];
+    }
+
+    get selectedOption() {
+        return this.options.find(o => o.value === this.settings.get('commentsEnabled'));
+    }
+
+    @action
+    setCommentAccess(option) {
+        this.settings.set('commentsEnabled', option.value);
+        this.args.onChange?.(option.value);
+    }
+}
diff --git a/ghost/admin/app/components/settings/members-default-post-access.hbs b/ghost/admin/app/components/settings/members-default-post-access.hbs
index b944df7f2a..37bf0916bb 100644
--- a/ghost/admin/app/components/settings/members-default-post-access.hbs
+++ b/ghost/admin/app/components/settings/members-default-post-access.hbs
@@ -1,4 +1,4 @@
-<div class="mb4 gh-setting-large-dropdown" data-test-default-post-access>
+<div class="gh-setting-richdd-container" data-test-default-post-access>
     <div class="gh-expandable-header">
         <div>
             <h4 class="gh-expandable-title">Default post access</h4>
diff --git a/ghost/admin/app/services/settings.js b/ghost/admin/app/services/settings.js
index 19fe83c5d9..9e12f5481e 100644
--- a/ghost/admin/app/services/settings.js
+++ b/ghost/admin/app/services/settings.js
@@ -29,7 +29,7 @@ export default class SettingsService extends Service.extend(_ProxyMixin, Validat
     _loadSettings() {
         if (!this._loadingPromise) {
             this._loadingPromise = this.store
-                .queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor'})
+                .queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor,comments'})
                 .then((settings) => {
                     this._loadingPromise = null;
                     return settings;
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 0695775c7c..4d3dafe773 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -2163,6 +2163,10 @@ p.theme-validation-details {
 }
 
 /* Membership */
+.gh-setting-membership {
+    margin-bottom: 32px;
+}
+
 @media (max-width: 1140px) {
     .gh-setting-members-canvas::before {
         display: none;
@@ -2173,12 +2177,12 @@ p.theme-validation-details {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    max-height: 680px;
 }
 
 .gh-setting-members-basicsform .intro {
     margin: 0;
     font-size: 1.6rem;
+    margin-bottom: 12px;
 }
 
 .gh-setting-members-portalcta {
@@ -2206,10 +2210,6 @@ p.theme-validation-details {
     line-height: 1.4;
 }
 
-.gh-setting-rich-dropdown {
-    margin-bottom: 30px;
-}
-
 .gh-setting-members-portalpreview {
     justify-self: end;
     font-size: 1.3rem;
@@ -2252,7 +2252,7 @@ p.theme-validation-details {
 .gh-setting-dropdown .gh-setting-dropdown-content {
     display: flex;
     align-items: center;
-    margin: 1.6rem 2.4rem 1.6rem 1rem;
+    margin: 1.2rem 2.4rem 1.2rem 0.8rem;
 }
 
 .gh-setting-dropdown-list {
@@ -2277,7 +2277,7 @@ p.theme-validation-details {
 }
 
 .gh-setting-richdd-container {
-    margin: 36px 0;
+    margin: 36px 0 0;
 }
 
 .gh-expandable-content .gh-setting-richdd-container {
@@ -2296,6 +2296,10 @@ p.theme-validation-details {
     display: none;
 }
 
+.gh-setting-rich-dropdown {
+    margin-bottom: 32px;
+}
+
 .gh-setting-rich-dropdown .ember-power-select-status-icon {
     right: 20px;
 }
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index 7760da9dee..d91dbebfea 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/ghost/admin/app/templates/settings/membership.hbs
@@ -20,11 +20,14 @@
 
     <section class="view-container settings-debug">
 
-        <div class="gh-main-layout content-preview">
+        <div class="gh-main-layout gh-setting-membership content-preview">
             <div class="gh-setting-members-basicsform">
                 <p class="intro">Fund your work with subscription revenue. Connect your Stripe account and offer premium content to your audience. Our creators are already making over $12 million per year, while <strong>Ghost takes 0% payment fees</strong>.</p>
-                <hr>
-                <div>
+                
+                {{#unless (feature 'comments')}}
+                    <hr>
+                {{/unless}}
+                <div class="flex flex-column justify-between mt3">
                     <section class="gh-expandable gh-setting-members-portalcta">
                         <div class="gh-expandable-block">
                             <div class="gh-expandable-header">
@@ -44,6 +47,9 @@
                     <div class="gh-setting-rich-dropdown">
                         <Settings::MembersSubscriptionAccess @onChange={{this.membersSubscriptionAccessChanged}} />
                         <Settings::MembersDefaultPostAccess />
+                        {{#if (feature 'comments')}}
+                            <Settings::MembersCommentAccess />
+                        {{/if}}
                     </div>
                 </div>
             </div>