From 88cb5ba56ff86daff43006afce6c58d196d1db8b Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 28 Aug 2025 06:02:27 -0700
Subject: [PATCH] fix: Widget now shows articles based on correct locale
 (#12316)

# Pull Request Template

## Description

This PR fixes an issue (CW-5529) where articles displayed on the widget
were not respecting the current locale set in the URL (e.g., `/ar` was
showing English articles).

The root cause was that the article queries in the
`_featured_articles.html.erb` and `_uncategorized-block.html.erb` view
templates were missing locale filtering.

The fix involves adding `locale: @locale` to the `articles.where`
clauses in these templates to ensure that only articles matching the
current portal locale are displayed.

Fixes #CW-5529

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

The changes were verified against existing test cases that confirm the
expected behavior for locale-specific article filtering. Specifically,
tests for the articles controller's `index` action and article count by
locale were reviewed, which align with the implemented fixes.

## 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
- [x] I have added tests that prove my fix is effective or that my
feature works (N/A, relied on existing tests)
- [ ] New and existing unit tests pass locally with my changes (Unable
to run tests in this environment)
- [ ] Any dependent changes have been merged and published in downstream
modules

---
Linear Issue:
[CW-5529](https://linear.app/chatwoot/issue/CW-5529/articles-from-the-correct-locale-is-not-shown-on-the-widget)

<a
href="https://cursor.com/background-agent?bcId=bc-2f944ea8-863e-4e80-b137-c05ce0b017cc">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/open-in-cursor-dark.svg">
<source media="(prefers-color-scheme: light)"
srcset="https://cursor.com/open-in-cursor-light.svg">
<img alt="Open in Cursor" src="https://cursor.com/open-in-cursor.svg">
  </picture>
</a>
<a
href="https://cursor.com/agents?id=bc-2f944ea8-863e-4e80-b137-c05ce0b017cc">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/open-in-web-dark.svg">
<source media="(prefers-color-scheme: light)"
srcset="https://cursor.com/open-in-web-light.svg">
    <img alt="Open in Web" src="https://cursor.com/open-in-web.svg">
  </picture>
</a>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../pageComponents/Home/Article/ArticleContainer.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue b/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue
index e093d4316..07dcd2220 100644
--- a/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue
+++ b/app/javascript/widget/components/pageComponents/Home/Article/ArticleContainer.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import ArticleBlock from 'widget/components/pageComponents/Home/Article/ArticleBlock.vue';
 import ArticleCardSkeletonLoader from 'widget/components/pageComponents/Home/Article/SkeletonLoader.vue';
 import { useI18n } from 'vue-i18n';
@@ -26,7 +26,7 @@ const locale = computed(() => {
 });
 
 const fetchArticles = () => {
-  if (portal.value && !popularArticles.value.length) {
+  if (portal.value && locale.value) {
     store.dispatch('article/fetch', {
       slug: portal.value.slug,
       locale: locale.value,
@@ -60,6 +60,14 @@ const hasArticles = computed(
     !!popularArticles.value.length &&
     !!locale.value
 );
+
+// Watch for locale changes and refetch articles
+watch(locale, (newLocale, oldLocale) => {
+  if (newLocale && newLocale !== oldLocale) {
+    fetchArticles();
+  }
+});
+
 onMounted(() => fetchArticles());
 </script>