Wired announcement settings admin UI to API (#16692)

refs TryGhost/Team#3094

ghost/admin/app/components/announcement-settings/background.hbs

@@ -7,22 +7,16 @@
 
             <div class="kg-settings-panel-control-input">
                 <div class="gh-btn-group kg-settings-headerstyle-btn-group">
-                    <button class="gh-btn kg-headerstyle-btn-dark gh-btn-group-selected" type="button"></button>
-                    <button class="gh-btn kg-headerstyle-btn-light" type="button"></button>
-                    <button class="gh-btn kg-headerstyle-btn-accent" type="button"></button>
+                    {{#each this.options as |settingOption|}}
+                        <button
+                            class="gh-btn {{settingOption.className}} {{if (eq this.background settingOption.value) "gh-btn-group-selected"}}"
+                            type="button"
+                            title={{settingOption.label}}
+                            {{on "click" (fn this.setBackground settingOption.value)}}
+                        ></button>
+                    {{/each}}
                 </div>
             </div>
-
-            {{!-- <span class="gh-select">
-                <select class="ember-select" name="announcement-background" id="announcement-background" {{on "change" this.setBackground}}>
-                    {{#each this.options as |settingOption|}}
-                        <option value={{settingOption.value}} selected={{eq settingOption.value this.background}}>
-                            {{settingOption.label}}
-                        </option>
-                    {{/each}}
-                </select>
-                {{svg-jar "arrow-down-small"}}
-            </span> --}}
         </div>
     </div>
 </div>

ghost/admin/app/components/announcement-settings/background.js

@@ -11,15 +11,15 @@ export default class AnnouncementSettingsBackgroundComponent extends Component {
 
     get options() {
         return [
-            {value: 'accent', label: 'Accent'},
-            {value: 'dark', label: 'Dark'},
-            {value: 'light', label: 'Light'}
+            {value: 'dark', label: 'Dark', className: 'kg-headerstyle-btn-dark'},
+            {value: 'light', label: 'Light', className: 'kg-headerstyle-btn-light'},
+            {value: 'accent', label: 'Accent', className: 'kg-headerstyle-btn-accent'}
         ];
     }
 
     @action
-    setBackground(event) {
-        this.settings.announcementBackground = event.target.value;
+    setBackground(value) {
+        this.settings.announcementBackground = value;
         this.settings.save();
         this.args.onChange?.();
     }

ghost/admin/app/components/announcement-settings/visibility.hbs

@@ -1,6 +1,6 @@
 <div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
     <div class="flex-grow-1">
-        <label class="gh-setting-title gh-theme-setting-title" for="announcement-visibility">
+        <label class="gh-setting-title gh-theme-setting-title" for="logged-out">
             Visibility
         </label>
 
@@ -11,41 +11,55 @@
                     id="logged-out"
                     name="logged-out"
                     class="gh-input"
+                    value={{this.visibilityOptions.visitors}}
+                    checked={{this.isVisitorsChecked}}
+                    {{on "click" this.updateVisibility}}
                 >
                 <span class="input-toggle-component"></span>
-                <p>Logged out visitors</p>
+                <span>Logged out visitors</span>
             </label>
-            <label class="checkbox" for="free">
-                <input
-                    type="checkbox"
-                    id="free"
-                    name="free"
-                    class="gh-input"
-                >
-                <span class="input-toggle-component"></span>
-                <p>Free members</p>
-            </label>
-            <label class="checkbox" for="paid">
-                <input
-                    type="checkbox"
-                    id="paid"
-                    name="paid"
-                    class="gh-input"
-                >
-                <span class="input-toggle-component"></span>
-                <p>Paid members</p>
-            </label>
-        </div>
 
-        {{!-- <span class="gh-select">
-            <select class="ember-select" name="announcement-visibility" id="announcement-visibility" {{on "change" this.setVisibility}}>
-                {{#each this.options as |settingOption|}}
-                    <option value={{settingOption.value}} selected={{eq settingOption.value this.background}}>
-                        {{settingOption.label}}
-                    </option>
-                {{/each}}
-            </select>
-            {{svg-jar "arrow-down-small"}}
-        </span> --}}
+            {{#if this.isPaidAvailable}}
+                <label class="checkbox" for="free">
+                    <input
+                        type="checkbox"
+                        id="free"
+                        name="free"
+                        class="gh-input"
+                        value={{this.visibilityOptions.freeMembers}}
+                        checked={{this.isFreeMembersChecked}}
+                        {{on "click" this.updateVisibility}}
+                    >
+                    <span class="input-toggle-component"></span>
+                    <span>Free members</span>
+                </label>
+                <label class="checkbox" for="paid">
+                    <input
+                        type="checkbox"
+                        id="paid"
+                        name="paid"
+                        class="gh-input"
+                        value={{this.visibilityOptions.paidMembers}}
+                        checked={{this.isPaidMembersChecked}}
+                        {{on "click" this.updateVisibility}}
+                    >
+                    <span class="input-toggle-component"></span>
+                    <span>Paid members</span>
+                </label>
+            {{else}}
+                <label class="checkbox">
+                    <input
+                        type="checkbox"
+                        name="members"
+                        class="gh-input"
+                        value={{this.visibilityOptions.freeMembers}}
+                        checked={{this.isFreeMembersChecked}}
+                        {{on "click" this.updateVisibility}}
+                    >
+                    <span class="input-toggle-component"></span>
+                    <span>Members</span>
+                </label>
+            {{/if}}
+        </div>
     </div>
 </div>

ghost/admin/app/components/announcement-settings/visibility.js

@@ -4,24 +4,46 @@ import {inject as service} from '@ember/service';
 
 export default class AnnouncementSettingsVisibilityComponent extends Component {
     @service settings;
+    @service membersUtils;
 
-    get visibility() {
+    visibilityOptions = {
+        freeMembers: 'free_members',
+        paidMembers: 'paid_members',
+        visitors: 'visitors'
+    };
+
+    get visibilitySettings() {
         return this.settings.announcementVisibility;
     }
 
-    get options() {
-        return [
-            {value: 'public', label: 'Public'},
-            {value: 'visitors', label: 'Visitors'},
-            {value: 'members', label: 'Members'},
-            {value: 'paid', label: 'Paid'}
-        ];
+    get isPaidAvailable() {
+        return this.membersUtils.isStripeEnabled;
+    }
+
+    get isFreeMembersChecked() {
+        return this.visibilitySettings.includes(this.visibilityOptions.freeMembers);
+    }
+
+    get isPaidMembersChecked() {
+        return this.visibilitySettings.includes(this.visibilityOptions.paidMembers);
+    }
+
+    get isVisitorsChecked() {
+        return this.visibilitySettings.includes(this.visibilityOptions.visitors);
     }
 
     @action
-    setVisibility(event) {
-        this.settings.announcementVisibility = event.target.value;
+    updateVisibility(event) {
+        let updatedVisibilityOptions = [...this.visibilitySettings];
+        const value = event.target.value;
+
+        if (event.target.checked) {
+            updatedVisibilityOptions.push(value);
+        } else {
+            updatedVisibilityOptions = updatedVisibilityOptions.filter(item => item !== value);
+        }
+
+        this.settings.announcementVisibility = updatedVisibilityOptions;
         this.settings.save();
-        this.args.onChange?.();
     }
 }

ghost/admin/app/components/gh-nav-menu/announcement-bar.hbs

@@ -8,9 +8,9 @@
             <div class="gh-nav-list gh-nav-main">
                 <div class="gh-nav-design-settings">
                     <form>
-                        <AnnouncementSettings::Content @onChange={{@updatePreview}} />
-                        <AnnouncementSettings::Background @onChange={{@updatePreview}} />
-                        <AnnouncementSettings::Visibility @onChange={{@updatePreview}} />
+                        <AnnouncementSettings::Content @onChange={{this.updatePreview}} />
+                        <AnnouncementSettings::Background @onChange={{this.updatePreview}} />
+                        <AnnouncementSettings::Visibility @onChange={{this.updatePreview}} />
                     </form>
                 </div>
             </div>

ghost/admin/app/components/gh-nav-menu/announcement-bar.js

@@ -1,86 +1,15 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
-import {bind} from '@ember/runloop';
 import {inject} from 'ghost-admin/decorators/inject';
-import {isEmpty} from '@ember/utils';
 import {inject as service} from '@ember/service';
-import {tracked} from '@glimmer/tracking';
 
 export default class AnnouncementBarMenuComponent extends Component {
-    @service customThemeSettings;
-    @service router;
-    @service settings;
-    @service store;
     @service themeManagement;
 
     @inject config;
 
-    @tracked openSection = null;
-
-    themes = this.store.peekAll('theme');
-
-    constructor() {
-        super(...arguments);
-
-        // fetch all themes in the background so we can show the active theme
-        this.store.findAll('theme');
-
-        if (this.router.currentRouteName === 'settings.announcement-bar.index') {
-            this.openDefaultSection();
-        }
-
-        this.routeDidChangeHandler = bind(this, this.handleRouteDidChange);
-        this.router.on('routeDidChange', this.routeDidChangeHandler);
-    }
-
-    willDestroy() {
-        super.willDestroy(...arguments);
-        this.router.off('routeDidChange', this.routeDidChangeHandler);
-    }
-
-    get activeTheme() {
-        return this.themes.findBy('active', true);
-    }
-
     @action
-    toggleSection(section) {
-        if (this.openSection === section) {
-            this.openSection = null;
-        } else {
-            this.openSection = section;
-
-            const group = this.customThemeSettings.KNOWN_GROUPS.findBy('key', section);
-            if (group && group.previewType) {
-                this.themeManagement.setPreviewType(group.previewType);
-            } else {
-                this.themeManagement.setPreviewType('homepage');
-            }
-        }
-    }
-
-    @action
-    transitionBackToIndex() {
-        if (this.router.currentRouteName !== 'settings.announcement-bar.index') {
-            this.router.transitionTo('settings.announcement-bar.index');
-        }
-    }
-
-    @action
-    closeAllSections() {
-        this.openSection = null;
-    }
-
-    openDefaultSection() {
-        const noCustomSettings = isEmpty(this.customThemeSettings.settings);
-
-        if (noCustomSettings) {
-            this.openSection = 'brand';
-        }
-    }
-
-    handleRouteDidChange(transition) {
-        if (!transition.isAborted && transition.to?.name === 'settings.announcement-bar.index') {
-            this.openDefaultSection();
-        }
+    updatePreview() {
+        this.themeManagement.updatePreviewHtmlTask.perform();
     }
 }

ghost/admin/app/models/setting.js

@@ -52,7 +52,7 @@ export default Model.extend(ValidationEngine, {
     sharedViews: attr('string'),
     announcementContent: attr('string'),
     announcementBackground: attr('string'),
-    announcementVisibility: attr('string'),
+    announcementVisibility: attr('json-string'),
     /**
      * Analytics settings
      */