Content visibility configuration in labs (#1346)

no issue

- Changed members description to less verbose
- Added content visibility radio options to members configuration screen
- Moved setting of default visibility to server-side
- Default visibility setting when PSM is opened before making the first request to the server

app/components/gh-psm-visibility-input.js

@@ -1,4 +1,6 @@
 import Component from '@ember/component';
+import {computed} from '@ember/object';
+import {inject as service} from '@ember/service';
 
 const VISIBILITIES = [
     {label: 'Everyone', name: 'public'},
@@ -8,9 +10,15 @@ const VISIBILITIES = [
 
 export default Component.extend({
 
+    settings: service(),
+
     // public attrs
     post: null,
 
+    selectedVisibility: computed('post.visibility', function () {
+        return this.get('post.visibility') || this.settings.get('defaultContentVisibility');
+    }),
+
     init() {
         this._super(...arguments);
         this.availableVisibilities = VISIBILITIES;

app/controllers/editor.js

@@ -335,11 +335,6 @@ export default Controller.extend({
         this.set('post.twitterTitle', this.get('post.twitterTitleScratch'));
         this.set('post.twitterDescription', this.get('post.twitterDescriptionScratch'));
 
-        if (!this.get('post.visibility')) {
-            // TODO: make this dependent on value selected in feature.default_content_visibility
-            this.set('post.visibility', 'public');
-        }
-
         if (!this.get('post.slug')) {
             this.saveTitle.cancelAll();
 

app/controllers/settings/labs.js

@@ -180,6 +180,10 @@ export default Controller.extend({
                 .click();
         },
 
+        setDefaultContentVisibility(value) {
+            this.set('settings.defaultContentVisibility', value);
+        },
+
         setSubscriptionSettings(key, event) {
             let subscriptionSettings = this.parseSubscriptionSettings(this.get('settings.membersSubscriptionSettings'));
             let stripeProcessor = subscriptionSettings.paymentProcessors.find((proc) => {
@@ -189,6 +193,7 @@ export default Controller.extend({
             stripeConfig.product = {
                 name: this.settings.get('title')
             };
+            // TODO: this flag has to be removed as it doesn't serve any purpose
             if (key === 'isPaid') {
                 subscriptionSettings.isPaid = event;
             }

app/models/setting.js

@@ -29,6 +29,7 @@ export default Model.extend(ValidationEngine, {
             return {isActive: true};
         }
     }),
+    defaultContentVisibility: attr('string'),
     membersSubscriptionSettings: attr('string'),
     metaTitle: attr('string'),
     metaDescription: attr('string'),

app/serializers/post.js

@@ -41,6 +41,10 @@ export default ApplicationSerializer.extend(EmbeddedRecordsMixin, {
         // Deprecated property (replaced with data.authors)
         delete json.author;
 
+        if (json.visibility === null) {
+            delete json.visibility;
+        }
+
         return json;
     }
 });

app/templates/components/gh-psm-visibility-input.hbs

@@ -1,12 +1,9 @@
 <span class="gh-select">
-    {{one-way-select
+    {{one-way-select selectedVisibility
         options=availableVisibilities
-        id="visibility-input"
-        name="visibility"
         optionValuePath="name"
         optionLabelPath="label"
         optionTargetPath="name"
-        value=post.visibility
         update=(action "updateVisibility")
     }}
     {{svg-jar "arrow-down-small"}}

app/templates/settings/labs.hbs

@@ -127,7 +127,7 @@
                 <div class="gh-setting">
                     <div class="gh-setting-content">
                         <div class="gh-setting-title">Members</div>
-                        <div class="gh-setting-desc">Enable free or paid member registration. Restrict content by using <span class="dib blue ba br2 b--blue pa1 pt0 pb0 tag-token--internal">#members</span> hashtag on posts</div>
+                        <div class="gh-setting-desc">Enable free or paid member registration.</div>
 
                         {{#liquid-if feature.labs.members class="nr20"}}
 
@@ -141,29 +141,33 @@
                             </button>
 
                             {{#liquid-if showMemberConfig}}
-                                <div class="flex nl2 nr2 mt5">
-                                    <div class="gh-publishmenu-radio {{if (eq subscriptionSettings.isPaid false) "active"}} flex-auto w-50 ba br4 b--whitegrey pa5 gh-labs-members-radio"
-                                        {{action "setSubscriptionSettings" "isPaid" false on="click"}}>
-                                        <div class="gh-publishmenu-radio-button"></div>
+                                <div>Default post access</div>
+                                <section class="gh-visibility-menu-content">
+                                    <div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "public") "active"}}" {{action "setDefaultContentVisibility" "public" on="click"}}>
+                                        <div class="gh-publishmenu-radio-button" data-test-publishmenu-unpublished-option></div>
                                         <div class="gh-publishmenu-radio-content">
-                                            <div class="gh-publishmenu-radio-label f3"><span class="fw6 f7 darkgrey">Free</span></div>
-                                            <div class="gh-publishmenu-radio-desc">Access to members-only posts require free user registration</div>
+                                            <div class="gh-publishmenu-radio-label">Public</div>
                                         </div>
                                     </div>
-                                    <div class="gh-publishmenu-radio {{if (eq subscriptionSettings.isPaid true) "active"}} flex-auto w-50 ba br4 b--whitegrey pa5 ml2 gh-labs-members-radio">
-                                        <div class="gh-publishmenu-radio-button" {{action "setSubscriptionSettings" "isPaid" true on="click"}}></div>
-                                        <div class="gh-publishmenu-radio-content">
-                                            <div {{action "setSubscriptionSettings" "isPaid" true on="click"}}>
-                                                <div class="gh-publishmenu-radio-label"><span class="fw6 f7 darkgrey">Paid</span></div>
-                                                <div class="gh-publishmenu-radio-desc">Set up paid subscriptions using Stripe</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
 
-                                {{#liquid-if (eq subscriptionSettings.isPaid true)}}
+                                    <div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "members") "active"}}" {{action "setDefaultContentVisibility" "members" on="click"}}>
+                                        <div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
+                                        <div class="gh-publishmenu-radio-content">
+                                            <div class="gh-publishmenu-radio-label">Free and paying members</div>
+                                        </div>
+                                    </div>
+
+                                    <div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "paid") "active"}}"
+                                        {{action "setDefaultContentVisibility" "paid" on="click"}}>
+                                        <div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
+                                        <div class="gh-publishmenu-radio-content">
+                                            <div class="gh-publishmenu-radio-label">Only paying members</div>
+                                        </div>
+                                    </div>
+                                </section>
 
                                 <div class="ba br4 b--whitegrey pa5 mt5">
+                                    <div>Stripe setup</div>
                                     <div class="flex flex-column">
                                         <div class="flex">
                                             <div class="w-50 mr2">
@@ -215,7 +219,6 @@
                                         </div>
                                     </div>
                                 </div>
-                                {{/liquid-if}}
 
                                 <div class="mb5 mt5">
                                     {{gh-task-button "Save"

tests/integration/components/gh-psm-visibility-input-test.js

@@ -29,6 +29,7 @@ describe('Integration: Component: gh-psm-visibility-input', function () {
         });
 
         await render(hbs`{{gh-psm-visibility-input post=post}}`);
+
         expect(this.element, 'top-level elements').to.exist;
         expect(findAll('option'), 'number of options').to.have.length(3);
         expect(find('select').value, 'selected option value').to.equal('public');