From 1c219fdcb6a79eaaecfd799fa26a6b69755de13a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Thu, 28 Mar 2024 14:19:43 +0000
Subject: [PATCH] Wired onboarding checklist to saved user settings (#19948)

part of https://linear.app/tryghost/issue/IPC-92/add-logic-for-completing-steps
part of https://linear.app/tryghost/issue/IPC-115/make-skip-onboarding-button-work

- updated `onboarding` service to use the `user.accessibility` (poor naming, this is an old field used for general user settings) as it's backing store
- added `onboarding.allStepsCompleted` to allow for "completion" state to be shown before the checklist is marked as completed
- added `onboarding.{complete,dismiss}Checklist()` actions and wired those up to the template

When testing, if you need to reset the checklist you can run this in DevTools console
```
Ember.Namespace.NAMESPACES_BY_ID['ghost-admin'].__container__.lookup('service:onboarding').startChecklist()
```
---
 .../dashboard/onboarding-checklist.hbs        |   8 +-
 ghost/admin/app/services/onboarding.js        | 101 ++++++++++++++++--
 2 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
index f8d2354894..05e0eaeaa0 100644
--- a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
+++ b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
@@ -57,11 +57,15 @@
         </div>
     </div>
 
-    <a href="#" class="gh-onboarding-explore-dashboard">Explore your dashboard</a>
+    {{#if this.onboarding.allStepsCompleted}}
+        <a href="#" class="gh-onboarding-explore-dashboard" {{on "click" this.onboarding.completeChecklist}}>Explore your dashboard</a>
+    {{/if}}
 
     <p class="gh-onboarding-help">Need some more help? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" target="_blank" rel="noopener noreferrer">Help center</a></p>
 
-    <a href="#" class="gh-onboarding-skip">Skip onboarding</a>
+    {{#unless this.onboarding.allStepsCompleted}}
+        <a href="#" class="gh-onboarding-skip" {{on "click" this.onboarding.dismissChecklist}}>Skip onboarding</a>
+    {{/unless}}
 </div>
 
 {{#if this.showShareModal}}
diff --git a/ghost/admin/app/services/onboarding.js b/ghost/admin/app/services/onboarding.js
index e9f7e37dd0..057f58cf96 100644
--- a/ghost/admin/app/services/onboarding.js
+++ b/ghost/admin/app/services/onboarding.js
@@ -1,14 +1,15 @@
 import Service, {inject as service} from '@ember/service';
-import {TrackedSet} from 'tracked-built-ins';
 import {action} from '@ember/object';
-import {tracked} from '@glimmer/tracking';
+
+const EMPTY_SETTINGS = {
+    completedSteps: [],
+    checklistState: 'pending' // pending, started, completed, dismissed
+};
 
 export default class OnboardingService extends Service {
     @service feature;
     @service session;
 
-    @tracked _completedSteps = new TrackedSet();
-
     ONBOARDING_STEPS = [
         'customize-design',
         'first-post',
@@ -16,22 +17,102 @@ export default class OnboardingService extends Service {
         'share-publication'
     ];
 
+    get settings() {
+        const userSettings = JSON.parse(this.session.user.accessibility || '{}');
+
+        return userSettings.onboarding || JSON.parse(JSON.stringify(EMPTY_SETTINGS));
+    }
+
     get isChecklistShown() {
         return this.feature.onboardingChecklist
-            && this.session.user.isOwnerOnly;
+            && this.session.user.isOwnerOnly
+            && !this.checklistCompleted
+            && !this.checklistDismissed;
+    }
+
+    get checklistState() {
+        return this.settings.checklistState;
+    }
+
+    get checklistStarted() {
+        return this.settings.checklistState === 'started';
+    }
+
+    get checklistCompleted() {
+        return this.settings.checklistState === 'completed';
+    }
+
+    get checklistDismissed() {
+        return this.settings.checklistState === 'dismissed';
+    }
+
+    get completedSteps() {
+        const settings = this.settings;
+
+        return settings.completedSteps || [];
     }
 
     get nextStep() {
         return this.ONBOARDING_STEPS.find(step => !this.isStepCompleted(step));
     }
 
-    @action
-    isStepCompleted(step) {
-        return this._completedSteps.has(step);
+    get allStepsCompleted() {
+        return this.ONBOARDING_STEPS.every(step => this.isStepCompleted(step));
     }
 
     @action
-    markStepCompleted(step) {
-        this._completedSteps.add(step);
+    async startChecklist() {
+        const settings = this.settings;
+
+        settings.completedSteps = [];
+        settings.checklistState = 'started';
+
+        await this._saveSettings(settings);
+    }
+
+    @action
+    async completeChecklist() {
+        const settings = this.settings;
+
+        settings.checklistState = 'completed';
+
+        await this._saveSettings(settings);
+    }
+
+    @action
+    async dismissChecklist() {
+        const settings = this.settings;
+
+        settings.checklistState = 'dismissed';
+
+        await this._saveSettings(settings);
+    }
+
+    @action
+    isStepCompleted(step) {
+        return this.completedSteps.includes(step);
+    }
+
+    @action
+    async markStepCompleted(step) {
+        if (this.isStepCompleted(step)) {
+            return;
+        }
+
+        const settings = this.settings;
+        settings.completedSteps.push(step);
+
+        await this._saveSettings(settings);
+    }
+
+    /* private */
+
+    async _saveSettings(settings) {
+        const userSettings = JSON.parse(this.session.user.accessibility || '{}');
+
+        userSettings.onboarding = settings;
+
+        this.session.user.accessibility = JSON.stringify(userSettings);
+        await this.session.user.save();
     }
 }