From 94209d29cb65223a2b3cadb3a25e0d522f6320c9 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 13 Jan 2022 01:57:16 +0530
Subject: [PATCH] fix: Fixes widget unread view blocking parent page (#3658)

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 app/javascript/sdk/IFrameHelper.js            |  1 -
 app/javascript/sdk/sdk.js                     |  2 ++
 app/javascript/widget/App.vue                 | 22 +++++++++----------
 .../widget/helpers/IframeEventHelper.js       |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index e10feac6d..8dba6b13d 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -169,7 +169,6 @@ export const IFrameHelper = {
     },
     updateIframeHeight: message => {
       const { extraHeight = 0, isFixedHeight } = message;
-      if (!extraHeight) return;
 
       IFrameHelper.setFrameHeightToFitContent(extraHeight, isFixedHeight);
     },
diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
index 50f147c70..2e2aca7aa 100644
--- a/app/javascript/sdk/sdk.js
+++ b/app/javascript/sdk/sdk.js
@@ -18,6 +18,8 @@ export const SDK_CSS = `.woot-widget-holder {
 
 .woot-widget-holder.has-unread-view {
   border-radius: 0 !important;
+  min-height: 80px;
+  height: auto;
   bottom: 94px;
   box-shadow: none !important;
 }
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 6a4d4d7ec..7b047f7cc 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -166,7 +166,7 @@ export default {
         !isEmptyObject(activeCampaign) && !messageCount;
       if (this.isIFrame && isCampaignReadyToExecute) {
         this.replaceRoute('campaigns').then(() => {
-          this.setIframeHeight(this.isMobile);
+          this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });
         });
       }
@@ -175,17 +175,16 @@ export default {
       const { unreadMessageCount } = this;
       if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
         this.replaceRoute('unread-messages').then(() => {
-          this.setIframeHeight(this.isMobile);
+          this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });
         });
-        this.setIframeHeight(this.isMobile);
         this.handleUnreadNotificationDot();
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
-        this.setIframeHeight();
+        this.setIframeHeight(false);
         this.handleUnreadNotificationDot();
       }
     },
@@ -260,17 +259,18 @@ export default {
         } else if (message.event === 'toggle-open') {
           this.$store.dispatch('appConfig/toggleWidgetOpen', message.isOpen);
 
-          if (
+          const shouldShowMessageView =
             ['home'].includes(this.$route.name) &&
             message.isOpen &&
-            this.messageCount
-          ) {
+            this.messageCount;
+          const shouldShowHomeView =
+            !message.isOpen &&
+            ['unread-messages', 'campaigns'].includes(this.$route.name);
+
+          if (shouldShowMessageView) {
             this.replaceRoute('messages');
           }
-          if (
-            !message.isOpen &&
-            ['unread-messages', 'campaigns'].includes(this.$route.name)
-          ) {
+          if (shouldShowHomeView) {
             this.$store.dispatch('conversation/setUserLastSeen');
             this.unsetUnreadView();
             this.replaceRoute('home');
diff --git a/app/javascript/widget/helpers/IframeEventHelper.js b/app/javascript/widget/helpers/IframeEventHelper.js
index f09cb0f47..953802df8 100644
--- a/app/javascript/widget/helpers/IframeEventHelper.js
+++ b/app/javascript/widget/helpers/IframeEventHelper.js
@@ -19,7 +19,7 @@ export const getExtraSpaceToScroll = () => {
   if (!unreadMessageWrap) return 0;
 
   // 24px to compensate the paddings
-  let extraHeight = 24 + unreadMessageWrap.scrollHeight;
+  let extraHeight = 48 + unreadMessageWrap.scrollHeight;
   if (unreadCloseWrap) extraHeight += unreadCloseWrap.scrollHeight;
   if (readViewWrap) extraHeight += readViewWrap.scrollHeight;