feat: onboarding

desk/src/components/CircularProgressBar.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="progressbar"
+    role="progressbar"
+    :class="{
+      completed: isCompleted,
+      fillOuter: isOuterCircleFilledOnComplete,
+    }"
+  >
+    <div v-if="!isCompleted">
+      <p v-if="!showPercentage">{{ step }}</p>
+      <p v-else>{{ progress.toFixed(0) }}%</p>
+    </div>
+    <div v-else class="check-icon"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  step: number;
+  totalSteps: number;
+  ringSize: string;
+  ringBarWidth: string;
+  innerTextFontSize: string;
+  progressColor: string;
+  progressRemainingColor: string;
+  progressCompleteColor: string;
+  isOuterCircleFilledOnComplete: boolean;
+  showPercentage: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: 1,
+  totalSteps: 4,
+  ringSize: "42px",
+  ringBarWidth: "10px",
+  innerTextFontSize: "16px",
+  progressColor: "#333",
+  progressRemainingColor: "#888",
+  progressCompleteColor: "#76f7be",
+  isOuterCircleFilledOnComplete: false,
+  showPercentage: false,
+});
+
+const progress = computed(() => (props.step / props.totalSteps) * 100);
+const isCompleted = computed(() => props.step === props.totalSteps);
+</script>
+
+<style scoped>
+.progressbar {
+  --size: v-bind($props.ringSize);
+  --bar-width: v-bind($props.ringBarWidth);
+  --font-size: v-bind($props.innerTextFontSize);
+  --color-incomplete: v-bind($props.progressColor);
+  --color-remaining-circle: v-bind($props.progressRemainingColor);
+  --color-complete: v-bind($props.progressCompleteColor);
+  --progress: v-bind(progress + "%");
+
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+
+  position: relative;
+  font-size: var(--font-size);
+}
+@property --progress {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+.progressbar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: conic-gradient(
+    var(--color-incomplete) var(--progress),
+    var(--color-remaining-circle) 0%
+  );
+  transition: --progress 500ms linear;
+  aspect-ratio: 1 / 1;
+  align-self: center;
+}
+
+.progressbar::after {
+  content: "";
+  position: absolute;
+  background: white;
+  border-radius: inherit;
+  z-index: 1;
+  width: calc(100% - var(--bar-width));
+  aspect-ratio: 1 / 1;
+}
+
+.progressbar > div {
+  z-index: 2;
+  position: relative;
+}
+
+.progressbar.completed:not(.fillOuter)::after {
+  background: var(--color-complete);
+}
+.progressbar.completed.fillOuter::before {
+  background: var(--color-complete);
+}
+
+.check-icon {
+  width: 15px;
+  height: 15px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUiIGhlaWdodD0iODUiIHZpZXdCb3g9IjUgMzAgNzUgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNS40MjM3IDUzLjczMjdMNjcuOTc4NyAyMS4xNzc3TDcyLjk4OTUgMjYuMTg0MkwzNS40MTk1IDYzLjc1TDEyLjg4NiA0MS4yMTIyTDE3Ljg5MjUgMzYuMjAxNUwzNS40MjM3IDUzLjczMjdaIiBmaWxsPSIjMWYxYTM4Ii8+Cjwvc3ZnPgo=");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>

desk/src/components/desk/sidebar/SideBar.vue

@@ -55,6 +55,30 @@
       />
     </div>
     <div class="grow" />
+    <!-- onboarding circle  -->
+    <div class="flex cursor-pointer items-center gap-2" @click="openSidePanel">
+      <CircularProgressBar
+        :step="step"
+        :total-steps="totalSteps"
+        :is-outer-circle-filled-on-complete="false"
+        :class="{
+          'w-full ': isExpanded,
+          'w-8 shrink-0': !isExpanded,
+        }"
+        :ring-size="'2rem'"
+        :ring-bar-width="'10px'"
+      />
+      <div
+        class="duration-400 text-sm text-gray-600 ease-in-out"
+        :class="{
+          'opacity-100': isExpanded,
+          'opacity-0 -z-50 ': !isExpanded,
+        }"
+      >
+        {{ step }}/{{ totalSteps }} steps completed
+      </div>
+    </div>
+
     <SidebarLink
       :icon="isExpanded ? LucideArrowLeftFromLine : LucideArrowRightFromLine"
       :is-active="false"
@@ -63,10 +87,14 @@
       :on-click="() => (isExpanded = !isExpanded)"
     />
   </div>
+  <!-- side panel -->
+  <div v-if="showOnboardingDialog">
+    <OnboardingDialog v-model="showOnboardingDialog" />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/auth";
@@ -82,7 +110,9 @@ import {
 } from "@/router";
 import { useDevice } from "@/composables";
 import { SidebarLink } from "@/components";
+import { CircularProgressBar } from "@/components";
 import UserMenu from "./UserMenu.vue";
+import OnboardingDialog from "@/components/onboarding/OnboardingDialog.vue";
 import LucideArrowLeftFromLine from "~icons/lucide/arrow-left-from-line";
 import LucideArrowRightFromLine from "~icons/lucide/arrow-right-from-line";
 import LucideBookOpen from "~icons/lucide/book-open";
@@ -140,6 +170,14 @@ const menuOptions = computed(() => [
   },
 ]);
 
+const step = ref(3);
+const totalSteps = ref(10);
+
+const showOnboardingDialog = ref(false);
+function openSidePanel() {
+  showOnboardingDialog.value = !showOnboardingDialog.value;
+}
+
 const profileSettings = [
   {
     icon: "corner-up-left",

desk/src/components/index.ts

@@ -28,3 +28,4 @@ export { default as AssignmentModal } from "./AssignmentModal.vue";
 export { default as Autocomplete } from "./Autocomplete.vue";
 export { default as CannedResponseSelectorModal } from "./CannedResponseSelectorModal.vue";
 export { default as FadedScrollableDiv } from "./FadedScrollableDiv.vue";
+export { default as CircularProgressBar } from "./CircularProgressBar.vue";

desk/src/components/onboarding/OnboardingDialog.vue

@@ -0,0 +1,97 @@
+<template>
+  <Dialog
+    v-model="showOnboardingDialog"
+    :options="{
+      title: 'Help',
+      size: 'lg',
+    }"
+  >
+    <template #body-content>
+      <!-- section 1 -->
+      <div class="flex flex-1 flex-col gap-2 py-2.5">
+        <!-- heading and button -->
+        <div class="flex items-center justify-between">
+          <span class="text-lg font-semibold">Popular Topics</span>
+          <Button
+            theme="gray"
+            variant="subtle"
+            label="View All"
+            icon-right="arrow-up-right"
+            @click="openDocumentation"
+          />
+        </div>
+        <!-- list of articles -->
+        <div>
+          <p v-for="i in 4" :key="i">Article {{ i }}</p>
+        </div>
+        <div />
+      </div>
+      <!-- section 2 -->
+      <div class="flex flex-1 flex-col gap-2 py-2.5">
+        <div class="flex items-center justify-between">
+          <span class="text-lg font-semibold">Get Started</span>
+          <Badge
+            label="60% Progress"
+            theme="green"
+            variant="subtle"
+            class="p-0.5"
+          />
+        </div>
+        <!-- list of articles -->
+        <ul>
+          <OnboardingStep
+            v-for="step in steps"
+            :key="step.title"
+            :title="step.title"
+            :is-completed="step.isCompleted"
+            :action="step.action"
+          />
+        </ul>
+        <div />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ModelRef, reactive } from "vue";
+import OnboardingStep from "./OnboardingStep.vue";
+import { router } from "@/router";
+const showOnboardingDialog: ModelRef<boolean> = defineModel();
+
+function openDocumentation() {
+  const URL = "https://docs.frappe.io/helpdesk";
+  window.open(URL, "_blank");
+}
+
+const steps = reactive([
+  {
+    title: "Create a Ticket",
+    action: () => {
+      router.push({ name: "TicketAgentNew", query: { onboardingStep: 1 } });
+      showOnboardingDialog.value = false;
+    },
+    isCompleted: false,
+  },
+  {
+    title: "Create an Agent",
+    action: () => {
+      router.push({ name: "AgentList", query: { onboardingStep: 2, new: 1 } });
+      showOnboardingDialog.value = false;
+    },
+    isCompleted: true,
+  },
+  {
+    title: "Create a Ticket from Customer Portal",
+    action: () => console.log("clicked 3"),
+    isCompleted: true,
+  },
+  {
+    title: "Setup Email Account",
+    action: () => console.log("clicked 4"),
+    isCompleted: false,
+  },
+]);
+</script>
+
+<style scoped></style>

desk/src/components/onboarding/OnboardingStep.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="mb-1 flex items-center justify-between gap-2 py-1">
+    <div class="flex items-center gap-2">
+      <FeatherIcon
+        class="h-4 w-4"
+        :name="isCompleted ? 'check-circle' : 'circle'"
+      />
+      <h3 class="">{{ title }}</h3>
+    </div>
+    <Button label="Proceed" icon-right="arrow-right" @click="action" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FeatherIcon } from "frappe-ui";
+
+interface Props {
+  title: string;
+  isCompleted: boolean;
+  action: () => void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  isCompleted: false,
+});
+</script>
+
+<style scoped></style>