fix: Fixes unread view blocking page scroll (#2727)

* fix: Fixes unread view blocking page scroll

* Update sdk.js

* Fixes the height issue for unread view

* Fix unread message position issue

* Code climate fixes

* Fixes height issue for large messages

* Fixes height issue on unread view

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -85,17 +85,19 @@ import copy from 'copy-text-to-clipboard';
 
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import timeMixin from '../../../mixins/time';
+
 import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
 import BubbleFile from './bubble/File';
+import BubbleActions from './bubble/Actions';
+
 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
 
 import { isEmptyObject } from 'dashboard/helper/commons';
 import alertMixin from 'shared/mixins/alertMixin';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
-import BubbleActions from './bubble/Actions';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 

app/javascript/sdk/IFrameHelper.js

@@ -140,7 +140,10 @@ export const IFrameHelper = {
       }
     },
     onLocationChange: ({ referrerURL, referrerHost }) => {
-      IFrameHelper.sendMessage('change-url', { referrerURL, referrerHost });
+      IFrameHelper.sendMessage('change-url', {
+        referrerURL,
+        referrerHost,
+      });
     },
 
     setUnreadMode: message => {
@@ -175,6 +178,22 @@ export const IFrameHelper = {
       const holderEl = document.querySelector('.woot-widget-holder');
       removeClass(holderEl, 'has-unread-view');
     },
+
+    updateIframeHeight: message => {
+      setTimeout(() => {
+        const iframe = IFrameHelper.getAppFrame();
+        const scrollableMessageHeight =
+          iframe.contentWindow.document.querySelector('.unread-messages')
+            .scrollHeight + 40;
+        const updatedIframeHeight = message.isFixedHeight
+          ? `${scrollableMessageHeight}px`
+          : '100%';
+        iframe.setAttribute(
+          'style',
+          `height: ${updatedIframeHeight} !important`
+        );
+      }, 100);
+    },
   },
   pushEvent: eventName => {
     IFrameHelper.sendMessage('push-event', { eventName });

app/javascript/sdk/sdk.js

@@ -12,6 +12,7 @@ export const SDK_CSS = `.woot-widget-holder {
   border: 0;
   height: 100% !important;
   width: 100% !important;
+  max-height: 100vh !important;
 }
 
 .woot-widget-holder.has-unread-view {
@@ -109,7 +110,8 @@ export const SDK_CSS = `.woot-widget-holder {
 }
 
 .woot--hide {
-  bottom: -20000px;
+  bottom: -20000px !important;
+  top: unset !important;
   opacity: 0;
   visibility: hidden !important;
   z-index: -1 !important;
@@ -126,12 +128,36 @@ export const SDK_CSS = `.woot-widget-holder {
     top: 0;
     width: 100%;
  }
+
+ .woot-widget-holder iframe {
+    min-height: 100% !important;
+  }
+
+
+ .woot-widget-holder.has-unread-view {
+    height: auto;
+    right: 0;
+    width: auto;
+    bottom: 0;
+    top: auto;
+    max-height: 100vh;
+    padding: 0 8px;
+  }
+ 
+  .woot-widget-holder.has-unread-view iframe {
+    min-height: unset !important;
+  }
+
+ .woot-widget-holder.has-unread-view.woot-elements--left {
+    left: 0;
+  }
+  
   .woot-widget-bubble.woot--close {
     bottom: 60px;
     opacity: 0;
     visibility: hidden !important;
     z-index: -1 !important;
- }
+  }
 }
 
 @media only screen and (min-width: 667px) {

app/javascript/widget/App.vue

@@ -97,6 +97,12 @@ export default {
         label: this.$t('BUBBLE.LABEL'),
       });
     },
+    setIframeHeight(isFixedHeight) {
+      IFrameHelper.sendMessage({
+        event: 'updateIframeHeight',
+        isFixedHeight,
+      });
+    },
     setLocale(locale) {
       const { enabledLanguages } = window.chatwootWebChannel;
       if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
@@ -146,6 +152,7 @@ export default {
         IFrameHelper.sendMessage({
           event: 'setCampaignMode',
         });
+        this.setIframeHeight(this.isMobile);
       }
     },
     setUnreadView() {
@@ -155,11 +162,13 @@ export default {
           event: 'setUnreadMode',
           unreadMessageCount,
         });
+        this.setIframeHeight(this.isMobile);
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
+        this.setIframeHeight();
       }
     },
     createWidgetEvents(message) {

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

@@ -19,10 +19,15 @@ body {
 }
 
 .woot-widget-wrap {
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  justify-content: flex-end;
 }
 
 .is-mobile {
+  display: block;
+
   .actions {
     .close-button {
       display: block !important;

app/javascript/widget/views/Unread.vue

@@ -122,7 +122,8 @@ export default {
 
 .unread-wrap {
   width: 100%;
-  height: 100%;
+  height: auto;
+  max-height: 100vh;
   background: transparent;
   display: flex;
   flex-direction: column;