From d7c10b4f2af568857d25e730a267c0ca352abb66 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Mon, 30 Jun 2025 14:30:09 +0530 Subject: [PATCH 1/2] chore: Add "Coming Soon" overlay to voice channel selector (#11835) # Pull Request Template ### Screenshots **Dark** image **Light** image --------- Co-authored-by: Muhsin Keloth --- .eslintrc.js | 1 + .../dashboard/components/ChannelSelector.vue | 21 ++++++++++++++----- .../components/widgets/ChannelItem.vue | 7 +++++++ .../dashboard/i18n/locale/en/components.json | 3 +++ 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6c867f557..6b5205ad7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -103,6 +103,7 @@ module.exports = { '⌘', '📄', '🎉', + '🚀', '💬', '👥', '📥', diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue index 1e09f5363..236ae3ded 100644 --- a/app/javascript/dashboard/components/ChannelSelector.vue +++ b/app/javascript/dashboard/components/ChannelSelector.vue @@ -9,20 +9,31 @@ export default { type: String, required: true, }, + isComingSoon: { + type: Boolean, + default: false, + }, }, }; @@ -33,7 +44,7 @@ export default { } &:hover { - @apply border-transparent shadow-none cursor-not-allowed; + @apply border-n-strong shadow-none cursor-not-allowed; } } diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue index 933e117a9..5bc96d2b5 100644 --- a/app/javascript/dashboard/components/widgets/ChannelItem.vue +++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue @@ -57,6 +57,12 @@ export default { 'voice', ].includes(key); }, + isComingSoon() { + const { key } = this.channel; + // Show "Coming Soon" only if the channel is marked as coming soon + // and the corresponding feature flag is not enabled yet. + return ['voice'].includes(key) && !this.isActive; + }, }, methods: { getChannelThumbnail() { @@ -79,6 +85,7 @@ export default { :class="{ inactive: !isActive }" :title="channel.name" :src="getChannelThumbnail()" + :is-coming-soon="isComingSoon" @click="onItemClick" /> diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json index e44c6e039..0a2542a84 100644 --- a/app/javascript/dashboard/i18n/locale/en/components.json +++ b/app/javascript/dashboard/i18n/locale/en/components.json @@ -49,5 +49,8 @@ "HOURS": "Hours", "DAYS": "Days", "PLACEHOLDER": "Enter duration" + }, + "CHANNEL_SELECTOR": { + "COMING_SOON": "Coming Soon!" } } From 6e207acb5aee4971b320737b12bea5ee7914b046 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Mon, 30 Jun 2025 20:54:19 +0530 Subject: [PATCH 2/2] 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 --- .../settings/reports/components/CsatTable.vue | 8 ++-- .../reports/components/Filters/DateRange.vue | 45 ++++++++++--------- .../specs/Filters/FiltersDateRange.spec.js | 23 +++++----- 3 files changed, 40 insertions(+), 36 deletions(-) diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue index 8beeafd70..76a3e3079 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue +++ b/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(), diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue index 4d1cc340f..9caab26dd 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue @@ -1,28 +1,33 @@ - @@ -31,7 +36,7 @@ export default { { - 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('on-range-change')[0]).toEqual([selectedRange]); + expect(wrapper.emitted('onRangeChange')).toBeTruthy(); + 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 => ({ - ...option, - name: option.translationKey, - })); + const expectedIds = Object.values(DATE_RANGE_OPTIONS).map( + option => option.id + ); + 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]; - expect(wrapper.vm.selectedOption).toEqual({ - ...expectedSelectedOption, - name: expectedSelectedOption.translationKey, - }); + const expectedId = Object.values(DATE_RANGE_OPTIONS)[0].id; + expect(wrapper.vm.selectedOption.id).toBe(expectedId); }); });