feat: Add customer satisfaction component (#2456)

.codeclimate.yml

@@ -30,6 +30,7 @@ exclude_patterns:
   - "**/*.md"
   - "**/*.yml"
   - "app/javascript/dashboard/i18n/locale"
+  - "**/*.stories.js"
   - "stories/**/*"
   - "**/*.stories.js"
   - "**/stories/"

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

@@ -0,0 +1,6 @@
+{
+  "CSAT": {
+    "TITLE": "Rate your conversation",
+    "PLACEHOLDER": "Tell us more..."
+  }
+}

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

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: '<customer-satisfaction />',
+});
+
+export const item = Template.bind({});
+item.args = {
+  onClick: action('Selected'),
+};

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="customer-satisfcation">
+    <div class="title">
+      {{ $t('CSAT.TITLE') }}
+    </div>
+    <div class="ratings">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        class="emoji-button"
+        :class="{ selected: rating.key === selectedRating }"
+        @click="selectRating(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+    <form
+      v-if="!hasSubmitted"
+      class="feedback-form"
+      @submit.prevent="onSubmit()"
+    >
+      <input
+        v-model="feedback"
+        class="form-input"
+        :placeholder="$t('CSAT.PLACEHOLDER')"
+        @keyup.enter="onSubmit"
+      />
+      <button
+        class="button"
+        :disabled="!selectedRating"
+        :style="{ background: widgetColor, borderColor: widgetColor }"
+      >
+        <i v-if="!isUpdating" class="ion-ios-arrow-forward" />
+        <spinner v-else />
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Spinner from 'shared/components/Spinner';
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+export default {
+  components: {
+    Spinner,
+  },
+  data() {
+    return {
+      email: '',
+      ratings: CSAT_RATINGS,
+      selectedRating: null,
+      isUpdating: false,
+      feedback: '',
+      hasSubmitted: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+  },
+
+  methods: {
+    onSubmit() {},
+    selectRating(rating) {
+      this.selectedRating = rating.key;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+@import '~widget/assets/scss/mixins.scss';
+
+.customer-satisfcation {
+  @include light-shadow;
+  background: $color-white;
+  border-bottom-left-radius: $space-smaller;
+  color: $color-body;
+  border-top: $space-micro solid $color-woot;
+  border-radius: $space-one;
+  display: inline-block;
+  line-height: 1.5;
+  width: 75%;
+  .title {
+    font-size: $font-size-default;
+    font-weight: $font-weight-medium;
+    padding-top: $space-two;
+    text-align: center;
+  }
+  .ratings {
+    display: flex;
+    justify-content: space-around;
+    padding: $space-two $space-normal;
+
+    .emoji-button {
+      font-size: $font-size-big;
+      outline: none;
+      box-shadow: none;
+      filter: grayscale(100%);
+      &.selected {
+        filter: grayscale(0%);
+        transform: scale(1.32);
+      }
+    }
+  }
+  .feedback-form {
+    display: flex;
+    input {
+      width: 100%;
+      border: none;
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      padding: $space-one;
+      border-top: 1px solid $color-border;
+    }
+
+    .button {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      font-size: $font-size-large;
+      height: auto;
+      margin-left: -1px;
+      appearance: none;
+      .spinner {
+        display: block;
+        padding: 0;
+        height: auto;
+        width: auto;
+      }
+    }
+  }
+}
+</style>

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

app/javascript/widget/components/AgentMessageBubble.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="chat-bubble-wrap">
     <div
-      v-if="!isCards && !isOptions && !isForm && !isArticle"
+      v-if="
+        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
+      "
       class="chat-bubble agent"
     >
       <div class="message-content" v-html="formatMessage(message, false)"></div>
@@ -42,6 +44,7 @@
     <div v-if="isArticle">
       <chat-article :items="messageContentAttributes.items"></chat-article>
     </div>
+    <customer-satisfaction v-if="isCSAT" />
   </div>
 </template>
 
@@ -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,
+    message: { type: String, default: null },
-    contentType: String,
+    contentType: { type: String, default: null },
-    messageType: Number,
+    messageType: { type: Number, default: null },
-    messageId: Number,
+    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) {

app/javascript/widget/i18n/locale/en.json

@@ -56,5 +56,9 @@
     "INVALID": {
       "FIELD": "Invalid field"
     }
+  },
+  "CSAT": {
+    "TITLE": "Rate your conversation",
+    "PLACEHOLDER": "Tell us more..."
   }
 }

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

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

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,