fix: add confimation dialog and use it to handle discard ticket

desk/src/components/ConfirmationDialog.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" v-if="visible">
+      <div class="bg-white rounded shadow-lg p-6 w-96 max-w-full">
+        <p class="text-lg mb-4">{{ message }}</p>
+        <div class="flex justify-end space-x-2">
+          <button
+            class="inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-white bg-gray-900 hover:bg-gray-800 active:bg-gray-700 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+            @click="cancel"
+          >
+            No
+          </button>
+          <button
+            class="inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-white bg-gray-900 hover:bg-gray-800 active:bg-gray-700 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+            @click="confirm"
+          >
+            Yes
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    props: {
+      visible: { type: Boolean, required: true },
+      message: { type: String, default: "Are you sure?" },
+    },
+    methods: {
+      confirm() {
+        this.$emit("confirm");
+      },
+      cancel() {
+        this.$emit("cancel");
+      },
+    },
+  };
+  </script>
+

desk/src/components/TextEditor.vue

@@ -38,19 +38,22 @@
                 label="Discard"
                 theme="gray"
                 variant="subtle"
-                @click="
-                  () => {
-                    editor.commands.clearContent(true);
-                    $emit('clear');
-                  }
-                "
+                @click="showConfirmation = true"
               />
               <slot name="bottom-right" />
             </div>
           </div>
         </div>
       </template>
     </FTextEditor>
+
+    <!-- Include the ConfirmationDialog component -->
+    <ConfirmationDialog
+      :visible="showConfirmation"
+      message="Are you sure you want to discard your changes?"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+    />
   </div>
 </template>
 <script setup lang="ts">
@@ -59,6 +62,8 @@ import { TextEditor as FTextEditor, TextEditorFixedMenu } from "frappe-ui";
 import { useAuthStore } from "@/stores/auth";
 import { UserAvatar } from "@/components";
 import { PreserveVideoControls } from "@/tiptap-extensions";
+import ConfirmationDialog from "@/components/ConfirmationDialog.vue"; // Import the ConfirmationDialog component
+import { useRouter } from "vue-router"; // Import the Vue Router
 
 interface P {
   modelValue: string;
@@ -74,11 +79,16 @@ const props = withDefaults(defineProps<P>(), {
   autofocus: false,
 });
 
-defineEmits<E>();
+const emit = defineEmits<{
+  (event: "clear"): void;
+  (event: "update:modelValue", value: string): void;
+}>();
 
 const e = ref(null);
 const editor = computed(() => e.value.editor);
 const authStore = useAuthStore();
+const router = useRouter(); // Create a router instance
+const showConfirmation = ref(false);
 const fixedMenu = [
   "Paragraph",
   ["Heading 2", "Heading 3", "Heading 4", "Heading 5"],
@@ -91,6 +101,28 @@ const fixedMenu = [
   "Code",
 ];
 
+// Handle confirmation actions
+function handleConfirm() {
+  showConfirmation.value = false;
+  if (editor.value) {
+    editor.value.commands.clearContent(true);
+  }
+  emit("clear");
+
+  // Check if the user is in the Customer Portal
+  if (window.location.pathname.includes("/my-tickets")) {
+    // Route to the TicketsCustomer page
+    router.push({ name: "TicketsCustomer" });
+  } else {
+    // Otherwise, route to the TicketsAgent page
+    router.push({ name: "TicketsAgent" });
+  }
+}
+
+function handleCancel() {
+  showConfirmation.value = false;
+}
+
 defineExpose({
   editor,
 });