mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 14:43:08 +03:00
Added "Get started" modal for first-load onboarding
refs https://github.com/TryGhost/Team/issues/1295 - modal is triggered by the query param `?firstStart=true`, eg https://localhost:2368/ghost/#/?firstStart=true - clears the query param after triggering the modal so it doesn't get re-triggered after leaving and re-entering the dashboard route
This commit is contained in:
parent
59f769a696
commit
9760e67b3d
25
ghost/admin/app/components/modals/get-started.hbs
Normal file
25
ghost/admin/app/components/modals/get-started.hbs
Normal file
@ -0,0 +1,25 @@
|
||||
<div class="modal-content" data-test-modal="get-started">
|
||||
<button type="button" class="close" role="button" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||||
|
||||
<div class="tc f4">
|
||||
<h1>You're all set!</h1>
|
||||
<p>Your site is ready to start publishing content and sending newsletters.</p>
|
||||
<p><LinkTo @route="editor.new" @model="post" @classNames="gh-btn gh-btn-black" {{on "click" @close}}><span>Start writing</span></LinkTo></p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row f8">
|
||||
<div class="pa4 w-50 br">
|
||||
<h3 class="tc">Paid memberships?</h3>
|
||||
<p>
|
||||
Allowing your audience to subscribe is fast and simple through Stripe. Not sure?
|
||||
<a href="https://docs.ghost.org"><span>Learn more.</span></a>
|
||||
</p>
|
||||
<p class="tc"><LinkTo @route="settings.membership" @classNames="gh-btn" {{on "click" @close}}><span>Connect Stripe</span></LinkTo></p>
|
||||
</div>
|
||||
<div class="pa4 w-50">
|
||||
<h3 class="tc">Migrating data?</h3>
|
||||
<p>Our migration tools make it quick and painless to import your content and readers from other platforms.</p>
|
||||
<p class="tc"><a href="https://docs.ghost.org" class="gh-btn" target="_blank" rel="noopener noreferer"><span>Learn more</span></a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -12,6 +12,10 @@ export default class DashboardController extends Controller {
|
||||
@service settings;
|
||||
@service whatsNew;
|
||||
|
||||
queryParams = ['firstStart'];
|
||||
|
||||
@tracked firstStart = false;
|
||||
|
||||
@tracked mrrStatsData = null;
|
||||
@tracked mrrStatsError = null;
|
||||
@tracked mrrStatsLoading = false;
|
||||
|
@ -3,13 +3,23 @@ import {inject as service} from '@ember/service';
|
||||
|
||||
export default class DashboardRoute extends AuthenticatedRoute {
|
||||
@service feature;
|
||||
@service modals;
|
||||
|
||||
beforeModel() {
|
||||
beforeModel(transition) {
|
||||
super.beforeModel(...arguments);
|
||||
|
||||
if (!this.session.user.isAdmin) {
|
||||
return this.transitionTo('site');
|
||||
}
|
||||
|
||||
if (this.feature.improvedOnboarding && transition.to?.queryParams?.firstStart === 'true') {
|
||||
this.modals.open('modals/get-started');
|
||||
|
||||
// clear the query param so it doesn't stick around
|
||||
transition.abort();
|
||||
const queryParams = Object.assign({}, transition.to.queryParams, {firstStart: false});
|
||||
this.transitionTo('dashboard', {queryParams});
|
||||
}
|
||||
}
|
||||
|
||||
buildRouteInfoMetadata() {
|
||||
|
@ -3,6 +3,7 @@ import {Response} from 'ember-cli-mirage';
|
||||
import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
|
||||
import {beforeEach, describe, it} from 'mocha';
|
||||
import {blur, click, currentURL, fillIn, find, findAll} from '@ember/test-helpers';
|
||||
import {enableLabsFlag} from '../helpers/labs-flag';
|
||||
import {expect} from 'chai';
|
||||
import {setupApplicationTest} from 'ember-mocha';
|
||||
import {setupMirage} from 'ember-cli-mirage/test-support';
|
||||
@ -345,4 +346,25 @@ describe('Acceptance: Setup', function () {
|
||||
.to.equal(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('?firstStart=true', function () {
|
||||
beforeEach(async function () {
|
||||
enableLabsFlag(this.server, 'improvedOnboarding');
|
||||
|
||||
let role = this.server.create('role', {name: 'Owner'});
|
||||
this.server.create('user', {roles: [role], slug: 'owner'});
|
||||
|
||||
await authenticateSession();
|
||||
});
|
||||
|
||||
it('opens modal', async function () {
|
||||
await visit('/?firstStart=true');
|
||||
expect(find('[data-test-modal="get-started"]')).to.exist;
|
||||
});
|
||||
|
||||
it('clears query param', async function () {
|
||||
await visit('/?firstStart=true');
|
||||
expect(currentURL()).to.equal('/dashboard');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user