Chore: View form responses as user messages (#876)

* Chore: View form responses as user messages

app/javascript/shared/helpers/MessageTypeHelper.js

@@ -0,0 +1,3 @@
+export const isAFormMessage = message => message.content_type === 'form';
+export const isASubmittedFormMessage = (message = {}) =>
+  isAFormMessage(message) && !!message.content_attributes?.submitted_values;

app/javascript/shared/helpers/specs/MessageTypeHelper.spec.js

@@ -0,0 +1,24 @@
+import { isASubmittedFormMessage, isAFormMessage } from '../MessageTypeHelper';
+
+describe('#isASubmittedFormMessage', () => {
+  it('should return correct value', () => {
+    expect(
+      isASubmittedFormMessage({
+        content_type: 'form',
+        content_attributes: {
+          submitted_values: [{ name: 'text', value: 'Text ' }],
+        },
+      })
+    ).toEqual(true);
+  });
+});
+
+describe('#isAFormMessage', () => {
+  it('should return correct value', () => {
+    expect(
+      isAFormMessage({
+        content_type: 'form',
+      })
+    ).toEqual(true);
+  });
+});

app/javascript/widget/components/AgentMessage.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     class="agent-message-wrap"
-    :class="{ 'has-response': hasRecordedResponse }"
+    :class="{ 'has-response': hasRecordedResponse || isASubmittedForm }"
   >
-    <div class="agent-message">
+    <div v-if="!isASubmittedForm" class="agent-message">
       <div class="avatar-wrap">
         <thumbnail
           v-if="message.showAvatar || hasRecordedResponse"
@@ -42,6 +42,13 @@
     </div>
 
     <UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
+    <div v-if="isASubmittedForm">
+      <UserMessage
+        v-for="submittedValue in submittedFormValues"
+        :key="submittedValue.id"
+        :message="submittedValue"
+      />
+    </div>
   </div>
 </template>
 
@@ -54,7 +61,7 @@ import FileBubble from 'widget/components/FileBubble';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
-
+import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 export default {
   name: 'AgentMessage',
   components: {
@@ -147,6 +154,17 @@ export default {
       }
       return '';
     },
+    isASubmittedForm() {
+      return isASubmittedFormMessage(this.message);
+    },
+    submittedFormValues() {
+      return this.messageContentAttributes.submitted_values.map(
+        submittedValue => ({
+          id: submittedValue.name,
+          content: submittedValue.value,
+        })
+      );
+    },
   },
 };
 </script>
@@ -214,6 +232,10 @@ export default {
         border-top-right-radius: $space-smaller;
       }
     }
+
+    &.has-response + .agent-message-wrap {
+      margin-top: $space-normal;
+    }
   }
 }
 </style>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -21,7 +21,7 @@
       </chat-options>
     </div>
     <chat-form
-      v-if="isForm"
+      v-if="isForm && !messageContentAttributes.submitted_values"
       :items="messageContentAttributes.items"
       :submitted-values="messageContentAttributes.submitted_values"
       @submit="onFormSubmit"

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

@@ -8,9 +8,10 @@ import {
 } from 'widget/api/conversation';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { playNotificationAudio } from 'shared/helpers/AudioNotificationHelper';
-import getUuid from '../../helpers/uuid';
+import DateHelper from 'shared/helpers/DateHelper';
-import DateHelper from '../../../shared/helpers/DateHelper';
+import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 
+import getUuid from '../../helpers/uuid';
 const groupBy = require('lodash.groupby');
 
 export const createTemporaryMessage = ({ attachments, content }) => {
@@ -25,6 +26,34 @@ 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'
@@ -58,27 +87,10 @@ export const getters = {
       Object.values(_state.conversations),
       message => new DateHelper(message.created_at).format()
     );
-    return Object.keys(conversationGroupedByDate).map(date => {
+    return Object.keys(conversationGroupedByDate).map(date => ({
-      const messages = conversationGroupedByDate[date].map((message, index) => {
-        let showAvatar = false;
-        if (index === conversationGroupedByDate[date].length - 1) {
-          showAvatar = true;
-        } else {
-          const nextMessage = conversationGroupedByDate[date][index + 1];
-          const currentSender = message.sender ? message.sender.name : '';
-          const nextSender = nextMessage.sender ? nextMessage.sender.name : '';
-          showAvatar =
-            currentSender !== nextSender ||
-            message.message_type !== nextMessage.message_type;
-        }
-        return { showAvatar, ...message };
-      });
-
-      return {
       date,
-        messages,
+      messages: groupConversationBySender(conversationGroupedByDate[date]),
-      };
+    }));
-    });
   },
   getIsFetchingList: _state => _state.uiFlags.isFetchingList,
 };

app/javascript/widget/store/modules/specs/conversation/getters.spec.js

@@ -56,8 +56,9 @@ describe('#getters', () => {
     expect(getters.getIsAgentTyping(state)).toEqual(false);
   });
 
-  it('uiFlags', () => {
+  it('getGroupedConversation', () => {
-    const state = {
+    expect(
+      getters.getGroupedConversation({
         conversations: {
           1: {
             id: 1,
@@ -88,8 +89,8 @@ describe('#getters', () => {
             created_at: 1576340626,
           },
         },
-    };
+      })
-    expect(getters.getGroupedConversation(state)).toEqual([
+    ).toEqual([
       {
         date: 'Nov 18, 2019',
         messages: [
@@ -134,5 +135,131 @@ describe('#getters', () => {
         ],
       },
     ]);
+
+    expect(
+      getters.getGroupedConversation({
+        conversations: {
+          1: {
+            id: 1,
+            content: 'Thanks for the help',
+            created_at: 1574075964,
+            message_type: 0,
+          },
+          2: {
+            id: 2,
+            content: 'Yes, It makes sense',
+            created_at: 1574092218,
+            message_type: 0,
+          },
+          3: {
+            id: 3,
+            content: 'Hey',
+            created_at: 1574092218,
+            message_type: 1,
+          },
+          4: {
+            id: 4,
+            content: 'Hey',
+            created_at: 1576340623,
+          },
+          5: {
+            id: 5,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            message_type: 2,
+            content_type: 'form',
+            content_attributes: {
+              submitted_values: [{ name: 'text', value: 'sample text' }],
+            },
+          },
+          6: {
+            id: 6,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            message_type: 2,
+            content_type: 'form',
+          },
+          7: {
+            id: 7,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            message_type: 2,
+            content_type: 'form',
+            content_attributes: {
+              submitted_values: [{ name: 'text', value: 'sample text' }],
+            },
+          },
+        },
+      })
+    ).toEqual([
+      {
+        date: 'Nov 18, 2019',
+        messages: [
+          {
+            id: 1,
+            content: 'Thanks for the help',
+            created_at: 1574075964,
+            showAvatar: false,
+            message_type: 0,
+          },
+          {
+            id: 2,
+            content: 'Yes, It makes sense',
+            created_at: 1574092218,
+            showAvatar: true,
+            message_type: 0,
+          },
+          {
+            id: 3,
+            content: 'Hey',
+            created_at: 1574092218,
+            showAvatar: true,
+            message_type: 1,
+          },
+        ],
+      },
+      {
+        date: 'Dec 14, 2019',
+        messages: [
+          {
+            id: 4,
+            content: 'Hey',
+            created_at: 1576340623,
+            showAvatar: true,
+          },
+          {
+            id: 5,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            message_type: 2,
+            content_type: 'form',
+            content_attributes: {
+              submitted_values: [{ name: 'text', value: 'sample text' }],
+            },
+            showAvatar: false,
+          },
+          {
+            id: 6,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            message_type: 2,
+            content_type: 'form',
+            showAvatar: true,
+          },
+          {
+            id: 7,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            message_type: 2,
+            content_type: 'form',
+            content_attributes: {
+              submitted_values: [{ name: 'text', value: 'sample text' }],
+            },
+
+            showAvatar: false,
+          },
+        ],
+      },
+    ]);
   });
 });