fix: CSAT table header and date range translation issue on reload (#11836)

# Pull Request Template

## Description

This PR fixes the translation issue in the CSAT reports table header and
date range filter, where labels reverted to English after a page reload.

Fixes
https://linear.app/chatwoot/issue/CW-4557/language-switching-on-page-reload

## Type of change

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

## How Has This Been Tested?


https://github.com/user-attachments/assets/c68da978-1f17-44b5-bb21-5ea2668563fb





## 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

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -61,7 +61,7 @@ const defaultSpanRender = cellProps => {
 
 const columnHelper = createColumnHelper();
 
-const columns = [
+const columns = computed(() => [
   columnHelper.accessor('contact', {
     header: t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
     width: 200,
@@ -121,7 +121,7 @@ const columns = [
     width: 100,
     cell: cellProps => h(ConversationCell, cellProps),
   }),
-];
+]);
 
 const paginationParams = computed(() => {
   return {
@@ -134,7 +134,9 @@ const table = useVueTable({
   get data() {
     return tableData.value;
   },
-  columns,
+  get columns() {
+    return columns.value;
+  },
   manualPagination: true,
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue

@@ -1,28 +1,33 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { DATE_RANGE_OPTIONS } from '../../constants';
 
-const EVENT_NAME = 'on-range-change';
+const emit = defineEmits(['onRangeChange']);
 
-export default {
+const { t } = useI18n();
-  name: 'ReportFiltersDateRange',
-  data() {
-    const translatedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      ...option,
-      name: this.$t(option.translationKey),
-    }));
 
-    return {
+const options = computed(() =>
-      // relies on translations, need to move it to constants
+  Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      selectedOption: translatedOptions[0],
+    ...option,
-      options: translatedOptions,
+    name: t(option.translationKey),
-    };
+  }))
+);
+
+const selectedId = ref(Object.values(DATE_RANGE_OPTIONS)[0].id);
+
+const selectedOption = computed({
+  get() {
+    return options.value.find(o => o.id === selectedId.value);
   },
-  methods: {
+  set(val) {
-    updateRange(selectedRange) {
+    selectedId.value = val.id;
-      this.selectedOption = selectedRange;
-      this.$emit(EVENT_NAME, selectedRange);
-    },
   },
+});
+
+const updateRange = range => {
+  selectedOption.value = range;
+  emit('onRangeChange', range);
 };
 </script>
 
@@ -31,7 +36,7 @@ export default {
     <multiselect
       v-model="selectedOption"
       class="no-margin"
-      track-by="name"
+      track-by="id"
       label="name"
       :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
       selected-label

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js

@@ -12,33 +12,30 @@ const mountParams = {
 };
 
 describe('ReportFiltersDateRange.vue', () => {
-  it('emits "on-range-change" event when updateRange is called', () => {
+  it('emits "onRangeChange" event when updateRange is called', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
 
     const selectedRange = DATE_RANGE_OPTIONS.LAST_7_DAYS;
     wrapper.vm.updateRange(selectedRange);
 
-    expect(wrapper.emitted('on-range-change')).toBeTruthy();
+    expect(wrapper.emitted('onRangeChange')).toBeTruthy();
-    expect(wrapper.emitted('on-range-change')[0]).toEqual([selectedRange]);
+    expect(wrapper.emitted('onRangeChange')[0]).toEqual([selectedRange]);
   });
 
   it('initializes options correctly', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
 
-    const expectedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
+    const expectedIds = Object.values(DATE_RANGE_OPTIONS).map(
-      ...option,
+      option => option.id
-      name: option.translationKey,
+    );
-    }));
+    const receivedIds = wrapper.vm.options.map(option => option.id);
 
-    expect(wrapper.vm.options).toEqual(expectedOptions);
+    expect(receivedIds).toEqual(expectedIds);
   });
 
   it('initializes selectedOption correctly', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
-    const expectedSelectedOption = Object.values(DATE_RANGE_OPTIONS)[0];
+    const expectedId = Object.values(DATE_RANGE_OPTIONS)[0].id;
-    expect(wrapper.vm.selectedOption).toEqual({
+    expect(wrapper.vm.selectedOption.id).toBe(expectedId);
-      ...expectedSelectedOption,
-      name: expectedSelectedOption.translationKey,
-    });
   });
 });