KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* Chore: View form responses as user messages
This commit is contained in:
Pranav Raj S 2020-05-17 22:49:45 +05:30 committed by GitHub
parent 246d0b407f
commit b7129785c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 248 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/shared/helpers/MessageTypeHelper.js Normal file
View file

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

24
app/javascript/shared/helpers/specs/MessageTypeHelper.spec.js Normal file
View file

@ -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);
});
});

28
app/javascript/widget/components/AgentMessage.vue
View file

@ -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>

2
app/javascript/widget/components/AgentMessageBubble.vue
View file

@ -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"

58
app/javascript/widget/store/modules/conversation.js
View file

@ -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,
};

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

@ -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,
},
],
},
]);
});
});