Made the new offers location more discoverable

fixes PROD-279

- offers will be removed from the main nav once we remove the new offers in settings flag
- the new location should be more discoverable to users
- this adds a notification on bottom of the main nav which is linked to the offers in settings
- this area is also used for displaying theme errors notification and referral invitation
- the priority should be theme errors notification > referral invitation > offers notification

ghost/admin/app/components/gh-nav-menu/footer.hbs

@@ -8,6 +8,8 @@
 
     <GhReferralInvite @hasThemeErrors={{this.hasThemeErrors}} />
 
+    <GhOffersNotification @hasThemeErrors={{this.hasThemeErrors}} />
+
     <div class="flex items-center justify-between">
         <div class="pe-all">
             <GhBasicDropdown @horizontalPosition="left" @verticalPosition="above" @calculatePosition={{this.userDropdownPosition}} as |dropdown|>

ghost/admin/app/components/gh-offers-notification.hbs

@@ -0,0 +1,6 @@
+{{#if this.showOffersNotification}}
+<a class="gh-footer-toast gh-generic-toast" href="#/settings/offers" {{on "click" this.dismissOffersNotification}}>
+    <span class="gh-footer-toast-title gh-notification-title">Offers moved to Settings</span>
+    <span class="gh-footer-toast-p">Click to explore the changes &rarr;</span>
+</a>
+{{/if}}

ghost/admin/app/components/gh-offers-notification.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import moment from 'moment-timezone';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class GhOffersNotification extends Component {
+    @service feature;
+    @service settings;
+
+    constructor() {
+        super(...arguments);
+    }
+
+    get isOffersNotificationNotDismissed() {
+        return !this.feature.accessibility.offersNotificationDismissed;
+    }
+
+    get showOffersNotification() {
+        return !this.args.hasThemeErrors && this.isOffersNotificationNotDismissed;
+    }
+
+    @action
+    dismissOffersNotification(event) {
+        event.stopPropagation();
+
+        if (!this.feature.offersNotificationDismissed) {
+            this.feature.offersNotificationDismissed = moment().tz(this.settings.timezone);
+        }
+    }
+}

ghost/admin/app/services/feature.js

@@ -58,6 +58,9 @@ export default class FeatureService extends Service {
     // user-specific referral invitation
     @feature('referralInviteDismissed', {user: true}) referralInviteDismissed;
 
+    // user-specific offers notification
+    @feature('offersNotificationDismissed', {user: true}) offersNotificationDismissed;
+
     // labs flags
     @feature('urlCache') urlCache;
     @feature('lexicalMultiplayer') lexicalMultiplayer;

ghost/admin/app/styles/layouts/main.css

@@ -2138,6 +2138,20 @@ section.gh-ds h2 {
     background: var(--red);
 }
 
+.gh-generic-toast {
+    color: var(--black);
+    background: var(--main-color-content-greybg);
+    transition: background-color .2s;
+}
+
+.gh-generic-toast:hover {
+    background: color-mod(var(--main-color-content-greybg) l(-2%));
+}
+
+.gh-referral-toast + .gh-generic-toast {
+    display: none;
+}
+
 /* Ghost Referrals invite toast */
 .gh-referral-toast {
     position: relative;