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 @@ - Explore your dashboard + {{#if this.onboarding.allStepsCompleted}} + Explore your dashboard + {{/if}}
Need some more help? Check out our Help center
- Skip onboarding + {{#unless this.onboarding.allStepsCompleted}} + Skip onboarding + {{/unless}} {{#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(); } }