feat: translate automations

abhinavxd · abhinavxd · commit 497b54fc49cf · 2025-04-03T01:21:12.000+05:30
diff --git a/frontend/src/features/admin/automation/ActionBox.vue b/frontend/src/features/admin/automation/ActionBox.vue
@@ -16,7 +16,7 @@
                   @update:modelValue="(value) => handleFieldChange(value, index)"
                 >
                   <SelectTrigger class="m-auto">
-                    <SelectValue placeholder="Select action" />
+                    <SelectValue :placeholder="t('form.field.selectAction')" />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
@@ -40,7 +40,7 @@
                 <SelectTag
                   v-model="action.value"
                   :items="tagsStore.tagNames.map((tag) => ({ label: tag, value: tag }))"
-                  placeholder="Select tag"
+                  :placeholder="t('form.field.selectTag')"
                 />
               </div>
 
@@ -51,7 +51,7 @@
                 <ComboBox
                   v-model="action.value[0]"
                   :items="conversationActions[action.type]?.options"
-                  placeholder="Select"
+                  :placeholder="t('form.field.select')"
                   @select="handleValueChange($event, index)"
                 >
                   <template #item="{ item }">
@@ -75,7 +75,7 @@
                         {{ selected.emoji }}
                         <span>{{ selected.label }}</span>
                       </div>
-                      <span v-else>Select team</span>
+                      <span v-else>{{ $t('form.field.selectTeam') }}</span>
                     </div>
 
                     <div v-else-if="action.type === 'assign_user'" class="flex items-center gap-2">
@@ -91,10 +91,10 @@
                         </Avatar>
                         <span>{{ selected.label }}</span>
                       </div>
-                      <span v-else>Select user</span>
+                      <span v-else>{{ $t('form.field.selectUser') }}</span>
                     </div>
                     <span v-else>
-                      <span v-if="!selected"> Select</span>
+                      <span v-if="!selected"> {{ $t('form.field.select') }}</span>
                       <span v-else>{{ selected.label }} </span>
                     </span>
                   </template>
@@ -114,14 +114,18 @@
             <Editor
               v-model:htmlContent="action.value[0]"
               @update:htmlContent="(value) => handleEditorChange(value, index)"
-              :placeholder="'Shift + Enter to add new line'"
+              :placeholder="t('admin.macro.message_content.placeholder')"
             />
           </div>
         </div>
       </div>
     </div>
     <div>
-      <Button variant="outline" @click.prevent="addAction">Add action</Button>
+      <Button variant="outline" @click.prevent="addAction">{{
+        $t('globals.messages.add', {
+          name: $t('globals.entities.action')
+        })
+      }}</Button>
     </div>
   </div>
 </template>
@@ -144,6 +148,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { SelectTag } from '@/components/ui/select'
 import { useConversationFilters } from '@/composables/useConversationFilters'
 import { getTextFromHTML } from '@/utils/strings.js'
+import { useI18n } from 'vue-i18n'
 import Editor from '@/features/conversation/ConversationTextEditor.vue'
 
 const props = defineProps({
@@ -154,6 +159,7 @@ const props = defineProps({
 })
 
 const { actions } = toRefs(props)
+const { t } = useI18n()
 const emit = defineEmits(['update-actions', 'add-action', 'remove-action'])
 const tagsStore = useTagStore()
 const { conversationActions } = useConversationFilters()
diff --git a/frontend/src/features/admin/automation/AutomationTabs.vue b/frontend/src/features/admin/automation/AutomationTabs.vue
@@ -1,26 +1,38 @@
 <template>
   <Tabs default-value="new_conversation" v-model="selectedTab">
     <TabsList class="grid w-full grid-cols-3 mb-5">
-      <TabsTrigger value="new_conversation">New conversation</TabsTrigger>
-      <TabsTrigger value="conversation_update">Conversation update</TabsTrigger>
-      <TabsTrigger value="time_trigger">Time triggers</TabsTrigger>
+      <TabsTrigger value="new_conversation">{{
+        $t('admin.automation.newConversation')
+      }}</TabsTrigger>
+      <TabsTrigger value="conversation_update">{{
+        $t('admin.automation.conversationUpdate')
+      }}</TabsTrigger>
+      <TabsTrigger value="time_trigger">{{ $t('admin.automation.timeTriggers') }}</TabsTrigger>
     </TabsList>
     <TabsContent value="new_conversation">
-      <RuleTab type="new_conversation" helptext="Rules that run when a new conversation is created, drag and drop to reorder rules." />
+      <RuleTab
+        type="new_conversation"
+        :helptext="t('admin.automation.newConversation.description')"
+      />
     </TabsContent>
     <TabsContent value="conversation_update">
-      <RuleTab type="conversation_update" helptext="Rules that run when a conversation is updated." />
+      <RuleTab
+        type="conversation_update"
+        :helptext="t('admin.automation.conversationUpdate.description')"
+      />
     </TabsContent>
     <TabsContent value="time_trigger">
-      <RuleTab type="time_trigger" helptext="Rules that run once an hour." />
+      <RuleTab type="time_trigger" :helptext="t('admin.automation.timeTriggers.description')" />
     </TabsContent>
   </Tabs>
 </template>
 
 <script setup>
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useI18n } from 'vue-i18n'
 import RuleTab from './RuleTab.vue'
 
+const { t } = useI18n()
 const selectedTab = defineModel('automationsTab', {
   default: 'new_conversation',
   type: String,
diff --git a/frontend/src/features/admin/automation/RuleBox.vue b/frontend/src/features/admin/automation/RuleBox.vue
@@ -8,11 +8,17 @@
       >
         <div class="flex items-center space-x-2">
           <RadioGroupItem value="OR" />
-          <Label>Match <b>ANY</b> of below.</Label>
+          <Label
+            >{{ $t('admin.automation.match') }} <b>{{ $t('admin.automation.any') }}</b>
+            {{ $t('admin.automation.below') }}.</Label
+          >
         </div>
         <div class="flex items-center space-x-2">
           <RadioGroupItem value="AND" />
-          <Label>Match <b>ALL</b> of below.</Label>
+          <Label
+            >{{ $t('admin.automation.match') }} <b>{{ $t('admin.automation.all') }}</b>
+            {{ $t('admin.automation.below') }}.</Label
+          >
         </div>
       </RadioGroup>
     </div>
@@ -31,11 +37,11 @@
               @update:modelValue="(value) => handleFieldChange(value, index)"
             >
               <SelectTrigger class="w-56">
-                <SelectValue placeholder="Select field" />
+                <SelectValue :placeholder="t('form.field.selectField')" />
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
-                  <SelectLabel>Conversation</SelectLabel>
+                  <SelectLabel>{{ $t('globals.entities.conversation') }}</SelectLabel>
                   <SelectItem v-for="(field, key) in currentFilters" :key="key" :value="key">
                     {{ field.label }}
                   </SelectItem>
@@ -49,7 +55,7 @@
               @update:modelValue="(value) => handleOperatorChange(value, index)"
             >
               <SelectTrigger class="w-56">
-                <SelectValue placeholder="Select operator" />
+                <SelectValue :placeholder="t('form.field.selectOperator')" />
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
@@ -69,7 +75,7 @@
               <!-- Plain text input -->
               <Input
                 type="text"
-                placeholder="Set value"
+                :placeholder="t('form.fields.setValue')"
                 v-if="inputType(index) === 'text'"
                 v-model="rule.value"
                 @update:modelValue="(value) => handleValueChange(value, index)"
@@ -78,7 +84,7 @@
               <!-- Number input -->
               <Input
                 type="number"
-                placeholder="Set value"
+                :placeholder="t('form.fields.setValue')"
                 v-if="inputType(index) === 'number'"
                 v-model="rule.value"
                 @update:modelValue="(value) => handleValueChange(value, index)"
@@ -112,7 +118,7 @@
                         {{ selected.emoji }}
                         <span>{{ selected.label }}</span>
                       </div>
-                      <span v-else>Select team</span>
+                      <span v-else>{{ $t('form.field.selectTeam') }}</span>
                     </div>
 
                     <div
@@ -131,10 +137,10 @@
                         </Avatar>
                         <span>{{ selected.label }}</span>
                       </div>
-                      <span v-else>Select user</span>
+                      <span v-else>{{ $t('form.field.selectUser') }}</span>
                     </div>
                     <span v-else>
-                      <span v-if="!selected"> Select</span>
+                      <span v-if="!selected"> {{ $t('form.field.select') }}</span>
                       <span v-else>{{ selected.label }} </span>
                     </span>
                   </template>
@@ -155,9 +161,11 @@
                     <TagsInputItemText />
                     <TagsInputItemDelete />
                   </TagsInputItem>
-                  <TagsInputInput placeholder="Select values" />
+                  <TagsInputInput :placeholder="t('form.field.selectValue')" />
                 </TagsInput>
-                <p class="text-xs text-gray-500 mt-1">Press enter to select a value</p>
+                <p class="text-xs text-gray-500 mt-1">
+                  {{ $t('globals.messages.pressEnterToSelectAValue') }}
+                </p>
               </div>
             </div>
 
@@ -173,12 +181,18 @@
               :defaultChecked="rule.case_sensitive_match"
               @update:checked="(value) => handleCaseSensitiveCheck(value, index)"
             />
-            <label> Case sensitive match </label>
+            <label> {{ $t('globals.messages.caseSensitiveMatch') }} </label>
           </div>
         </div>
       </div>
       <div>
-        <Button variant="outline" size="sm" @click.prevent="addCondition">Add condition</Button>
+        <Button variant="outline" size="sm" @click.prevent="addCondition">
+          {{
+            $t('globals.messages.add', {
+              name: $t('globals.entities.condition')
+            })
+          }}
+        </Button>
       </div>
     </div>
   </div>
@@ -210,6 +224,7 @@ import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import ComboBox from '@/components/ui/combobox/ComboBox.vue'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useI18n } from 'vue-i18n'
 import { useConversationFilters } from '@/composables/useConversationFilters'
 
 const props = defineProps({
@@ -230,6 +245,7 @@ const props = defineProps({
 const { conversationFilters, newConversationFilters } = useConversationFilters()
 const { ruleGroup } = toRefs(props)
 const emit = defineEmits(['update-group', 'add-condition', 'remove-condition'])
+const { t } = useI18n()
 
 // Computed property to get the correct filters based on type
 const currentFilters = computed(() => {
diff --git a/frontend/src/features/admin/automation/RuleList.vue b/frontend/src/features/admin/automation/RuleList.vue
@@ -7,8 +7,8 @@
             {{ rule.name }}
           </div>
           <div class="mb-1">
-            <Badge v-if="rule.enabled" class="text-[9px]">Enabled</Badge>
-            <Badge v-else variant="secondary">Disabled</Badge>
+            <Badge v-if="rule.enabled" class="text-[9px]">{{ $t('form.field.enabled') }}</Badge>
+            <Badge v-else variant="secondary">{{ $t('form.field.disabled') }}</Badge>
           </div>
         </span>
       </div>
@@ -21,16 +21,16 @@
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem @click="navigateToEditRule(rule.id)">
-              <span>Edit</span>
+              <span>{{ $t('globals.buttons.edit') }}</span>
             </DropdownMenuItem>
             <DropdownMenuItem @click="() => (alertOpen = true)">
-              <span>Delete</span>
+              <span>{{ $t('globals.buttons.delete') }}</span>
             </DropdownMenuItem>
             <DropdownMenuItem @click="$emit('toggle-rule', rule.id)" v-if="rule.enabled">
-              <span>Disable</span>
+              <span>{{ $t('globals.buttons.disable') }}</span>
             </DropdownMenuItem>
             <DropdownMenuItem @click="$emit('toggle-rule', rule.id)" v-else>
-              <span>Enable</span>
+              <span>{{ $t('globals.buttons.enable') }}</span>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -42,14 +42,16 @@
   <AlertDialog :open="alertOpen" @update:open="alertOpen = $event">
     <AlertDialogContent>
       <AlertDialogHeader>
-        <AlertDialogTitle>Delete Rule</AlertDialogTitle>
+        <AlertDialogTitle>{{ $t('globals.messages.areYouAbsolutelySure') }}</AlertDialogTitle>
         <AlertDialogDescription>
-          This action cannot be undone. This will permanently delete the automation rule.
+          {{ $t('admin.automation.deleteConfirmation') }}
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction @click="handleDelete">Delete</AlertDialogAction>
+        <AlertDialogCancel>{{ $t('globals.buttons.cancel') }}</AlertDialogCancel>
+        <AlertDialogAction @click="handleDelete">{{
+          $t('globals.buttons.delete')
+        }}</AlertDialogAction>
       </AlertDialogFooter>
     </AlertDialogContent>
   </AlertDialog>
diff --git a/frontend/src/features/admin/automation/RuleTab.vue b/frontend/src/features/admin/automation/RuleTab.vue
@@ -15,8 +15,10 @@
           }}</SelectValue>
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="first_match">Execute the first matching rule</SelectItem>
-          <SelectItem value="all">Execute all matching rules</SelectItem>
+          <SelectItem value="first_match">{{
+            $t('admin.automation.executeFirstMatchingRule')
+          }}</SelectItem>
+          <SelectItem value="all">{{ $t('admin.automation.executeAllMatchingRules') }}</SelectItem>
         </SelectContent>
       </Select>
     </div>
diff --git a/frontend/src/features/admin/automation/formSchema.js b/frontend/src/features/admin/automation/formSchema.js
@@ -1,24 +1,26 @@
 import * as z from 'zod';
 
-export const formSchema = z
+export const createFormSchema = (t) => z
     .object({
         name: z.string({
-            required_error: 'Rule name is required.',
+            required_error: t('globals.messages.required'),
         }),
         description: z.string({
-            required_error: 'Rule description is required.',
+            required_error: t('globals.messages.required'),
         }),
         enabled: z.boolean().default(true),
         type: z.string({
-            required_error: 'Rule type is required.',
+            required_error: t('globals.messages.required'),
         }),
         events: z.array(z.string()).optional(),
     })
     .superRefine((data, ctx) => {
         if (data.type === 'conversation_update' && (!data.events || data.events.length === 0)) {
             ctx.addIssue({
                 path: ['events'],
-                message: 'Please select at least one event.',
+                message: t('globals.messages.pleaseSelectAtLeastOne', {
+                    name: t('globals.entities.event')
+                }),
                 code: z.ZodIssueCode.custom,
             });
         }
diff --git a/frontend/src/views/admin/automations/Automation.vue b/frontend/src/views/admin/automations/Automation.vue
@@ -4,11 +4,15 @@
       <div v-if="router.currentRoute.value.name === 'automations'">
         <div class="flex justify-between mb-5">
           <div class="ml-auto">
-            <Button @click="newRule">New rule</Button>
+            <Button @click="newRule">{{
+              $t('globals.messages.new', {
+                name: $t('globals.entities.rule')
+              })
+            }}</Button>
           </div>
         </div>
         <div v-if="selectedTab">
-          <AutomationTabs v-model="selectedTab" />
+          <AutomationTabs v-model:automationsTab="selectedTab" />
         </div>
       </div>
       <router-view />
diff --git a/frontend/src/views/admin/automations/CreateOrEditRule.vue b/frontend/src/views/admin/automations/CreateOrEditRule.vue
diff --git a/i18n/en.json b/i18n/en.json
