diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue index 7323e3d22..50867f717 100644 --- a/app/javascript/dashboard/components/widgets/conversation/Message.vue +++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue @@ -72,7 +72,7 @@ import Spinner from 'shared/components/Spinner'; import contentTypeMixin from 'shared/mixins/contentTypeMixin'; import BubbleActions from './bubble/Actions'; import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages'; - +import { generateBotMessageContent } from './helpers/botMessageContentHelper'; export default { components: { BubbleActions, @@ -99,7 +99,19 @@ export default { }, computed: { message() { - return this.formatMessage(this.data.content, this.isATweet); + const botMessageContent = generateBotMessageContent( + this.contentType, + this.contentAttributes, + this.$t('CONVERSATION.NO_RESPONSE') + ); + let messageContent = + this.formatMessage(this.data.content, this.isATweet) + + botMessageContent; + + return messageContent; + }, + contentAttributes() { + return this.data.content_attributes || {}; }, sender() { return this.data.sender || {}; diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js b/app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js new file mode 100644 index 000000000..42e59a161 --- /dev/null +++ b/app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js @@ -0,0 +1,57 @@ +const generateInputSelectContent = (contentType, contentAttributes) => { + const { submitted_values: submittedValues = [] } = contentAttributes; + const [selectedOption] = submittedValues; + + if (selectedOption && selectedOption.title) { + return `${selectedOption.title}`; + } + return ''; +}; + +const generateInputEmailContent = (contentType, contentAttributes) => { + const { submitted_email: submittedEmail = '' } = contentAttributes; + if (submittedEmail) { + return `${submittedEmail}`; + } + return ''; +}; + +const generateFormContent = ( + contentType, + contentAttributes, + noResponseText +) => { + const { items, submitted_values: submittedValues = [] } = contentAttributes; + if (submittedValues.length) { + const submittedObject = submittedValues.reduce((acc, keyValuePair) => { + acc[keyValuePair.name] = keyValuePair.value; + return acc; + }, {}); + let formMessageContent = ''; + items.forEach(item => { + formMessageContent += `
${item.label}
`; + const response = submittedObject[item.name] || noResponseText; + formMessageContent += `${response}

`; + }); + return formMessageContent; + } + return ''; +}; + +export const generateBotMessageContent = ( + contentType, + contentAttributes, + noResponseText = 'No response' +) => { + const contentTypeMethods = { + input_select: generateInputSelectContent, + input_email: generateInputEmailContent, + form: generateFormContent, + }; + + const contentTypeMethod = contentTypeMethods[contentType]; + if (contentTypeMethod && typeof contentTypeMethod === 'function') { + return contentTypeMethod(contentType, contentAttributes, noResponseText); + } + return ''; +}; diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js b/app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js new file mode 100644 index 000000000..716fdd65b --- /dev/null +++ b/app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js @@ -0,0 +1,39 @@ +import { generateBotMessageContent } from '../botMessageContentHelper'; + +describe('#generateBotMessageContent', () => { + it('return correct input_select content', () => { + expect( + generateBotMessageContent('input_select', { + submitted_values: [{ value: 'salad', title: 'Salad' }], + }) + ).toEqual('Salad'); + }); + + it('return correct input_email content', () => { + expect( + generateBotMessageContent('input_email', { + submitted_email: 'hello@chatwoot.com', + }) + ).toEqual('hello@chatwoot.com'); + }); + + it('return correct form content', () => { + expect( + generateBotMessageContent('form', { + items: [ + { + name: 'large_text', + label: 'This a large text', + }, + { + name: 'email', + label: 'Email', + }, + ], + submitted_values: [{ name: 'large_text', value: 'Large Text Content' }], + }) + ).toEqual( + '
This a large text
Large Text Content

Email
No response

' + ); + }); +}); diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json index 2ca98e96a..967378552 100644 --- a/app/javascript/dashboard/i18n/locale/en/conversation.json +++ b/app/javascript/dashboard/i18n/locale/en/conversation.json @@ -25,6 +25,7 @@ "REMOVE_SELECTION": "Remove Selection", "DOWNLOAD": "Download", "UPLOADING_ATTACHMENTS": "Uploading attachments...", + "NO_RESPONSE": "No response", "HEADER": { "RESOLVE_ACTION": "Resolve", "REOPEN_ACTION": "Reopen",