chore: Adds translations

app/javascript/dashboard/components-next/Contacts/ContactsForm/ComposeConversation.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useAlert } from 'dashboard/composables';
@@ -41,6 +41,10 @@ const toggle = () => {
 const closeCompose = () => {
   showComposeNewConversation.value = false;
 };
+
+onMounted(() => {
+  onContactSearch('');
+});
 </script>
 
 <template>

app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue

@@ -242,15 +242,15 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
     const action = {
       type: 'link',
       to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
-      message: t('NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
+      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
     };
     emit('success');
-    useAlert(t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
+    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
   } catch (error) {
     useAlert(
       error instanceof ExceptionWithMessage
         ? error.data
-        : t('NEW_CONVERSATION.FORM.ERROR_MESSAGE')
+        : t('COMPOSE_NEW_CONVERSATION.FORM.ERROR_MESSAGE')
     );
   }
 };

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { defineAsyncComponent, ref, computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -42,6 +43,8 @@ const emit = defineEmits([
   'removeSignature',
 ]);
 
+const { t } = useI18n();
+
 const isEmojiPickerOpen = ref(false);
 
 const EmojiInput = defineAsyncComponent(
@@ -129,7 +132,7 @@ const onClickInsertEmoji = emoji => {
 
     <div class="flex items-center gap-2">
       <Button
-        label="Discard"
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
         variant="faded"
         color="slate"
         size="sm"
@@ -138,7 +141,7 @@ const onClickInsertEmoji = emoji => {
       />
       <Button
         v-if="!isWhatsappInbox"
-        label="Send (↵)"
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.SEND')"
         size="sm"
         class="!text-xs font-medium"
         :disabled="isLoading || disableSendButton"

app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -50,6 +51,8 @@ const emit = defineEmits([
   'updateDropdown',
 ]);
 
+const { t } = useI18n();
+
 const contactsList = computed(() => {
   return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
     id,
@@ -72,7 +75,7 @@ const selectedContactLabel = computed(() => {
   <div class="relative flex-1 px-4 py-3 overflow-y-visible">
     <div class="flex items-baseline w-full gap-3 min-h-7">
       <label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
-        {{ 'To :' }}
+        {{ t('COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.LABEL') }}
       </label>
 
       <div
@@ -80,7 +83,13 @@ const selectedContactLabel = computed(() => {
         class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7"
       >
         <span class="text-sm truncate text-n-slate-12">
-          {{ isCreatingContact ? 'Creating contact...' : selectedContactLabel }}
+          {{
+            isCreatingContact
+              ? t(
+                  'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.CONTACT_CREATING'
+                )
+              : selectedContactLabel
+          }}
         </span>
         <Button
           variant="ghost"
@@ -93,7 +102,11 @@ const selectedContactLabel = computed(() => {
       </div>
       <TagInput
         v-else
-        placeholder="Search or enter email and press Enter"
+        :placeholder="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.TAG_INPUT_PLACEHOLDER'
+          )
+        "
         mode="single"
         :menu-items="contactsList"
         :show-dropdown="showContactsDropdown"

app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -54,6 +55,8 @@ const emit = defineEmits([
   'updateDropdown',
 ]);
 
+const { t } = useI18n();
+
 // Convert string to array for TagInput
 const ccEmailsArray = computed(() =>
   props.ccEmails ? props.ccEmails.split(',').map(email => email.trim()) : []
@@ -89,8 +92,10 @@ const handleBccUpdate = value => {
     <div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
       <InlineInput
         :model-value="subject"
-        placeholder="Enter your email subject here"
-        label="Subject :"
+        :placeholder="
+          t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.SUBJECT_PLACEHOLDER')
+        "
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.SUBJECT_LABEL')"
         focus-on-mount
         :custom-input-class="
           hasErrors
@@ -104,12 +109,14 @@ const handleBccUpdate = value => {
       <label
         class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
       >
-        {{ 'Cc :' }}
+        {{ t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.CC_LABEL') }}
       </label>
       <div class="flex items-center w-full gap-3 min-h-7">
         <TagInput
           :model-value="ccEmailsArray"
-          placeholder="Search or enter email and press Enter"
+          :placeholder="
+            t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.CC_PLACEHOLDER')
+          "
           :menu-items="contactEmailsList"
           :show-dropdown="showCcEmailsDropdown"
           :is-loading="isLoading"
@@ -121,7 +128,7 @@ const handleBccUpdate = value => {
           @update:model-value="handleCcUpdate"
         />
         <Button
-          label="Bcc"
+          :label="t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.BCC_BUTTON')"
           variant="ghost"
           size="sm"
           color="slate"
@@ -137,11 +144,13 @@ const handleBccUpdate = value => {
       <label
         class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
       >
-        {{ 'Bcc :' }}
+        {{ t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.BCC_LABEL') }}
       </label>
       <TagInput
         :model-value="bccEmailsArray"
-        placeholder="Search or enter email and press Enter"
+        :placeholder="
+          t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.BCC_PLACEHOLDER')
+        "
         :menu-items="contactEmailsList"
         :show-dropdown="showBccEmailsDropdown"
         :is-loading="isLoading"

app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { generateLabelForContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -34,6 +35,8 @@ const emit = defineEmits([
   'handleInboxAction',
 ]);
 
+const { t } = useI18n();
+
 const targetInboxLabel = computed(() => {
   return generateLabelForContactableInboxesList(props.targetInbox);
 });
@@ -44,7 +47,7 @@ const targetInboxLabel = computed(() => {
     class="flex items-center flex-1 w-full gap-3 px-4 py-3 overflow-y-visible"
   >
     <label class="mb-0.5 text-sm font-medium text-n-slate-11 whitespace-nowrap">
-      {{ 'Via inbox :' }}
+      {{ t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.LABEL') }}
     </label>
     <div
       v-if="targetInbox"
@@ -68,7 +71,7 @@ const targetInboxLabel = computed(() => {
       class="relative flex items-center h-7"
     >
       <Button
-        label="Show inboxes"
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
         variant="link"
         size="sm"
         :color="hasErrors ? 'ruby' : 'slate'"

app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 
@@ -18,13 +20,17 @@ defineProps({
 });
 
 const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
 </script>
 
 <template>
   <div v-if="isEmailOrWebWidgetInbox" class="flex-1 h-full min-h-[200px]">
     <Editor
       :model-value="modelValue"
-      placeholder="Write your message here..."
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
       class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
       :class="
         hasErrors
@@ -38,7 +44,9 @@ const emit = defineEmits(['update:modelValue']);
   <div v-else class="flex-1 h-full min-h-[200px]">
     <TextArea
       :model-value="modelValue"
-      placeholder="Write your message here..."
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
       class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
       auto-height
       :custom-text-area-class="

app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
@@ -13,6 +14,8 @@ const props = defineProps({
 
 const emit = defineEmits(['sendMessage']);
 
+const { t } = useI18n();
+
 // TODO: Remove this when we support all formats
 const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
 
@@ -72,7 +75,7 @@ const handleSendMessage = template => {
   <div class="relative">
     <Button
       icon="i-ri-whatsapp-line"
-      label="Select template"
+      :label="t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.LABEL')"
       color="slate"
       size="sm"
       :disabled="selectedTemplate"
@@ -88,7 +91,11 @@ const handleSendMessage = template => {
         <input
           v-model="searchQuery"
           type="search"
-          placeholder="Search templates"
+          :placeholder="
+            t(
+              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
+            )
+          "
           class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
@@ -105,7 +112,7 @@ const handleSendMessage = template => {
       </div>
       <template v-if="filteredTemplates.length === 0">
         <p class="w-full pt-2 text-sm text-n-slate-11">
-          {{ 'No templates found' }}
+          {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
         </p>
       </template>
     </div>

app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue

@@ -2,6 +2,7 @@
 import { computed, ref, onMounted } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -15,6 +16,8 @@ const props = defineProps({
 
 const emit = defineEmits(['sendMessage', 'back']);
 
+const { t } = useI18n();
+
 const processedParams = ref({});
 
 const templateName = computed(() => {
@@ -106,7 +109,12 @@ onMounted(() => {
     class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
   >
     <span class="text-sm text-n-slate-12">
-      {{ `WhatsApp template: ${templateName}` }}
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
+          { templateName: templateName }
+        )
+      }}
     </span>
     <p
       class="mb-0 text-sm text-n-slate-11"
@@ -117,7 +125,11 @@ onMounted(() => {
       v-if="Object.keys(processedParams).length"
       class="text-sm font-medium text-n-slate-12"
     >
-      {{ 'Variables' }}
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
+        )
+      }}
     </span>
 
     <div
@@ -140,14 +152,22 @@ onMounted(() => {
 
     <div class="flex items-end justify-between w-full gap-3 h-14">
       <Button
-        label="Go back"
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
+          )
+        "
         color="slate"
         variant="faded"
         class="w-full font-medium"
         @click="emit('back')"
       />
       <Button
-        label="Send message"
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
+          )
+        "
         class="w-full font-medium"
         @click="sendMessage"
       />

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -602,6 +602,47 @@
   "COMPOSE_NEW_CONVERSATION": {
     "CONTACT_SEARCH": {
       "ERROR_MESSAGE": "Could not search for contacts. Please try again later."
+    },
+    "FORM": {
+      "GO_TO_CONVERSATION": "View",
+      "SUCCESS_MESSAGE": "Conversation created successfully",
+      "ERROR_MESSAGE": "Could not create conversation. Please try again later.",
+      "CONTACT_SELECTOR": {
+        "LABEL": "To :",
+        "TAG_INPUT_PLACEHOLDER": "Search or enter email and press Enter",
+        "CONTACT_CREATING": "Creating contact..."
+      },
+      "INBOX_SELECTOR": {
+        "LABEL": "Via inbox :",
+        "BUTTON": "Show inboxes"
+      },
+      "EMAIL_OPTIONS": {
+        "SUBJECT_LABEL": "Subject :",
+        "SUBJECT_PLACEHOLDER": "Enter your email subject here",
+        "CC_LABEL": "Cc :",
+        "CC_PLACEHOLDER": "Search or enter email and press Enter",
+        "BCC_LABEL": "Bcc :",
+        "BCC_PLACEHOLDER": "Search or enter email and press Enter",
+        "BCC_BUTTON": "Bcc"
+      },
+      "MESSAGE_EDITOR": {
+        "PLACEHOLDER": "Write your message here..."
+      },
+      "WHATSAPP_OPTIONS": {
+        "LABEL": "Select template",
+        "SEARCH_PLACEHOLDER": "Search templates",
+        "EMPTY_STATE": "No templates found",
+        "TEMPLATE_PARSER": {
+          "TEMPLATE_NAME": "WhatsApp template: {templateName}",
+          "VARIABLES": "Variables",
+          "BACK": "Go back",
+          "SEND_MESSAGE": "Send message"
+        }
+      },
+      "ACTION_BUTTONS": {
+        "DISCARD": "Discard",
+        "SEND": "Send (↵)"
+      }
     }
   }
 }