Merge develop into feat/voice-channel

Resolved conflicts:
- Voice.vue: Keep modern composition API version from develop
- ChannelItem.vue: Add voice channel feature flag check
- inboxes_controller.rb: Use allowed_channel_types method
- schema.rb: Add account_id index for voice channels
- inboxMgmt.json: Fix voice channel translations
- Note: Voice channel logic in base files removed in develop (moved to enterprise)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/javascript/shared/components/IframeLoader.vue

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

app/javascript/shared/helpers/portalHelper.js

@@ -0,0 +1,40 @@
+/**
+ * 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;
+};

app/javascript/shared/helpers/specs/portalHelper.spec.js

@@ -0,0 +1,28 @@
+import { getMatchingLocale } from 'shared/helpers/portalHelper';
+
+describe('portalHelper - getMatchingLocale', () => {
+  it('returns exact match when present', () => {
+    const result = getMatchingLocale('fr', ['en', 'fr']);
+    expect(result).toBe('fr');
+  });
+
+  it('returns base language match when exact variant not present', () => {
+    const result = getMatchingLocale('fr_CA', ['en', 'fr']);
+    expect(result).toBe('fr');
+  });
+
+  it('returns variant match when base language not present', () => {
+    const result = getMatchingLocale('fr', ['en', 'fr_BE']);
+    expect(result).toBe('fr_BE');
+  });
+
+  it('returns null when no match found', () => {
+    const result = getMatchingLocale('de', ['en', 'fr']);
+    expect(result).toBeNull();
+  });
+
+  it('returns null for invalid inputs', () => {
+    expect(getMatchingLocale('', [])).toBeNull();
+    expect(getMatchingLocale(null, null)).toBeNull();
+  });
+});