Merge branch 'develop' into live-agent-reports-controller

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -105,6 +105,7 @@ export default {
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       messageSignature: 'getMessageSignature',
+      inboxesList: 'inboxes/getInboxes',
     }),
     sendWithSignature() {
       return this.fetchSignatureFlagFromUISettings(this.channelType);
@@ -139,13 +140,29 @@ export default {
     selectedInbox: {
       get() {
         const inboxList = this.contact.contact_inboxes || [];
-        return (
-          inboxList.find(inbox => {
-            return inbox.inbox?.id && inbox.inbox?.id === this.targetInbox?.id;
-          }) || {
-            inbox: {},
-          }
+        const selectedContactInbox = inboxList.find(
+          inbox => inbox.inbox?.id && inbox.inbox?.id === this.targetInbox?.id
         );
+
+        if (!selectedContactInbox) {
+          return { inbox: {} };
+        }
+
+        // Find the matching inbox from the inboxesList
+        const matchingInbox =
+          this.inboxesList.find(
+            item => item.id === selectedContactInbox.inbox?.id
+          ) || {};
+
+        // The entire inbox payload is not available in this object, so we need to patch it from the store
+        return {
+          ...selectedContactInbox,
+          inbox: {
+            ...matchingInbox,
+            ...selectedContactInbox.inbox,
+            sourceId: selectedContactInbox.source_id || matchingInbox.sourceId,
+          },
+        };
       },
       set(value) {
         this.targetInbox = value.inbox;
@@ -165,12 +182,22 @@ export default {
         ? this.$t('CONVERSATION.FOOTER.DISABLE_SIGN_TOOLTIP')
         : this.$t('CONVERSATION.FOOTER.ENABLE_SIGN_TOOLTIP');
     },
+
     inboxes() {
       const inboxList = this.contact.contact_inboxes || [];
-      return inboxList.map(inbox => ({
-        ...inbox.inbox,
-        sourceId: inbox.source_id,
-      }));
+      if (!inboxList.length) return [];
+
+      return inboxList.map(inbox => {
+        const matchingInbox =
+          this.inboxesList.find(item => item.id === inbox.inbox?.id) || {};
+
+        // Create merged object with a clear property order
+        return {
+          ...matchingInbox,
+          ...inbox.inbox,
+          sourceId: inbox.source_id,
+        };
+      });
     },
     isAnEmailInbox() {
       return (

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

@@ -70,7 +70,7 @@ export default {
       </div>
 
       <div class="hidden w-1/3 lg:block">
-        <p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
+        <p v-dompurify-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
       </div>
     </div>
     <woot-button

app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue

@@ -195,7 +195,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <FilterInputBox
               v-for="(condition, i) in automation.conditions"
@@ -262,7 +262,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <AutomationActionInput
               v-for="(action, i) in automation.actions"

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -178,7 +178,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <FilterInputBox
               v-for="(condition, i) in automation.conditions"
@@ -245,7 +245,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <AutomationActionInput
               v-for="(action, i) in automation.actions"

app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue

@@ -12,7 +12,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="grid grid-cols-[1fr_200px] gap-5">
+  <div class="grid grid-cols-[1fr_auto] gap-5">
     <div>
       <span class="text-base font-medium text-n-slate-12">
         {{ title }}

app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue

@@ -42,8 +42,8 @@ const emit = defineEmits(['upgrade']);
       </span>
     </div>
     <p
+      v-dompurify-html="$t(`${featurePrefix}.${i18nKey}.AVAILABLE_ON`)"
       class="text-sm font-normal text-n-slate-11"
-      v-html="$t(`${featurePrefix}.${i18nKey}.AVAILABLE_ON`)"
     />
     <p class="text-sm font-normal text-n-slate-11">
       {{ $t(`${featurePrefix}.${i18nKey}.UPGRADE_PROMPT`) }}

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue

@@ -30,7 +30,7 @@ defineProps({
           <slot name="label" />
         </div>
         <p
-          class="text-base text-slate-600 dark:text-slate-300 max-w-[400px] w-full line-clamp-2"
+          class="text-base text-slate-600 dark:text-slate-300 max-w-[25rem] w-full line-clamp-2"
         >
           <slot name="description">
             {{ description }}

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

@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
+    class="flex flex-row overflow-auto p-4 h-full bg-n-alpha-2 dark:bg-n-solid-1"
   >
     <woot-wizard
       class="hidden md:block w-1/4"

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

@@ -105,14 +105,14 @@ const openDelete = inbox => {
                 />
                 <div
                   v-else
-                  class="w-12 h-12 bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm block"
+                  class="w-[48px] h-[48px] flex justify-center items-center bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="32"
                     height="32"
                     viewBox="0 0 24 24"
-                    class="opacity-80 p-1"
+                    class="opacity-80 p-1 flex-shrink-0"
                   >
                     <path
                       fill="currentColor"

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

@@ -362,7 +362,7 @@ export default {
 
 <template>
   <div
-    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
+    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto settings bg-n-solid-1"
   >
     <SettingIntroBanner
       :header-image="inbox.avatarUrl"

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

@@ -413,7 +413,10 @@ export default {
             :widget-bubble-type="widgetBubbleType"
           />
         </div>
-        <div v-else class="mx-5 p-2.5 bg-slate-50 rounded-lg dark:bg-slate-700">
+        <div
+          v-else
+          class="mx-5 p-2.5 bg-n-slate-3 rounded-lg dark:bg-n-solid-3"
+        >
           <woot-code :script="widgetScript" />
         </div>
       </div>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-row items-center gap-4">
+  <div class="flex flex-col lg:flex-row items-start lg:items-center gap-4">
     <button
       v-for="keyOption in senderNameKeyOptions"
       :key="keyOption.key"

app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import {
+  useFunctionGetter,
+  useMapGetter,
+  useStore,
+} from 'dashboard/composables/store';
+
+import Integration from './Integration.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+const store = useStore();
+
+const integrationLoaded = ref(false);
+
+const integration = useFunctionGetter('integrations/getIntegration', 'linear');
+
+const uiFlags = useMapGetter('integrations/getUIFlags');
+
+const integrationAction = computed(() => {
+  if (integration.value.enabled) {
+    return 'disconnect';
+  }
+  return integration.value.action;
+});
+
+const initializeLinearIntegration = async () => {
+  await store.dispatch('integrations/get', 'linear');
+  integrationLoaded.value = true;
+};
+
+onMounted(() => {
+  initializeLinearIntegration();
+});
+</script>
+
+<template>
+  <div class="flex-grow flex-shrink p-4 overflow-auto">
+    <div class="flex flex-col">
+      <div class="flex flex-col">
+        <div>
+          <div
+            v-if="integrationLoaded && !uiFlags.isCreatingLinear"
+            class="p-4 mb-4 bg-white border border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+          >
+            <Integration
+              :integration-id="integration.id"
+              :integration-logo="integration.logo"
+              :integration-name="integration.name"
+              :integration-description="integration.description"
+              :integration-enabled="integration.enabled"
+              :integration-action="integrationAction"
+              :delete-confirmation-text="{
+                title: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.TITLE'),
+                message: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.MESSAGE'),
+              }"
+            />
+          </div>
+          <div v-else class="flex items-center justify-center flex-1">
+            <Spinner size="" color-scheme="primary" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -7,7 +7,7 @@ import Webhook from './Webhooks/Index.vue';
 import DashboardApps from './DashboardApps/Index.vue';
 import Slack from './Slack.vue';
 import SettingsContent from '../Wrapper.vue';
-
+import Linear from './Linear.vue';
 export default {
   routes: [
     {
@@ -71,6 +71,15 @@ export default {
           },
           props: route => ({ code: route.query.code }),
         },
+        {
+          path: 'linear',
+          name: 'settings_integrations_linear',
+          component: Linear,
+          meta: {
+            permissions: ['administrator'],
+          },
+          props: route => ({ code: route.query.code }),
+        },
         {
           path: ':integration_id',
           name: 'settings_applications_integration',

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -67,7 +67,7 @@ const dropdownValues = () => {
       :class="
         errorKey
           ? 'bg-red-50 animate-shake dark:bg-red-800'
-          : 'bg-white dark:bg-slate-700'
+          : 'bg-n-slate-2 dark:bg-n-solid-3'
       "
     >
       <ActionInput
@@ -89,6 +89,7 @@ const dropdownValues = () => {
       size="small"
       variant="smooth"
       color-scheme="alert"
+      class="flex-shrink-0"
       @click="$emit('deleteNode')"
     />
   </div>

app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue

@@ -91,9 +91,9 @@ export default {
         </button>
       </div>
       <div
-        class="mt-2 flex items-start p-2 bg-slate-50 dark:bg-slate-700 rounded-md"
+        class="mt-2 flex items-start p-2 bg-n-slate-3 dark:bg-n-solid-3 rounded-md"
       >
-        <fluent-icon icon="info" size="20" class="flex-shrink" />
+        <fluent-icon icon="info" size="16" class="flex-shrink-0 mt-0.5" />
         <p
           class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-slate-600 dark:text-slate-200"
         >

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

@@ -86,7 +86,7 @@ const playAudio = async () => {
       v-tooltip.top="
         $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.PLAY')
       "
-      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[28px]"
+      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[1.75rem]"
       @click="playAudio"
     >
       <Icon icon="i-lucide-volume-2" />

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

@@ -20,10 +20,10 @@ export default {
       isPasswordChanging: false,
       errorMessage: '',
       inputStyles: {
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
-        marginBottom: '2px',
+        borderRadius: '0.75rem',
+        padding: '0.375rem 0.75rem',
+        fontSize: '0.875rem',
+        marginBottom: '0.125rem',
       },
     };
   },

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

@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue';
+import FormSelect from 'v3/components/Form/Select.vue';
+import { useFontSize } from 'dashboard/composables/useFontSize';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: 'default',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const { fontSizeOptions } = useFontSize();
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('change', 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="fontSize"
+      spacing="compact"
+      class="min-w-28 mt-px"
+      :value="selectedValue"
+      :options="fontSizeOptions"
+      label=""
+    >
+      <option
+        v-for="option in fontSizeOptions"
+        :key="option.value"
+        :value="option.value"
+        :selected="option.value === selectedValue"
+      >
+        {{ option.label }}
+      </option>
+    </FormSelect>
+  </div>
+</template>

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

@@ -25,15 +25,17 @@ defineProps({
 
 <template>
   <button
-    class="flex flex-col gap-4 w-full h-fit sm:max-h-[220px] p-4 sm:max-w-[350px] rounded-md border border-solid border-ash-200"
+    class="flex flex-col gap-4 w-full h-fit p-4 rounded-md border border-n-weak dark:border-n-weak"
     :class="{
       'border-primary-300 ': active,
     }"
   >
     <div class="flex flex-col gap-2 items-center w-full rounded-t-[5px]">
-      <div class="flex items-center justify-between w-full gap-1">
-        <div class="flex items-center text-base font-medium text-ash-900">
-          {{ title }}
+      <div class="grid grid-cols-[1fr_auto] items-center w-full gap-1">
+        <div
+          class="overflow-hidden text-base font-medium text-ash-900 text-left"
+        >
+          <span class="block truncate">{{ title }}</span>
         </div>
         <input
           :checked="active"

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

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useFontSize } from 'dashboard/composables/useFontSize';
 import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
@@ -9,6 +10,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 import MessageSignature from './MessageSignature.vue';
+import FontSize from './FontSize.vue';
 import HotKeyCard from './HotKeyCard.vue';
 import ChangePassword from './ChangePassword.vue';
 import NotificationPreferences from './NotificationPreferences.vue';
@@ -25,6 +27,7 @@ export default {
   components: {
     MessageSignature,
     FormSection,
+    FontSize,
     UserProfilePicture,
     Policy,
     UserBasicDetails,
@@ -36,12 +39,12 @@ export default {
   },
   mixins: [globalConfigMixin],
   setup() {
-    const { uiSettings, updateUISettings, isEditorHotKeyEnabled } =
-      useUISettings();
+    const { isEditorHotKeyEnabled } = useUISettings();
+    const { currentFontSize, updateFontSize } = useFontSize();
 
     return {
-      uiSettings,
-      updateUISettings,
+      currentFontSize,
+      updateFontSize,
       isEditorHotKeyEnabled,
     };
   },
@@ -182,7 +185,7 @@ export default {
 </script>
 
 <template>
-  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-[720px]">
+  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-screen-md">
     <div class="flex flex-col gap-6">
       <h2 class="text-2xl font-medium text-ash-900">
         {{ $t('PROFILE_SETTINGS.TITLE') }}
@@ -201,7 +204,19 @@ export default {
         @update-user="updateProfile"
       />
     </div>
-
+    <FormSection
+      :title="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.NOTE')"
+    >
+      <FontSize
+        :value="currentFontSize"
+        :label="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.TITLE')"
+        :description="
+          $t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.NOTE')
+        "
+        @change="updateFontSize"
+      />
+    </FormSection>
     <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
       :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
@@ -221,7 +236,7 @@ export default {
         <button
           v-for="hotKey in hotKeys"
           :key="hotKey.key"
-          class="px-0 reset-base"
+          class="px-0 reset-base w-full sm:flex-1"
         >
           <HotKeyCard
             :key="hotKey.title"

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

@@ -35,10 +35,10 @@ export default {
       userDisplayName: this.displayName,
       userEmail: this.email,
       inputStyles: {
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
-        marginBottom: '2px',
+        borderRadius: '0.75rem',
+        padding: '0.375rem 0.75rem',
+        fontSize: '0.875rem',
+        marginBottom: '0.125rem',
       },
     };
   },

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue

@@ -2,7 +2,7 @@
   <div
     class="reports--wrapper overflow-auto bg-n-background w-full px-8 xl:px-0"
   >
-    <div class="max-w-[960px] mx-auto pb-12">
+    <div class="max-w-[60rem] mx-auto pb-12">
       <router-view />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue

@@ -161,9 +161,9 @@ export default {
         :class="{ error: v$.name.$error }"
         class="w-full"
         :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
+          borderRadius: '0.75rem',
+          padding: '0.375rem 0.75rem',
+          fontSize: '0.875rem',
         }"
         :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
@@ -175,9 +175,9 @@ export default {
         v-model="description"
         class="w-full"
         :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
+          borderRadius: '0.75rem',
+          padding: '0.375rem 0.75rem',
+          fontSize: '0.875rem',
         }"
         :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"

app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue

@@ -91,9 +91,9 @@ export default {
       :class="{ error: v$.thresholdTime.$error }"
       class="flex-grow"
       :styles="{
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
+        borderRadius: '0.75rem',
+        padding: '0.375rem 0.75rem',
+        fontSize: '0.875rem',
       }"
       :label="label"
       :placeholder="placeholder"