Merge branch 'develop' into 1278-conversation-group-by-date

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -40,12 +40,17 @@
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>
       </transition>
-      <message
+
-        v-for="message in getReadMessages"
+      <template v-for="item in getGroupedMessages">
-        :key="message.id"
+        <date-separator :key="item.date" :date="item.date"></date-separator>
-        :data="message"
+        <message
-        :is-a-tweet="isATweet"
+          v-for="message in item.messages"
-      />
+          :key="message.id"
+          :data="message"
+          :is-a-tweet="isATweet"
+        />
+      </template>
+
       <li v-show="getUnreadCount != 0" class="unread--toast">
         <span class="text-uppercase">
           {{ getUnreadCount }}
@@ -90,7 +95,11 @@ import ConversationHeader from './ConversationHeader';
 import ReplyBox from './ReplyBox';
 import Message from './Message';
 import conversationMixin from '../../../mixins/conversations';
-import { getTypingUsersText } from '../../../helper/commons';
+import {
+  getTypingUsersText,
+  getGroupedConversation,
+} from '../../../helper/commons';
+import DateSeparator from 'shared/components/DateSeparator.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
@@ -98,6 +107,7 @@ export default {
     ConversationHeader,
     Message,
     ReplyBox,
+    DateSeparator,
   },
 
   mixins: [conversationMixin],
@@ -159,12 +169,23 @@ export default {
       );
       return chat;
     },
+
+    getGroupedMessages() {
+      const chat = this.getMessages;
+      const conversations = this.readMessages(chat);
+      const groupedConversationList = getGroupedConversation({
+        conversations,
+      });
+      return chat === undefined ? null : groupedConversationList;
+    },
+
     getReadMessages() {
       const chat = this.getMessages;
       return chat === undefined ? null : this.readMessages(chat);
     },
     getUnReadMessages() {
       const chat = this.getMessages;
+
       return chat === undefined ? null : this.unReadMessages(chat);
     },
     shouldShowSpinner() {
@@ -288,6 +309,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+::v-deep .date--separator {
+  margin: 0 1.6rem;
+}
+
 .banner {
   background: var(--b-500);
   color: var(--white);

app/javascript/dashboard/helper/commons.js

@@ -1,5 +1,7 @@
 /* eslint no-param-reassign: 0 */
-
+const groupBy = require('lodash.groupby');
+import { formatUnixDate } from 'shared/helpers/DateHelper';
+import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import getUuid from 'widget/helpers/uuid';
 import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
 
@@ -67,3 +69,42 @@ export const createPendingAttachment = data => {
   };
   return pendingMessage;
 };
+
+const getSenderName = message => (message.sender ? message.sender.name : '');
+
+const shouldShowAvatar = (message, nextMessage) => {
+  const currentSender = getSenderName(message);
+  const nextSender = getSenderName(nextMessage);
+
+  return (
+    currentSender !== nextSender ||
+    message.message_type !== nextMessage.message_type ||
+    isASubmittedFormMessage(nextMessage)
+  );
+};
+
+const groupConversationBySender = conversationsForADate =>
+  conversationsForADate.map((message, index) => {
+    let showAvatar = false;
+    const isLastMessage = index === conversationsForADate.length - 1;
+    if (isASubmittedFormMessage(message)) {
+      showAvatar = false;
+    } else if (isLastMessage) {
+      showAvatar = true;
+    } else {
+      const nextMessage = conversationsForADate[index + 1];
+      showAvatar = shouldShowAvatar(message, nextMessage);
+    }
+    return { showAvatar, ...message };
+  });
+
+export const getGroupedConversation = ({ conversations }) => {
+  const conversationGroupedByDate = groupBy(
+    Object.values(conversations),
+    message => formatUnixDate(message.created_at)
+  );
+  return Object.keys(conversationGroupedByDate).map(date => ({
+    date,
+    messages: groupConversationBySender(conversationGroupedByDate[date]),
+  }));
+};

app/javascript/shared/components/DateSeparator.vue

@@ -35,7 +35,6 @@ export default {
   line-height: 50px;
   position: relative;
   text-align: center;
-  width: 100%;
 }
 
 .date--separator::before,

app/javascript/widget/store/modules/conversation.js

@@ -9,11 +9,8 @@ import {
 } from 'widget/api/conversation';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { playNotificationAudio } from 'shared/helpers/AudioNotificationHelper';
-import { formatUnixDate } from 'shared/helpers/DateHelper';
+import { getGroupedConversation } from '../../../dashboard/helper/commons';
-import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
-
 import getUuid from '../../helpers/uuid';
-const groupBy = require('lodash.groupby');
 
 export const createTemporaryMessage = ({ attachments, content }) => {
   const timestamp = new Date().getTime() / 1000;
@@ -27,34 +24,6 @@ export const createTemporaryMessage = ({ attachments, content }) => {
   };
 };
 
-const getSenderName = message => (message.sender ? message.sender.name : '');
-
-const shouldShowAvatar = (message, nextMessage) => {
-  const currentSender = getSenderName(message);
-  const nextSender = getSenderName(nextMessage);
-
-  return (
-    currentSender !== nextSender ||
-    message.message_type !== nextMessage.message_type ||
-    isASubmittedFormMessage(nextMessage)
-  );
-};
-
-const groupConversationBySender = conversationsForADate =>
-  conversationsForADate.map((message, index) => {
-    let showAvatar = false;
-    const isLastMessage = index === conversationsForADate.length - 1;
-    if (isASubmittedFormMessage(message)) {
-      showAvatar = false;
-    } else if (isLastMessage) {
-      showAvatar = true;
-    } else {
-      const nextMessage = conversationsForADate[index + 1];
-      showAvatar = shouldShowAvatar(message, nextMessage);
-    }
-    return { showAvatar, ...message };
-  });
-
 export const findUndeliveredMessage = (messageInbox, { content }) =>
   Object.values(messageInbox).filter(
     message => message.content === content && message.status === 'in_progress'
@@ -96,14 +65,10 @@ export const getters = {
     return {};
   },
   getGroupedConversation: _state => {
-    const conversationGroupedByDate = groupBy(
+    const groupedConversationList = getGroupedConversation({
-      Object.values(_state.conversations),
+      conversations: _state.conversations,
-      message => formatUnixDate(message.created_at)
+    });
-    );
+    return groupedConversationList;
-    return Object.keys(conversationGroupedByDate).map(date => ({
-      date,
-      messages: groupConversationBySender(conversationGroupedByDate[date]),
-    }));
   },
   getIsFetchingList: _state => _state.uiFlags.isFetchingList,
   getUnreadMessageCount: _state => {