feat: Display reply time in widget (#1349)

Fixes #1132

app/javascript/widget/views/Home.vue

@@ -1,26 +1,55 @@
 <template>
-  <div class="home">
+  <div
+    v-if="!conversationSize && isFetchingList"
+    class="flex flex-1 items-center h-full bg-black-25 justify-center"
+  >
+    <spinner size=""></spinner>
+  </div>
+  <div v-else class="home">
     <div class="header-wrap">
-      <ChatHeaderExpanded
-        v-if="isHeaderExpanded && !hideWelcomeHeader"
-        :intro-heading="introHeading"
-        :intro-body="introBody"
-        :avatar-url="channelConfig.avatarUrl"
-        :show-popout-button="showPopoutButton"
-      />
-      <ChatHeader
-        v-else
-        :title="channelConfig.websiteName"
-        :avatar-url="channelConfig.avatarUrl"
-        :show-popout-button="showPopoutButton"
-      />
+      <transition
+        enter-active-class="transition-all delay-200 duration-300 ease"
+        leave-active-class="transition-all duration-200 ease-in"
+        enter-class="opacity-0 transform -translate-y-32"
+        enter-to-class="opacity-100 transform translate-y-0"
+        leave-class="opacity-100 transform translate-y-0"
+        leave-to-class="opacity-0 transform -translate-y-32"
+      >
+        <chat-header-expanded
+          v-if="!isOnMessageView"
+          :intro-heading="introHeading"
+          :intro-body="introBody"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="showPopoutButton"
+        />
+        <chat-header
+          v-if="isOnMessageView"
+          :title="channelConfig.websiteName"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="showPopoutButton"
+          :available-agents="availableAgents"
+        />
+      </transition>
     </div>
-    <AvailableAgents v-if="showAvailableAgents" :agents="availableAgents" />
-    <ConversationWrap :grouped-messages="groupedMessages" />
+    <conversation-wrap :grouped-messages="groupedMessages" />
     <div class="footer-wrap">
-      <div v-if="showInputTextArea" class="input-wrap">
-        <ChatFooter />
-      </div>
+      <transition
+        enter-active-class="transition-all delay-300 duration-300 ease"
+        leave-active-class="transition-all duration-200 ease-in"
+        enter-class="opacity-0 transform translate-y-32"
+        enter-to-class="opacity-100 transform translate-y-0"
+        leave-class="opacity-100 transform translate-y-0"
+        leave-to-class="opacity-0 transform translate-y-32 "
+      >
+        <div v-if="showInputTextArea && isOnMessageView" class="input-wrap">
+          <chat-footer />
+        </div>
+        <team-availability
+          v-if="!isOnMessageView"
+          :available-agents="availableAgents"
+          @start-conversation="startConversation"
+        />
+      </transition>
       <branding></branding>
     </div>
   </div>
@@ -32,18 +61,21 @@ 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';
-import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import configMixin from '../mixins/configMixin';
+import TeamAvailability from 'widget/components/TeamAvailability';
+import Spinner from 'shared/components/Spinner.vue';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'Home',
   components: {
+    Branding,
     ChatFooter,
+    ChatHeader,
     ChatHeaderExpanded,
     ConversationWrap,
-    ChatHeader,
-    Branding,
-    AvailableAgents,
+    Spinner,
+    TeamAvailability,
   },
   mixins: [configMixin],
   props: {
@@ -67,16 +99,20 @@ export default {
       type: Object,
       default: () => {},
     },
-    unreadMessageCount: {
-      type: Number,
-      default: 0,
-    },
     showPopoutButton: {
       type: Boolean,
       default: false,
     },
   },
+  data() {
+    return {
+      showMessageView: false,
+    };
+  },
   computed: {
+    ...mapGetters({
+      isFetchingList: 'conversation/getIsFetchingList',
+    }),
     isOpen() {
       return this.conversationAttributes.status === 'open';
     },
@@ -89,12 +125,18 @@ export default {
       }
       return true;
     },
+    isOnMessageView() {
+      if (this.hideWelcomeHeader) {
+        return true;
+      }
+      if (this.conversationSize === 0) {
+        return this.showMessageView;
+      }
+      return true;
+    },
     isHeaderExpanded() {
       return this.conversationSize === 0;
     },
-    showAvailableAgents() {
-      return this.availableAgents.length > 0 && this.conversationSize < 1;
-    },
     introHeading() {
       return this.channelConfig.welcomeTitle;
     },
@@ -105,11 +147,16 @@ export default {
       return !(this.introHeading || this.introBody);
     },
   },
+  methods: {
+    startConversation() {
+      this.showMessageView = !this.showMessageView;
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/woot.scss';
+@import '~widget/assets/scss/variables';
 
 .home {
   width: 100%;
@@ -117,14 +164,13 @@ export default {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
+  overflow: hidden;
   background: $color-background;
 
   .header-wrap {
     flex-shrink: 0;
     border-radius: $space-normal $space-normal $space-small $space-small;
-    background: white;
     z-index: 99;
-    @include shadow-large;
 
     @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
       border-radius: 0;

app/javascript/widget/views/Unread.vue

@@ -32,8 +32,6 @@
 </template>
 
 <script>
-/* global bus */
-
 import { IFrameHelper } from 'widget/helpers/utils';
 import AgentBubble from 'widget/components/AgentMessageBubble.vue';
 import configMixin from '../mixins/configMixin';
@@ -94,7 +92,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~widget/assets/scss/woot.scss';
+@import '~widget/assets/scss/variables';
+
 .unread-wrap {
   width: 100%;
   height: 100%;
@@ -148,7 +147,7 @@ export default {
 </style>
 
 <style lang="scss">
-@import '~widget/assets/scss/woot.scss';
+@import '~widget/assets/scss/variables';
 
 .unread-messages {
   width: 100%;