From 6f666c745a58f4e956b0fcc384b53f83c379c789 Mon Sep 17 00:00:00 2001
From: Nithin David <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 2 Aug 2021 18:34:44 +0530
Subject: [PATCH] Fixes the height issue for unread view

---
 app/javascript/sdk/IFrameHelper.js          | 18 +++++++++++++++++-
 app/javascript/sdk/sdk.js                   |  1 +
 app/javascript/widget/App.vue               |  8 ++++++++
 app/javascript/widget/assets/scss/woot.scss |  5 +++++
 app/javascript/widget/views/Unread.vue      |  2 +-
 5 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index b15516017619..312f503e8ffd 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/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,19 @@ export const IFrameHelper = {
       const holderEl = document.querySelector('.woot-widget-holder');
       removeClass(holderEl, 'has-unread-view');
     },
+
+    updateIframeHeight: message => {
+      setTimeout(() => {
+        const iframe = IFrameHelper.getAppFrame();
+        const updatedIframeHeight = message.isFixedHeight
+          ? `${iframe.contentWindow.document.body.scrollHeight}px`
+          : '100%';
+        iframe.setAttribute(
+          'style',
+          `height: ${updatedIframeHeight} !important`
+        );
+      }, 100);
+    },
   },
   pushEvent: eventName => {
     IFrameHelper.sendMessage('push-event', { eventName });
diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
index 17cef774803e..d83d9ad35d2f 100644
--- a/app/javascript/sdk/sdk.js
+++ b/app/javascript/sdk/sdk.js
@@ -132,6 +132,7 @@ export const SDK_CSS = `.woot-widget-holder {
     right: 0;
     width: auto;
     bottom: 0;
+    top: auto;
   }
  .woot-widget-holder.has-unread-view.woot-elements--left {
     left: 0;
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index fc2e9bb55194..16531a46dada 100755
--- a/app/javascript/widget/App.vue
+++ b/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)) {
@@ -155,11 +161,13 @@ export default {
           event: 'setUnreadMode',
           unreadMessageCount,
         });
+        this.setIframeHeight(this.isMobile);
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
+        this.setIframeHeight();
       }
     },
     createWidgetEvents(message) {
diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index f2799af28db3..c160c1cc2960 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -20,9 +20,14 @@ body {
 
 .woot-widget-wrap {
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 .is-mobile {
+  display: block;
+
   .actions {
     .close-button {
       display: block !important;
diff --git a/app/javascript/widget/views/Unread.vue b/app/javascript/widget/views/Unread.vue
index 808215d6d9df..f73e21b24af4 100644
--- a/app/javascript/widget/views/Unread.vue
+++ b/app/javascript/widget/views/Unread.vue
@@ -122,7 +122,7 @@ export default {
 
 .unread-wrap {
   width: 100%;
-  height: 100%;
+  height: auto;
   background: transparent;
   display: flex;
   flex-direction: column;