Added env variables to both hide close button and automatically open …

…the chat window when in embed mode
jolzee · May 7, 2020 · 6dae7a4 · 6dae7a4
1 parent eb92067
commit 6dae7a4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 13 deletions.
diff --git a/.env b/.env
@@ -26,3 +26,5 @@ VUE_APP_AUTH_MS_TENANT=
 VUE_APP_AUTH_MS_DOMAIN_HINT=
 VUE_APP_IP_URL=
 VUE_APP_GEO_URL=
+VUE_APP_EMBED_INITIAL_STATE_OPEN=true
+VUE_APP_EMBED_SHOW_CLOSE_BUTTON=false
diff --git a/public/embed-example.html b/public/embed-example.html
@@ -15,11 +15,6 @@
         message: "This was sent from the customer's web site"
       };
     </script>
-    <style>
-      .highlight:focus {
-        border: 3px solid red;
-      }
-    </style>
   </head>
   <body>
     <!-- (function() {
@@ -29,10 +24,7 @@
     b.appendChild(scr);
     })(); -->
     <!-- use the full url to static/embed-leopard.js below | https://domain.com/static/embed-leopard.js -->
-    <input type="button" class="highlight" />
-    <input type="button" class="highlight" />
     <div id="leopardChatWindow"></div>
-    <input type="button" class="highlight" />
     <script src="static/embed-leopard.js"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -345,7 +345,7 @@
                     <v-icon>{{ `mdi-${emergencyConfig.icon}` }}</v-icon>
                   </v-btn>
                 </v-fab-transition>
-                <template v-if="embed">
+                <template v-if="embedAndShowClose">
                   <span @click="closeChatEmbedded">
                     <v-fab-transition>
                       <v-btn
@@ -363,6 +363,7 @@
                     </v-fab-transition>
                   </span>
                 </template>
+                <template v-else-if="embed"></template>
                 <!-- Handle close button in demo mode -->
                 <template v-else>
                   <v-fab-transition v-if="!embed || isLiveAgentAssist">
@@ -755,7 +756,11 @@ export default {
       "isChatOpen",
       "socialAuthEnabled"
     ]),
-
+    embedAndShowClose() {
+      let showCloseButton = this.embed && window.leopardConfig.embed.showCloseButton;
+      logger.debug("EMBED: Show close button?", showCloseButton);
+      return showCloseButton;
+    },
     hasDifferentHistory() {
       if (this.getLatestDialogHistory.length !== this.dialogs.length) {
         logger.debug(`Should show 'History' menu option`);
@@ -956,13 +961,18 @@ export default {
       );
     },
     isChatOpenLocalStorage() {
+
       let isChatOpen = localStorage.getItem("isChatOpen");
       if (isChatOpen === null) {
         isChatOpen = false;
       } else {
         isChatOpen = JSON.parse(isChatOpen);
       }
 
+      if (window.leopardConfig.embed.isInitialStateOpen) {
+        isChatOpen = true;
+      }
+
       let result = false;
       logger.debug(`isChatOpenLocalStorage: ${isChatOpen}`);
       if (isChatOpen) {
@@ -1041,7 +1051,7 @@ export default {
       localStorage.setItem("isChatOpen", "false");
       sendMessageToParent("hideLeopard");
       this.calculateMobileHeight(); // only called on mobile devices
-      if (window.leopardConfig.killSessionOnCloseEmbed) {
+      if (window.leopardConfig.embed.killSessionOnCloseEmbed) {
         this.loginPerformed = false;
       }
       logger.debug("Close Chat Embedded");

diff --git a/src/utils/leopardConfig.js b/src/utils/leopardConfig.js
@@ -15,7 +15,11 @@ const getEnvValue = (name, fallback = "") => {
 
 export default {
   isProduction: getEnvValue("NODE_ENV", "production") === "production",
-  killSessionOnCloseEmbed: getEnvValue("VUE_APP_EMBED_KILL_SESSION_ON_CLOSE", false),
+  embed: {
+    isInitialStateOpen: getEnvValue("VUE_APP_EMBED_INITIAL_STATE_OPEN", false),
+    showCloseButton: getEnvValue("VUE_APP_EMBED_SHOW_CLOSE_BUTTON", true),
+    killSessionOnCloseEmbed: getEnvValue("VUE_APP_EMBED_KILL_SESSION_ON_CLOSE", false)
+  },
   solutionConfig: {
     buildConfig: getEnvValue("VUE_APP_SOLUTION_CONFIG", {})
   },

diff --git a/src/utils/postMessage.js b/src/utils/postMessage.js
@@ -43,7 +43,7 @@ export default class PostMessage {
           this.store.commit("HIDE_CHAT_WINDOW_DISPLAY_EMBED");
           setTimeout(
             function () {
-              if (this.config.EMBED && window.leopardConfig.killSessionOnCloseEmbed) {
+              if (this.config.EMBED && window.leopardConfig.embed.killSessionOnCloseEmbed) {
                 // should kill the session and clear dialog history
                 logger.info("Killing Teneo Session");
                 this.store.dispatch("endSession");