mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 11:37:58 +00:00
# Pull Request Template
## Description
This PR includes the following improvements:
* **Popular Articles Locale Selection based on Widget Locale**
* Implements priority-based locale matching:
* Exact locale match (e.g., "fr" === "fr")
* Base language match (e.g., "fr" when selected is "fr_CA")
* Variant match (e.g., "fr_BE" when selected is "fr")
* Removes default locale fallback - if no locale match is found, popular
articles section is hidden.
* Fixed **API** filter issue where the locale parameter was previously
ignored
* Hides Popular Articles section completely when no locale match is
found and Only shows relevant articles in the user's language
* **RTL Direction Handling Improvements**
* Now directly reads the `lang` attribute from HTML element `<html
lang="en">` instead of relying on `.locale-switcher` and sets direction
attribute based on language.
* Adds `data-dir-applied` attribute to prevent overlapping direction
settings between global helpers and components (eg case: Insert article
in editor dashboard)
* Update `IframeLoader.vue` to Composition API and improve the **dir**
logic
Fixes
1.
[CW-4505](https://linear.app/chatwoot/issue/CW-4505/popular-articles-not-displayed-based-on-user-locale-in-live-chat),
https://github.com/chatwoot/chatwoot/issues/11745
2. RTL direction is not working in widget article view after merging
this PR https://github.com/chatwoot/chatwoot/pull/11692
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
### Loom video
**Popular Articles**
https://www.loom.com/share/7cecbaaa77eb48e19263398b6ba8ddef?sid=a2452b8e-7d7e-46a3-b5c8-aed5ab5bc801
**RTL improvements**
https://www.loom.com/share/3ccad77174a0412097e802641df5f3e0?sid=e10ac57f-5c49-4084-84d3-5ad58aee54fa
## Checklist:
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] 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
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---------
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
41 lines
1.5 KiB
JavaScript
41 lines
1.5 KiB
JavaScript
/**
|
||
* Determine the best-matching locale from the list of locales allowed by the portal.
|
||
*
|
||
* The matching happens in the following order:
|
||
* 1. Exact match – the visitor-selected locale equals one in the `allowedLocales` list
|
||
* (e.g., `fr` ➜ `fr`).
|
||
* 2. Base language match – the base part of a compound locale (before the underscore)
|
||
* matches (e.g., `fr_CA` ➜ `fr`).
|
||
* 3. Variant match – when the base language is selected but a regional variant exists
|
||
* in the portal list (e.g., `fr` ➜ `fr_BE`).
|
||
*
|
||
* If none of these rules find a match, the function returns `null`,
|
||
* Don't show popular articles if locale doesn't match with allowed locales
|
||
*
|
||
* @export
|
||
* @param {string} selectedLocale The locale selected by the visitor (e.g., `fr_CA`).
|
||
* @param {string[]} allowedLocales Array of locales enabled for the portal.
|
||
* @returns {(string|null)} A locale string that should be used, or `null` if no suitable match.
|
||
*/
|
||
export const getMatchingLocale = (selectedLocale = '', allowedLocales = []) => {
|
||
// Ensure inputs are valid
|
||
if (
|
||
!selectedLocale ||
|
||
!Array.isArray(allowedLocales) ||
|
||
!allowedLocales.length
|
||
) {
|
||
return null;
|
||
}
|
||
|
||
const [lang] = selectedLocale.split('_');
|
||
|
||
const priorityMatches = [
|
||
selectedLocale, // exact match
|
||
lang, // base language match
|
||
allowedLocales.find(l => l.startsWith(`${lang}_`)), // first variant match
|
||
];
|
||
|
||
// Return the first match that exists in the allowed list, or null
|
||
return priorityMatches.find(l => l && allowedLocales.includes(l)) ?? null;
|
||
};
|