feat: Show the CSAT response to the agent (#2511)

app/controllers/api/v1/widget/messages_controller.rb

@@ -54,7 +54,7 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
   end
 
   def message_update_params
-    params.permit(message: [{ submitted_values: [:name, :title, :value, { csat_survey_response: [:feedback_text, :rating] }] }])
+    params.permit(message: [{ submitted_values: [:name, :title, :value, { csat_survey_response: [:feedback, :rating] }] }])
   end
 
   def permitted_params

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -100,7 +100,13 @@ export default {
       const botMessageContent = generateBotMessageContent(
         this.contentType,
         this.contentAttributes,
-        this.$t('CONVERSATION.NO_RESPONSE')
+        {
+          noResponseText: this.$t('CONVERSATION.NO_RESPONSE'),
+          csat: {
+            ratingTitle: this.$t('CONVERSATION.RATING_TITLE'),
+            feedbackTitle: this.$t('CONVERSATION.FEEDBACK_TITLE'),
+          },
+        }
       );
 
       const {

app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js

@@ -1,4 +1,6 @@
-const generateInputSelectContent = (contentType, contentAttributes) => {
+import { CSAT_RATINGS } from '../../../../../shared/constants/messages';
+
+const generateInputSelectContent = contentAttributes => {
   const { submitted_values: submittedValues = [] } = contentAttributes;
   const [selectedOption] = submittedValues;
 
@@ -8,7 +10,7 @@ const generateInputSelectContent = (contentType, contentAttributes) => {
   return '';
 };
 
-const generateInputEmailContent = (contentType, contentAttributes) => {
+const generateInputEmailContent = contentAttributes => {
   const { submitted_email: submittedEmail = '' } = contentAttributes;
   if (submittedEmail) {
     return `<strong>${submittedEmail}</strong>`;
@@ -16,11 +18,7 @@ const generateInputEmailContent = (contentType, contentAttributes) => {
   return '';
 };
 
-const generateFormContent = (
-  contentType,
-  contentAttributes,
-  noResponseText
-) => {
+const generateFormContent = (contentAttributes, { noResponseText }) => {
   const { items, submitted_values: submittedValues = [] } = contentAttributes;
   if (submittedValues.length) {
     const submittedObject = submittedValues.reduce((acc, keyValuePair) => {
@@ -38,20 +36,52 @@ const generateFormContent = (
   return '';
 };
 
+const generateCSATContent = (
+  contentAttributes,
+  { ratingTitle, feedbackTitle }
+) => {
+  const {
+    submitted_values: { csat_survey_response: surveyResponse = {} } = {},
+  } = contentAttributes;
+  const { rating, feedback } = surveyResponse || {};
+
+  let messageContent = '';
+  if (rating) {
+    const [ratingObject = {}] = CSAT_RATINGS.filter(
+      csatRating => csatRating.value === rating
+    );
+    messageContent += `<div><strong>${ratingTitle}</strong></div>`;
+    messageContent += `<p>${ratingObject.emoji}</p>`;
+  }
+  if (feedback) {
+    messageContent += `<div><strong>${feedbackTitle}</strong></div>`;
+    messageContent += `<p>${feedback}</p>`;
+  }
+  return messageContent;
+};
+
 export const generateBotMessageContent = (
   contentType,
   contentAttributes,
-  noResponseText = 'No response'
+  {
+    noResponseText = 'No response',
+    csat: { ratingTitle = 'Rating', feedbackTitle = 'Feedback' } = {},
+  } = {}
 ) => {
   const contentTypeMethods = {
     input_select: generateInputSelectContent,
     input_email: generateInputEmailContent,
     form: generateFormContent,
+    input_csat: generateCSATContent,
   };
 
   const contentTypeMethod = contentTypeMethods[contentType];
   if (contentTypeMethod && typeof contentTypeMethod === 'function') {
-    return contentTypeMethod(contentType, contentAttributes, noResponseText);
+    return contentTypeMethod(contentAttributes, {
+      noResponseText,
+      ratingTitle,
+      feedbackTitle,
+    });
   }
   return '';
 };

app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js

@@ -17,6 +17,30 @@ describe('#generateBotMessageContent', () => {
     ).toEqual('<strong>hello@chatwoot.com</strong>');
   });
 
+  it('return correct input_csat content', () => {
+    expect(
+      generateBotMessageContent('input_csat', {
+        submitted_values: {
+          csat_survey_response: { rating: 5, feedback: 'Great Service' },
+        },
+      })
+    ).toEqual(
+      '<div><strong>Rating</strong></div><p>😍</p><div><strong>Feedback</strong></div><p>Great Service</p>'
+    );
+
+    expect(
+      generateBotMessageContent(
+        'input_csat',
+        {
+          submitted_values: {
+            csat_survey_response: { rating: 1, feedback: '' },
+          },
+        },
+        { csat: { ratingTitle: 'റേറ്റിംഗ്', feedbackTitle: 'പ്രതികരണം' } }
+      )
+    ).toEqual('<div><strong>റേറ്റിംഗ്</strong></div><p>😞</p>');
+  });
+
   it('return correct form content', () => {
     expect(
       generateBotMessageContent('form', {

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -28,6 +28,8 @@
     "DOWNLOAD": "Download",
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
     "NO_RESPONSE": "No response",
+    "RATING_TITLE": "Rating",
+    "FEEDBACK_TITLE": "Feedback",
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",

app/javascript/widget/components/AgentMessageBubble.vue

@@ -130,7 +130,7 @@ export default {
         submittedValues: {
           csat_survey_response: {
             rating,
-            feedback_text: feedback,
+            feedback,
           },
         },
         messageId: this.messageId,