fix: moved isOnboardingStepsCompleted in composable and moved minimized out of useOnboarding

frontend/src/components/Layouts/AppSidebar.vue

@@ -141,14 +141,13 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { useOnboarding } from '@/composables/onboarding'
+import { isOnboardingStepsCompleted } from '@/composables/onboarding'
 import { FeatherIcon, TrialBanner } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { ref, computed, h } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
-const { checkOnboardingStatus } = useOnboarding()
 
 const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 
@@ -259,9 +258,5 @@ function getIcon(routeName, icon) {
   }
 }
 
-const isOnboardingStepsCompleted = useStorage(
-  'isOnboardingStepsCompleted',
-  checkOnboardingStatus(),
-)
 const showHelpModal = ref(false)
 </script>

frontend/src/components/Modals/HelpModal.vue

@@ -75,8 +75,7 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import CRMLogo from '@/components/Icons/CRMLogo.vue'
-import { useOnboarding } from '@/composables/onboarding'
-import { ref } from 'vue'
+import { useOnboarding, minimize } from '@/composables/onboarding'
 
 const props = defineProps({
   isOnboardingStepsCompleted: Boolean,
@@ -84,6 +83,6 @@ const props = defineProps({
 
 const show = defineModel()
 
-const { steps, stepsCompleted, totalSteps, completedPercentage, minimize } =
+const { steps, stepsCompleted, totalSteps, completedPercentage } =
   useOnboarding()
 </script>

frontend/src/composables/onboarding.js

@@ -8,13 +8,19 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import StepsIcon from '@/components/Icons/StepsIcon.vue'
 import { capture } from '@/telemetry'
 import { showSettings, activeSettingsPage } from '@/composables/settings'
+import { useStorage } from '@vueuse/core'
 import { call } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, reactive, computed, markRaw } from 'vue'
 
 let router
 
-const minimize = ref(false)
+export const minimize = ref(false)
+
+export const isOnboardingStepsCompleted = useStorage(
+  'isOnboardingStepsCompleted',
+  false,
+)
 
 const steps = reactive([
   {
@@ -94,19 +100,8 @@ export function useOnboarding() {
 
   syncStatus()
 
-  function checkOnboardingStatus() {
-    let user = window.user
-    if (!user) return false
-    if (user.onboarding_status['frappe_crm_onboarding_status']) {
-      return user.onboarding_status['frappe_crm_onboarding_status'].every(
-        (step) => step.completed,
-      )
-    }
-    return false
-  }
-
   function updateOnboardingStep(step) {
-    if (stepsCompleted.value) return
+    if (isOnboardingStepsCompleted.value) return
     let user = window.user
     if (!user) return false
 
@@ -135,6 +130,7 @@ export function useOnboarding() {
   }
 
   function syncStatus() {
+    if (isOnboardingStepsCompleted.value) return
     let user = window.user
     if (!user) return false
 
@@ -143,16 +139,17 @@ export function useOnboarding() {
       _steps.forEach((step, index) => {
         steps[index].completed = step.completed
       })
+      isOnboardingStepsCompleted.value = _steps.every((step) => step.completed)
+    } else {
+      isOnboardingStepsCompleted.value = false
     }
   }
 
   return {
-    minimize,
     steps,
     stepsCompleted,
     totalSteps,
     completedPercentage,
-    checkOnboardingStatus,
     updateOnboardingStep,
   }
 }