mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-18 02:21:47 -05:00
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
This commit is contained in:
Kevin Ansfield
parent
d6af8fbb8f
commit
d4398cacf7
8 changed files with 48 additions and 102 deletions
|
|
@ -1,21 +0,0 @@
|
|||
|
||||
<header class="modal-header" data-test-modal="upgrade-host-limit">
|
||||
<h1>{{this.headerMessage}}</h1>
|
||||
</header>
|
||||
<button class="close" title="Close" type="button" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||||
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{html-safe this.upgradeMessage.message}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="gh-btn" data-test-button="cancel-upgrade" type="button" {{on "click" this.closeModal}}>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
<button class="gh-btn gh-btn-green" data-test-button="upgrade-plan" type="button" {{on "click" (action "upgrade")}}>
|
||||
<span>Upgrade</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
22
ghost/admin/app/components/modals/limits/publish-limit.hbs
Normal file
22
ghost/admin/app/components/modals/limits/publish-limit.hbs
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<div class="modal-content" data-test-modal="publish-limit">
|
||||
<header class="modal-header">
|
||||
<h1>{{this.headerMessage}}</h1>
|
||||
</header>
|
||||
<button class="close" title="Close" type="button" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||||
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{html-safe @data.message}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="gh-btn" data-test-button="cancel-upgrade" type="button" {{on "click" @close}}>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
<LinkTo @route="pro" @query={{hash action="checkout"}} class="gh-btn gh-btn-green" {{on "click" @close}} data-test-button="upgrade-plan">
|
||||
<span>Upgrade</span>
|
||||
</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
11
ghost/admin/app/components/modals/limits/publish-limit.js
Normal file
11
ghost/admin/app/components/modals/limits/publish-limit.js
Normal file
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -127,18 +127,6 @@
|
|||
@modifier="action wide" />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.showUpgradeModal}}
|
||||
<GhFullscreenModal
|
||||
@modal="upgrade-host-limit"
|
||||
@model={{hash
|
||||
message=this.hostLimitError.context
|
||||
details=this.hostLimitError.details
|
||||
}}
|
||||
@close={{this.closeUpgradeModal}}
|
||||
@modifier="action wide"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.snippetToUpdate}}
|
||||
<GhFullscreenModal
|
||||
@modal="update-snippet"
|
||||
|
|
|
|||
|
|
@ -128,18 +128,6 @@
|
|||
@modifier="action wide" />
|
||||
{{/if}}
|
||||
|
||||
{{#if this.showUpgradeModal}}
|
||||
<GhFullscreenModal
|
||||
@modal="upgrade-host-limit"
|
||||
@model={{hash
|
||||
message=this.hostLimitError.context
|
||||
details=this.hostLimitError.details
|
||||
}}
|
||||
@close={{this.closeUpgradeModal}}
|
||||
@modifier="action wide"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.snippetToUpdate}}
|
||||
<GhFullscreenModal
|
||||
@modal="update-snippet"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue