feat: call offline hangup [WTEL-4031]

src/app/components/wt-omni-widget.vue

@@ -41,6 +41,7 @@ I don't remember why there's a keep-alive,
 
 <script>
 import eventBus from '@webitel/ui-sdk/src/scripts/eventBus';
+import { mapActions } from 'vuex';
 import WtOmniWidgetButtonsMenu from './wt-omni-widget-button/wt-omni-widget-buttons-menu.vue';
 import WtOmniWidgetWindow from './wt-omni-widget-window/wt-omni-widget-window.vue';
 import WtOmniWidgetPopup from './wt-omni-widget-popup/wt-omni-widget-popup.vue';
@@ -87,6 +88,9 @@ export default {
   },
 
   methods: {
+    ...mapActions({
+      subsribeToNetworkConnectionStatus: 'SUBSCRIBE_TO_NETWORK_CONNECTION_STATUS',
+    }),
     applyGlobalConfig() {
       if(this.isPreviewMode === 'chat') this.activeChannel = WidgetChannel.CHAT; // Open chat preview if configuration contains chat preview property
       if (this.config.view.lang) this.$i18n.locale = this.config.view.lang;
@@ -115,6 +119,7 @@ export default {
   },
 
   created() {
+    this.subsribeToNetworkConnectionStatus();
     this.applyGlobalConfig();
     eventBus.$on(GlobalEvent.SET_ACTIVE_WIDGET_CHANNEL, this.setActiveChannel);
   },

src/app/store/index.js

@@ -11,9 +11,20 @@ Vue.use(Vuex);
 
 const state = {
   config: {},
+  offline: false,
 };
 
 const actions = {
+  SUBSCRIBE_TO_NETWORK_CONNECTION_STATUS: (context) => {
+    // don't need to unsubscribe because subscription should be active for the whole app lifecycle
+    window.addEventListener('offline', () => {
+      context.commit('SET_OFFLINE', true);
+    });
+    // don't need to unsubscribe because subscription should be active for the whole app lifecycle
+    window.addEventListener('online', () => {
+      context.commit('SET_OFFLINE', false);
+    });
+  },
   INITIALIZE_SESSION: (context, payload) => Promise.allSettled([
     context.dispatch('chat/SUBSCRIBE_TO_MESSAGES', payload),
     context.dispatch('notifications/INITIALIZE'),
@@ -33,6 +44,9 @@ const mutations = {
       ...config,
     };
   },
+  SET_OFFLINE: (state, offline) => {
+    state.offline = offline;
+  },
 };
 
 export default new Vuex.Store({

src/modules/call/components/wt-omni-widget-call-offline.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="wt-omni-widget-call-offline">
+    <wt-icon
+      color="error"
+      icon="attention"
+      icon-prefix="wt-omni-widget"
+    ></wt-icon>
+    <call-title-wrapper>
+      unlucky
+      <template #description>
+        unlucky x2
+      </template>
+    </call-title-wrapper>
+  </section>
+</template>
+
+<script>
+import CallTitleWrapper from './utils/wt-omni-widget-call-title-wrapper.vue';
+
+export default {
+  name: 'wt-omni-widget-call-offline',
+  components: { CallTitleWrapper },
+};
+</script>
+
+<style lang="scss" scoped>
+#wt-omni-widget {
+  .wt-omni-widget-call-offline {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    gap: 32px;
+  }
+}
+</style>

src/modules/call/components/wt-omni-widget-call-wrapper.vue

@@ -17,7 +17,7 @@ why there's d: contents; and this weird wrapper?
 
 <script>
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import SessionState from '../enums/SessionState.enum';
 import ContentWrapper
   from '../../../app/components/wt-omni-widget-window/wt-omni-widget-window-content-wrapper/wt-omni-widget-window-content-wrapper.vue';
@@ -26,6 +26,7 @@ import FooterWrapper
 import CallStart from './wt-omni-widget-call-start.vue';
 import CallRinging from './wt-omni-widget-call-ringing.vue';
 import CallActive from './wt-omni-widget-call-active.vue';
+import CallOffline from './wt-omni-widget-call-offline.vue';
 
 export default {
   name: 'wt-omni-widget-call-wrapper',
@@ -35,6 +36,7 @@ export default {
     CallStart,
     CallRinging,
     CallActive,
+    CallOffline,
   },
   props: {
     namespace: {
@@ -44,11 +46,16 @@ export default {
   },
   computed: {
     ...mapState({
+      offline: (state) => state.offline,
       sessionState(state) {
         return getNamespacedState(state, this.namespace).sessionState;
       },
     }),
     callView() {
+      if (this.offline) {
+        return 'call-offline';
+      }
+
       switch (this.sessionState) {
         case SessionState.RINGING:
           return 'call-ringing';
@@ -59,6 +66,20 @@ export default {
       }
     },
   },
+  methods: {
+    ...mapActions({
+      hangup(dispatch, payload) {
+        return dispatch(`${this.namespace}/HANGUP`, payload);
+      },
+    }),
+  },
+  watch: {
+    offline(value) {
+      if (value && this.sessionState !== SessionState.IDLE) {
+        this.hangup();
+      }
+    },
+  },
 };
 </script>