Added new members modal settings behind dev flag (#1611)

no issue

- Adds new modal settings option in members settings
- Allows customization of modal settings for membersjs
- Uses new `memebrsjs_*` settings from core

ghost/admin/app/components/gh-members-lab-setting.hbs

@@ -291,6 +291,19 @@
             </div>
         {{/liquid-if}}
     </section>
+    {{#if this.config.enableDeveloperExperiments}}
+        <section class="bb b--whitegrey pa5">
+            <div class="flex justify-between">
+                <div>
+                    <h4 class="gh-setting-title">Modal settings</h4>
+                    <p class="gh-setting-desc pa0 ma0">Customize members modal signup flow</p>
+                </div>
+                <div>
+                    <button type="button" class="gh-btn" {{action (toggle "showMembersModalSettings" this)}} data-test-toggle-membersFrom><span> Customize </span></button>
+                </div>
+            </div>
+        </section>
+    {{/if}}
     {{#unless this.hasBulkEmailConfig}}
         <section class="bb b--whitegrey pa5">
             <div class="flex justify-between">
@@ -353,4 +366,14 @@
             {{/liquid-if}}
         </section>
     {{/unless}}
-</div>
+</div>
+
+{{#if this.showMembersModalSettings}}
+    <GhFullscreenModal @modal="members-modal-settings"
+        @model={{hash
+            subscriptionSettings=this.subscriptionSettings
+            stripeConnectIntegration=this.stripeConnectIntegration
+        }}
+        @close={{action "closeMembersModalSettings"}}
+        @modifier="action wide" />
+{{/if}}

ghost/admin/app/components/gh-members-lab-setting.js

@@ -39,6 +39,7 @@ export default Component.extend({
 
     currencies: null,
     showFromAddressConfirmation: false,
+    showMembersModalSettings: false,
 
     // passed in actions
     setMembersSubscriptionSettings() {},
@@ -139,6 +140,10 @@ export default Component.extend({
             this.toggleProperty('showFromAddressConfirmation');
         },
 
+        closeMembersModalSettings() {
+            this.set('showMembersModalSettings', false);
+        },
+
         setDefaultContentVisibility(value) {
             this.setDefaultContentVisibility(value);
         },

ghost/admin/app/components/modal-members-modal-settings.hbs

@@ -0,0 +1,130 @@
+<header class="modal-header" data-test-modal="custom-view-form">
+    <h1>Members modal settings</h1>
+</header>
+{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
+    {{svg-jar "close"}}
+</button>
+
+<div class="modal-body">
+    <fieldset>
+        <div class="pt3">
+            <GhFormGroup @classNames="gh-members-subscribed-checkbox pb4 mb0">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <h4 class="gh-setting-title">Display name in signup form</h4>
+                    </div>
+                    <div class="for-switch">
+                        <label class="switch" for="signup-name-checkbox">
+                            <input
+                                type="checkbox"
+                                checked={{this.settings.membersjsShowSignupName}}
+                                id="signup-name-checkbox"
+                                name="signup-name-checkbox" onclick={{action "toggleSignupName" value="target.checked"}}>
+                            <span class="input-toggle-component"></span>
+                        </label>
+                    </div>
+                </div>
+            </GhFormGroup>
+            <div>
+                <div class="mb3">
+                    <h4 class="gh-setting-title">Plans available at signup</h4>
+                </div>
+                <div class="form-group mb0 for-checkbox">
+                    <label
+                        class="checkbox"
+                        for="free-plan"
+                    >
+                        <input
+                            type="checkbox"
+                            checked={{this.isFreeChecked}}
+                            id="free-plan"
+                            name="free-plan"
+                            disabled={{not this.subscriptionSettings.allowSelfSignup}}
+                            class="gh-input post-settings-featured"
+                            onclick={{action "toggleFreePlan" value="target.checked"}}
+                            data-test-checkbox="featured"
+                        >
+                        <span class="input-toggle-component"></span>
+                        <p>Free</p>
+                    </label>
+                </div>
+                <div class="form-group mb0 for-checkbox">
+                    <label
+                        class="checkbox"
+                        for="monthly-plan"
+                    >
+                        <input
+                            type="checkbox"
+                            id="monthly-plan"
+                            name="monthly-plan"
+                            checked={{this.isMonthlyChecked}}
+                            disabled={{not this.isStripeConfigured}}
+                            class="gh-input post-settings-featured"
+                            onclick={{action "toggleMonthlyPlan" value="target.checked"}}
+                            data-test-checkbox="featured"
+                        >
+                        <span class="input-toggle-component"></span>
+                        <p>Monthly</p>
+                    </label>
+                </div>
+                <div class="form-group mb0 for-checkbox">
+                    <label
+                        class="checkbox"
+                        for="yearly-plan"
+                    >
+                        <input
+                            type="checkbox"
+                            id="yearly-plan"
+                            name="yearly-plan"
+                            checked={{this.isYearlyChecked}}
+                            disabled={{not this.isStripeConfigured}}
+                            class="gh-input post-settings-featured"
+                            onclick={{action "toggleYearlyPlan" value="target.checked"}}
+                            data-test-checkbox="featured"
+                        >
+                        <span class="input-toggle-component"></span>
+                        <p>Yearly</p>
+                    </label>
+                </div>
+            </div>
+            <GhFormGroup @classNames="gh-members-subscribed-checkbox mb0 bt pt3 b--whitegrey">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <h4 class="gh-setting-title">Show beacon</h4>
+                    </div>
+                    <div class="for-switch">
+                        <label class="switch" for="beacon-checkbox">
+                            <input
+                                type="checkbox"
+                                checked={{this.settings.membersjsShowBeacon}}
+                                id="beacon-checkbox"
+                                name="beacon-checkbox" onclick={{action "toggleBeaconSetting" value="target.checked"}}>
+                            <span class="input-toggle-component"></span>
+                        </label>
+                    </div>
+                </div>
+            </GhFormGroup>
+        </div>
+    </fieldset>
+</div>
+
+<div class="modal-footer">
+    <button
+        class="gh-btn"
+        {{action "closeModal"}}
+        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+        {{on "mousedown" (optional this.noop)}}
+        data-test-button="cancel-custom-view-form"
+    >
+        <span>Cancel</span>
+    </button>
+
+    <GhTaskButton
+        @buttonText="Save and close"
+        @successText="Saved"
+        @task={{this.saveTask}}
+        @idleClass="gh-btn-green"
+        @class="gh-btn gh-btn-icon"
+        data-test-button="save-members-modal-setting" />
+</div>

ghost/admin/app/components/modal-members-modal-settings.js

@@ -0,0 +1,83 @@
+import ModalComponent from 'ghost-admin/components/modal-base';
+import {alias} from '@ember/object/computed';
+import {computed} from '@ember/object';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
+
+export default ModalComponent.extend({
+    settings: service(),
+    confirm() {},
+
+    subscriptionSettings: alias('model.subscriptionSettings'),
+    stripeConnectIntegration: alias('model.stripeConnectIntegration'),
+
+    isFreeChecked: computed('settings.{membersjsAllowedPlans.[],membersSubscriptionSettings}', function () {
+        const allowSelfSignup = this.subscriptionSettings.allowSelfSignup;
+        const allowedPlans = this.settings.get('membersjsAllowedPlans') || [];
+        return (allowSelfSignup && allowedPlans.includes('free'));
+    }),
+
+    isStripeConfigured: computed('settings.{stripeConnectIntegration,membersSubscriptionSettings}', function () {
+        const stripeConfig = this.subscriptionSettings.stripeConfig;
+        const stripeIntegration = this.stripeConnectIntegration;
+        return (!!stripeConfig.public_token && !!stripeConfig.secret_token) || stripeIntegration;
+    }),
+
+    isMonthlyChecked: computed('settings.membersjsAllowedPlans.[]', 'isStripeConfigured', function () {
+        const allowedPlans = this.settings.get('membersjsAllowedPlans') || [];
+        return (this.isStripeConfigured && allowedPlans.includes('monthly'));
+    }),
+
+    isYearlyChecked: computed('settings.membersjsAllowedPlans.[]', 'isStripeConfigured', function () {
+        const allowedPlans = this.settings.get('membersjsAllowedPlans') || [];
+        return (this.isStripeConfigured && allowedPlans.includes('yearly'));
+    }),
+
+    init() {
+        this._super(...arguments);
+    },
+
+    actions: {
+        toggleFreePlan(isChecked) {
+            this.updateAllowedPlan('free', isChecked);
+        },
+        toggleMonthlyPlan(isChecked) {
+            this.updateAllowedPlan('monthly', isChecked);
+        },
+        toggleYearlyPlan(isChecked) {
+            this.updateAllowedPlan('yearly', isChecked);
+        },
+        toggleBeaconSetting(showBeacon) {
+            this.settings.set('membersjsShowBeacon', showBeacon);
+        },
+
+        toggleSignupName(showSignupName) {
+            this.settings.set('membersjsShowSignupName', showSignupName);
+        },
+
+        confirm() {
+            return this.saveTask.perform();
+        },
+
+        isPlanSelected(plan) {
+            const allowedPlans = this.settings.get('membersjsAllowedPlans');
+            return allowedPlans.includes(plan);
+        }
+    },
+
+    updateAllowedPlan(plan, isChecked) {
+        const allowedPlans = this.settings.get('membersjsAllowedPlans') || [];
+
+        if (!isChecked) {
+            this.settings.set('membersjsAllowedPlans', allowedPlans.filter(p => p !== plan));
+        } else {
+            allowedPlans.push(plan);
+            this.settings.set('membersjsAllowedPlans', [...allowedPlans]);
+        }
+    },
+
+    saveTask: task(function* () {
+        yield this.settings.save();
+        this.closeModal();
+    }).drop()
+});

ghost/admin/app/models/setting.js

@@ -43,5 +43,8 @@ export default Model.extend(ValidationEngine, {
     ogDescription: attr('string'),
     ogImage: attr('string'),
     bulkEmailSettings: attr('json-string'),
+    membersjsShowSignupName: attr('boolean'),
+    membersjsShowBeacon: attr('boolean'),
+    membersjsAllowedPlans: attr('json-string'),
     sharedViews: attr('string')
 });