fix: localize ticket detail UI

desk/src/components/CommunicationArea.vue

@@ -7,7 +7,7 @@
         <Button
           ref="sendEmailRef"
           variant="ghost"
-          label="Reply"
+          :label="__('Reply')"
           :class="[
             showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
           ]"
@@ -19,7 +19,7 @@
         </Button>
         <Button
           variant="ghost"
-          label="Comment"
+          :label="__('Comment')"
           :class="[
             showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
           ]"
@@ -79,10 +79,10 @@
             ref="commentTextEditorRef"
             :label="
               isMobileView
-                ? 'Comment'
+                ? __('Comment')
                 : isMac
-                ? 'Comment (⌘ + ⏎)'
-                : 'Comment (Ctrl + ⏎)'
+                ? __('Comment (⌘ + ⏎)')
+                : __('Comment (Ctrl + ⏎)')
             "
             :ticketId="ticketId"
             :editable="showCommentBox"

desk/src/components/ticket-agent/TicketActivityPanel.vue

@@ -82,25 +82,25 @@ const tabs: ComputedRef<TabObject[]> = computed(() => {
   const _tabs: TabObject[] = [
     {
       name: "activity",
-      label: "Activity",
+      label: __("Activity"),
       icon: ActivityIcon,
     },
     {
       name: "email",
-      label: "Emails",
+      label: __("Emails"),
       icon: EmailIcon,
     },
     {
       name: "comment",
-      label: "Comments",
+      label: __("Comments"),
       icon: CommentIcon,
     },
   ];
 
   if (isCallingEnabled.value) {
     _tabs.push({
       name: "call",
-      label: "Calls",
+      label: __("Calls"),
       icon: PhoneIcon,
     });
   }
@@ -175,7 +175,7 @@ const _activities = computed(() => {
     return {
       type: "history",
       key: h.creation,
-      content: h.action ? h.action : "viewed this",
+      content: h.action ? h.action : __("viewed this"),
       creation: h.creation,
       user: h.user.name + " ",
     };

desk/src/components/ticket-agent/TicketSLA.vue

@@ -75,16 +75,16 @@ const openCard = ref<string | null>(null);
 const cards = computed<SLACard[]>(() =>
   [
     {
-      title: "First Response",
+      title: __("First Response"),
       metric: firstResponse.value,
-      fulfilledLabel: "Fulfilled",
-      actualLabel: "Responded on",
+      fulfilledLabel: __("Fulfilled"),
+      actualLabel: __("Responded on"),
     },
     {
-      title: "Resolution",
+      title: __("Resolution"),
       metric: resolution.value,
-      fulfilledLabel: "Fulfilled",
-      actualLabel: "Resolved on",
+      fulfilledLabel: __("Fulfilled"),
+      actualLabel: __("Resolved on"),
     },
   ].filter((card): card is SLACard => Boolean(card.metric))
 );
@@ -99,11 +99,11 @@ function cardDetails(card: SLACard) {
   const metric = card.metric;
   const rows = [];
   if (metric.dueBy) {
-    rows.push({ label: "Due by", value: fmt(metric.dueBy), danger: false });
+    rows.push({ label: __("Due by"), value: fmt(metric.dueBy), danger: false });
   }
   if (metric.state === "hold") {
     rows.push({
-      label: "On hold since",
+      label: __("On hold since"),
       value: fmt(ticket.value.doc.on_hold_since as string),
       danger: false,
     });
@@ -119,21 +119,23 @@ function cardDetails(card: SLACard) {
   }
   if (metric.delay) {
     rows.push({
-      label: metric.delayInWorkingHours ? "Delay (working hours)" : "Delay",
+      label: metric.delayInWorkingHours
+        ? __("Delay (working hours)")
+        : __("Delay"),
       value: metric.delay,
       danger: true,
     });
     if (metric.calendarDelay) {
       rows.push({
-        label: "Delay (total)",
+        label: __("Delay (total)"),
         value: `+${metric.calendarDelay}`,
         danger: true,
       });
     }
   }
   if (metric.fulfilledIn) {
     rows.push({
-      label: "Fulfilled in",
+      label: __("Fulfilled in"),
       value: metric.fulfilledIn,
       danger: false,
     });

desk/src/composables/useSLA.ts

@@ -108,7 +108,7 @@ export function useSLA(ticket: Ref<TicketLike | null | undefined>): {
       );
     }
     const overdue = coarseDuration(d.response_by);
-    return metric("overdue", `Overdue by ${overdue}`, "red", {
+    return metric("overdue", __("Overdue by {0}", [overdue]), "red", {
       dueBy: d.response_by,
       delay: `+${overdue}`,
     });
@@ -129,7 +129,7 @@ export function useSLA(ticket: Ref<TicketLike | null | undefined>): {
       d.on_hold_since &&
       pausedBeforeBreach
     ) {
-      return metric("hold", "On Hold", "blue", { dueBy: d.resolution_by });
+      return metric("hold", __("On Hold"), "blue", { dueBy: d.resolution_by });
     }
 
     if (d.resolution_date) {
@@ -174,7 +174,7 @@ export function useSLA(ticket: Ref<TicketLike | null | undefined>): {
       );
     }
     const overdue = coarseDuration(d.resolution_by);
-    return metric("overdue", `Overdue by ${overdue}`, "red", {
+    return metric("overdue", __("Overdue by {0}", [overdue]), "red", {
       dueBy: d.resolution_by,
       delay: `+${overdue}`,
     });