From a1e6504740d375f28fbaa45e2b7d3dbc57a87439 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 17:39:31 +0530
Subject: [PATCH] fix: update onboarding status when first comment is added

---
 frontend/src/components/CommunicationArea.vue | 15 +++++--
 frontend/src/composables/onboarding.js        | 45 ++++++++++++++-----
 2 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 2bfb77ab..203d11eb 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -4,7 +4,9 @@
       <Button
         ref="sendEmailRef"
         variant="ghost"
-        :class="[showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
+        :class="[
+          showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
+        ]"
         :label="__('Reply')"
         @click="toggleEmailBox()"
       >
@@ -15,7 +17,9 @@
       <Button
         variant="ghost"
         :label="__('Comment')"
-        :class="[showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
+        :class="[
+          showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
+        ]"
         @click="toggleCommentBox()"
       >
         <template #prefix>
@@ -90,6 +94,7 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import { capture } from '@/telemetry'
 import { usersStore } from '@/stores/users'
+import { useOnboarding } from '@/composables/onboarding'
 import { useStorage } from '@vueuse/core'
 import { call, createResource } from 'frappe-ui'
 import { ref, watch, computed } from 'vue'
@@ -107,6 +112,7 @@ const reload = defineModel('reload')
 const emit = defineEmits(['scroll'])
 
 const { getUser } = usersStore()
+const { updateOnboardingStep } = useOnboarding()
 
 const showEmailBox = ref(false)
 const showCommentBox = ref(false)
@@ -152,7 +158,7 @@ watch(
       editor.commands.focus()
       setSignature(editor)
     }
-  }
+  },
 )
 
 watch(
@@ -161,7 +167,7 @@ watch(
     if (value) {
       newCommentEditor.value.editor.commands.focus()
     }
-  }
+  },
 )
 
 const commentEmpty = computed(() => {
@@ -231,6 +237,7 @@ async function submitComment() {
   reload.value = true
   emit('scroll')
   capture('comment_sent', { doctype: props.doctype })
+  updateOnboardingStep('add_first_comment')
 }
 
 function toggleEmailBox() {
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 1bae3150..129f938f 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -22,6 +22,9 @@ export const isOnboardingStepsCompleted = useStorage(
   false,
 )
 
+const firstLead = ref('')
+const firstDeal = ref('')
+
 const steps = reactive([
   {
     name: 'create_first_lead',
@@ -52,11 +55,12 @@ const steps = reactive([
     onClick: async () => {
       minimize.value = true
 
-      let leadName = await call(
-        'crm.api.onboarding.get_first_non_converted_lead',
-      )
-      if (leadName) {
-        router.push({ name: 'Lead', params: { leadId: leadName } })
+      firstLead.value =
+        !firstLead.value &&
+        (await call('crm.api.onboarding.get_first_non_converted_lead'))
+
+      if (firstLead.value) {
+        router.push({ name: 'Lead', params: { leadId: firstLead.value } })
       } else {
         router.push({ name: 'Leads' })
       }
@@ -69,11 +73,13 @@ const steps = reactive([
     completed: false,
     onClick: async () => {
       minimize.value = true
-      let dealName = await call('crm.api.onboarding.get_first_deal')
-      if (dealName) {
+      firstDeal.value =
+        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+
+      if (firstDeal.value) {
         router.push({
           name: 'Deal',
-          params: { dealId: dealName },
+          params: { dealId: firstDeal.value },
           hash: '#tasks',
         })
       } else {
@@ -88,11 +94,13 @@ const steps = reactive([
     completed: false,
     onClick: async () => {
       minimize.value = true
-      let dealName = await call('crm.api.onboarding.get_first_deal')
-      if (dealName) {
+      firstDeal.value =
+        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+
+      if (firstDeal.value) {
         router.push({
           name: 'Deal',
-          params: { dealId: dealName },
+          params: { dealId: firstDeal.value },
           hash: '#notes',
         })
       } else {
@@ -105,6 +113,21 @@ const steps = reactive([
     title: 'Add your first comment',
     icon: markRaw(CommentIcon),
     completed: false,
+    onClick: async () => {
+      minimize.value = true
+      firstDeal.value =
+        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+
+      if (firstDeal.value) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: firstDeal.value },
+          hash: '#comments',
+        })
+      } else {
+        router.push({ name: 'Leads' })
+      }
+    },
   },
   {
     name: 'send_email',