From ecb42a36809de7f472ef493bd4616c00c7dd3bb1 Mon Sep 17 00:00:00 2001
From: Elena Baidakova <lena.baydakova@gmail.com>
Date: Wed, 19 Apr 2023 19:45:34 +0400
Subject: [PATCH] Wired announcement api to admin ui (#16678)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs TryGhost/Team#3052


<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 7173288</samp>

This pull request adds new components and settings for the announcement
bar feature, which allows the user to customize the content, background,
and visibility of a banner that appears on the site.
---
 .../announcement-settings/background.hbs      | 18 +++++++++++++
 .../announcement-settings/background.js       | 26 ++++++++++++++++++
 .../content.hbs}                              |  4 +--
 .../announcement-settings/content.js          | 18 +++++++++++++
 .../announcement-settings/visibility.hbs      | 18 +++++++++++++
 .../announcement-settings/visibility.js       | 27 +++++++++++++++++++
 .../custom-theme-settings/announcement.js     | 10 -------
 .../settings/design/theme-settings-form.hbs   |  4 ++-
 ghost/admin/app/models/setting.js             |  3 +++
 ghost/admin/app/services/settings.js          |  2 +-
 10 files changed, 116 insertions(+), 14 deletions(-)
 create mode 100644 ghost/admin/app/components/announcement-settings/background.hbs
 create mode 100644 ghost/admin/app/components/announcement-settings/background.js
 rename ghost/admin/app/components/{custom-theme-settings/announcement.hbs => announcement-settings/content.hbs} (84%)
 create mode 100644 ghost/admin/app/components/announcement-settings/content.js
 create mode 100644 ghost/admin/app/components/announcement-settings/visibility.hbs
 create mode 100644 ghost/admin/app/components/announcement-settings/visibility.js
 delete mode 100644 ghost/admin/app/components/custom-theme-settings/announcement.js

diff --git a/ghost/admin/app/components/announcement-settings/background.hbs b/ghost/admin/app/components/announcement-settings/background.hbs
new file mode 100644
index 0000000000..8aaddb0851
--- /dev/null
+++ b/ghost/admin/app/components/announcement-settings/background.hbs
@@ -0,0 +1,18 @@
+<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-background">
+            Announcement background
+        </label>
+
+        <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>
\ No newline at end of file
diff --git a/ghost/admin/app/components/announcement-settings/background.js b/ghost/admin/app/components/announcement-settings/background.js
new file mode 100644
index 0000000000..18ec84170d
--- /dev/null
+++ b/ghost/admin/app/components/announcement-settings/background.js
@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class AnnouncementSettingsBackgroundComponent extends Component {
+    @service settings;
+
+    get background() {
+        return this.settings.announcementBackground;
+    }
+
+    get options() {
+        return [
+            {value: 'accent', label: 'Accent'},
+            {value: 'dark', label: 'Dark'},
+            {value: 'light', label: 'Light'}
+        ];
+    }
+
+    @action
+    setBackground(event) {
+        this.settings.announcementBackground = event.target.value;
+        this.settings.save();
+        this.args.onChange?.();
+    }
+}
diff --git a/ghost/admin/app/components/custom-theme-settings/announcement.hbs b/ghost/admin/app/components/announcement-settings/content.hbs
similarity index 84%
rename from ghost/admin/app/components/custom-theme-settings/announcement.hbs
rename to ghost/admin/app/components/announcement-settings/content.hbs
index 6a50cc281d..7df9d130e7 100644
--- a/ghost/admin/app/components/custom-theme-settings/announcement.hbs
+++ b/ghost/admin/app/components/announcement-settings/content.hbs
@@ -6,8 +6,8 @@
         <div class="gh-announcement-editor">
             <KoenigLexicalEditorInput
                 @placeholderText="Breaking news, a big story, a special offer, or any other message"
-                @html={{'<p></p>'}}
-                @onChangeHtml={{this.onChangeHtml}}
+                @html={{this.content}}
+                @onChangeHtml={{this.setContent}}
             />
         </div>
     </div>
diff --git a/ghost/admin/app/components/announcement-settings/content.js b/ghost/admin/app/components/announcement-settings/content.js
new file mode 100644
index 0000000000..e880a74a9a
--- /dev/null
+++ b/ghost/admin/app/components/announcement-settings/content.js
@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class AnnouncementSettingsContentComponent extends Component {
+    @service settings;
+
+    get content() {
+        return this.settings.announcementContent;
+    }
+
+    @action
+    setContent(html) {
+        this.settings.announcementContent = html;
+        this.settings.save();
+        this.args.onChange?.();
+    }
+}
diff --git a/ghost/admin/app/components/announcement-settings/visibility.hbs b/ghost/admin/app/components/announcement-settings/visibility.hbs
new file mode 100644
index 0000000000..fe3fbc8c34
--- /dev/null
+++ b/ghost/admin/app/components/announcement-settings/visibility.hbs
@@ -0,0 +1,18 @@
+<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">
+            Announcement visibility
+        </label>
+
+        <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>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/announcement-settings/visibility.js b/ghost/admin/app/components/announcement-settings/visibility.js
new file mode 100644
index 0000000000..4fce18dd85
--- /dev/null
+++ b/ghost/admin/app/components/announcement-settings/visibility.js
@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class AnnouncementSettingsVisibilityComponent extends Component {
+    @service settings;
+
+    get visibility() {
+        return this.settings.announcementVisibility;
+    }
+
+    get options() {
+        return [
+            {value: 'public', label: 'Public'},
+            {value: 'visitors', label: 'Visitors'},
+            {value: 'members', label: 'Members'},
+            {value: 'paid', label: 'Paid'}
+        ];
+    }
+
+    @action
+    setVisibility(event) {
+        this.settings.announcementVisibility = event.target.value;
+        this.settings.save();
+        this.args.onChange?.();
+    }
+}
diff --git a/ghost/admin/app/components/custom-theme-settings/announcement.js b/ghost/admin/app/components/custom-theme-settings/announcement.js
deleted file mode 100644
index 8084e3d1d5..0000000000
--- a/ghost/admin/app/components/custom-theme-settings/announcement.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@glimmer/component';
-import {action} from '@ember/object';
-
-export default class CustomThemeSettingsAnnouncementComponent extends Component {
-    @action
-    // eslint-disable-next-line no-unused-vars
-    onChangeHtml(html) {
-        this.args.onChange?.();
-    }
-}
diff --git a/ghost/admin/app/components/settings/design/theme-settings-form.hbs b/ghost/admin/app/components/settings/design/theme-settings-form.hbs
index ff4b358543..f3078ad61d 100644
--- a/ghost/admin/app/components/settings/design/theme-settings-form.hbs
+++ b/ghost/admin/app/components/settings/design/theme-settings-form.hbs
@@ -18,7 +18,9 @@
             {{/if}}
         {{/each}}
         {{#if (feature 'announcementBar')}}
-            <CustomThemeSettings::Announcement @onChange={{@updatePreview}} />
+            <AnnouncementSettings::Content @onChange={{@updatePreview}} />
+            <AnnouncementSettings::Background @onChange={{@updatePreview}} />
+            <AnnouncementSettings::Visibility @onChange={{@updatePreview}} />
         {{/if}}
     </form>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/models/setting.js b/ghost/admin/app/models/setting.js
index af82335533..a18d5a491c 100644
--- a/ghost/admin/app/models/setting.js
+++ b/ghost/admin/app/models/setting.js
@@ -50,6 +50,9 @@ export default Model.extend(ValidationEngine, {
     portalSignupTermsHtml: attr('string'),
     portalSignupCheckboxRequired: attr('boolean'),
     sharedViews: attr('string'),
+    announcementContent: attr('string'),
+    announcementBackground: attr('string'),
+    announcementVisibility: attr('string'),
     /**
      * Analytics settings
      */
diff --git a/ghost/admin/app/services/settings.js b/ghost/admin/app/services/settings.js
index 94b7464ab7..45b1dd43c1 100644
--- a/ghost/admin/app/services/settings.js
+++ b/ghost/admin/app/services/settings.js
@@ -55,7 +55,7 @@ export default class SettingsService extends Service.extend(ValidationEngine) {
     _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,comments,analytics'})
+                .queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor,comments,analytics,announcement'})
                 .then((settings) => {
                     this._loadingPromise = null;
                     return settings;