Bug: Fix missing close button on mobile chat window (#600)

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

.scss-lint.yml

@@ -82,7 +82,7 @@ linters:
     enabled: true
 
   ImportantRule:
-    enabled: true
+    enabled: false
 
   ImportPath:
     enabled: true

app/javascript/packs/sdk.js

@@ -131,6 +131,7 @@ const IFrameHelper = {
     body.appendChild(holder);
     IFrameHelper.initPostMessageCommunication();
     IFrameHelper.initLocationListener();
+    IFrameHelper.initWindowSizeListener();
   },
   getAppFrame: () => document.getElementById('chatwoot_live_chat_widget'),
   sendMessage: (key, value) => {
@@ -146,6 +147,7 @@ const IFrameHelper = {
       IFrameHelper.sendMessage('config-set', {});
       IFrameHelper.onLoad(message.config.channelConfig);
       IFrameHelper.setCurrentUrl();
+      IFrameHelper.toggleCloseButton();
     },
     set_auth_token: message => {
       Cookies.set('cw_conversation', message.authToken);
@@ -173,6 +175,11 @@ const IFrameHelper = {
       IFrameHelper.setCurrentUrl();
     };
   },
+  initWindowSizeListener: () => {
+    wootOn(window, 'resize', () => {
+      IFrameHelper.toggleCloseButton();
+    });
+  },
   onLoad: ({ widget_color: widgetColor }) => {
     const iframe = IFrameHelper.getAppFrame();
     iframe.style.visibility = '';
@@ -205,6 +212,14 @@ const IFrameHelper = {
       refererURL: window.location.href,
     });
   },
+  toggleCloseButton: () => {
+    console.log(window.matchMedia('(max-width: 668px)'));
+    if (window.matchMedia('(max-width: 668px)').matches) {
+      IFrameHelper.sendMessage('toggle-close-button', { showClose: true });
+    } else {
+      IFrameHelper.sendMessage('toggle-close-button', { showClose: false });
+    }
+  },
 };
 
 function loadIframe({ baseUrl, websiteToken }) {

app/javascript/widget/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="woot-widget-wrap">
+  <div id="app" class="woot-widget-wrap" :class="{ 'is-mobile': isMobile }">
     <router-view />
   </div>
 </template>
@@ -11,6 +11,11 @@ import { IFrameHelper } from 'widget/helpers/utils';
 
 export default {
   name: 'App',
+  data() {
+    return {
+      isMobile: false,
+    };
+  },
   mounted() {
     const { website_token: websiteToken = '' } = window.chatwootWebChannel;
     if (IFrameHelper.isIFrame()) {
@@ -40,6 +45,8 @@ export default {
         this.scrollConversationToBottom();
       } else if (message.event === 'set-current-url') {
         window.refererURL = message.refererURL;
+      } else if (message.event === 'toggle-close-button') {
+        this.isMobile = message.showClose;
       }
     });
   },

app/javascript/widget/assets/scss/woot.scss

@@ -17,3 +17,36 @@ body {
 .woot-widget-wrap {
   height: 100%;
 }
+
+.close-button {
+  cursor: pointer;
+  position: relative;
+  width: $space-two;
+
+  &::before,
+  &::after {
+    background-color: $color-heading;
+    content: ' ';
+    height: $space-normal;
+    left: $space-small;
+    position: absolute;
+    top: $space-micro;
+    width: 2px;
+  }
+
+  &::before {
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    transform: rotate(-45deg);
+  }
+}
+
+.is-mobile {
+  .header-wrap {
+    .close-button {
+      display: block !important;
+    }
+  }
+}

app/javascript/widget/components/AgentMessage.vue

@@ -85,6 +85,7 @@ export default {
     .avatar-wrap {
       height: $space-medium;
       width: $space-medium;
+      flex-shrink: 0;
 
       .user-thumbnail-box {
         margin-top: -$space-large;

app/javascript/widget/components/ChatHeader.vue

@@ -3,7 +3,7 @@
     <h2 class="title">
       {{ title }}
     </h2>
-    <span class="close" @click="closeWindow"></span>
+    <span class="close-button" @click="closeWindow"></span>
   </header>
 </template>
 
@@ -54,27 +54,8 @@ export default {
     color: $color-heading;
   }
 
-  .close {
-    cursor: pointer;
-    position: relative;
-    width: $space-two;
-
-    &:before,
-    &:after {
-      position: absolute;
-      left: $space-small;
-      top: $space-smaller;
-      content: ' ';
-      height: $space-normal;
-      width: 2px;
-      background-color: $color-heading;
-    }
-    &:before {
-      transform: rotate(45deg);
-    }
-    &:after {
-      transform: rotate(-45deg);
-    }
+  .close-button {
+    display: none;
   }
 }
 </style>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -1,22 +1,22 @@
 <template>
   <header class="header-expanded">
-    <div>
-      <!-- <img
+    <!-- <img
         class="logo"
-        src="http://www.hennigcompany.com/wp-content/uploads/2014/06/starbucks-logo.png"
+        src=""
       /> -->
-      <h2 class="title">
-        {{ introHeading }}
-      </h2>
-      <p class="body">
-        {{ introBody }}
-      </p>
-    </div>
+    <span class="close close-button" @click="closeWindow"></span>
+    <h2 class="title">
+      {{ introHeading }}
+    </h2>
+    <p class="body">
+      {{ introBody }}
+    </p>
   </header>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import { IFrameHelper } from 'widget/helpers/utils';
 
 export default {
   name: 'ChatHeaderExpanded',
@@ -36,6 +36,15 @@ export default {
         'We make it simple to connect with us. Ask us anything, or share your feedback.',
     },
   },
+  methods: {
+    closeWindow() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({
+          event: 'toggleBubble',
+        });
+      }
+    },
+  },
 };
 </script>
 
@@ -47,12 +56,19 @@ export default {
   padding: $space-larger $space-medium $space-large;
   width: 100%;
   box-sizing: border-box;
+  position: relative;
 
   .logo {
     width: 64px;
     height: 64px;
   }
 
+  .close {
+    position: absolute;
+    right: $space-medium;
+    top: $space-medium;
+    display: none;
+  }
   .title {
     color: $color-heading;
     font-size: $font-size-mega;

app/javascript/widget/views/Home.vue

@@ -79,9 +79,10 @@ export default {
     flex-shrink: 0;
     border-radius: $space-normal;
     background: white;
+    z-index: 99;
     @include shadow-large;
 
-    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+    @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
       border-radius: 0;
     }
   }