Merge branch 'feat/saml-controllers' into feat/saml-ui

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -7,7 +7,6 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
-import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import WithLabel from 'v3/components/Form/WithLabel.vue';
 import NextInput from 'next/input/Input.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
@@ -33,12 +32,12 @@ export default {
     NextInput,
   },
   setup() {
-    const { updateUISettings } = useUISettings();
+    const { updateUISettings, uiSettings } = useUISettings();
     const { enabledLanguages } = useConfig();
     const { accountId } = useAccount();
     const v$ = useVuelidate();
 
-    return { updateUISettings, v$, enabledLanguages, accountId };
+    return { updateUISettings, uiSettings, v$, enabledLanguages, accountId };
   },
   data() {
     return {
@@ -112,7 +111,7 @@ export default {
         const { name, locale, id, domain, support_email, features } =
           this.getAccount(this.accountId);
 
-        this.$root.$i18n.locale = locale;
+        this.$root.$i18n.locale = this.uiSettings?.locale || locale;
         this.name = name;
         this.locale = locale;
         this.id = id;
@@ -137,21 +136,19 @@ export default {
           domain: this.domain,
           support_email: this.supportEmail,
         });
-        this.$root.$i18n.locale = this.locale;
+        // If user locale is set, update the locale with user locale
+        if (this.uiSettings?.locale) {
+          this.$root.$i18n.locale = this.uiSettings?.locale;
+        } else {
+          // If user locale is not set, update the locale with account locale
+          this.$root.$i18n.locale = this.locale;
+        }
         this.getAccount(this.id).locale = this.locale;
-        this.updateDirectionView(this.locale);
         useAlert(this.$t('GENERAL_SETTINGS.UPDATE.SUCCESS'));
       } catch (error) {
         useAlert(this.$t('GENERAL_SETTINGS.UPDATE.ERROR'));
       }
     },
-
-    updateDirectionView(locale) {
-      const isRTLSupported = getLanguageDirection(locale);
-      this.updateUISettings({
-        rtl_view: isRTLSupported,
-      });
-    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -34,6 +34,7 @@ const {
   isAWhatsAppChannel,
   isAFacebookInbox,
   isATelegramChannel,
+  isATwilioWhatsAppChannel,
 } = useInbox(route.params.inbox_id);
 
 const hasDuplicateInstagramInbox = computed(() => {
@@ -168,7 +169,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full h-full col-span-6 p-6 overflow-auto">
+  <div class="overflow-auto col-span-6 p-6 w-full h-full">
     <DuplicateInboxBanner
       v-if="hasDuplicateInstagramInbox"
       :content="$t('INBOX_MGMT.ADD.INSTAGRAM.NEW_INBOX_SUGGESTION')"
@@ -187,7 +188,7 @@ onMounted(() => {
         </div>
         <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code
-            v-if="isATwilioChannel"
+            v-if="isATwilioWhatsAppChannel"
             lang="html"
             :script="currentInbox.callback_webhook_url"
           />

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -11,6 +11,7 @@ import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 import MessageSignature from './MessageSignature.vue';
 import FontSize from './FontSize.vue';
+import UserLanguageSelect from './UserLanguageSelect.vue';
 import HotKeyCard from './HotKeyCard.vue';
 import ChangePassword from './ChangePassword.vue';
 import NotificationPreferences from './NotificationPreferences.vue';
@@ -28,6 +29,7 @@ export default {
     MessageSignature,
     FormSection,
     FontSize,
+    UserLanguageSelect,
     UserProfilePicture,
     Policy,
     UserBasicDetails,
@@ -230,6 +232,12 @@ export default {
         "
         @change="updateFontSize"
       />
+      <UserLanguageSelect
+        :label="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.TITLE')"
+        :description="
+          $t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.NOTE')
+        "
+      />
     </FormSection>
     <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/profile/UserLanguageSelect.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { useConfig } from 'dashboard/composables/useConfig';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+
+import FormSelect from 'v3/components/Form/Select.vue';
+
+defineProps({
+  label: { type: String, default: '' },
+  description: { type: String, default: '' },
+});
+
+const { t, locale } = useI18n();
+const { updateUISettings, uiSettings } = useUISettings();
+const { enabledLanguages } = useConfig();
+const { currentAccount } = useAccount();
+
+const currentLanguage = computed(() => uiSettings.value?.locale ?? '');
+
+const languageOptions = computed(() => [
+  {
+    name: t(
+      'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.USE_ACCOUNT_DEFAULT'
+    ),
+    iso_639_1_code: '',
+  },
+  ...(enabledLanguages ?? []),
+]);
+
+const updateLanguage = async languageCode => {
+  try {
+    if (!languageCode) {
+      // Clear preference to use account default
+      await updateUISettings({ locale: null });
+      locale.value = currentAccount.value.locale;
+      useAlert(
+        t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.UPDATE_SUCCESS')
+      );
+      return;
+    }
+
+    const valid = (enabledLanguages || []).some(
+      l => l.iso_639_1_code === languageCode
+    );
+    if (!valid) {
+      throw new Error(`Invalid language code: ${languageCode}`);
+    }
+
+    await updateUISettings({ locale: languageCode });
+    // Apply immediately if the user explicitly chose a preference
+    locale.value = languageCode;
+
+    useAlert(
+      t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.UPDATE_SUCCESS')
+    );
+  } catch (error) {
+    useAlert(
+      t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.UPDATE_ERROR')
+    );
+    throw error;
+  }
+};
+
+const selectedValue = computed({
+  get: () => currentLanguage.value,
+  set: value => {
+    updateLanguage(value);
+  },
+});
+</script>
+
+<template>
+  <div class="flex gap-2 justify-between w-full items-start">
+    <div>
+      <label class="text-n-gray-12 font-medium leading-6 text-sm">
+        {{ label }}
+      </label>
+      <p class="text-n-gray-11">
+        {{ description }}
+      </p>
+    </div>
+    <FormSelect
+      v-model="selectedValue"
+      name="language"
+      spacing="compact"
+      class="min-w-28 mt-px"
+      :options="languageOptions"
+      label=""
+    >
+      <option
+        v-for="option in languageOptions"
+        :key="option.iso_639_1_code || 'default'"
+        :value="option.iso_639_1_code"
+        :selected="option.iso_639_1_code === selectedValue"
+      >
+        {{ option.name }}
+      </option>
+    </FormSelect>
+  </div>
+</template>