Chore: View form responses as user messages (#876)
* Chore: View form responses as user messages
This commit is contained in:
parent
246d0b407f
commit
b7129785c6
6 changed files with 248 additions and 60 deletions
|
@ -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 => {
|
||||
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,
|
||||
};
|
||||
});
|
||||
return Object.keys(conversationGroupedByDate).map(date => ({
|
||||
date,
|
||||
messages: groupConversationBySender(conversationGroupedByDate[date]),
|
||||
}));
|
||||
},
|
||||
getIsFetchingList: _state => _state.uiFlags.isFetchingList,
|
||||
};
|
||||
|
|
|
@ -56,40 +56,41 @@ describe('#getters', () => {
|
|||
expect(getters.getIsAgentTyping(state)).toEqual(false);
|
||||
});
|
||||
|
||||
it('uiFlags', () => {
|
||||
const state = {
|
||||
conversations: {
|
||||
1: {
|
||||
id: 1,
|
||||
content: 'Thanks for the help',
|
||||
created_at: 1574075964,
|
||||
message_type: 0,
|
||||
it('getGroupedConversation', () => {
|
||||
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,
|
||||
},
|
||||
},
|
||||
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,
|
||||
},
|
||||
},
|
||||
};
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue