feat: add inbox reconnection banner (#9441)

![CleanShot 2024-05-09 at 12 44
07@2x](https://github.com/chatwoot/chatwoot/assets/18097732/2b2861d4-ddcb-481a-b411-f553c19ff573)

![CleanShot 2024-05-09 at 12 44
36@2x](https://github.com/chatwoot/chatwoot/assets/18097732/9cdb8213-acce-4499-a72b-1feba2b611a6)

---------

Co-authored-by: Fayaz Ahmed <fayazara@gmail.com>

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>