feat: CSAT for all channels (#2749)

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -170,7 +170,7 @@
           </p>
         </label>
 
-        <label v-if="isAWebWidgetInbox" class="medium-9 columns">
+        <label class="medium-9 columns">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
           <select v-model="csatSurveyEnabled">
             <option :value="true">
@@ -416,7 +416,7 @@ export default {
         return this.$t('INBOX_MGMT.ADD.WEBSITE_NAME.PLACEHOLDER');
       }
       return this.$t('INBOX_MGMT.ADD.CHANNEL_NAME.PLACEHOLDER');
-    },
+    }
   },
   watch: {
     $route(to) {

app/javascript/survey/api/endPoints.js

@@ -0,0 +1,13 @@
+const updateSurvey = ({ uuid, data }) => ({
+  url: `/public/api/v1/csat_survey/${uuid}`,
+  data,
+});
+
+const getSurvey = ({ uuid }) => ({
+  url: `/public/api/v1/csat_survey/${uuid}`,
+});
+
+export default {
+  getSurvey,
+  updateSurvey,
+};

app/javascript/survey/api/specs/endPoints.spec.js

@@ -0,0 +1,38 @@
+import endPoints from '../endPoints';
+const uuid = '98c5d7f3-8873-4262-b101-d56425ff7ee1';
+
+describe('#getSurvey', () => {
+  it('should returns correct payload', () => {
+    expect(
+      endPoints.getSurvey({
+        uuid,
+      })
+    ).toEqual({
+      url: `/public/api/v1/csat_survey/98c5d7f3-8873-4262-b101-d56425ff7ee1`,
+    });
+  });
+});
+
+describe('#updateSurvey', () => {
+  it('should returns correct payload', () => {
+    const data = {
+      message: {
+        submitted_values: {
+          csat_survey_response: {
+            rating: 4,
+            feedback_message: 'amazing',
+          },
+        },
+      },
+    };
+    expect(
+      endPoints.updateSurvey({
+        uuid,
+        data,
+      })
+    ).toEqual({
+      url: `/public/api/v1/csat_survey/98c5d7f3-8873-4262-b101-d56425ff7ee1`,
+      data,
+    });
+  });
+});

app/javascript/survey/api/survey.js

@@ -0,0 +1,15 @@
+import endPoints from 'survey/api/endPoints';
+import { API } from 'survey/helpers/axios';
+
+const getSurveyDetails = async ({ uuid }) => {
+  const urlData = endPoints.getSurvey({ uuid });
+  const result = await API.get(urlData.url, { params: urlData.params });
+  return result;
+};
+
+const updateSurvey = async ({ uuid, data }) => {
+  const urlData = endPoints.updateSurvey({ data, uuid });
+  await API.put(urlData.url, { ...urlData.data });
+};
+
+export { getSurveyDetails, updateSurvey };

app/javascript/survey/assets/scss/woot.scss

@@ -7,6 +7,7 @@
 @import 'widget/assets/scss/mixins';
 @import 'widget/assets/scss/forms';
 @import 'shared/assets/fonts/widget_fonts';
+@import '~shared/assets/stylesheets/ionicons';
 
 html,
 body {

app/javascript/survey/components/Banner.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flex items-center">
+    <i
+      v-if="showSuccess"
+      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
+    />
+    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
+    <label class="text-base font-medium text-black-800 mt-4 mb-4">
+      {{ message }}
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    showSuccess: {
+      type: Boolean,
+      default: false,
+    },
+    showError: {
+      type: Boolean,
+      default: false,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

app/javascript/survey/components/Feedback.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <label class="text-base font-medium text-black-800">
+      {{ $t('SURVEY.FEEDBACK.LABEL') }}
+    </label>
+    <text-area
+      v-model="feedback"
+      class="my-5"
+      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+    />
+    <div class="flex items-center font-medium float-right">
+      <custom-button @click="onClick">
+        <spinner v-if="feedback" class="p-0" />
+        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
+      </custom-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomButton from 'shared/components/Button';
+import TextArea from 'shared/components/TextArea.vue';
+import Spinner from 'shared/components/Spinner';
+
+export default {
+  name: 'Feedback',
+  components: {
+    CustomButton,
+    TextArea,
+    Spinner,
+  },
+  props: {
+    isUpdating: {
+      type: Boolean,
+      default: null,
+    },
+    isButtonDisabled: {
+      type: Boolean,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      feedback: '',
+    };
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('sendFeedback', this.feedback);
+    },
+  },
+};
+</script>

app/javascript/survey/components/Rating.vue

@@ -5,7 +5,7 @@
         v-for="rating in ratings"
         :key="rating.key"
         :class="buttonClass(rating)"
-        @click="selectRating(rating)"
+        @click="onClick(rating)"
       >
         {{ rating.emoji }}
       </button>
@@ -18,35 +18,28 @@ import { CSAT_RATINGS } from 'shared/constants/messages';
 
 export default {
   props: {
-    messageContentAttributes: {
+    selectedRating: {
-      type: Object,
+      type: Number,
-      default: () => {},
+      default: null,
     },
   },
   data() {
     return {
-      email: '',
       ratings: CSAT_RATINGS,
-      selectedRating: null,
     };
   },
-  computed: {
-    isRatingSubmitted() {
-      return this.messageContentAttributes?.csat_survey_response?.rating;
-    },
-  },
 
   methods: {
     buttonClass(rating) {
       return [
         { selected: rating.value === this.selectedRating },
-        { disabled: this.isRatingSubmitted },
+        { disabled: !!this.selectedRating },
-        { hover: this.isRatingSubmitted },
+        { hover: !!this.selectedRating },
         'emoji-button shadow-none text-4xl outline-none mr-8',
       ];
     },
-    selectRating(rating) {
+    onClick(rating) {
-      this.selectedRating = rating.value;
+      this.$emit('selectRating', rating.value);
     },
   },
 };

app/javascript/survey/helpers/axios.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+import { APP_BASE_URL } from 'widget/helpers/constants';
+
+export const API = axios.create({
+  baseURL: APP_BASE_URL,
+});

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

@@ -9,6 +9,10 @@
       "LABEL": "Do you have any thoughts you'd like to share?",
       "PLACEHOLDER": "Your feedback (optional)",
       "BUTTON_TEXT": "Submit feedback"
+    },
+    "API": {
+      "SUCCESS_MESSAGE": "Survey updated successfully",
+      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
     }
   },
   "POWERED_BY": "Powered by Chatwoot"

app/javascript/survey/views/Response.vue

@@ -1,29 +1,43 @@
 <template>
   <div
+    v-if="isLoading"
+    class="flex flex-1 items-center h-full bg-black-25 justify-center"
+  >
+    <spinner size="" />
+  </div>
+  <div
+    v-else
     class="w-full h-full flex flex-col flex-no-wrap overflow-hidden bg-white"
   >
     <div class="flex flex-1 overflow-auto">
       <div class="max-w-screen-sm w-full my-0 m-auto px-8 py-12">
-        <img src="/brand-assets/logo.svg" alt="Chatwoot logo" class="logo" />
+        <img :src="logo" alt="Chatwoot logo" class="logo" @error="imgUrlAlt" />
         <p class="text-black-700 text-lg leading-relaxed mt-4 mb-4">
-          {{ $t('SURVEY.DESCRIPTION') }}
+          {{ surveyDescription }}
         </p>
-        <label class="text-base font-medium text-black-800">
+        <banner
+          v-if="shouldShowBanner"
+          :show-success="shouldShowSuccessMesage"
+          :show-error="shouldShowErrorMesage"
+          :message="message"
+        />
+        <label
+          v-if="!isRatingSubmitted"
+          class="text-base font-medium text-black-800 mt-4 mb-4"
+        >
           {{ $t('SURVEY.RATING.LABEL') }}
         </label>
-        <rating />
+        <rating
-        <label class="text-base font-medium text-black-800">
+          :selected-rating="selectedRating"
-          {{ $t('SURVEY.FEEDBACK.LABEL') }}
+          @selectRating="selectRating"
-        </label>
+        />
-        <text-area
+        <feedback
-          v-model="message"
+          v-if="enableFeedbackForm"
-          class="my-5"
+          :is-updating="isUpdating"
-          :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+          :is-button-disabled="isButtonDisabled"
+          :selected-rating="selectedRating"
+          @sendFeedback="sendFeedback"
         />
-        <custom-button class="font-medium float-right">
-          <spinner v-if="isSubmitted" class="p-0" />
-          {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
-        </custom-button>
       </div>
     </div>
     <div class="footer-wrap flex-shrink-0 w-full flex flex-col relative">
@@ -33,26 +47,138 @@
 </template>
 
 <script>
-import Branding from 'shared/components/Branding.vue';
+import Branding from 'shared/components/Branding';
-import Rating from 'survey/components/Rating.vue';
+import Spinner from 'shared/components/Spinner';
-import CustomButton from 'shared/components/Button';
+import Rating from 'survey/components/Rating';
-import TextArea from 'shared/components/TextArea.vue';
+import Feedback from 'survey/components/Feedback';
+import Banner from 'survey/components/Banner';
 import configMixin from 'shared/mixins/configMixin';
+import { getSurveyDetails, updateSurvey } from 'survey/api/survey';
+import alertMixin from 'shared/mixins/alertMixin';
+const BRAND_LOGO = '/brand-assets/logo.svg';
 export default {
   name: 'Home',
   components: {
     Branding,
     Rating,
-    CustomButton,
+    Spinner,
-    TextArea,
+    Banner,
+    Feedback,
   },
-  mixins: [configMixin],
+  mixins: [alertMixin, configMixin],
+  props: {
+    showHomePage: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
-      message: '',
+      surveyDetails: null,
-      isSubmitted: false,
+      isLoading: false,
+      errorMessage: null,
+      selectedRating: null,
+      feedbackMessage: '',
+      isUpdating: false,
+      logo: '',
     };
   },
+  computed: {
+    surveyId() {
+      const pageURL = window.location.href;
+      return pageURL.substr(pageURL.lastIndexOf('/') + 1);
+    },
+    isRatingSubmitted() {
+      return this.surveyDetails && this.surveyDetails.rating;
+    },
+    isFeedbackSubmitted() {
+      return this.surveyDetails && this.surveyDetails.feedback_message;
+    },
+    isButtonDisabled() {
+      return !(this.selectedRating && this.feedback);
+    },
+    shouldShowBanner() {
+      return this.isRatingSubmitted || this.errorMessage;
+    },
+    enableFeedbackForm() {
+      return !this.isFeedbackSubmitted && this.isRatingSubmitted;
+    },
+    shouldShowErrorMesage() {
+      return !!this.errorMessage;
+    },
+    shouldShowSuccessMesage() {
+      return !!this.isRatingSubmitted;
+    },
+    message() {
+      if (this.errorMessage) {
+        return this.errorMessage;
+      }
+      return this.$t('SURVEY.RATING.SUCCESS_MESSAGE');
+    },
+    surveyDescription() {
+      return this.isRatingSubmitted ? '' : this.$t('SURVEY.DESCRIPTION');
+    },
+  },
+  async mounted() {
+    this.getSurveyDetails();
+  },
+  methods: {
+    selectRating(rating) {
+      this.selectedRating = rating;
+      this.updateSurveyDetails();
+    },
+    sendFeedback(message) {
+      this.feedbackMessage = message;
+      this.updateSurveyDetails();
+    },
+    imgUrlAlt() {
+      this.logo = BRAND_LOGO;
+    },
+    async getSurveyDetails() {
+      this.isLoading = true;
+      try {
+        const result = await getSurveyDetails({ uuid: this.surveyId });
+        this.logo = result.data.inbox_avatar_url;
+        this.surveyDetails = result?.data?.csat_survey_response;
+        this.selectedRating = this.surveyDetails?.rating;
+        this.feedbackMessage = this.surveyDetails?.feedback_message || '';
+      } catch (error) {
+        const errorMessage = error?.response?.data?.message;
+        this.errorMessage = errorMessage || this.$t('SURVEY.API.ERROR_MESSAGE');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async updateSurveyDetails() {
+      this.isUpdating = true;
+      try {
+        const data = {
+          message: {
+            submitted_values: {
+              csat_survey_response: {
+                rating: this.selectedRating,
+                feedback_message: this.feedbackMessage,
+              },
+            },
+          },
+        };
+        await updateSurvey({
+          uuid: this.surveyId,
+          data,
+        });
+        this.surveyDetails = {
+          rating: this.selectedRating,
+          feedback_message: this.feedbackMessage,
+        };
+      } catch (error) {
+        const errorMessage = error?.response?.data?.message;
+        this.errorMessage = errorMessage || this.$t('SURVEY.API.ERROR_MESSAGE');
+      } finally {
+        this.isUpdating = false;
+      }
+    },
+  },
 };
 </script>
 

app/listeners/agent_bot_listener.rb

@@ -26,7 +26,7 @@ class AgentBotListener < BaseListener
   def message_created(event)
     message = extract_message_and_account(event)[0]
     inbox = message.inbox
-    return unless message.reportable? && inbox.agent_bot_inbox.present?
+    return unless message.webhook_sendable? && inbox.agent_bot_inbox.present?
     return unless inbox.agent_bot_inbox.active?
 
     agent_bot = inbox.agent_bot_inbox.agent_bot
@@ -38,7 +38,7 @@ class AgentBotListener < BaseListener
   def message_updated(event)
     message = extract_message_and_account(event)[0]
     inbox = message.inbox
-    return unless message.reportable? && inbox.agent_bot_inbox.present?
+    return unless message.webhook_sendable? && inbox.agent_bot_inbox.present?
     return unless inbox.agent_bot_inbox.active?
 
     agent_bot = inbox.agent_bot_inbox.agent_bot

app/listeners/hook_listener.rb

@@ -1,7 +1,7 @@
 class HookListener < BaseListener
   def message_created(event)
     message = extract_message_and_account(event)[0]
-    return unless message.reportable?
+    return unless message.webhook_sendable?
 
     message.account.hooks.each do |hook|
       HookJob.perform_later(hook, event.name, message: message)
@@ -10,7 +10,7 @@ class HookListener < BaseListener
 
   def message_updated(event)
     message = extract_message_and_account(event)[0]
-    return unless message.reportable?
+    return unless message.webhook_sendable?
 
     message.account.hooks.each do |hook|
       HookJob.perform_later(hook, event.name, message: message)

app/listeners/webhook_listener.rb

@@ -26,7 +26,7 @@ class WebhookListener < BaseListener
     message = extract_message_and_account(event)[0]
     inbox = message.inbox
 
-    return unless message.reportable?
+    return unless message.webhook_sendable?
 
     payload = message.webhook_data.merge(event: __method__.to_s)
     deliver_webhook_payloads(payload, inbox)
@@ -36,7 +36,7 @@ class WebhookListener < BaseListener
     message = extract_message_and_account(event)[0]
     inbox = message.inbox
 
-    return unless message.reportable?
+    return unless message.webhook_sendable?
 
     payload = message.webhook_data.merge(event: __method__.to_s)
     deliver_webhook_payloads(payload, inbox)

app/mailers/conversation_reply_mailer.rb

@@ -11,7 +11,7 @@ class ConversationReplyMailer < ApplicationMailer
     recap_messages = @conversation.messages.chat.where('created_at < ?', message_queued_time).last(10)
     new_messages = @conversation.messages.chat.where('created_at >= ?', message_queued_time)
     @messages = recap_messages + new_messages
-    @messages = @messages.select(&:reportable?)
+    @messages = @messages.select(&:email_reply_summarizable?)
 
     mail({
            to: @contact&.email,
@@ -29,7 +29,8 @@ class ConversationReplyMailer < ApplicationMailer
     init_conversation_attributes(conversation)
     return if conversation_already_viewed?
 
-    @messages = @conversation.messages.chat.outgoing.where('created_at >= ?', message_queued_time)
+    @messages = @conversation.messages.chat.where(message_type: [:outgoing, :template]).where('created_at >= ?', message_queued_time)
+    @messages = @messages.reject { |m| m.template? && !m.input_csat? }
     return false if @messages.count.zero?
 
     mail({
@@ -47,7 +48,7 @@ class ConversationReplyMailer < ApplicationMailer
 
     init_conversation_attributes(conversation)
 
-    @messages = @conversation.messages.chat.select(&:reportable?)
+    @messages = @conversation.messages.chat.select(&:conversation_transcriptable?)
 
     mail({
            to: to_email,

app/models/concerns/message_filter_helpers.rb

@@ -0,0 +1,19 @@
+module MessageFilterHelpers
+  extend ActiveSupport::Concern
+
+  def reportable?
+    incoming? || outgoing?
+  end
+
+  def webhook_sendable?
+    incoming? || outgoing?
+  end
+
+  def conversation_transcriptable?
+    incoming? || outgoing?
+  end
+
+  def email_reply_summarizable?
+    incoming? || outgoing? || input_csat?
+  end
+end

app/models/conversation.rb

@@ -142,6 +142,10 @@ class Conversation < ApplicationRecord
     true
   end
 
+  def tweet?
+    inbox.inbox_type == 'Twitter' && additional_attributes['type'] == 'tweet'
+  end
+
   private
 
   def ensure_snooze_until_reset

app/models/message.rb

@@ -29,6 +29,7 @@
 #
 
 class Message < ApplicationRecord
+  include MessageFilterHelpers
   NUMBER_OF_PERMITTED_ATTACHMENTS = 15
 
   validates :account_id, presence: true
@@ -81,9 +82,6 @@ class Message < ApplicationRecord
   has_many :attachments, dependent: :destroy, autosave: true, before_add: :validate_attachments_limit
   has_one :csat_survey_response, dependent: :destroy
 
-  after_create :reopen_conversation,
-               :notify_via_mail
-
   after_create_commit :execute_after_create_commit_callbacks
 
   after_update_commit :dispatch_update_event
@@ -109,10 +107,6 @@ class Message < ApplicationRecord
     data
   end
 
-  def reportable?
-    incoming? || outgoing?
-  end
-
   def webhook_data
     {
       id: id,
@@ -130,10 +124,19 @@ class Message < ApplicationRecord
     }
   end
 
+  def content
+    # move this to a presenter
+    return self[:content] if !input_csat? || inbox.web_widget?
+
+    I18n.t('conversations.survey.response', link: "#{ENV['FRONTEND_URL']}/survey/responses/#{conversation.uuid}")
+  end
+
   private
 
   def execute_after_create_commit_callbacks
     # rails issue with order of active record callbacks being executed https://github.com/rails/rails/issues/20911
+    reopen_conversation
+    notify_via_mail
     set_conversation_activity
     dispatch_create_events
     send_reply
@@ -175,7 +178,7 @@ class Message < ApplicationRecord
   end
 
   def email_notifiable_message?
-    return false unless outgoing?
+    return false unless outgoing? || input_csat?
     return false if private?
 
     true

app/services/message_templates/hook_execution_service.rb

@@ -46,17 +46,18 @@ class MessageTemplates::HookExecutionService
     contact.email
   end
 
-  def csat_enabled_inbox?
+  def csat_enabled_conversation?
-    # for now csat only available in web widget channel
+    return false unless conversation.resolved?
-    return unless inbox.web_widget?
+    # should not sent since the link will be public
-    return unless inbox.csat_survey_enabled?
+    return false if conversation.tweet?
+    return false unless inbox.csat_survey_enabled?
 
     true
   end
 
   def should_send_csat_survey?
-    return unless conversation.resolved?
+    return unless csat_enabled_conversation?
-    return unless csat_enabled_inbox?
+
     # only send CSAT once in a conversation
     return if conversation.messages.where(content_type: :input_csat).present?
 

config/locales/en.yml

@@ -87,6 +87,8 @@ en:
     reply:
       email_subject: "New messages on this conversation"
       transcript_subject: "Conversation Transcript"
+    survey:
+      response: "Please rate this conversation, %{link}"
 
   integration_apps:
     slack:

lib/integrations/dialogflow/processor_service.rb

@@ -20,6 +20,7 @@ class Integrations::Dialogflow::ProcessorService
   end
 
   def processable_message?(message)
+    # TODO: change from reportable and create a dedicated method for this?
     return unless message.reportable?
     return if message.outgoing? && !processable_outgoing_message?(message)
 

package.json

@@ -12,7 +12,8 @@
     "start:dev": "foreman start -f ./Procfile.dev",
     "start:dev-overmind": "overmind start -f ./Procfile.dev",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "ruby:prettier":"bundle exec rubocop -a"
   },
   "dependencies": {
     "@braid/vue-formulate": "^2.5.2",

spec/services/message_templates/hook_execution_service_spec.rb

@@ -114,9 +114,10 @@ describe ::MessageTemplates::HookExecutionService do
       expect(csat_survey).not_to have_received(:perform)
     end
 
-    it 'will not call ::MessageTemplates::Template::CsatSurvey if its not a website widget' do
+    it 'will not call ::MessageTemplates::Template::CsatSurvey if its a tweet conversation' do
-      api_channel = create(:channel_api)
+      twitter_channel = create(:channel_twitter_profile)
-      conversation = create(:conversation, inbox: create(:inbox, channel: api_channel))
+      twitter_inbox = create(:inbox, channel: twitter_channel)
+      conversation = create(:conversation, inbox: twitter_inbox, additional_attributes: { type: 'tweet' })
       conversation.inbox.update(csat_survey_enabled: true)
 
       conversation.resolved!