From 274ad381cb1e8a366999afbb152481b371bfd0e9 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Tue, 26 Nov 2019 22:35:26 +0530
Subject: [PATCH] Makes widget header expand and collapse by messages size
 (#293)

---
 .../widget/components/ChatHeader.vue          | 44 +++++++++++++++++++
 .../widget/store/modules/conversation.js      |  1 +
 app/javascript/widget/views/Home.vue          | 13 +++++-
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/widget/components/ChatHeader.vue

diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
new file mode 100644
index 000000000..468419904
--- /dev/null
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -0,0 +1,44 @@
+<template>
+  <header class="header-collapsed" :style="{ background: widgetColor }">
+    <div>
+      <h2 class="title">
+        {{ title }}
+      </h2>
+    </div>
+  </header>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ChatHeader',
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.header-collapsed {
+  background: $color-woot;
+  padding: $space-two $space-medium;
+  width: 100%;
+  box-sizing: border-box;
+  color: $color-white;
+
+  .title {
+    font-size: $font-size-big;
+  }
+}
+</style>
diff --git a/app/javascript/widget/store/modules/conversation.js b/app/javascript/widget/store/modules/conversation.js
index 9e651c2be..bff606001 100755
--- a/app/javascript/widget/store/modules/conversation.js
+++ b/app/javascript/widget/store/modules/conversation.js
@@ -9,6 +9,7 @@ const state = {
 
 const getters = {
   getConversation: _state => _state.conversations,
+  getConversationSize: _state => Object.keys(_state.conversations).length,
 };
 
 const actions = {
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 59182c4b9..184c23959 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="home">
     <div class="header-wrap">
-      <ChatHeaderExpanded />
+      <ChatHeaderExpanded v-if="isHeaderExpanded" />
+      <ChatHeader v-else :title="getHeaderName" />
     </div>
     <ConversationWrap :messages="getConversation" />
     <div class="footer-wrap">
@@ -15,6 +16,7 @@ import { mapActions, mapGetters } from 'vuex';
 
 import ChatFooter from 'widget/components/ChatFooter.vue';
 import ChatHeaderExpanded from 'widget/components/ChatHeaderExpanded.vue';
+import ChatHeader from 'widget/components/ChatHeader.vue';
 import ConversationWrap from 'widget/components/ConversationWrap.vue';
 
 export default {
@@ -23,6 +25,7 @@ export default {
     ChatFooter,
     ChatHeaderExpanded,
     ConversationWrap,
+    ChatHeader,
   },
   methods: {
     ...mapActions('conversation', ['sendMessage']),
@@ -33,7 +36,13 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('conversation', ['getConversation']),
+    ...mapGetters('conversation', ['getConversation', 'getConversationSize']),
+    isHeaderExpanded() {
+      return this.getConversationSize === 0;
+    },
+    getHeaderName() {
+      return window.chatwootWebChannel.website_name;
+    },
   },
 };
 </script>