From d4398cacf7fff18790e1373ce91b1e907f6b8554 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 10 Nov 2022 15:45:28 +0000 Subject: [PATCH] Switched publish limit upgrade modal to new modal pattern refs https://github.com/TryGhost/Team/issues/1734 refs https://github.com/TryGhost/Team/issues/559 refs https://github.com/TryGhost/Ghost/issues/14101 - switches to newer modal patterns ready for later Ember upgrades --- .../components/modal-upgrade-host-limit.hbs | 21 ----------- .../components/modal-upgrade-host-limit.js | 35 ------------------- .../modals/limits/publish-limit.hbs | 22 ++++++++++++ .../components/modals/limits/publish-limit.js | 11 ++++++ ghost/admin/app/controllers/editor.js | 19 +++++----- ghost/admin/app/controllers/lexical-editor.js | 18 ++++------ ghost/admin/app/templates/editor.hbs | 12 ------- ghost/admin/app/templates/lexical-editor.hbs | 12 ------- 8 files changed, 48 insertions(+), 102 deletions(-) delete mode 100644 ghost/admin/app/components/modal-upgrade-host-limit.hbs delete mode 100644 ghost/admin/app/components/modal-upgrade-host-limit.js create mode 100644 ghost/admin/app/components/modals/limits/publish-limit.hbs create mode 100644 ghost/admin/app/components/modals/limits/publish-limit.js diff --git a/ghost/admin/app/components/modal-upgrade-host-limit.hbs b/ghost/admin/app/components/modal-upgrade-host-limit.hbs deleted file mode 100644 index f1e6d204a8..0000000000 --- a/ghost/admin/app/components/modal-upgrade-host-limit.hbs +++ /dev/null @@ -1,21 +0,0 @@ - -
-

{{this.headerMessage}}

-
- - -
-

- {{html-safe this.upgradeMessage.message}} -

-
- -
- - - -
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-upgrade-host-limit.js b/ghost/admin/app/components/modal-upgrade-host-limit.js deleted file mode 100644 index 161dd25e10..0000000000 --- a/ghost/admin/app/components/modal-upgrade-host-limit.js +++ /dev/null @@ -1,35 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import {computed} from '@ember/object'; -import {inject as service} from '@ember/service'; - -export default ModalComponent.extend({ - router: service(), - billing: service(), - - headerMessage: computed('details', function () { - let header = 'Upgrade to enable publishing'; - - if (this.model.message && this.model.message.match(/account is currently in review/gi)) { - header = `Hold up, we're missing some details`; - } - - return header; - }), - - upgradeMessage: computed('details', function () { - const {limit, total} = this.model.details || {}; - const message = this.model.message; - - return {limit, total, message}; - }), - - actions: { - upgrade() { - this.router.transitionTo('pro', {queryParams: {action: 'checkout'}}); - }, - - confirm() { - this.send('upgrade'); - } - } -}); diff --git a/ghost/admin/app/components/modals/limits/publish-limit.hbs b/ghost/admin/app/components/modals/limits/publish-limit.hbs new file mode 100644 index 0000000000..23a1abdf71 --- /dev/null +++ b/ghost/admin/app/components/modals/limits/publish-limit.hbs @@ -0,0 +1,22 @@ +
+
+

{{this.headerMessage}}

+
+ + +
+

+ {{html-safe @data.message}} +

+
+ +
+ + + + Upgrade + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/modals/limits/publish-limit.js b/ghost/admin/app/components/modals/limits/publish-limit.js new file mode 100644 index 0000000000..3fdf62cd51 --- /dev/null +++ b/ghost/admin/app/components/modals/limits/publish-limit.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; + +export default class PublishLimitModal extends Component { + get headerMessage() { + if (this.args.data.message?.match(/account is currently in review/gi)) { + return 'Hold up, we\'re missing some details'; + } else { + return 'Upgrade to enable publishing'; + } + } +} diff --git a/ghost/admin/app/controllers/editor.js b/ghost/admin/app/controllers/editor.js index 702e6c1b7d..1392008157 100644 --- a/ghost/admin/app/controllers/editor.js +++ b/ghost/admin/app/controllers/editor.js @@ -3,6 +3,7 @@ import Controller, {inject as controller} from '@ember/controller'; import DeletePostModal from '../components/modals/delete-post'; import DeleteSnippetModal from '../components/editor/modals/delete-snippet'; import PostModel from 'ghost-admin/models/post'; +import PublishLimitModal from '../components/modals/limits/publish-limit'; import boundOneWay from 'ghost-admin/utils/bound-one-way'; import classic from 'ember-classic-decorator'; import config from 'ghost-admin/config/environment'; @@ -111,9 +112,8 @@ export default class EditorController extends Controller { shouldFocusTitle = false; showReAuthenticateModal = false; - showUpgradeModal = false; showSettingsMenu = false; - hostLimitError = null; + /** * Flag used to determine if we should return to the analytics page or to the posts/pages overview */ @@ -282,13 +282,11 @@ export default class EditorController extends Controller { } @action - openUpgradeModal() { - this.set('showUpgradeModal', true); - } - - @action - closeUpgradeModal() { - this.set('showUpgradeModal', false); + openUpgradeModal(hostLimitError = {}) { + this.modals.open(PublishLimitModal, { + message: hostLimitError.message, + details: hostLimitError.details + }); } @action @@ -519,8 +517,7 @@ export default class EditorController extends Controller { // trigger upgrade modal if forbidden(403) error if (isHostLimitError(error)) { this.post.rollbackAttributes(); - this.set('hostLimitError', error.payload.errors[0]); - this.set('showUpgradeModal', true); + this.openUpgradeModal(error.payload.errors[0]); return; } diff --git a/ghost/admin/app/controllers/lexical-editor.js b/ghost/admin/app/controllers/lexical-editor.js index e5be98f698..e8b4ecaf38 100644 --- a/ghost/admin/app/controllers/lexical-editor.js +++ b/ghost/admin/app/controllers/lexical-editor.js @@ -3,6 +3,7 @@ import Controller, {inject as controller} from '@ember/controller'; import DeletePostModal from '../components/modals/delete-post'; import DeleteSnippetModal from '../components/editor/modals/delete-snippet'; import PostModel from 'ghost-admin/models/post'; +import PublishLimitModal from '../components/modals/limits/publish-limit'; import boundOneWay from 'ghost-admin/utils/bound-one-way'; import classic from 'ember-classic-decorator'; import config from 'ghost-admin/config/environment'; @@ -111,9 +112,7 @@ export default class LexicalEditorController extends Controller { shouldFocusTitle = false; showReAuthenticateModal = false; - showUpgradeModal = false; showSettingsMenu = false; - hostLimitError = null; /** * Flag used to determine if we should return to the analytics page or to the posts/pages overview @@ -283,13 +282,11 @@ export default class LexicalEditorController extends Controller { } @action - openUpgradeModal() { - this.set('showUpgradeModal', true); - } - - @action - closeUpgradeModal() { - this.set('showUpgradeModal', false); + openUpgradeModal(hostLimitError = {}) { + this.modals.open(PublishLimitModal, { + message: hostLimitError.message, + details: hostLimitError.details + }); } @action @@ -521,8 +518,7 @@ export default class LexicalEditorController extends Controller { // trigger upgrade modal if forbidden(403) error if (isHostLimitError(error)) { this.post.rollbackAttributes(); - this.set('hostLimitError', error.payload.errors[0]); - this.set('showUpgradeModal', true); + this.openUpgradeModal(error.payload.errors[0]); return; } diff --git a/ghost/admin/app/templates/editor.hbs b/ghost/admin/app/templates/editor.hbs index 5099c16f96..8541b580d7 100644 --- a/ghost/admin/app/templates/editor.hbs +++ b/ghost/admin/app/templates/editor.hbs @@ -127,18 +127,6 @@ @modifier="action wide" /> {{/if}} - {{#if this.showUpgradeModal}} - - {{/if}} - {{#if this.snippetToUpdate}} {{/if}} - {{#if this.showUpgradeModal}} - - {{/if}} - {{#if this.snippetToUpdate}}