From 9760e67b3dc3e9fa93c3f9c02ad801bbd0179f45 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 1 Feb 2022 17:32:38 +0000
Subject: [PATCH] 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
---
 .../app/components/modals/get-started.hbs     | 25 +++++++++++++++++++
 ghost/admin/app/controllers/dashboard.js      |  4 +++
 ghost/admin/app/routes/dashboard.js           | 12 ++++++++-
 ghost/admin/tests/acceptance/setup-test.js    | 22 ++++++++++++++++
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 ghost/admin/app/components/modals/get-started.hbs

diff --git a/ghost/admin/app/components/modals/get-started.hbs b/ghost/admin/app/components/modals/get-started.hbs
new file mode 100644
index 0000000000..95f77ccab9
--- /dev/null
+++ b/ghost/admin/app/components/modals/get-started.hbs
@@ -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>
\ No newline at end of file
diff --git a/ghost/admin/app/controllers/dashboard.js b/ghost/admin/app/controllers/dashboard.js
index 535d161d66..4369d70376 100644
--- a/ghost/admin/app/controllers/dashboard.js
+++ b/ghost/admin/app/controllers/dashboard.js
@@ -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;
diff --git a/ghost/admin/app/routes/dashboard.js b/ghost/admin/app/routes/dashboard.js
index 33291499a7..7f53863531 100644
--- a/ghost/admin/app/routes/dashboard.js
+++ b/ghost/admin/app/routes/dashboard.js
@@ -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() {
diff --git a/ghost/admin/tests/acceptance/setup-test.js b/ghost/admin/tests/acceptance/setup-test.js
index 2bfa1eb65d..6bd2496e32 100644
--- a/ghost/admin/tests/acceptance/setup-test.js
+++ b/ghost/admin/tests/acceptance/setup-test.js
@@ -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');
+        });
+    });
 });