feat: Add a popout option on webwidget (#1174)

* feat: Add a popout option on webwidget

app/javascript/widget/components/ChatHeader.vue

@@ -4,16 +4,18 @@
       <img v-if="avatarUrl" :src="avatarUrl" alt="avatar" />
       <h2 class="title" v-html="title"></h2>
     </div>
-    <span class="close-button" @click="closeWindow"></span>
+    <header-actions :show-popout-button="showPopoutButton" />
   </header>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import { IFrameHelper } from 'widget/helpers/utils';
-
+import HeaderActions from './HeaderActions';
 export default {
   name: 'ChatHeader',
+  components: {
+    HeaderActions,
+  },
   props: {
     avatarUrl: {
       type: String,
@@ -23,21 +25,16 @@ export default {
       type: String,
       default: '',
     },
+    showPopoutButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
   },
-  methods: {
-    closeWindow() {
-      if (IFrameHelper.isIFrame()) {
-        IFrameHelper.sendMessage({
-          event: 'toggleBubble',
-        });
-      }
-    },
-  },
 };
 </script>
 
@@ -73,9 +70,5 @@ export default {
     width: 24px;
     margin-right: $space-small;
   }
-
-  .close-button {
-    display: none;
-  }
 }
 </style>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -1,7 +1,9 @@
 <template>
   <header class="header-expanded">
-    <img v-if="avatarUrl" class="logo" :src="avatarUrl" />
-    <span class="close close-button" @click="closeWindow"></span>
+    <div class="header--row">
+      <img v-if="avatarUrl" class="logo" :src="avatarUrl" />
+      <header-actions :show-popout-button="showPopoutButton" />
+    </div>
     <h2 class="title" v-html="introHeading"></h2>
     <p class="body" v-html="introBody"></p>
   </header>
@@ -9,10 +11,12 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { IFrameHelper } from 'widget/helpers/utils';
-
+import HeaderActions from './HeaderActions';
 export default {
   name: 'ChatHeaderExpanded',
+  components: {
+    HeaderActions,
+  },
   props: {
     avatarUrl: {
       type: String,
@@ -26,21 +30,16 @@ export default {
       type: String,
       default: '',
     },
+    showPopoutButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
   },
-  methods: {
-    closeWindow() {
-      if (IFrameHelper.isIFrame()) {
-        IFrameHelper.sendMessage({
-          event: 'toggleBubble',
-        });
-      }
-    },
-  },
 };
 </script>
 
@@ -59,12 +58,6 @@ export default {
     height: 56px;
   }
 
-  .close {
-    position: absolute;
-    right: $space-medium;
-    top: $space-medium;
-    display: none;
-  }
   .title {
     color: $color-heading;
     font-size: $font-size-mega;
@@ -79,4 +72,10 @@ export default {
     line-height: 1.5;
   }
 }
+
+.header--row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
 </style>

app/javascript/widget/components/HeaderActions.vue

@@ -0,0 +1,89 @@
+<template>
+  <div v-if="isIframe" class="actions">
+    <button
+      v-if="showPopoutButton"
+      class="button transparent compact new-window--button"
+      @click="popoutWindow"
+    >
+      <span class="ion-android-open"></span>
+    </button>
+    <button class="button transparent compact close-button">
+      <span class="ion-android-close" @click="closeWindow"></span>
+    </button>
+  </div>
+</template>
+<script>
+import { IFrameHelper } from 'widget/helpers/utils';
+import { buildPopoutURL } from '../helpers/urlParamsHelper';
+import Vue from 'vue';
+
+export default {
+  name: 'HeaderActions',
+  props: {
+    showPopoutButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    isIframe() {
+      return IFrameHelper.isIFrame();
+    },
+  },
+  methods: {
+    popoutWindow() {
+      this.closeWindow();
+      const {
+        location: { origin },
+        chatwootWebChannel: { websiteToken },
+        authToken,
+      } = window;
+
+      const popoutWindowURL = buildPopoutURL({
+        origin,
+        websiteToken,
+        locale: Vue.config.lang,
+        conversationCookie: authToken,
+      });
+      const popoutWindow = window.open(
+        popoutWindowURL,
+        `webwidget_session_${websiteToken}`,
+        'resizable=off,width=400,height=600'
+      );
+      popoutWindow.focus();
+    },
+    closeWindow() {
+      if (IFrameHelper.isIFrame()) {
+        IFrameHelper.sendMessage({
+          event: 'toggleBubble',
+        });
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.actions {
+  display: flex;
+  align-items: center;
+
+  button {
+    margin-left: $space-normal;
+  }
+
+  span {
+    color: $color-heading;
+    font-size: $font-size-large;
+
+    &.ion-android-close {
+      font-size: $font-size-big;
+    }
+  }
+
+  .close-button {
+    display: none;
+  }
+}
+</style>