feat(i18n): Add translation wrappers to remaining Vue components

desk/src/components/AssignmentModal.vue

@@ -2,14 +2,14 @@
   <Dialog
     v-model="show"
     :options="{
-      title: 'Assign To',
+      title: __('Assign To'),
       size: 'xl',
     }"
   >
     <template #body-content>
       <AutocompleteNew
         v-if="showRestrictedMembers"
-        placeholder="Search agents"
+        :placeholder="__('Search agents')"
         :model-value="search"
         :options="members"
         @update:model-value="
@@ -87,6 +87,7 @@ import { useUserStore } from "@/stores/user";
 import { call, createResource } from "frappe-ui";
 import { useOnboarding } from "frappe-ui/frappe";
 import { computed, onMounted, ref } from "vue";
+import { __ } from "@/translation";
 
 const props = defineProps({
   doctype: {

desk/src/components/Autocomplete.vue

@@ -44,7 +44,7 @@
                 type="text"
                 :value="query"
                 autocomplete="off"
-                placeholder="Search"
+                :placeholder="__('Search')"
                 @change="
                   (e) => {
                     query = e.target.value;
@@ -104,7 +104,7 @@
                 v-if="groups.length == 0"
                 class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
               >
-                No results found
+                {{ __("No results found") }}
               </li>
             </ComboboxOptions>
             <div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
@@ -129,6 +129,7 @@ import {
 } from "@headlessui/vue";
 import { Popover, Button, FeatherIcon } from "frappe-ui";
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from "vue";
+import { __ } from "@/translation";
 
 const props = defineProps({
   modelValue: {

desk/src/components/CommentBox.vue

@@ -11,9 +11,9 @@
           <span class="font-medium text-gray-800">
             {{ commenter }}
           </span>
-          <span> added a</span>
+          <span> {{ __("added a") }}</span>
           <span class="max-w-xs truncate font-medium text-gray-800">
-            comment
+            {{ __("comment") }}
           </span>
         </p>
       </div>
@@ -28,13 +28,13 @@
             :placement="'right'"
             :options="[
               {
-                label: 'Edit',
+                label: __('Edit'),
                 onClick: () => handleEditMode(),
                 icon: 'edit-2',
                 condition: () => !isTicketMergedComment,
               },
               {
-                label: 'Delete',
+                label: __('Delete'),
                 onClick: () => (showDialog = true),
                 icon: 'trash-2',
               },
@@ -62,12 +62,20 @@
         :content="_content"
         :editable="editable"
         :bubble-menu="textEditorMenuButtons"
-        @change="(event:string) => {_content = event}"
+        @change="
+          (event: string) => {
+            _content = event;
+          }
+        "
       >
         <template #bottom v-if="editable">
           <div class="flex flex-row-reverse gap-2">
-            <Button label="Save" @click="handleSaveComment" variant="solid" />
-            <Button label="Discard" @click="handleDiscard" />
+            <Button
+              :label="__('Save')"
+              @click="handleSaveComment"
+              variant="solid"
+            />
+            <Button :label="__('Discard')" @click="handleDiscard" />
           </div>
         </template>
       </TextEditor>
@@ -84,12 +92,12 @@
   <Dialog
     v-model="showDialog"
     :options="{
-      title: 'Delete Comment',
-      message: 'Are you sure you want to confirm this action?',
+      title: __('Delete Comment'),
+      message: __('Are you sure you want to confirm this action?'),
       actions: [
-        { label: 'Cancel', onClick: () => (showDialog = false) },
+        { label: __('Cancel'), onClick: () => (showDialog = false) },
         {
-          label: 'Delete',
+          label: __('Delete'),
           onClick: () => deleteComment.submit(),
           variant: 'solid',
         },
@@ -121,6 +129,7 @@ import {
   toast,
 } from "frappe-ui";
 import { PropType, computed, onMounted, ref } from "vue";
+import { __ } from "@/translation";
 const authStore = useAuthStore();
 const props = defineProps({
   activity: {
@@ -166,7 +175,7 @@ const deleteComment = createResource({
   onSuccess() {
     emit("update");
     showDialog.value = false;
-    toast.success("Comment deleted");
+    toast.success(__("Comment deleted"));
   },
 });
 
@@ -176,7 +185,7 @@ function handleSaveComment() {
     return;
   }
   if (isContentEmpty(_content.value)) {
-    toast.error("Comment cannot be empty");
+    toast.error(__("Comment cannot be empty"));
     return;
   }
 
@@ -191,7 +200,7 @@ function handleSaveComment() {
       onSuccess: () => {
         editable.value = false;
         emit("update");
-        toast.success("Comment updated");
+        toast.success(__("Comment updated"));
       },
     }
   );

desk/src/components/CommentTextEditor.vue

@@ -15,7 +15,7 @@
     :mentions="agents"
     @change="editable ? (newComment = $event) : null"
     :extensions="[PreserveVideoControls]"
-    :uploadFunction="(file:any)=>uploadFunction(file, doctype, ticketId)"
+    :uploadFunction="(file: any) => uploadFunction(file, doctype, ticketId)"
   >
     <template #bottom>
       <div v-if="editable" class="flex flex-col gap-2 px-6 md:pl-10 md:pr-9">

desk/src/components/CommunicationArea.vue

@@ -7,7 +7,7 @@
         <Button
           ref="sendEmailRef"
           variant="ghost"
-          label="Reply"
+          :label="__('Reply')"
           :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
           @click="toggleEmailBox()"
         >
@@ -17,7 +17,7 @@
         </Button>
         <Button
           variant="ghost"
-          label="Comment"
+          :label="__('Comment')"
           :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
           @click="toggleCommentBox()"
         >
@@ -38,7 +38,11 @@
       <EmailEditor
         ref="emailEditorRef"
         :label="
-          isMobileView ? 'Send' : isMac ? 'Send (⌘ + ⏎)' : 'Send (Ctrl + ⏎)'
+          isMobileView
+            ? __('Send')
+            : isMac
+            ? __('Send (⌘ + ⏎)')
+            : __('Send (Ctrl + ⏎)')
         "
         v-model:content="content"
         placeholder="Hi John, we are looking into this issue."
@@ -69,10 +73,10 @@
         ref="commentTextEditorRef"
         :label="
           isMobileView
-            ? 'Comment'
+            ? __('Comment')
             : isMac
-            ? 'Comment (⌘ + ⏎)'
-            : 'Comment (Ctrl + ⏎)'
+            ? __('Comment (⌘ + ⏎)')
+            : __('Comment (Ctrl + ⏎)')
         "
         :ticketId="ticketId"
         :editable="showCommentBox"
@@ -103,6 +107,7 @@ import { useShortcut } from "@/composables/shortcuts";
 import { showCommentBox, showEmailBox } from "@/pages/ticket/modalStates";
 import { ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import { __ } from "@/translation";
 
 const emit = defineEmits(["update"]);
 const content = defineModel("content");

desk/src/components/ConfirmDialog.vue

@@ -8,7 +8,7 @@
     <template #actions>
       <Button
         class="w-full"
-        label="Confirm"
+        :label="__('Confirm')"
         variant="solid"
         :loading="isLoading"
         @click="onConfirm"
@@ -18,6 +18,7 @@
 </template>
 <script>
 import { Button, Dialog } from "frappe-ui";
+import { __ } from "@/translation";
 
 export default {
   name: "ConfirmDialog",
@@ -49,6 +50,7 @@ export default {
     };
   },
   methods: {
+    __,
     async handleConfirmation() {
       if (this.isLoading) return;
       this.isLoading = true;

desk/src/components/DiscardButton.vue

@@ -4,25 +4,33 @@
 
 <script setup lang="ts">
 import { globalStore } from "@/stores/globalStore";
+import { __ } from "@/translation";
 const { $dialog } = globalStore();
 const emit = defineEmits<{
   (event: "discard"): void;
 }>();
 
-const {
-  label = "Discard",
-  hideDialog = false,
-  title = "Discard?",
-  message = "Are you sure you want to discard this?",
-} = defineProps<{
-  label?: string;
-  hideDialog?: boolean;
-  title?: string;
-  message?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    hideDialog?: boolean;
+    title?: string;
+    message?: string;
+  }>(),
+  {
+    label: undefined,
+    hideDialog: false,
+    title: undefined,
+    message: undefined,
+  }
+);
+
+const label = props.label || __("Discard");
+const title = props.title || __("Discard?");
+const message = props.message || __("Are you sure you want to discard this?");
 
 function handleDiscard() {
-  if (hideDialog) {
+  if (props.hideDialog) {
     emit("discard");
     return;
   }
@@ -34,7 +42,7 @@ function handleDiscard() {
     },
     actions: [
       {
-        label: "Confirm",
+        label: __("Confirm"),
         variant: "solid",
         onClick(close: Function) {
           emit("discard");

desk/src/components/EmailArea.vue

@@ -11,7 +11,7 @@
       <!-- email design for mobile -->
       <div v-if="isMobileView" class="flex items-center gap-2 text-sm">
         <div class="leading-tight">
-          <p>{{ sender.full_name || "No name found" }}</p>
+          <p>{{ sender.full_name || __("No name found") }}</p>
           <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
             <p class="text-xs md:text-sm text-gray-600">
               {{ timeAgo(creation) }}
@@ -24,7 +24,7 @@
       </div>
       <!-- email design for desktop -->
       <div v-else class="flex items-center gap-1">
-        <span>{{ sender.full_name || "No name found" }}</span>
+        <span>{{ sender.full_name || __("No name found") }}</span>
         <span class="sm:flex hidden text-sm text-gray-600" v-if="sender.name">{{
           "<" + sender.name + ">"
         }}</span>
@@ -57,7 +57,7 @@
           :placement="'right'"
           :options="[
             {
-              label: 'Split Ticket',
+              label: __('Split Ticket'),
               icon: LucideSplit,
               onClick: () => (showSplitModal = true),
             },
@@ -115,6 +115,7 @@ import { ReplyAllIcon, ReplyIcon } from "./icons";
 import TicketSplitModal from "./ticket/TicketSplitModal.vue";
 import { useAuthStore } from "@/stores/auth";
 import { storeToRefs } from "pinia";
+import { __ } from "@/translation";
 
 const props = defineProps({
   activity: {