feat: Sync Popular Articles locale with widget locale (#11754)
# 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>
This commit is contained in:
Sivin Varghese
@@ -1,64 +1,56 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, useTemplateRef, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader.vue';
|
||||
|
||||
export default {
|
||||
name: 'IframeLoader',
|
||||
components: {
|
||||
ArticleSkeletonLoader,
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isRtl: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isRtl: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
showEmptyState: !this.url,
|
||||
};
|
||||
isDirApplied: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
watch: {
|
||||
isRtl: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
this.$nextTick(() => {
|
||||
const iframeElement = this.$el.querySelector('iframe');
|
||||
if (iframeElement) {
|
||||
iframeElement.onload = () => {
|
||||
try {
|
||||
const iframeDocument =
|
||||
iframeElement.contentDocument ||
|
||||
(iframeElement.contentWindow &&
|
||||
iframeElement.contentWindow.document);
|
||||
});
|
||||
|
||||
if (iframeDocument) {
|
||||
iframeDocument.documentElement.dir = value ? 'rtl' : 'ltr';
|
||||
}
|
||||
} catch (e) {
|
||||
// error
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleIframeLoad() {
|
||||
// Once loaded, the loading state is hidden
|
||||
this.isLoading = false;
|
||||
},
|
||||
handleIframeError() {
|
||||
// Hide the loading state and show the empty state when an error occurs
|
||||
this.isLoading = false;
|
||||
this.showEmptyState = true;
|
||||
},
|
||||
},
|
||||
const { t } = useI18n();
|
||||
|
||||
const iframe = useTemplateRef('iframe');
|
||||
const isLoading = ref(true);
|
||||
const showEmptyState = ref(!props.url);
|
||||
|
||||
const direction = computed(() => (props.isRtl ? 'rtl' : 'ltr'));
|
||||
|
||||
const applyDirection = () => {
|
||||
if (!iframe.value) return;
|
||||
if (!props.isDirApplied) return; // If direction is already applied through props, do not apply again (iframe case)
|
||||
try {
|
||||
const doc =
|
||||
iframe.value.contentDocument || iframe.value.contentWindow?.document;
|
||||
if (doc?.documentElement) {
|
||||
doc.documentElement.dir = direction.value;
|
||||
doc.documentElement.setAttribute('data-dir-applied', 'true');
|
||||
}
|
||||
} catch (e) {
|
||||
// error
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.isRtl, applyDirection);
|
||||
|
||||
const handleIframeLoad = () => {
|
||||
isLoading.value = false;
|
||||
applyDirection();
|
||||
};
|
||||
|
||||
const handleIframeError = () => {
|
||||
isLoading.value = false;
|
||||
showEmptyState.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -66,6 +58,7 @@ export default {
|
||||
<div class="relative overflow-hidden pb-1/2 h-full">
|
||||
<iframe
|
||||
v-if="url"
|
||||
ref="iframe"
|
||||
:src="url"
|
||||
class="absolute w-full h-full top-0 left-0"
|
||||
@load="handleIframeLoad"
|
||||
@@ -79,7 +72,7 @@ export default {
|
||||
v-if="showEmptyState"
|
||||
class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
|
||||
>
|
||||
<p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
|
||||
<p>{{ t('PORTAL.IFRAME_ERROR') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user