diff --git a/.codeclimate.yml b/.codeclimate.yml index bc58a4029..ac541cda3 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -30,6 +30,7 @@ exclude_patterns: - "**/*.md" - "**/*.yml" - "app/javascript/dashboard/i18n/locale" + - "**/*.stories.js" - "stories/**/*" - "**/*.stories.js" - "**/stories/" diff --git a/app/javascript/dashboard/i18n/locale/en/csatMgmt.json b/app/javascript/dashboard/i18n/locale/en/csatMgmt.json new file mode 100644 index 000000000..d7d2efc2a --- /dev/null +++ b/app/javascript/dashboard/i18n/locale/en/csatMgmt.json @@ -0,0 +1,6 @@ +{ + "CSAT": { + "TITLE": "Rate your conversation", + "PLACEHOLDER": "Tell us more..." + } +} diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js index 4afba79aa..4203b60ff 100644 --- a/app/javascript/dashboard/i18n/locale/en/index.js +++ b/app/javascript/dashboard/i18n/locale/en/index.js @@ -16,6 +16,7 @@ import { default as _settings } from './settings.json'; import { default as _signup } from './signup.json'; import { default as _teamsSettings } from './teamsSettings.json'; import { default as _integrationApps } from './integrationApps.json'; +import { default as _csatMgmtMgmt } from './csatMgmt.json'; export default { ..._agentMgmt, @@ -36,4 +37,5 @@ export default { ..._signup, ..._teamsSettings, ..._integrationApps, + ..._csatMgmtMgmt, }; diff --git a/app/javascript/shared/components/CustomerSatisfaction.stories.js b/app/javascript/shared/components/CustomerSatisfaction.stories.js new file mode 100644 index 000000000..6f50dd7aa --- /dev/null +++ b/app/javascript/shared/components/CustomerSatisfaction.stories.js @@ -0,0 +1,19 @@ +import { action } from '@storybook/addon-actions'; +import CustomerSatisfaction from './CustomerSatisfaction'; + +export default { + title: 'Components/CustomerSatisfaction', + component: CustomerSatisfaction, + argTypes: {}, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { CustomerSatisfaction }, + template: '', +}); + +export const item = Template.bind({}); +item.args = { + onClick: action('Selected'), +}; diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue new file mode 100644 index 000000000..3a346be18 --- /dev/null +++ b/app/javascript/shared/components/CustomerSatisfaction.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/app/javascript/shared/constants/messages.js b/app/javascript/shared/constants/messages.js index 75eda5352..11614797c 100644 --- a/app/javascript/shared/constants/messages.js +++ b/app/javascript/shared/constants/messages.js @@ -12,3 +12,31 @@ export const MESSAGE_TYPE = { }; // Size in mega bytes export const MAXIMUM_FILE_UPLOAD_SIZE = 40; + +export const CSAT_RATINGS = [ + { + key: 'disappointed', + emoji: '😞', + value: 0, + }, + { + key: 'expressionless', + emoji: '😑', + value: 1, + }, + { + key: 'neutral', + emoji: '😐', + value: 2, + }, + { + key: 'grinning', + emoji: '😀', + value: 3, + }, + { + key: 'smiling', + emoji: '😍', + value: 4, + }, +]; diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue index ec44e860d..3ed3a2f2b 100755 --- a/app/javascript/widget/components/AgentMessageBubble.vue +++ b/app/javascript/widget/components/AgentMessageBubble.vue @@ -1,7 +1,9 @@ @@ -52,6 +55,7 @@ import ChatForm from 'shared/components/ChatForm'; import ChatOptions from 'shared/components/ChatOptions'; import ChatArticle from './template/Article'; import EmailInput from './template/EmailInput'; +import CustomerSatisfaction from 'shared/components/CustomerSatisfaction'; export default { name: 'AgentMessageBubble', @@ -61,13 +65,14 @@ export default { ChatForm, ChatOptions, EmailInput, + CustomerSatisfaction, }, mixins: [messageFormatterMixin], props: { - message: String, - contentType: String, - messageType: Number, - messageId: Number, + message: { type: String, default: null }, + contentType: { type: String, default: null }, + messageType: { type: Number, default: null }, + messageId: { type: Number, default: null }, messageContentAttributes: { type: Object, default: () => {}, @@ -92,6 +97,9 @@ export default { isArticle() { return this.contentType === 'article'; }, + isCSAT() { + return this.contentType === 'input_csat'; + }, }, methods: { onResponse(messageResponse) { diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json index 44a2b5dcf..3cbcd6020 100644 --- a/app/javascript/widget/i18n/locale/en.json +++ b/app/javascript/widget/i18n/locale/en.json @@ -56,5 +56,9 @@ "INVALID": { "FIELD": "Invalid field" } + }, + "CSAT": { + "TITLE": "Rate your conversation", + "PLACEHOLDER": "Tell us more..." } } diff --git a/app/models/message.rb b/app/models/message.rb index aaaa34db5..35c175aa2 100644 --- a/app/models/message.rb +++ b/app/models/message.rb @@ -49,7 +49,8 @@ class Message < ApplicationRecord cards: 5, form: 6, article: 7, - incoming_email: 8 + incoming_email: 8, + input_csat: 9 } enum status: { sent: 0, delivered: 1, read: 2, failed: 3 } # [:submitted_email, :items, :submitted_values] : Used for bot message types diff --git a/db/seeds.rb b/db/seeds.rb index 6fb8b7970..2cce3e7cf 100644 --- a/db/seeds.rb +++ b/db/seeds.rb @@ -72,6 +72,8 @@ unless Rails.env.production? WootMessageSeeder.create_sample_form_message conversation # articles WootMessageSeeder.create_sample_articles_message conversation + # csat + WootMessageSeeder.create_sample_csat_collect_message conversation CannedResponse.create!(account: account, short_code: 'start', content: 'Hello welcome to chatwoot.') end diff --git a/lib/woot_message_seeder.rb b/lib/woot_message_seeder.rb index 7e9aaebe1..5dc3aee48 100644 --- a/lib/woot_message_seeder.rb +++ b/lib/woot_message_seeder.rb @@ -10,6 +10,17 @@ module WootMessageSeeder ) end + def self.create_sample_csat_collect_message(conversation) + Message.create!( + account: conversation.account, + inbox: conversation.inbox, + conversation: conversation, + message_type: :template, + content_type: :input_csat, + content: 'Please rate the support' + ) + end + def self.create_sample_cards_message(conversation) Message.create!( account: conversation.account,