✨ feat: On mobile devices display button that minimizes chat for resp…

…onses that return URLs
jolzee · Oct 29, 2020 · 58cc851 · 58cc851
1 parent acd2859
commit 58cc851
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 31 deletions.
diff --git a/public/static/embed-leopard.js b/public/static/embed-leopard.js
@@ -97,7 +97,7 @@ var leopardChatUi = (function () {
             border: 0px;
             transition: none 0s ease 0s !important;
         }
-        @media only screen and (max-width: 480px) {
+        @media only screen and (max-width: 464px) {
         .teneo-chat-widget {
             z-index: 10000;
             top: 0;

diff --git a/src/App.vue b/src/App.vue
@@ -617,6 +617,7 @@ export default {
       if (delay) {
         setTimeout(() => {
           this.minimizeChat();
+          this.$store.commit("MINIMIZE_DELAY_REMOVE");
         }, delay * 1000);
       }
     },
@@ -747,7 +748,7 @@ export default {
     }
     // this.toggleChat(); // will automatically open the chat window on load
     if (!this.showButtonOnly) {
-      if (window.innerWidth <= 480 || this.embed) {
+      if (window.innerWidth <= 464 || this.embed) {
         this.onResizeOrEmbed();
       }
       this.$store.dispatch("setUserInformation");
@@ -1212,7 +1213,7 @@ export default {
       }
 
       if (
-        (window.innerWidth <= 480 &&
+        (window.innerWidth <= 464 &&
           !this.loginPerformed &&
           !this.embed &&
           this.dialogs.length === 0) ||
@@ -1243,10 +1244,10 @@ export default {
         return;
       }
       if (
-        (window.innerWidth <= 480 && !this.embed) ||
+        (window.innerWidth <= 464 && !this.embed) ||
         (this.embed && this.isChatOpenLocalStorage())
       ) {
-        logger.debug(`window.innerWidth <= 480 && !this.embed`);
+        logger.debug(`window.innerWidth <= 464 && !this.embed`);
         this.$store.commit("HIDE_CHAT_BUTTON");
         this.$store.commit("SHOW_CHAT_WINDOW"); // show the chat window
         //animate the IFrame
@@ -1280,7 +1281,7 @@ export default {
           }.bind(this),
           400
         );
-      } else if (window.innerWidth > 480 && this.isChatOpen) {
+      } else if (window.innerWidth > 464 && this.isChatOpen) {
         this.$store.commit("SHOW_CHAT_BUTTON");
       }
     },
@@ -1941,7 +1942,7 @@ iframe#site-frame {
   padding-left: 1.5em;
 }
 
-@media only screen and (max-height: 480px) {
+@media only screen and (max-height: 464px) {
   .leopard-alternative-views {
     overflow-x: hidden;
     overflow-y: auto;
@@ -1992,7 +1993,7 @@ iframe#site-frame {
   }
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 464px) {
   .leopard-alternative-views {
     overflow-x: hidden;
     overflow-y: auto;

diff --git a/src/components/ChatTeneoResponse.vue b/src/components/ChatTeneoResponse.vue
@@ -305,6 +305,32 @@
         </v-btn>
       </v-col>
     </v-row>
+    <!-- Show button that minimizes chat on mobile when redirect url is present -->
+    <v-row
+      v-if="
+        (isMobileDevice || isSimulatedMobileDevice) &&
+        isLastItem &&
+        hasOutputUrl() &&
+        $vuetify.breakpoint.mdAndDown
+      "
+      no-gutters
+      class="mr-3"
+    >
+      <v-col cols="12" class="text-right mb-2">
+        <v-btn
+          :color="`success ${textColor('success')}`"
+          aria-label="Minimize Chat Window"
+          class="modal-btn mt-2"
+          small
+          @click="minimizeChat()"
+        >
+          <v-icon left class="teneo-icon" style="opacity: 0.7 !important"
+            >mdi-page-previous-outline</v-icon
+          >
+          Page
+        </v-btn>
+      </v-col>
+    </v-row>
     <v-row v-if="!completedForm && hasForm()" no-gutters class="mr-4">
       <v-col cols="12" class="text-right mb-2">
         <Form
@@ -409,7 +435,6 @@ import copy from "copy-to-clipboard";
 const TIE = require("leopard-tie-client");
 
 const logger = require("@/utils/logging").getLogger("ChatTeneoResponse.vue");
-logger.info("Boom");
 const isHtml = require("is-html");
 const stripHtml = require("striptags");
 
@@ -511,6 +536,8 @@ export default {
       "getNamedExtension",
       "getFeedbackFormConfig",
       "imageUrl",
+      "isMobileDevice",
+      "isSimulatedMobileDevice",
       "carouselImageArray",
       "responseIcon",
       "uuid",
@@ -794,6 +821,15 @@ export default {
     }
   },
   methods: {
+    minimizeChat() {
+      logger.info("Minimizing chat because output URL is present and button clicked");
+      this.$store.commit("MINIMIZE_NOW");
+    },
+    hasOutputUrl() {
+      const tResp = TIE.wrap(this.item.teneoResponse);
+      logger.info(`Boom:: `, tResp.hasLink());
+      return tResp.hasLink();
+    },
     beforeAnswerAlert(extension) {
       // const extensions = this.itemExtensions(this.item);
       let alertConfig = null;

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -857,7 +857,7 @@ export default {
   left: 20px;
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 464px) {
   .modal-fly-out {
     width: 100% !important;
   }

diff --git a/src/store.js b/src/store.js
@@ -118,6 +118,7 @@ function storeSetup(vuetify) {
       },
       browser: {
         isMobile: mobile(),
+        isSimulatedMobile: doesParameterExist("mobile"),
         timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
       },
       auth: {
@@ -254,7 +255,7 @@ function storeSetup(vuetify) {
         return state.ui.theme;
       },
       fullscreenEmbed(state) {
-        return state.ui.embed && state.ui.parent.width && state.ui.parent.width <= 480;
+        return state.ui.embed && state.ui.parent.width && state.ui.parent.width <= 464;
       },
       accessibleAnnouncement(state) {
         return state.accessibleAnnouncement;
@@ -378,6 +379,7 @@ function storeSetup(vuetify) {
         return uploadConfigJson;
       },
       isMobileDevice: state => state.browser.isMobile,
+      isSimulatedMobileDevice: state => state.browser.isSimulatedMobile,
       socialAuthEnabled: state => (state.auth.firebase ? true : false),
       lastReplyItem: state => {
         return state.conversation.dialog
@@ -1339,6 +1341,9 @@ function storeSetup(vuetify) {
       DISABLE_LIVE_CHAT(state) {
         state.liveAgent.enableLiveChat = false;
       },
+      MINIMIZE_NOW(state) {
+        state.ui.minimize = 0.1;
+      },
       MINIMIZE_DELAY(state, delaySeconds) {
         state.ui.minimize = delaySeconds;
       },

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -75,7 +75,7 @@ export default {
   width: 360px;
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 464px) {
   .teneo-about-card {
     width: 100vw !important;
   }

diff --git a/src/views/Chat.vue b/src/views/Chat.vue
@@ -38,7 +38,11 @@
             >
               <ChatBroadcastMessage :item="item" class="pb-1"></ChatBroadcastMessage>
 
-              <LiveChatResponse :itemIndexInDialog="i" :item="item" class="mt-1 pb-1"></LiveChatResponse>
+              <LiveChatResponse
+                :itemIndexInDialog="i"
+                :item="item"
+                class="mt-1 pb-1"
+              ></LiveChatResponse>
 
               <ChatTeneoResponse
                 :item="item"
@@ -64,7 +68,7 @@
         <div
           v-if="showLiveChatProcessing"
           class="text-left ma-2"
-          style="background-color: transparent; align-items: left;"
+          style="background-color: transparent; align-items: left"
         >
           <v-alert
             min-width="100%"
@@ -112,8 +116,10 @@
       <v-dialog ref="dialogDate" v-model="showDate" :return-value.sync="date" width="290px">
         <v-date-picker header-color="primary" color="secondary" v-model="date" scrollable>
           <v-spacer></v-spacer>
-          <v-btn small color="secondary" @click="showDate = false">{{ $t('pickers.cancel') }}</v-btn>
-          <v-btn small color="success" @click="triggerSend">{{ $t('pickers.ok') }}</v-btn>
+          <v-btn small color="secondary" @click="showDate = false">{{
+            $t("pickers.cancel")
+          }}</v-btn>
+          <v-btn small color="success" @click="triggerSend">{{ $t("pickers.ok") }}</v-btn>
         </v-date-picker>
       </v-dialog>
     </v-col>
@@ -130,8 +136,10 @@
           ></v-time-picker>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn small color="secondary" @click="showTime = false">{{ $t('pickers.cancel') }}</v-btn>
-            <v-btn small color="success" @click="triggerSend">{{ $t('pickers.ok') }}</v-btn>
+            <v-btn small color="secondary" @click="showTime = false">{{
+              $t("pickers.cancel")
+            }}</v-btn>
+            <v-btn small color="success" @click="triggerSend">{{ $t("pickers.ok") }}</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -155,7 +163,7 @@ import ChatInput from "@/components/ChatInput";
 import { mapGetters } from "vuex";
 
 if (window.Element && !Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
+  Element.prototype.closest = function (s) {
     let matches = (this.document || this.ownerDocument).querySelectorAll(s),
       i,
       el = this;
@@ -204,30 +212,30 @@ export default {
     };
   },
   watch: {
-    showLiveChatProcessing: function() {
+    showLiveChatProcessing: function () {
       // console.log(`SHOW LIVE CHAT PROCESSING`, val);
       setTimeout(() => {
         this.mustScroll = true;
         this.scrollToBottom();
       }, 8000);
     },
-    date: function(newDate) {
+    date: function (newDate) {
       if (newDate !== "") {
         this.updateInputBox(dayjs(newDate).format("D MMMM YYYY"));
       }
     },
-    storeUserInput: debounce(function(userInputStore) {
+    storeUserInput: debounce(function (userInputStore) {
       if (this.userInput !== userInputStore) {
         this.userInput = userInputStore;
       }
     }, 500),
-    dialog: function(newDialog) {
+    dialog: function (newDialog) {
       if (newDialog.length !== this.oldDialogLength) {
         this.mustScroll = true;
         this.oldDialogLength = newDialog.length;
       }
     },
-    showLiveChatProcessing: debounce(function(isLiveChatPersonTyping) {
+    showLiveChatProcessing: debounce(function (isLiveChatPersonTyping) {
       if (isLiveChatPersonTyping) {
         this.mustScroll = true;
       }
@@ -271,7 +279,7 @@ export default {
     ]),
 
     getNarrowMobile() {
-      if (window.innerWidth <= 480) {
+      if (window.innerWidth <= 464) {
         return "min-height: calc(var(--vh, 1vh) * 80 - 130px);";
       } else {
         return "";
@@ -296,7 +304,7 @@ export default {
       }
     }
   },
-  updated: debounce(function() {
+  updated: debounce(function () {
     try {
       if (this.mustScroll) {
         this.mustScroll = false;
@@ -349,7 +357,6 @@ export default {
       logger.debug("Scroll to bottom");
       const endChatTarget = this.$refs.endChat;
       if (endChatTarget) {
-
         this.isScrolling = true;
         let scrollToElement = document.getElementById("teneo-chat-scroll");
         const options = {
@@ -617,7 +624,7 @@ span.teneo-reply ul {
     0px -3px 0px 0px rgba(0, 0, 0, 0.04);
 }
 
-@media only screen and (max-height: 480px) {
+@media only screen and (max-height: 464px) {
   .chat-responses,
   .chat-responses-float {
     min-height: calc(100vh - 130px);
@@ -629,7 +636,7 @@ span.teneo-reply ul {
   }
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 464px) {
   .v-footer,
   .chat-container,
   .teneo-dialog,

diff --git a/src/views/Help.vue b/src/views/Help.vue
@@ -11,7 +11,14 @@
           <v-list-item tag="li" class="pl-0" v-for="(item, i) in knowledgeData" :key="i">
             <v-btn
               class="leopard-help-button ma-2 text-left py-2"
-              style=" width: 200px; height: unset; min-height:36px; white-space: normal; text-transform: unset;justify-content: start; "
+              style="
+                width: 200px;
+                height: unset;
+                min-height: 36px;
+                white-space: normal;
+                text-transform: unset;
+                justify-content: start;
+              "
               left
               block
               text
@@ -77,7 +84,7 @@ export default {
   width: 360px;
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 464px) {
   .teneo-help-card {
     width: 100vw !important;
   }