Merge pull request #2235 from frappe/develop

chore(release): dev to main

Author: RitvikSardana

Diff for: desk/src/components/CommunicationArea.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col comm-area">
     <div
-      class="flex justify-between gap-3 border-t px-4 lg:px-10 py-4 md:py-2.5"
+      class="flex justify-between gap-3 border-t px-4 lg:px-6 py-4 md:py-2.5"
     >
       <div class="flex gap-1.5">
         <Button

Diff for: desk/src/components/EmailArea.vue

@@ -46,7 +46,7 @@
           @click="
             emit('reply', {
               content: content,
-              to: to ?? sender.name,
+              to: sender?.name ?? to,
               cc: cc,
               bcc: bcc,
             })

Diff for: desk/src/components/desk/global/NewContactDialog.vue

@@ -174,14 +174,6 @@ const contactResource = createResource({
     });
     emit("contactCreated");
   },
-  onError: (error: Error) => {
-    createToast({
-      title: "Contact Creation Failed",
-      message: error.message,
-      icon: "error",
-      iconClasses: "text-red-600",
-    });
-  },
 });
 
 function createContact() {

Diff for: desk/src/components/layouts/Sidebar.vue

@@ -93,7 +93,10 @@
       </Section>
     </div>
     <div class="grow" />
-    <TrialBanner v-if="isFCSite" :isSidebarCollapsed="!isExpanded" />
+    <TrialBanner
+      v-if="isFCSite && !isCustomerPortal"
+      :isSidebarCollapsed="!isExpanded"
+    />
     <SidebarLink
       :icon="isExpanded ? LucideArrowLeftFromLine : LucideArrowRightFromLine"
       :is-active="false"

Diff for: desk/src/components/ticket/ActivityHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="md:mx-10 md:my-4 flex items-center justify-between text-lg font-medium mx-5 mb-4 mt-8"
+    class="md:mx-8 md:my-4 flex items-center justify-between text-lg font-medium mx-5 mb-4 mt-8"
   >
     <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
       {{ title }}

Diff for: desk/src/components/ticket/TicketAgentActivities.vue

@@ -129,7 +129,7 @@ function scrollToLatestActivity() {
     let e = document.getElementsByClassName("activity");
     el = e[e.length - 1];
     if (el && !useElementVisibility(el).value) {
-      el.scrollIntoView({ behavior: "smooth" });
+      el.scrollIntoView();
       el.focus();
     }
   }, 500);

Diff for: desk/src/components/ticket/TicketAgentDetails.vue

@@ -32,47 +32,35 @@ import { dateFormat, dateTooltipFormat } from "@/utils";
 import { computed } from "vue";
 
 const props = defineProps({
-  agreementStatus: {
-    type: String,
-    required: true,
-  },
-  ticketCreatedOn: {
-    type: String,
-    required: true,
-  },
-  firstRespondedOn: {
-    type: String,
-    required: true,
-  },
-  responseBy: {
-    type: String,
-    required: true,
-  },
-  resolutionDate: {
-    type: String,
-    required: true,
-  },
-  resolutionBy: {
-    type: String,
-    required: true,
-  },
-  source: {
-    type: String,
+  ticket: {
+    type: Object,
     required: true,
   },
 });
 
 const firstResponseBadge = computed(() => {
   let firstResponse = null;
-  if (!props.firstRespondedOn && dayjs().isBefore(dayjs(props.responseBy))) {
+  if (
+    !props.ticket.first_responded_on &&
+    dayjs().isBefore(dayjs(props.ticket.response_by))
+  ) {
     firstResponse = {
-      label: `Due in ${formatTime(dayjs(props.responseBy).diff(dayjs(), "s"))}`,
+      label: `Due in ${formatTime(
+        dayjs(props.ticket.response_by).diff(dayjs(), "s")
+      )}`,
       color: "orange",
     };
-  } else if (dayjs(props.firstRespondedOn).isBefore(dayjs(props.responseBy))) {
+  } else if (
+    dayjs(props.ticket.first_responded_on).isBefore(
+      dayjs(props.ticket.response_by)
+    )
+  ) {
     firstResponse = {
       label: `Fulfilled in ${formatTime(
-        dayjs(props.firstRespondedOn).diff(dayjs(props.ticketCreatedOn), "s")
+        dayjs(props.ticket.first_responded_on).diff(
+          dayjs(props.ticket.creation),
+          "s"
+        )
       )}`,
       color: "green",
     };
@@ -87,17 +75,40 @@ const firstResponseBadge = computed(() => {
 
 const resolutionBadge = computed(() => {
   let resolution = null;
-  if (!props.resolutionDate && dayjs().isBefore(props.resolutionBy)) {
+  if (
+    props.ticket.status === "Replied" &&
+    props.ticket.on_hold_since &&
+    dayjs(props.ticket.resolution_by).isAfter(dayjs(props.ticket.on_hold_since))
+  ) {
+    let time_left = formatTime(
+      dayjs(props.ticket.resolution_by).diff(
+        dayjs(props.ticket.on_hold_since),
+        "s"
+      )
+    );
+    resolution = {
+      label: `${time_left} left (On Hold)`,
+      color: "blue",
+    };
+  } else if (
+    !props.ticket.resolution_date &&
+    dayjs().isBefore(props.ticket.resolution_by)
+  ) {
     resolution = {
       label: `Due in ${formatTime(
-        dayjs(props.resolutionBy).diff(dayjs(), "s")
+        dayjs(props.ticket.resolution_by).diff(dayjs(), "s")
       )}`,
       color: "orange",
     };
-  } else if (dayjs(props.resolutionDate).isBefore(props.resolutionBy)) {
+  } else if (
+    dayjs(props.ticket.resolution_date).isBefore(props.ticket.resolution_by)
+  ) {
     resolution = {
       label: `Fulfilled in ${formatTime(
-        dayjs(props.resolutionDate).diff(dayjs(props.ticketCreatedOn), "s")
+        dayjs(props.ticket.resolution_date).diff(
+          dayjs(props.ticket.creation),
+          "s"
+        )
       )}`,
       color: "green",
     };
@@ -114,7 +125,7 @@ const sections = computed(() => [
   {
     label: "First Response",
     tooltipValue: dateFormat(
-      props.firstRespondedOn || props.responseBy,
+      props.ticket.first_responded_on || props.ticket.response_by,
       dateTooltipFormat
     ),
     badgeText: firstResponseBadge.value.label,
@@ -123,15 +134,15 @@ const sections = computed(() => [
   {
     label: "Resolution",
     tooltipValue: dateFormat(
-      props.resolutionDate || props.resolutionBy,
+      props.ticket.resolution_date || props.ticket.resolution_by,
       dateTooltipFormat
     ),
     badgeText: resolutionBadge.value.label,
     badgeColor: resolutionBadge.value.color,
   },
   {
     label: "Source",
-    value: props.source,
+    value: props.ticket.via_customer_portal ? "Portal" : "Mail",
   },
 ]);
 </script>

Diff for: desk/src/components/ticket/TicketAgentSidebar.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex w-[382px] flex-col justify-between border-l">
-    <div class="h-[2.83rem] flex items-center justify-between border-b px-5">
+    <div
+      class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium text-ink-gray-9"
+    >
       <span
         class="cursor-copy text-lg font-semibold"
         @click="copyToClipboard(ticket.name, ticket.name)"
@@ -18,15 +20,7 @@
       :ticket="ticket"
     />
     <!-- ticket details -->
-    <TicketAgentDetails
-      :agreement-status="ticket.agreement_status"
-      :first-responded-on="ticket.first_responded_on"
-      :response-by="ticket.response_by"
-      :resolution-date="ticket.resolution_date"
-      :resolution-by="ticket.resolution_by"
-      :ticket-created-on="ticket.creation"
-      :source="ticket.via_customer_portal ? 'Portal' : 'Mail'"
-    />
+    <TicketAgentDetails :ticket="ticket" />
     <!-- fields -->
     <TicketAgentFields :ticket="ticket" @update="update" />
   </div>

Diff for: desk/src/components/ticket/TicketCustomerSidebar.vue

@@ -58,7 +58,7 @@
     <!-- feedback component -->
     <TicketFeedback
       v-if="ticket.data.feedback_rating"
-      class="border-b px-6 py-3 text-base text-gray-600"
+      class="border-b text-base text-gray-600"
       :ticket="ticket.data"
     />
     <div class="flex flex-col gap-4 pt-0 px-5 py-3">

Diff for: desk/src/components/ticket/TicketFeedback.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-3 border-b px-6 py-3">
+  <div class="flex flex-col gap-4 border-b px-5 pb-3">
     <div class="flex items-center text-base leading-5">
       <div class="min-w-[126px] text-sm">Rating</div>
       <div class="">

Diff for: desk/src/main.js

@@ -35,9 +35,12 @@ const globalComponents = {
 
 setConfig("resourceFetcher", frappeRequest);
 setConfig("fallbackErrorHandler", (error) => {
+  const text = error.exc_type
+    ? (error.messages || error.message || []).join(", ")
+    : error.message;
   createToast({
     title: error.exc_type || "Error",
-    text: (error.messages || []).join(", "),
+    text,
     icon: "alert-triangle",
     iconClasses: "text-red-500",
   });

Diff for: desk/src/pages/desk/contact/ContactDialog.vue

@@ -147,9 +147,6 @@ const contact = createDocumentResource({
     onSuccess() {
       emit("contactUpdated");
     },
-    onError() {
-      useError({ title: "Error updating contact" });
-    },
   },
 });
 

Diff for: desk/src/pages/desk/team/Teams.vue

@@ -91,7 +91,6 @@ const newTeam = createResource({
       },
     });
   },
-  onError: useError({ title: "Error creating team" }),
 });
 
 usePageMeta(() => {

Diff for: desk/src/pages/ticket/MobileTicketAgent.vue

@@ -76,15 +76,7 @@
                 />
                 <!-- SLA Section -->
                 <h3 class="px-6 pt-3 font-semibold text-base">SLA</h3>
-                <TicketAgentDetails
-                  :agreement-status="ticket.data.agreement_status"
-                  :first-responded-on="ticket.data.first_responded_on"
-                  :response-by="ticket.data.response_by"
-                  :resolution-date="ticket.data.resolution_date"
-                  :resolution-by="ticket.data.resolution_by"
-                  :ticket-created-on="ticket.data.creation"
-                  :source="ticket.data.via_customer_portal ? 'Portal' : 'Mail'"
-                />
+                <TicketAgentDetails :ticket="ticket.data" />
                 <!-- Ticket Fields -->
                 <h3 class="px-6 pt-3 font-semibold text-base">Details</h3>
                 <TicketAgentFields
@@ -423,20 +415,6 @@ function updateTicket(fieldname: string, value: string) {
         iconClasses: "text-green-600",
       });
     },
-    onError: (e) => {
-      isLoading.value = false;
-
-      const title =
-        e.messages && e.messages.length > 0
-          ? e.messages[0]
-          : "Failed to update ticket";
-
-      createToast({
-        title,
-        icon: "x",
-        iconClasses: "text-red-600",
-      });
-    },
   });
 }
 onMounted(() => {

Diff for: desk/src/pages/ticket/TicketAgent.vue

@@ -362,6 +362,7 @@ function filterActivities(eventType: TicketTab) {
 
 function updateTicket(fieldname: string, value: string) {
   if (value === ticket.data[fieldname]) return;
+  updateOptimistic(fieldname, value);
   isLoading.value = true;
   createResource({
     url: "frappe.client.set_value",
@@ -375,15 +376,20 @@ function updateTicket(fieldname: string, value: string) {
     auto: true,
     onSuccess: () => {
       isLoading.value = false;
-      createToast({
-        title: "Ticket updated",
-        icon: "check",
-        iconClasses: "text-green-600",
-      });
+      ticket.reload();
     },
   });
 }
 
+function updateOptimistic(fieldname: string, value: string) {
+  ticket.data[fieldname] = value;
+  createToast({
+    title: "Ticket updated",
+    icon: "check",
+    iconClasses: "text-green-600",
+  });
+}
+
 onMounted(() => {
   document.title = props.ticketId;
   socket.on("helpdesk:ticket-update", (ticketID) => {

Diff for: desk/src/pages/ticket/TicketConversation.vue

@@ -62,11 +62,21 @@ const communications = computed(() => {
   return orderBy(_communications, (c) => dayjs(c.creation));
 });
 
+function isElementInViewport(el: HTMLElement) {
+  if (!el) return false;
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= window.innerHeight &&
+    rect.right <= window.innerWidth
+  );
+}
+
 function scroll(id: string) {
   const e = document.getElementById(id);
-  if (!useElementVisibility(e).value) {
-    e.scrollIntoView({ behavior: "smooth" });
-    e.focus();
+  if (!isElementInViewport(e)) {
+    e.scrollIntoView();
   }
 }