From 80bb7a56e27ddc436a9618d99f66956aa40d7473 Mon Sep 17 00:00:00 2001
From: Sumit Bhanushali <sumit.bhanushali63@gmail.com>
Date: Sat, 27 Apr 2024 18:53:40 +0530
Subject: [PATCH] feat: connect email fields to reply,reply all and other fixes

---
 desk/src/components/CommunicationArea.vue     | 57 ++++--------
 desk/src/components/EmailBox.vue              | 49 ++++++----
 desk/src/components/EmailEditor.vue           | 93 ++++++++++++++-----
 desk/src/components/icons/index.ts            |  2 +
 .../ticket/TicketAgentActivities.vue          |  8 +-
 .../components/ticket/TicketAgentCustomer.vue |  6 +-
 .../components/ticket/TicketAgentFields.vue   | 36 +++++--
 .../components/ticket/TicketAgentSidebar.vue  |  4 +-
 desk/src/pages/TicketAgent2.vue               | 35 +++++--
 .../helpdesk/doctype/hd_ticket/hd_ticket.py   |  4 +-
 10 files changed, 193 insertions(+), 101 deletions(-)

diff --git a/desk/src/components/CommunicationArea.vue b/desk/src/components/CommunicationArea.vue
index b81542930..ce54a1d36 100644
--- a/desk/src/components/CommunicationArea.vue
+++ b/desk/src/components/CommunicationArea.vue
@@ -23,22 +23,9 @@
         </template>
       </Button>
     </div>
-    <div v-show="showEmailBox" class="flex gap-1.5">
-      <Button
-        label="CC"
-        :class="[false ? 'bg-gray-300 hover:bg-gray-200' : '']"
-        @click="toggleCC()"
-      />
-      <Button
-        label="BCC"
-        :class="[false ? 'bg-gray-300 hover:bg-gray-200' : '']"
-        @click="toggleBCC()"
-      />
-    </div>
   </div>
   <div v-show="showCommentBox">
     <CommentTextEditor
-      ref="newCommentEditor"
       v-model="doc"
       v-model:attachments="attachments"
       :editable="showCommentBox"
@@ -64,7 +51,8 @@
     @keydown.meta.enter.capture.stop="submitEmail"
   >
     <EmailEditor
-      ref="newEmailEditor"
+      ref="emailEditorRef"
+      v-model="doc"
       v-model:content="content"
       v-model:attachments="attachments"
       :to-emails="toEmails"
@@ -86,21 +74,18 @@
 </template>
 
 <script setup lang="ts">
-import { createResource } from "frappe-ui";
-import EmailIcon from "@/components/icons/EmailIcon.vue";
-import CommentIcon from "@/components/icons/CommentIcon.vue";
-import { useAuthStore } from "@/stores/auth";
+import { ref, defineModel } from "vue";
+
 import { EmailEditor, CommentTextEditor } from "@/components";
-import { ref, defineModel, nextTick } from "vue";
+import { EmailIcon, CommentIcon } from "@/components/icons/";
 
-const authStore = useAuthStore();
 const content = defineModel("content");
 const showEmailBox = ref(false);
 const showCommentBox = ref(false);
 const doc = defineModel();
 const attachments = ref([]);
-const newEmailEditor = ref(null);
 const emit = defineEmits(["update"]);
+const emailEditorRef = ref(null);
 
 function toggleEmailBox() {
   if (showCommentBox.value) {
@@ -116,20 +101,14 @@ function toggleCommentBox() {
   showCommentBox.value = !showCommentBox.value;
 }
 
-function toggleCC() {
-  newEmailEditor.value.cc = !newEmailEditor.value.cc;
-  newEmailEditor.value.cc &&
-    nextTick(() => {
-      newEmailEditor.value.ccInput.setFocus();
-    });
-}
-
-function toggleBCC() {
-  newEmailEditor.value.bcc = !newEmailEditor.value.bcc;
-  newEmailEditor.value.bcc &&
-    nextTick(() => {
-      newEmailEditor.value.bccInput.setFocus();
-    });
+function replyToEmail(data: object) {
+  showEmailBox.value = true;
+  emailEditorRef.value.addToReply(
+    data.content,
+    data.to?.split(","),
+    data.cc?.split(","),
+    data.bcc?.split(",")
+  );
 }
 
 const props = defineProps({
@@ -149,9 +128,9 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  content: {
-    type: String,
-    default: "",
-  },
+});
+
+defineExpose({
+  replyToEmail,
 });
 </script>
diff --git a/desk/src/components/EmailBox.vue b/desk/src/components/EmailBox.vue
index 068ff589f..3aa73e0b6 100644
--- a/desk/src/components/EmailBox.vue
+++ b/desk/src/components/EmailBox.vue
@@ -15,24 +15,32 @@
         </Tooltip>
       </div>
       <div class="flex gap-0.5">
-        <Tooltip text="Reply">
-          <Button
-            variant="ghost"
-            class="text-gray-700"
-            @click="console.log('reply')"
-          >
-            <ReplyIcon class="h-4 w-4" />
-          </Button>
-        </Tooltip>
-        <Tooltip text="Reply All">
-          <Button
-            variant="ghost"
-            class="text-gray-700"
-            @click="console.log('reply all')"
-          >
-            <ReplyAllIcon class="h-4 w-4" />
-          </Button>
-        </Tooltip>
+        <Button
+          variant="ghost"
+          class="text-gray-700"
+          @click="
+            emit('reply', {
+              content: content,
+              to: sender.name,
+            })
+          "
+        >
+          <ReplyIcon class="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          class="text-gray-700"
+          @click="
+            emit('reply', {
+              content: content,
+              to: to,
+              cc: cc,
+              bcc: bcc,
+            })
+          "
+        >
+          <ReplyAllIcon class="h-4 w-4" />
+        </Button>
       </div>
     </div>
     <div class="text-sm leading-5 text-gray-600">
@@ -68,8 +76,7 @@
 <script setup lang="ts">
 import { UserAvatar, AttachmentItem } from "@/components";
 import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
-import ReplyIcon from "./icons/ReplyIcon.vue";
-import ReplyAllIcon from "./icons/ReplyAllIcon.vue";
+import { ReplyIcon, ReplyAllIcon } from "./icons/";
 
 const props = defineProps({
   sender: {
@@ -93,4 +100,6 @@ const props = defineProps({
     required: true,
   },
 });
+
+const emit = defineEmits(["reply"]);
 </script>
diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
index 77b9502eb..c42bb5409 100644
--- a/desk/src/components/EmailEditor.vue
+++ b/desk/src/components/EmailEditor.vue
@@ -1,15 +1,15 @@
 <template>
   <TextEditor
-    ref="e"
+    ref="editorRef"
     :editor-class="[
       'prose-sm max-w-none mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
       true && 'min-h-[7rem]',
     ]"
-    :content="content"
+    :content="newEmail"
     :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
     :placeholder="placeholder"
     :editable="editable"
-    @change="editable ? (content = $event) : null"
+    @change="editable ? (newEmail = $event) : null"
   >
     <template #top>
       <div
@@ -23,9 +23,19 @@
           :validate="validateEmail"
           :error-message="(value) => `${value} is an invalid email address`"
         />
+        <Button
+          :label="'CC'"
+          :class="[cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+          @click="toggleCC()"
+        />
+        <Button
+          :label="'BCC'"
+          :class="[bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+          @click="toggleBCC()"
+        />
       </div>
       <div
-        v-if="cc"
+        v-if="showCC || cc"
         class="mx-10 flex items-center gap-2 py-2.5"
         :class="bcc ? 'border-b' : ''"
       >
@@ -38,7 +48,7 @@
           :error-message="(value) => `${value} is an invalid email address`"
         />
       </div>
-      <div v-if="bcc" class="mx-10 flex items-center gap-2 py-2.5">
+      <div v-if="showBCC || bcc" class="mx-10 flex items-center gap-2 py-2.5">
         <span class="text-xs text-gray-500">BCC:</span>
         <MultiSelectInput
           ref="bccInput"
@@ -99,7 +109,11 @@
             variant="solid"
             :disabled="emailEmpty"
             label="Submit"
-            @click="() => {}"
+            @click="
+              () => {
+                submitMail();
+              }
+            "
           />
         </div>
       </div>
@@ -108,7 +122,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineModel, ref, computed } from "vue";
+import { defineModel, ref, computed, nextTick } from "vue";
 import { useStorage } from "@vueuse/core";
 import {
   FileUploader,
@@ -119,6 +133,7 @@ import {
 import { validateEmail } from "@/utils";
 import { MultiSelectInput } from "@/components";
 import { AttachmentIcon } from "@/components/icons";
+const editorRef = ref(null);
 
 const props = defineProps({
   placeholder: {
@@ -133,14 +148,6 @@ const props = defineProps({
     type: String,
     default: "HD Ticket",
   },
-  submitButtonProps: {
-    type: Object,
-    default: () => ({}),
-  },
-  discardButtonProps: {
-    type: Object,
-    default: () => ({}),
-  },
   toEmails: {
     type: Array,
     default: () => [],
@@ -164,13 +171,14 @@ const emailEmpty = computed(() => {
 const emit = defineEmits(["submit", "discard"]);
 
 const doc = defineModel();
-const content = defineModel("content");
 const attachments = defineModel("attachments");
-const cc = ref(props.ccEmails.length ? true : false);
-const bcc = ref(props.bccEmails.length ? true : false);
 const toEmailsClone = ref([...props.toEmails]);
 const ccEmailsClone = ref([...props.ccEmails]);
 const bccEmailsClone = ref([...props.bccEmails]);
+const showCC = ref(false);
+const showBCC = ref(false);
+const cc = computed(() => (ccEmailsClone.value.length ? true : false));
+const bcc = computed(() => (bccEmailsClone.value.length ? true : false));
 const ccInput = ref(null);
 const bccInput = ref(null);
 
@@ -179,12 +187,13 @@ function submitMail() {
     url: "run_doc_method",
     makeParams: () => ({
       dt: props.doctype,
-      dn: doc.value.data.name,
+      dn: doc.value.name,
       method: "reply_via_agent",
       args: {
         attachments: attachments.value.map((x) => x.name),
-        cc: ccEmailsClone,
-        bcc: bccEmailsClone,
+        to: toEmailsClone.value.join(","),
+        cc: ccEmailsClone.value.join(","),
+        bcc: bccEmailsClone.value.join(","),
         message: newEmail.value,
       },
     }),
@@ -192,9 +201,47 @@ function submitMail() {
       emit("submit");
     },
   });
+
   sendMail.submit();
 }
 
+function toggleCC() {
+  showCC.value = !showCC.value;
+
+  showCC.value &&
+    nextTick(() => {
+      ccInput.value.setFocus();
+    });
+}
+
+function toggleBCC() {
+  showBCC.value = !showBCC.value;
+  showBCC.value &&
+    nextTick(() => {
+      bccInput.value.setFocus();
+    });
+}
+
+function addToReply(
+  body: string,
+  toEmails: string[],
+  ccEmails: string[],
+  bccEmails: string[]
+) {
+  toEmailsClone.value = toEmails;
+  ccEmailsClone.value = ccEmails;
+  bccEmailsClone.value = bccEmails;
+  editorRef.value.editor
+    .chain()
+    .clearContent()
+    .insertContent(body)
+    .focus("all")
+    .setBlockquote()
+    .insertContentAt(0, { type: "paragraph" })
+    .focus("start")
+    .run();
+}
+
 const textEditorMenuButtons = [
   "Paragraph",
   ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
@@ -232,4 +279,8 @@ const textEditorMenuButtons = [
     "DeleteTable",
   ],
 ];
+
+defineExpose({
+  addToReply,
+});
 </script>
diff --git a/desk/src/components/icons/index.ts b/desk/src/components/icons/index.ts
index 049ca9436..4b3c9d55d 100644
--- a/desk/src/components/icons/index.ts
+++ b/desk/src/components/icons/index.ts
@@ -8,3 +8,5 @@ export { default as CommentIcon } from "./CommentIcon.vue";
 export { default as IndicatorIcon } from "./IndicatorIcon.vue";
 export { default as TicketIcon } from "./TicketIcon.vue";
 export { default as AttachmentIcon } from "./AttachmentIcon.vue";
+export { default as ReplyIcon } from "./ReplyIcon.vue";
+export { default as ReplyAllIcon } from "./ReplyAllIcon.vue";
diff --git a/desk/src/components/ticket/TicketAgentActivities.vue b/desk/src/components/ticket/TicketAgentActivities.vue
index 89298787c..025e302d7 100644
--- a/desk/src/components/ticket/TicketAgentActivities.vue
+++ b/desk/src/components/ticket/TicketAgentActivities.vue
@@ -23,7 +23,11 @@
           </div>
         </div>
         <div class="mt-4 w-full">
-          <EmailBox v-if="activity.type === 'email'" v-bind="activity" />
+          <EmailBox
+            v-if="activity.type === 'email'"
+            v-bind="activity"
+            @reply="(e) => emit('email:reply', e)"
+          />
           <CommentBox
             v-else-if="activity.type === 'comment'"
             v-bind="activity"
@@ -47,6 +51,8 @@ defineProps({
   },
 });
 
+const emit = defineEmits(["email:reply"]);
+
 function getActivityIcon(type) {
   if (type === "email") return EmailAtIcon;
   else if (type === "comment") return CommentIcon;
diff --git a/desk/src/components/ticket/TicketAgentCustomer.vue b/desk/src/components/ticket/TicketAgentCustomer.vue
index dc392d3ed..f8a611338 100644
--- a/desk/src/components/ticket/TicketAgentCustomer.vue
+++ b/desk/src/components/ticket/TicketAgentCustomer.vue
@@ -38,7 +38,7 @@ import { Avatar, Tooltip } from "frappe-ui";
 import { EmailIcon, LinkIcon, TicketIcon } from "@/components/icons/";
 import { errorMessage } from "@/utils";
 
-defineProps({
+const props = defineProps({
   name: {
     type: String,
     required: true,
@@ -53,8 +53,10 @@ defineProps({
   },
 });
 
+const emit = defineEmits(["email:open"]);
+
 function openEmailBox() {
-  console.log("Open email box");
+  emit("email:open", props.email);
 }
 
 function openWebsite() {
diff --git a/desk/src/components/ticket/TicketAgentFields.vue b/desk/src/components/ticket/TicketAgentFields.vue
index 5fb792437..67aa810ec 100644
--- a/desk/src/components/ticket/TicketAgentFields.vue
+++ b/desk/src/components/ticket/TicketAgentFields.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto border-b"
-  >
+  <div class="flex flex-1 flex-col overflow-hidden overflow-y-auto border-b">
     <div
       v-for="o in options"
       :key="o.field"
@@ -10,10 +8,16 @@
       <div class="w-[106px] shrink-0 text-sm text-gray-600">
         {{ o.label }}
       </div>
-      <div
-        class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
-      >
+      <div class="min-h-[28px] flex-1 items-center overflow-hidden text-base">
+        <FormControl
+          v-if="o.type === 'select'"
+          :type="o.type"
+          :value="ticket[o.field]"
+          :options="customers?.data"
+          @change="update(o.field, $event.target.value)"
+        />
         <Autocomplete
+          v-else
           :options="o.store.dropdown"
           :placeholder="`Add ${o.label}`"
           :value="ticket[o.field]"
@@ -33,6 +37,7 @@
 
 <script setup lang="ts">
 import { computed, defineEmits } from "vue";
+import { createResource, FormControl } from "frappe-ui";
 import { Autocomplete } from "@/components";
 import { useTeamStore } from "@/stores/team";
 import { useTicketPriorityStore } from "@/stores/ticketPriority";
@@ -48,6 +53,20 @@ const props = defineProps({
   },
 });
 
+const customers = createResource({
+  url: "helpdesk.utils.get_customer",
+  params: {
+    contact: props.ticket.raised_by,
+  },
+  auto: true,
+  transform: (data) => {
+    return data.map((d) => ({
+      label: d,
+      value: d,
+    }));
+  },
+});
+
 const options = computed(() => {
   return [
     {
@@ -65,6 +84,11 @@ const options = computed(() => {
       label: "Team",
       store: useTeamStore(),
     },
+    {
+      field: "customer",
+      label: "Customer",
+      type: "select",
+    },
   ];
 });
 
diff --git a/desk/src/components/ticket/TicketAgentSidebar.vue b/desk/src/components/ticket/TicketAgentSidebar.vue
index f480e5380..164b737eb 100644
--- a/desk/src/components/ticket/TicketAgentSidebar.vue
+++ b/desk/src/components/ticket/TicketAgentSidebar.vue
@@ -5,6 +5,8 @@
       <span>#{{ ticket.name }}</span>
     </div>
     <TicketAgentCustomer
+      v-if="ticket.customer"
+      @email:open="(e) => emit('email:open', e)"
       :name="ticket.customer"
       email="abc@email.com"
       website="www.example.com"
@@ -48,7 +50,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update"]);
+const emit = defineEmits(["update", "email:open"]);
 
 function update(val) {
   emit("update", val);
diff --git a/desk/src/pages/TicketAgent2.vue b/desk/src/pages/TicketAgent2.vue
index 56920b555..09286439b 100644
--- a/desk/src/pages/TicketAgent2.vue
+++ b/desk/src/pages/TicketAgent2.vue
@@ -5,7 +5,7 @@
         <Breadcrumbs :items="breadcrumbs" />
       </template>
       <template #right-header>
-        <div v-if="ticket.data.assignees.length">
+        <div v-if="ticket.data.assignees?.length">
           <component :is="ticket.data.assignees.length == 1 ? 'Button' : 'div'">
             <MultipleAvatar
               :avatars="ticket.data.assignees"
@@ -54,8 +54,14 @@
         <TicketAgentActivities
           ref="ticketAgentActivitiesRef"
           :activities="activities"
+          @email:reply="
+            (e) => {
+              communicationAreaRef.replyToEmail(e);
+            }
+          "
         />
         <CommunicationArea
+          ref="communicationAreaRef"
           v-model="ticket.data"
           :to-emails="[ticket.data.raised_by]"
           :cc-emails="[]"
@@ -71,6 +77,7 @@
       <TicketAgentSidebar
         :ticket="ticket.data"
         @update="({ field, value }) => updateTicket(field, value)"
+        @email:open="(e) => communicationAreaRef.replyToEmail(null, e)"
       />
     </div>
     <AssignmentModal
@@ -108,6 +115,7 @@ import { createToast } from "@/utils";
 const ticketStatusStore = useTicketStatusStore();
 const { getUser } = useUserStore();
 const ticketAgentActivitiesRef = ref(null);
+const communicationAreaRef = ref(null);
 
 const props = defineProps({
   ticketId: {
@@ -126,20 +134,22 @@ const ticket = createResource({
     name: props.ticketId,
   },
   transform: (data) => {
-    data.assignees = JSON.parse(data._assign).map((assignee) => {
-      return {
-        name: assignee,
-        image: getUser(assignee).user_image,
-        label: getUser(assignee).full_name,
-      };
-    });
+    if (data._assign) {
+      data.assignees = JSON.parse(data._assign).map((assignee) => {
+        return {
+          name: assignee,
+          image: getUser(assignee).user_image,
+          label: getUser(assignee).full_name,
+        };
+      });
+    }
   },
 });
 
 const breadcrumbs = computed(() => {
   let items = [{ label: "Tickets", route: { name: "TicketsAgent" } }];
   items.push({
-    label: ticket.value?.data?.subject,
+    label: ticket.data?.subject,
     route: { name: "TicketAgent" },
   });
 
@@ -272,6 +282,13 @@ function updateTicket(fieldname: string, value: string) {
         iconClasses: "text-green-600",
       });
     },
+    onError: () => {
+      createToast({
+        title: "Failed to update ticket",
+        icon: "x",
+        iconClasses: "text-red-600",
+      });
+    },
   });
 }
 </script>
diff --git a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
index 581f6032e..ebf969ede 100644
--- a/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
+++ b/helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py
@@ -458,13 +458,13 @@ def new_comment(self, content: str):
 
 	@frappe.whitelist()
 	def reply_via_agent(
-		self, message: str, cc: str = None, bcc: str = None, attachments: List[str] = []
+		self, message: str, to: str = None, cc: str = None, bcc: str = None, attachments: List[str] = []
 	):
 		skip_email_workflow = self.skip_email_workflow()
 		medium = "" if skip_email_workflow else "Email"
 		subject = f"Re: {self.subject} (#{self.name})"
 		sender = frappe.session.user
-		recipients = self.raised_by
+		recipients = to or self.raised_by
 		sender_email = None if skip_email_workflow else self.sender_email()
 		last_communication = self.get_last_communication()