Changed firstStart flow to show a streamlined settings screen

closes https://github.com/TryGhost/Team/issues/1310

- added `/setup/finishing-touches` route
  - refreshes theme preview on access
  - uses existing setting form components to build a reduced settings menu
- updated `/?firstStart=true` handling to transition to `/setup/finishing-touches` instead of showing the get-started modal
- updated standard setup flow to show the get-started modal upon completion
  - `/?firstStart=true` flow for now will only be used when a theme has been chosen before site creation

app/controllers/setup/finishing-touches.js

@@ -0,0 +1,17 @@
+import Controller from '@ember/controller';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class SetupFinishingTouchesController extends Controller {
+    @service modals;
+    @service router;
+    @service settings;
+    @service themeManagement;
+
+    @action
+    async saveAndContinue() {
+        await this.settings.save();
+        this.modals.open('modals/get-started');
+        this.router.transitionTo('home');
+    }
+}

app/controllers/setup/three.js

@@ -20,6 +20,7 @@ const {Errors} = DS;
 export default Controller.extend({
     two: controller('setup/two'),
 
+    modals: service(),
     notifications: service(),
     router: service(),
     session: service(),
@@ -127,7 +128,8 @@ export default Controller.extend({
 
         skipInvite() {
             this.session.loadServerNotifications();
-            this.router.transitionTo('home', {queryParams: {firstStart: 'true'}});
+            this.modals.open('modals/get-started');
+            this.router.transitionTo('home');
         }
     },
 
@@ -159,7 +161,8 @@ export default Controller.extend({
     _transitionAfterSubmission() {
         if (!this._hasTransitioned) {
             this._hasTransitioned = true;
-            this.router.transitionTo('home', {queryParams: {firstStart: 'true'}});
+            this.modals.open('modals/get-started');
+            this.router.transitionTo('home');
         }
     },
 

app/router.js

@@ -15,6 +15,7 @@ Router.map(function () {
         this.route('two');
         this.route('three');
     });
+    this.route('setup.finishing-touches', {path: '/setup/finishing-touches'});
 
     this.route('signin');
     this.route('signout');

app/routes/home.js

@@ -9,7 +9,7 @@ export default class HomeRoute extends Route {
         super.beforeModel(...arguments);
 
         if (this.feature.improvedOnboarding && transition.to?.queryParams?.firstStart === 'true') {
-            this.modals.open('modals/get-started');
+            return this.transitionTo('setup.finishing-touches');
         }
 
         this.transitionTo('dashboard');

app/routes/setup/finishing-touches.js

@@ -0,0 +1,17 @@
+import Route from '@ember/routing/route';
+import {inject as service} from '@ember/service';
+
+export default class SetupFinishingTouchesRoute extends Route {
+    @service settings;
+    @service themeManagement;
+
+    model() {
+        this.themeManagement.setPreviewType('homepage');
+        this.themeManagement.updatePreviewHtmlTask.perform();
+    }
+
+    deactivate() {
+        // rollback any unsaved setting changes when leaving
+        this.settings.rollbackAttributes();
+    }
+}

app/templates/setup/finishing-touches.hbs

@@ -0,0 +1,29 @@
+<div class="gh-flow">
+    <div class="tc">
+        <h1>Finishing touches</h1>
+        <p>You chose a look, now it's time to make it your own.</p>
+    </div>
+    <div class="flex flex-row h-100">
+        <div class="gh-nav gh-nav-contextual gh-nav-design">
+            <div class="flex flex-column h-100">
+                <div class="gh-nav-body">
+                    <div class="gh-nav-design-settings">
+                        <div class="gh-stack">
+                            <Settings::FormFields::AccentColor class="gh-stack-item gh-setting-first" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                            <Settings::FormFields::PublicationCover class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                            <Settings::FormFields::SiteDescription class="gh-stack-item gh-setting" @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}} />
+                        </div>
+                    </div>
+                    <div class="pa4">
+                        <button type="button" class="gh-btn gh-btn-black w-100" {{on "click" this.saveAndContinue}} data-test-button="save-and-continue"><span>Let's get writing →</span></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex-grow-1 pa10">
+            <GhBrowserPreview>
+                <GhHtmlIframe class="site-frame" @html={{this.themeManagement.previewHtml}} />
+            </GhBrowserPreview>
+        </div>
+    </div>
+</div>

tests/acceptance/setup-test.js

@@ -365,14 +365,16 @@ describe('Acceptance: Setup', function () {
             await authenticateSession();
         });
 
-        it('opens modal', async function () {
+        it('transitions to finishing-touches screen', async function () {
             await visit('/?firstStart=true');
-            expect(find('[data-test-modal="get-started"]')).to.exist;
+            expect(currentURL()).to.equal('/setup/finishing-touches');
         });
 
-        it('clears query param', async function () {
+        it('transitions to dashboard with get-started modal on save', async function () {
             await visit('/?firstStart=true');
+            await click('[data-test-button="save-and-continue"]');
             expect(currentURL()).to.equal('/dashboard');
+            expect(find('[data-test-modal="get-started"]')).to.exist;
         });
     });
 });