Merge branch 'develop' into feat/linear-backend

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { picoSearch } from '@scmmishra/pico-search';
-import FilterListItemButton from './FilterListItemButton.vue';
-import FilterDropdownSearch from './FilterDropdownSearch.vue';
-import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
+import ListItemButton from './DropdownListItemButton.vue';
+import DropdownSearch from './DropdownSearch.vue';
+import DropdownEmptyState from './DropdownEmptyState.vue';
 
 const props = defineProps({
   listItems: {
@@ -54,7 +54,7 @@ const isFilterActive = id => {
     @click.stop
   >
     <slot name="search">
-      <filter-dropdown-search
+      <dropdown-search
         v-if="enableSearch && listItems.length"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
@@ -64,11 +64,11 @@ const isFilterActive = id => {
       />
     </slot>
     <slot name="listItem">
-      <filter-dropdown-empty-state
+      <dropdown-empty-state
         v-if="isDropdownListEmpty"
         :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
       />
-      <filter-list-item-button
+      <list-item-button
         v-for="item in filteredListItems"
         :key="item.id"
         :is-active="isFilterActive(item.id)"

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -2,6 +2,7 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected, you will not receive any new messages. <a class=\"underline\" href=\"%{actionUrl}\">Click here</a> to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },
@@ -736,4 +737,4 @@
       "OTHER_PROVIDERS": "Other Providers"
     }
   }
-}
+}

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

@@ -21,6 +21,11 @@
       </woot-tabs>
     </setting-intro-banner>
 
+    <inbox-reconnection-required
+      v-if="isReconnectionRequired"
+      class="mx-8 mt-5"
+    />
+
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
       <settings-section
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
@@ -287,7 +292,7 @@
         <label v-if="isAWebWidgetInbox">
           {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
         </label>
-        <div v-if="isAWebWidgetInbox" class="pt-2 pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -298,7 +303,7 @@
             {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -309,7 +314,7 @@
             {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -320,7 +325,7 @@
             {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -435,6 +440,7 @@ import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
+import InboxReconnectionRequired from './components/InboxReconnectionRequired';
 import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
@@ -453,6 +459,7 @@ export default {
     WeeklyAvailability,
     WidgetBuilder,
     SenderNameExamplePreview,
+    InboxReconnectionRequired,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -614,6 +621,9 @@ export default {
         return true;
       return false;
     },
+    isReconnectionRequired() {
+      return false;
+    },
   },
   watch: {
     $route(to) {

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

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  actionUrl: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 px-4 py-3 text-sm text-white bg-red-500 rounded-md dark:bg-red-800/30 dark:text-red-50 min-h-10"
+  >
+    <fluent-icon icon="error-circle" class="text-white dark:text-red-50" />
+    <slot>
+      <span v-html="$t('INBOX_MGMT.RECONNECTION_REQUIRED', { actionUrl })" />
+    </slot>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue

@@ -1,6 +1,6 @@
 <script setup>
-import FilterButton from './FilterButton.vue';
-import FilterListDropdown from './FilterListDropdown.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 
 const props = defineProps({
   name: {

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue

@@ -1,8 +1,8 @@
 <script setup>
-import FilterButton from './FilterButton.vue';
-import FilterListDropdown from './FilterListDropdown.vue';
-import FilterListItemButton from './FilterListItemButton.vue';
-import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
+import FilterListItemButton from 'dashboard/components/ui/Dropdown/DropdownListItemButton.vue';
+import FilterDropdownEmptyState from 'dashboard/components/ui/Dropdown/DropdownEmptyState.vue';
 
 import { ref } from 'vue';
 

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue

@@ -63,7 +63,7 @@ import {
   getActiveFilter,
   getFilterType,
 } from './helpers/SLAFilterHelpers';
-import FilterButton from '../Filters/v3/FilterButton.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
 import AddFilterChip from '../Filters/v3/AddFilterChip.vue';