feat: Show refresh prompt on network disconnect (#3165)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/App.vue

@@ -8,6 +8,7 @@
       :has-accounts="hasAccounts"
     />
     <woot-snackbar-box />
+    <network-notification />
   </div>
 </template>
 
@@ -15,6 +16,7 @@
 import { mapGetters } from 'vuex';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal';
 import WootSnackbarBox from './components/SnackbarContainer';
+import NetworkNotification from './components/NetworkNotification';
 import { accountIdFromPathname } from './helper/URLHelper';
 
 export default {
@@ -23,6 +25,7 @@ export default {
   components: {
     WootSnackbarBox,
     AddAccountModal,
+    NetworkNotification,
   },
 
   data() {

app/javascript/dashboard/assets/scss/_animations.scss

@@ -93,3 +93,17 @@
 /* .slide-fade-leave-active for <2.1.8 */ {
   opacity: 0;
 }
+
+.network-notification-fade-enter-active {
+  transition: all .1s $ease-in-sine;
+}
+
+.network-notification-fade-leave-active {
+  transition: all .1s $ease-out-sine;
+}
+
+.network-notification-fade-enter,
+.network-notification-fade-leave-to {
+  transform: translateY(-$space-small);
+  opacity: 0;
+}

app/javascript/dashboard/components/NetworkNotification.vue

@@ -0,0 +1,123 @@
+<template>
+  <transition name="network-notification-fade" tag="div">
+    <div v-show="showNotification" class="ui-notification-container">
+      <div class="ui-notification">
+        <svg
+          class="ui-notification-icon"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
+          />
+        </svg>
+        <p class="ui-notification-text">
+          {{ $t('NETWORK.NOTIFICATION.TEXT') }}
+        </p>
+        <button class="ui-refresh-button" @click="refreshPage">
+          {{ $t('NETWORK.BUTTON.REFRESH') }}
+        </button>
+        <button class="ui-close-button" @click="closeNotification">
+          <i class="ui-close-icon icon ion-ios-close-outline" />
+        </button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showNotification: !navigator.onLine,
+    };
+  },
+
+  mounted() {
+    window.addEventListener('offline', this.updateOnlineStatus);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('offline', this.updateOnlineStatus);
+  },
+
+  methods: {
+    refreshPage() {
+      window.location.reload();
+    },
+
+    closeNotification() {
+      this.showNotification = false;
+    },
+
+    updateOnlineStatus(event) {
+      if (event.type === 'offline') {
+        this.showNotification = true;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/mixins';
+
+.ui-notification-container {
+  max-width: 40rem;
+  position: absolute;
+  right: var(--space-normal);
+  top: var(--space-normal);
+  width: 100%;
+  z-index: 9999;
+}
+
+.ui-notification {
+  @include shadow;
+  align-items: center;
+  background-color: var(--white);
+  border: 1px solid var(--color-border);
+  border-radius: var(--space-one);
+  display: flex;
+  justify-content: space-between;
+  max-width: 40rem;
+  min-height: 3rem;
+  min-width: 24rem;
+  padding: var(--space-normal) var(--space-two);
+  text-align: left;
+}
+
+.ui-notification-text {
+  margin: 0;
+}
+
+.ui-refresh-button {
+  color: var(--color-woot);
+  font-size: var(--font-size-small);
+  font-weight: bold;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.ui-notification-icon {
+  color: var(--b-600);
+  width: var(--font-size-mega);
+}
+
+.ui-close-icon {
+  color: var(--b-600);
+  font-size: var(--font-size-large);
+}
+
+.ui-close-button {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -71,5 +71,13 @@
       "assigned_conversation_new_message": "New Message",
       "conversation_mention": "Mention"
     }
+  },
+  "NETWORK": {
+    "NOTIFICATION": {
+      "TEXT": "Disconnected from Chatwoot"
+    },
+    "BUTTON": {
+      "REFRESH": "Refresh"
+    }
   }
 }