fix: Add missing close button if bubble is hidden (#1435)

Gemfile.lock

@@ -325,7 +325,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (4.0.5)
-    puma (4.3.5)
+    puma (4.3.6)
       nio4r (~> 2.0)
     pundit (2.1.0)
       activesupport (>= 3.0.0)

app/javascript/sdk/IFrameHelper.js

@@ -34,7 +34,10 @@ export const IFrameHelper = {
     iframe.id = 'chatwoot_live_chat_widget';
     iframe.style.visibility = 'hidden';
 
-    const holderClassName = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
+    let holderClassName = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
+    if (window.$chatwoot.hideMessageBubble) {
+      holderClassName += ` woot-widget--without-bubble`;
+    }
     addClass(widgetHolder, holderClassName);
     widgetHolder.appendChild(iframe);
     body.appendChild(widgetHolder);
@@ -114,6 +117,9 @@ export const IFrameHelper = {
     },
 
     setBubbleLabel(message) {
+      if (window.$chatwoot.hideMessageBubble) {
+        return;
+      }
       setBubbleText(window.$chatwoot.launcherTitle || message.label);
     },
 

app/javascript/sdk/sdk.js

@@ -115,6 +115,10 @@ export const SDK_CSS = `.woot-widget-holder {
   z-index: -1 !important;
 }
 
+.woot-widget--without-bubble {
+  bottom: 20px !important;
+}
+
 @media only screen and (max-width: 667px) {
   .woot-widget-holder {
     height: 100%;

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

@@ -34,6 +34,14 @@ body {
   }
 }
 
+.is-bubble-hidden {
+  .actions {
+    .close-button {
+      display: block !important;
+    }
+  }
+}
+
 .cursor-pointer {
   cursor: pointer;
 }

app/javascript/widget/views/Router.vue

@@ -2,7 +2,11 @@
   <div
     id="app"
     class="woot-widget-wrap"
-    :class="{ 'is-mobile': isMobile, 'is-widget-right': !isLeftAligned }"
+    :class="{
+      'is-mobile': isMobile,
+      'is-widget-right': !isLeftAligned,
+      'is-bubble-hidden': hideMessageBubble,
+    }"
   >
     <home
       v-if="!showUnreadView"