What's new popup

ghost/admin/.lint-todo

@@ -189,3 +189,4 @@ add|ember-template-lint|require-iframe-title|27|20|27|20|94e58d11848d5613900c218
 add|ember-template-lint|require-iframe-title|42|16|42|16|a3292b469dc37f2f4791e7f224b0b65c8ecf5d18|1712707200000|1723075200000|1728259200000|app/components/modals/email-preview.hbs
 add|ember-template-lint|no-autofocus-attribute|21|20|21|20|942419d05c04ded6716f09faecd6b1ab55418121|1712707200000|1723075200000|1728259200000|app/components/modals/new-custom-integration.hbs
 add|ember-template-lint|no-invalid-interactive|2|37|2|37|e21ba31f54b631a428c28a1c9f88d0dc66f2f5fc|1712707200000|1723075200000|1728259200000|app/components/modals/search.hbs
+remove|ember-template-lint|no-unknown-arguments-for-builtin-components|93|93|93|93|156670ca427c49c51f0a94f862b286ccc9466d92|1712707200000|1723075200000|1728259200000|app/components/gh-nav-menu/footer.hbs

ghost/admin/app/components/dashboard/resources/whats-new.hbs

@@ -4,17 +4,17 @@
             <h4>{{svg-jar "gift" alt="Gift" class="v-mid"}}What's new</h4>
         </div>
         <div class="gh-dashboard-resource-body">
-             <div class="gh-dashboard-list {{if this.whatsNew.hasNew "has-new"}}">
+            <div class="gh-dashboard-list {{if this.whatsNew.hasNew "has-new"}}">
                 {{#if (not (or this.loading this.error))}}
                     <div class="gh-dashboard-list-body">
                         {{#each this.entries as |entry|}}
                             <div class="gh-dashboard-list-item">
-                                <LinkTo class="gh-dashboard-list-post" @route="whatsnew" @query={{hash entry=entry.slug}}>
+                                <a href={{entry.url}} class="gh-dashboard-list-post" target="_blank" rel="noopener noreferrer">
                                     <span class="gh-dashboard-list-link">
                                         <span>{{entry.title}}</span>
                                     </span>
                                     <div class="gh-dashboard-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div>
-                                </LinkTo>
+                                </a>
                             </div>
                         {{else}}
                             <div class="gh-dashboard-list-empty">
@@ -26,7 +26,7 @@
             </div>
         </div>
         <div class="gh-dashboard-resource-footer">
-            <LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">View more features &rarr;</LinkTo>
+            <a href="https://ghost.org/changelog" class="green" target="_blank" rel="noopener noreferrer">View more features &rarr;</a>
         </div>
     </article>
 </section>

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

@@ -0,0 +1,28 @@
+{{#if this.showReferralInvite}}
+    <div class="gh-sidebar-banner gh-referral-toast">
+        <button class="gh-sidebar-banner-close" type="button" {{on "click" this.dismissReferralInvite}}>&#xd7;</button>
+        <a href="https://referrals.ghost.org/?ref=admin" target="_blank" rel="noopener noreferrer">
+            <strong>You qualify for our invite-only referral program.</strong>
+            <p class="gh-footer-toast-p">Refer people to Ghost and earn a <strong>30% share</strong> of the subscription revenue, every single month.</p>
+            <div class="gh-btn gh-btn-black gh-sidebar-banner-button" type="button"><span>Find out more &rarr;</span></div>
+        </a>
+    </div>
+{{/if}}
+
+{{#if (and this.showWhatsNew this.whatsNew.hasNew)}}
+    {{#let (get this.whatsNew.entries "0") as |entry|}}
+    <div class="gh-sidebar-banner gh-whatsnew-toast">
+        <button class="gh-sidebar-banner-close" type="button" {{on "click" this.dismissWhatsNewToast}}>&#xd7;</button>
+        <a class="gh-sidebar-banner-container" href={{entry.url}} target="_blank" rel="noopener noreferrer" {{on "click" (fn this.openFeaturedWhatsNew entry.url)}}>
+            <div class="gh-sidebar-banner-head">
+                {{svg-jar "sparkle-fill" class="gh-sidebar-banner-icon gh-whatsnew-banner-icon"}}
+                <span class="gh-sidebar-banner-subhead">What's new?</span>
+            </div>
+            <div class="gh-sidebar-banner-msg">{{entry.title}}</div>
+            {{#if entry.custom_excerpt}}
+                <div class="gh-sidebar-banner-details">{{entry.custom_excerpt}}</div>
+            {{/if}}
+        </a>
+    </div>
+    {{/let}}
+{{/if}}

ghost/admin/app/components/gh-nav-menu/footer-banner.js

@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+import envConfig from 'ghost-admin/config/environment';
+import moment from 'moment-timezone';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
+
+export default class FooterBanner extends Component {
+    @service session;
+    @service dashboardStats;
+    @service feature;
+    @service membersUtils;
+    @service modals;
+    @service settings;
+    @service whatsNew;
+
+    constructor() {
+        super(...arguments);
+        this.loadCurrentMRR.perform();
+    }
+
+    get isAdminOrOwner() {
+        return this.session.user.isAdmin;
+    }
+
+    get isReferralNotificationNotDismissed() {
+        return !this.feature.accessibility.referralInviteDismissed;
+    }
+
+    get stripeLiveModeEnabled() {
+        // allow testing mode when not in a production environment
+        const isDevModeStripeEnabled = envConfig.environment !== 'production' && this.membersUtils.isStripeEnabled;
+        const isLiveEnabled = this.settings.stripeConnectLivemode;
+        return isDevModeStripeEnabled || isLiveEnabled;
+    }
+
+    get hasReachedMRR() {
+        return this.dashboardStats.currentMRR / 100 >= 100;
+    }
+
+    get showReferralInvite() {
+        // Conditions to see the referral invite
+        // 1. Needs to be Owner or Admin
+        // 2. Stripe is setup and enabled in live mode
+        // 3. MRR is > $100
+        // 4. Notification has not yet been dismissed by the user
+        return !this.args.hasThemeErrors && this.isAdminOrOwner && this.isReferralNotificationNotDismissed && this.stripeLiveModeEnabled && this.hasReachedMRR;
+    }
+
+    get showWhatsNew() {
+        return !this.showReferralInvite && this.whatsNew.hasNewFeatured;
+    }
+
+    @task
+    *loadCurrentMRR() {
+        if (this.isAdminOrOwnern) {
+            try {
+                yield this.dashboardStats.loadMrrStats();
+            } catch (error) {
+                // noop
+            }
+        }
+    }
+
+    @action
+    dismissReferralInvite(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!this.feature.referralInviteDismissed) {
+            this.feature.referralInviteDismissed = moment().tz(this.settings.timezone);
+        }
+    }
+
+    @action
+    dismissWhatsNewToast(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Dismiss
+        this.whatsNew.seen();
+    }
+
+    @action
+    openFeaturedWhatsNew(href) {
+        window.open(href, '_blank');
+        this.whatsNew.seen();
+    }
+}

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

@@ -1,20 +1,27 @@
 <div class="gh-nav-bottom">
     {{#if this.hasThemeErrors}}
-    <button type="button" class="gh-footer-toast gh-theme-error-toast" {{on "click" (fn this.openThemeErrors null)}}>
-        <span class="gh-footer-toast-title gh-notification-title">Your theme contains errors</span>
-        <span class="gh-footer-toast-p">Some functionality on your site may be limited &rarr;</span>
-    </button>
+    <div class="gh-sidebar-banner gh-error-banner">
+        <button class="gh-sidebar-banner-container" type="button" {{on "click" (fn this.openThemeErrors null)}}>
+            <div>
+                {{svg-jar "warning-fill" class="gh-sidebar-banner-icon"}}
+            </div>
+            <div>
+                <span class="gh-sidebar-banner-subhead">Your theme has errors</span>
+                <p class="gh-sidebar-banner-msg">Some functionality on your site may be limited &rarr;</p>
+            </div>
+        </button>
+    </div>
     {{/if}}
 
-    <GhReferralInvite @hasThemeErrors={{this.hasThemeErrors}} />
+    <GhNavMenu::FooterBanner @hasThemeErrors={{this.hasThemeErrors}} />
 
     <div class="flex items-center justify-between">
         <div class="pe-all">
             <GhBasicDropdown @horizontalPosition="left" @verticalPosition="above" @calculatePosition={{this.userDropdownPosition}} as |dropdown|>
                 <dropdown.Trigger class="outline-0 pointer">
                     <div class="flex-auto flex items-center">
                         <div class="gh-user-avatar relative" style={{background-image-style this.session.user.profileImageUrl}}>
-                            {{#if this.whatsNew.hasNew}}<span class="absolute dib ba b--white br-100 gh-whats-new-badge-account"></span>{{/if}}
+                            {{#if (and this.whatsNew.hasNew (not this.whatsNew.hasNewFeatured))}}<span class="absolute dib ba b--white br-100 gh-whats-new-badge-account"></span>{{/if}}
                         </div>
                         {{svg-jar "arrow-down" class="w3 mr1 fill-darkgrey"}}
                     </div>
@@ -45,12 +52,12 @@
                             <li class="divider" role="separator"></li>
                         {{else}}
                             <li>
-                                <LinkTo @route="whatsnew" @query={{hash entry=null}} class="dropdown-item" @role="menuitem" tabindex="-1" data-test-nav="whatsnew">
+                                <button class="dropdown-item" tabindex="-1" data-test-nav="whatsnew" type="button" {{on "click" this.openWhatsNew}}>
                                     What's new?
                                     {{#if this.whatsNew.hasNew}}
                                         <div class="flex-grow-1 flex justify-end"><span class="dib w2 h2 top-0 right-0 bg-green br-100"></span></div>
                                     {{/if}}
-                                </LinkTo>
+                                </button>
                             </li>
                         {{/if}}
 

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

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import ThemeErrorsModal from '../modals/design/theme-errors';
+import WhatsNew from '../modals/whats-new';
 import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
 import classic from 'ember-classic-decorator';
 import {action} from '@ember/object';
@@ -43,7 +44,7 @@ export default class Footer extends Component {
         // filter errors that have other UI to display to users that the functionality is not working
         const filteredErrors = errors?.filter((error) => {
             if (error.code === 'GS110-NO-MISSING-PAGE-BUILDER-USAGE' && error?.failures?.[0].message.includes(`show_title_and_feature_image`)) {
-                return false;                
+                return false;
             }
             return true;
         });
@@ -60,4 +61,9 @@ export default class Footer extends Component {
 
         return {horizontalPosition, verticalPosition, style};
     }
+
+    @action
+    openWhatsNew() {
+        return this.modals.open(WhatsNew);
+    }
 }

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

@@ -18,7 +18,7 @@
             <div class="gh-nav-top">
                 <ul class="gh-nav-list gh-nav-main">
                     {{#if (gh-user-can-admin this.session.user)}}
-                    <li class="relative">
+                    <li class="relative gh-nav-list-home">
                         <LinkTo @route="dashboard" @alt="Dashboard" title="Dashboard" data-test-nav="dashboard">{{svg-jar "house"}} Dashboard</LinkTo>
                     </li>
                     {{/if}}

ghost/admin/app/components/gh-nav-menu/main.js

@@ -23,10 +23,10 @@ export default class Main extends Component.extend(ShortcutsMixin) {
     @service router;
     @service session;
     @service ui;
-    @service whatsNew;
     @service membersStats;
     @service settings;
     @service explore;
+    @service notifications;
 
     @inject config;
 

ghost/admin/app/components/modals/whats-new.hbs

@@ -0,0 +1,24 @@
+<div class="modal-content">
+    <h1 class="gh-whasnew-modal-title">What's new?</h1>
+    <section class="gh-whatsnew-modal-entries" {{did-insert (perform this.whatsNew.updateLastSeen)}}>
+        {{#each this.whatsNew.entries as |entry|}}
+            <a class="gh-whatsnew-modal-entry" href={{entry.url}} target="_blank" rel="noopener noreferrer">
+                {{#if entry.feature_image}}
+                    <img class="gh-whatsnew-modal-entry-featureimage" src={{entry.feature_image}} alt={{entry.title}}>
+                {{/if}}
+                <div class="gh-whatsnew-modal-entrycontent">
+                    <h2>{{entry.title}}</h2>
+                    {{#if entry.custom_excerpt}}
+                        <p>{{entry.custom_excerpt}}</p>
+                    {{/if}}
+                    <span>{{moment-format entry.published_at "DD MMMM YYYY"}}</span>
+                </div>
+            </a>
+        {{/each}}
+    </section>
+
+    <div class="gh-whatsnew-modal-footer">
+        <a href="https://ghost.org/changelog/#/portal/signup" class="gh-btn" type="button" target="_blank" rel="noopener noreferrer"><span>Turn on notifications</span></a>
+        <a class="gh-btn gh-btn-primary" href="https://ghost.org/changelog" target="_blank" rel="noopener noreferrer"><span>All updates &rarr;</span></a>
+    </div>
+</div>

ghost/admin/app/components/modals/whats-new.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+
+export default class WhatsNewFeatured extends Component {
+    @service whatsNew;
+
+    static modalOptions = {
+        className: 'fullscreen-modal-action fullscreen-modal-wide fullscreen-modal-whatsnew'
+    };
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        this.whatsNew.seen();
+    }
+}

ghost/admin/app/services/whats-new.js

@@ -7,6 +7,8 @@ import {task} from 'ember-concurrency';
 
 export default Service.extend({
     session: service(),
+    store: service(),
+    response: null,
 
     entries: null,
     changelogUrl: 'https://ghost.org/blog/',
@@ -39,32 +41,47 @@ export default Service.extend({
         return latestMoment.isAfter(lastSeenMoment);
     }),
 
-    showModal: action(function () {
+    hasNewFeatured: computed('entries.[]', function () {
+        if (!this.hasNew) {
+            return false;
+        }
+
+        let [latestEntry] = this.entries;
+        return latestEntry.featured;
+    }),
+
+    seen: action(function () {
+        this.updateLastSeen.perform();
+    }),
+
+    openFeaturedModal: action(function () {
         this.set('isShowingModal', true);
     }),
 
-    closeModal: action(function () {
+    closeFeaturedModal: action(function () {
         this.set('isShowingModal', false);
-        this.updateLastSeen.perform();
+        this.seen();
     }),
 
     fetchLatest: task(function* () {
         try {
-            // we should already be logged in at this point so lets grab the user
-            // record and store it locally so that we don't have to deal with
-            // session.user being a promise and causing issues with CPs
-            let user = yield this.session.user;
-            this.set('_user', user);
-
-            let response = yield fetch('https://ghost.org/changelog.json');
-            if (!response.ok) {
-                // eslint-disable-next-line
-                return console.error('Failed to fetch changelog', {response});
+            if (!this.response) {
+                // we should already be logged in at this point so lets grab the user
+                // record and store it locally so that we don't have to deal with
+                // session.user being a promise and causing issues with CPs
+                let user = yield this.session.user;
+                this.set('_user', user);
+
+                this.response = yield fetch('https://ghost.org/changelog.json');
+                if (!this.response.ok) {
+                    // eslint-disable-next-line
+                    return console.error('Failed to fetch changelog', {response});
+                }
+
+                let result = yield this.response.json();
+                this.set('entries', result.posts || []);
+                this.set('changelogUrl', result.changelogUrl);
             }
-
-            let result = yield response.json();
-            this.set('entries', result.posts || []);
-            this.set('changelogUrl', result.changelogUrl);
         } catch (e) {
             console.error(e); // eslint-disable-line
         }

ghost/admin/app/styles/app-dark.css

@@ -54,6 +54,7 @@
 @import "layouts/content.css";
 @import "layouts/editor.css";
 @import "layouts/whatsnew.css";
+@import "layouts/whatsnew-modal.css";
 @import "layouts/tags.css";
 @import "layouts/members.css";
 @import "layouts/member-activity.css";
@@ -1426,3 +1427,7 @@ Onboarding checklist: Share publication modal */
 .gh-share-links li a:hover {
     background: #394047;
 }
+
+.gh-sidebar-banner.gh-error-banner {
+    background: var(--lightgrey-d1);
+}

ghost/admin/app/styles/app.css

@@ -56,6 +56,7 @@
 @import "layouts/content.css";
 @import "layouts/editor.css";
 @import "layouts/whatsnew.css";
+@import "layouts/whatsnew-modal.css";
 @import "layouts/tags.css";
 @import "layouts/members.css";
 @import "layouts/posts.css";