feat: init onboarding

desk/package.json

@@ -22,7 +22,7 @@
     "autoprefixer": "^10.4.13",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.1",
-    "frappe-ui": "0.1.122",
+    "frappe-ui": "0.1.134",
     "lodash": "^4.17.21",
     "lucide-static": "^0.276.0",
     "mime": "^3.0.0",

desk/src/components/AssignmentModal.vue

@@ -61,6 +61,7 @@ import { ref, computed } from "vue";
 import { createResource } from "frappe-ui";
 import { UserAvatar, SearchComplete } from "@/components";
 import { useUserStore } from "@/stores/user";
+import { useOnboarding } from "frappe-ui/frappe";
 
 const props = defineProps({
   assignees: {
@@ -82,6 +83,7 @@ const show = defineModel();
 const emit = defineEmits(["update"]);
 
 const { getUser } = useUserStore();
+const { updateOnboardingStep } = useOnboarding("helpdesk");
 
 const error = ref("");
 
@@ -97,6 +99,7 @@ const addAssignee = (value) => {
     },
     onSuccess: () => {
       emit("update");
+      updateOnboardingStep("assign_to_agent");
     },
   });
   emit("update");

desk/src/components/CommentTextEditor.vue

@@ -96,22 +96,26 @@
   </TextEditor>
 </template>
 <script setup lang="ts">
-import { computed, ref, onMounted } from "vue";
 import {
-  TextEditorFixedMenu,
-  TextEditor,
   FileUploader,
+  TextEditor,
+  TextEditorFixedMenu,
   createResource,
 } from "frappe-ui";
+import { useOnboarding } from "frappe-ui/frappe";
+import { computed, onMounted, ref } from "vue";
 
-import { AttachmentIcon } from "@/components/icons/";
 import { AttachmentItem } from "@/components/";
+import { AttachmentIcon } from "@/components/icons/";
 import { useAgentStore } from "@/stores/agent";
-import { useStorage } from "@vueuse/core";
+
 import { PreserveVideoControls } from "@/tiptap-extensions";
-import { isContentEmpty, textEditorMenuButtons, getFontFamily } from "@/utils";
+import { getFontFamily, isContentEmpty, textEditorMenuButtons } from "@/utils";
+import { useStorage } from "@vueuse/core";
 
+const { updateOnboardingStep } = useOnboarding("helpdesk");
 const { agents: agentsList } = useAgentStore();
+
 onMounted(() => {
   agentsList.fetch();
 });
@@ -168,6 +172,7 @@ async function submitComment() {
       },
     }),
     onSuccess: () => {
+      updateOnboardingStep("comment_on_ticket");
       emit("submit");
       loading.value = false;
       attachments.value = [];

desk/src/components/CommunicationArea.vue

@@ -84,16 +84,14 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { EmailEditor, CommentTextEditor } from "@/components";
-import { EmailIcon, CommentIcon } from "@/components/icons/";
+import { CommentTextEditor, EmailEditor } from "@/components";
+import { CommentIcon, EmailIcon } from "@/components/icons/";
+import { showCommentBox, showEmailBox } from "@/pages/ticket/modalStates";
 
 const emit = defineEmits(["update"]);
 const content = defineModel("content");
 const doc = defineModel();
 
-const showEmailBox = ref(false);
-const showCommentBox = ref(false);
-
 const emailEditorRef = ref(null);
 const commentTextEditorRef = ref(null);
 

desk/src/components/EmailEditor.vue

@@ -143,28 +143,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick } from "vue";
+import {
+  AttachmentItem,
+  CannedResponseSelectorModal,
+  MultiSelectInput,
+} from "@/components";
+import { AttachmentIcon, EmailIcon } from "@/components/icons";
+import { PreserveVideoControls } from "@/tiptap-extensions";
+import {
+  createToast,
+  getFontFamily,
+  isContentEmpty,
+  textEditorMenuButtons,
+  validateEmail,
+} from "@/utils";
 import { useStorage } from "@vueuse/core";
 import {
   FileUploader,
   TextEditor,
   TextEditorFixedMenu,
   createResource,
 } from "frappe-ui";
-import {
-  createToast,
-  validateEmail,
-  textEditorMenuButtons,
-  isContentEmpty,
-  getFontFamily,
-} from "@/utils";
-import {
-  MultiSelectInput,
-  AttachmentItem,
-  CannedResponseSelectorModal,
-} from "@/components";
-import { AttachmentIcon, EmailIcon } from "@/components/icons";
-import { PreserveVideoControls } from "@/tiptap-extensions";
+import { useOnboarding } from "frappe-ui/frappe";
+import { computed, nextTick, ref } from "vue";
 
 const editorRef = ref(null);
 const showCannedResponseSelectorModal = ref(false);
@@ -199,6 +200,8 @@ const emit = defineEmits(["submit", "discard"]);
 const doc = defineModel();
 
 const newEmail = useStorage("emailBoxContent" + doc.value.name, "");
+const { updateOnboardingStep } = useOnboarding("helpdesk");
+
 const attachments = ref([]);
 const emailEmpty = computed(() => {
   return isContentEmpty(newEmail.value);
@@ -236,6 +239,7 @@ const sendMail = createResource({
   onSuccess: () => {
     resetState();
     emit("submit");
+    updateOnboardingStep("reply_on_ticket");
   },
   debounce: 300,
 });

desk/src/components/ListViewBuilder.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- View Controls -->
   <div
-    class="flex items-center justify-between gap-2 px-5 pb-4 pt-3"
+    class="flex items-center justify-between gap-2 px-5 pb-4 pt-3 pl-6"
     v-if="showViewControls"
   >
     <QuickFilters v-if="!isMobileView" class="flex-1" />

desk/src/components/Settings/EmailAdd.vue

@@ -105,6 +105,7 @@ import {
   validateInputs,
   incomingOutgoingFields,
 } from "./emailConfig";
+import { useOnboarding } from "frappe-ui/frappe";
 import EmailProviderIcon from "./EmailProviderIcon.vue";
 import { EmailService, EmailAccount, EmailStep } from "@/types";
 
@@ -114,6 +115,8 @@ interface E {
 
 const emit = defineEmits<E>();
 
+const { updateOnboardingStep } = useOnboarding("helpdesk");
+
 const state: Reactive<EmailAccount> = reactive({
   service: "",
   email_account_name: "",
@@ -152,6 +155,7 @@ const addEmailRes = createResource({
       iconClasses: "text-green-600",
     });
     emit("update:step", "email-list");
+    updateOnboardingStep("setup_email_account");
   },
   onError: () => {
     error.value = "Failed to create email account, Invalid credentials";

desk/src/components/Settings/EmailProviderIcon.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 interface P {
-  serviceName: string;
+  serviceName?: string;
   logo?: string;
   selected?: boolean;
 }

desk/src/components/Settings/SettingsModal.vue

@@ -31,24 +31,34 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { ModelRef, ref } from "vue";
 import { Dialog } from "frappe-ui";
-import LucideMail from "~icons/lucide/mail";
+import { markRaw, ModelRef, ref } from "vue";
 import ImageUp from "~icons/lucide/image-up";
-import EmailConfig from "./EmailConfig.vue";
+import LucideMail from "~icons/lucide/mail";
 import Branding from "./Branding.vue";
+import EmailConfig from "./EmailConfig.vue";
+const props = withDefaults(
+  defineProps<{
+    defaultTab?: number;
+  }>(),
+  {
+    defaultTab: 0,
+  }
+);
+
 let tabs = [
   {
     label: "Email Accounts",
-    icon: LucideMail,
-    component: EmailConfig,
+    icon: markRaw(LucideMail),
+    component: markRaw(EmailConfig),
   },
   {
     label: "Branding",
-    icon: ImageUp,
-    component: Branding,
+    icon: markRaw(ImageUp),
+    component: markRaw(Branding),
   },
 ];
 const show: ModelRef<boolean> = defineModel();
-const activeTab = ref(tabs[0]);
+// tabs[props.defaultTab
+const activeTab = ref(tabs[props.defaultTab]);
 </script>

desk/src/components/desk/global/AddNewAgentsDialog.vue

@@ -82,6 +82,7 @@
 <script>
 import { Dialog, Input, FeatherIcon } from "frappe-ui";
 import { ref } from "@vue/reactivity";
+import { useOnboarding } from "frappe-ui/frappe";
 
 export default {
   name: "AddNewAgentsDialog",
@@ -96,11 +97,12 @@ export default {
     const inviteQueue = ref([]);
 
     const currentInputIsValidEmail = ref(false);
-
+    const { updateOnboardingStep } = useOnboarding("helpdesk");
     return {
       searchInput,
       inviteQueue,
       currentInputIsValidEmail,
+      updateOnboardingStep,
     };
   },
   methods: {
@@ -176,6 +178,7 @@ export default {
           this.currentInputIsValidEmail = false;
           this.searchInput = "";
           this.inviteQueue = [];
+          this.updateOnboardingStep("invite_agents");
 
           this.$toast({
             title: "Invites Sent Successfully!",

desk/src/components/icons/InviteCustomer.vue

@@ -0,0 +1,59 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 11C12.2091 11 14 9.20914 14 7C14 4.79086 12.2091 3 10 3C7.79086 3 6 4.79086 6 7C6 9.20914 7.79086 11 10 11Z"
+      stroke="black"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10.3 15H7C5.93913 15 4.92172 15.4214 4.17157 16.1716C3.42143 16.9217 3 17.9391 3 19V21H11.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M22.166 13.834H14.8327C14.3264 13.834 13.916 14.2444 13.916 14.7507V20.2507C13.916 20.7569 14.3264 21.1673 14.8327 21.1673H22.166C22.6723 21.1673 23.0827 20.7569 23.0827 20.2507V14.7507C23.0827 14.2444 22.6723 13.834 22.166 13.834Z"
+      stroke="black"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M23.0827 15.209L18.9714 17.8215C18.8299 17.9101 18.6663 17.9572 18.4993 17.9572C18.3324 17.9572 18.1688 17.9101 18.0273 17.8215L13.916 15.209"
+      stroke="black"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <g clip-path="url(#clip0_368_1881)">
+      <path
+        d="M16.667 5H21.3337"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M19 2.66699V7.33366"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_368_1881">
+        <rect width="8" height="8" fill="white" transform="translate(15 1)" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

desk/src/components/icons/index.ts

@@ -27,3 +27,4 @@ export { default as OrganizationsIcon } from "./OrganizationsIcon.vue";
 export { default as UnpinIcon } from "./UnpinIcon.vue";
 export { default as PinIcon } from "./PinIcon.vue";
 export { default as FrappeCloudIcon } from "./FrappeCloudIcon.vue";
+export { default as InviteCustomer } from "./InviteCustomer.vue";