Added snortify and emergency button - documentation to follow

jolzee · Mar 23, 2020 · 8a9acc0 · 8a9acc0
1 parent c87f7de
commit 8a9acc0
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 2 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -37,6 +37,7 @@
         'application-fullscreen': fullscreenEmbed
       }"
     >
+      <vue-snotify></vue-snotify>
       <!-- <AssistiveText ref="assistiveText" v-model="accessibleAnouncement"></AssistiveText> -->
       <transition
         name="system-bar-transition"
@@ -329,7 +330,22 @@
                     </v-btn>
                   </v-fab-transition>
                 </span>
-
+                <v-fab-transition v-if="emergencyConfig">
+                  <v-btn
+                    icon
+                    text
+                    tile
+                    small
+                    ripple
+                    accesskey="."
+                    :color="emergencyConfig.color ? emergencyConfig.color : isLightColor('primary') ? 'black' : 'white'"
+                    aria-label="Minimize Chat"
+                    class="embed-button-center mr-1"
+                    @click="sendEmergencyCode"
+                  >
+                    <v-icon>{{ `mdi-${emergencyConfig.icon}` }}</v-icon>
+                  </v-btn>
+                </v-fab-transition>
                 <template v-if="embed">
                   <span @click="closeChatEmbedded">
                     <v-fab-transition>
@@ -560,6 +576,19 @@ export default {
     };
   },
   watch: {
+    snotify: function(snotifyConfig) {
+      if (snotifyConfig) {
+        if (snotifyConfig.title) {
+          this.$snotify[snotifyConfig.type](
+            snotifyConfig.body,
+            snotifyConfig.title,
+            snotifyConfig.config
+          );
+        } else {
+          this.$snotify[snotifyConfig.type](snotifyConfig.body, snotifyConfig.config);
+        }
+      }
+    },
     isChatOpen: function(isOpenNew) {
       if (isOpenNew) {
         const element = this.$el.querySelector("#teneo-input-field");
@@ -672,11 +701,13 @@ export default {
   },
   computed: {
     ...mapGetters([
+      "emergencyConfig",
       "isLiveAgentAssist",
       "accessibleAnouncement",
       "mustCloseBecauseOfEscape",
       "accentStyling",
       "authenticated",
+      "snotify",
       "hide508",
       "theme",
       "textColor",
@@ -813,6 +844,16 @@ export default {
     }
   },
   methods: {
+    sendEmergencyCode() {
+      this.$store
+        .dispatch("sendUserInput", this.emergencyConfig.params)
+        .then(() => {
+          logger.debug("Emergency code sent to Teneo: ", this.emergencyConfig.params);
+        })
+        .catch(err => {
+          logger.error("Error sending emergency code", err);
+        });
+    },
     handleKeyUpEmbed(e) {
       if (this.showButtonOnly && this.showChatButton) {
         if (e.shiftKey && e.key === "Tab") {
@@ -1233,6 +1274,7 @@ export default {
 </script>
 
 <style>
+@import "~vue-snotify/styles/material.css";
 @import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
 
 .teneo-icon {

diff --git a/src/store.js b/src/store.js
@@ -20,6 +20,15 @@ import { accountsSdk } from "@livechat/accounts-sdk";
 import liveChatConfig from "@/utils/livechat-config";
 import Firebase from "@/utils/firebase";
 import enableDrag from "@/utils/drag";
+import Snotify, { SnotifyPosition } from "vue-snotify";
+
+const snotifyOptions = {
+  toast: {
+    position: SnotifyPosition.leftBottom
+  }
+};
+
+Vue.use(Snotify, snotifyOptions);
 
 var md = require("markdown-it")({
   html: true,
@@ -53,7 +62,6 @@ import { STORAGE_KEY } from "@/constants/solution-config-default"; // applicatio
 import { TRANSLATIONS } from "@/constants/translations"; // add UI translations for different language here
 import Setup from "@/utils/setup";
 
-let teneoSessionId;
 let store;
 let config = new Setup();
 Vue.use(Vuex);
@@ -171,9 +179,15 @@ function storeSetup(vuetify) {
           ? localStorage.getItem(STORAGE_KEY + "darkTheme") === "true"
           : false,
         embed: config.EMBED,
+        emergencyConfig: {
+          icon: "bell-ring",
+          color: "red",
+          params: "&command=SEND_EMERGENCY"
+        },
         showDelayedResponse: false,
         hideConfigMenu: window.leopardConfig.hideConfigMenu,
         isWebSite: true,
+        snotify: null,
         overlayChat: config.FLOAT,
         responseIcon: config.RESPONSE_ICON,
         theme: config.THEME,
@@ -190,6 +204,12 @@ function storeSetup(vuetify) {
       }
     },
     getters: {
+      emergencyConfig(state) {
+        return state.ui.emergencyConfig;
+      },
+      snotify(state) {
+        return state.ui.snotify;
+      },
       teneoSessionId(state) {
         return state.teneoSessionId;
       },
@@ -969,6 +989,12 @@ function storeSetup(vuetify) {
       }
     },
     mutations: {
+      SET_EMERGENCY_CONFIG(state, config) {
+        state.ui.emergencyConfig = config;
+      },
+      SET_SNOTIFY(state, config) {
+        state.ui.snotify = config;
+      },
       SET_TENEO_SESSION_ID(state, newSessionId) {
         state.teneoSessionId = newSessionId;
       },
@@ -1831,6 +1857,15 @@ function storeSetup(vuetify) {
               context.commit("SET_TENEO_SESSION_ID", json.sessionId);
               json = convertTeneoJsonNewToOld(json);
               context.commit("HIDE_CHAT_LOADING");
+              if (json.responseData.extraData.snotify) {
+                context.commit("SET_SNOTIFY", JSON.parse(json.responseData.extraData.snotify));
+              }
+              if (json.responseData.extraData.emergency) {
+                context.commit(
+                  "SET_EMERGENCY_CONFIG",
+                  JSON.parse(json.responseData.extraData.emergency)
+                );
+              }
               if ("numActiveFlows" in json.responseData.extraData) {
                 let numActiveFlows = parseInt(json.responseData.extraData.numActiveFlows);
                 if (numActiveFlows > 0) {
@@ -1974,6 +2009,9 @@ function storeSetup(vuetify) {
               if (params.indexOf("command=train") !== -1) {
                 return;
               }
+              if (json.responseData.extraData.snotify) {
+                context.commit("SET_SNOTIFY", JSON.parse(json.responseData.extraData.snotify));
+              }
               if ("numActiveFlows" in json.responseData.extraData) {
                 // deal with polling
                 let numActiveFlows = parseInt(json.responseData.extraData.numActiveFlows);