From ad41fd90f92ef83a48538d1ffc5bbf088f334aa5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 19 May 2025 23:48:06 +0530
Subject: [PATCH] fix: Fix the translation issue on conversation filter reload
 (#11513)

# Pull Request Template

## Description

This PR fixes the translation inconsistency in the
`<ConversationBasicFilter />` component, where dropdown options would
revert to English after page reload.

**Cause:**
The component used static arrays for chat status and sort options, with
translations initialized only once. After a reload, it showed system
language (English) until the user's locale was fully loaded.

**Solution:**
Replaced static arrays with computed properties to make translations
reactive. This ensures the options automatically update when the locale
changes.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Loom video

**Before**

https://www.loom.com/share/eeac97c59b21480b95ef74813d3d7fa9?sid=0481994a-8d35-4c44-87d0-c6c5a77a54fd

**After**

https://www.loom.com/share/c1bdfbdb19ca4e37bda373f0fe12527a?sid=cb5b1d19-272b-48cb-967c-9a82c2a2b028



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../conversation/ConversationBasicFilter.vue      | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index dc434f6c7..d699923f5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -38,7 +38,7 @@ const currentSortBy = computed(() => {
   );
 });
 
-const chatStatusOptions = [
+const chatStatusOptions = computed(() => [
   {
     label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
     value: 'open',
@@ -59,9 +59,9 @@ const chatStatusOptions = [
     label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
     value: 'all',
   },
-];
+]);
 
-const chatSortOptions = [
+const chatSortOptions = computed(() => [
   {
     label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_asc.TEXT'),
     value: 'last_activity_at_asc',
@@ -94,15 +94,18 @@ const chatSortOptions = [
     label: t('CHAT_LIST.SORT_ORDER_ITEMS.waiting_since_desc.TEXT'),
     value: 'waiting_since_desc',
   },
-];
+]);
 
 const activeChatStatusLabel = computed(
   () =>
-    chatStatusOptions.find(m => m.value === chatStatusFilter.value)?.label || ''
+    chatStatusOptions.value.find(m => m.value === chatStatusFilter.value)
+      ?.label || ''
 );
 
 const activeChatSortLabel = computed(
-  () => chatSortOptions.find(m => m.value === chatSortFilter.value)?.label || ''
+  () =>
+    chatSortOptions.value.find(m => m.value === chatSortFilter.value)?.label ||
+    ''
 );
 
 const saveSelectedFilter = (type, value) => {