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: {
-      type: Object,
-      default: () => {},
+    selectedRating: {
+      type: Number,
+      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 },
-        { hover: this.isRatingSubmitted },
+        { disabled: !!this.selectedRating },
+        { hover: !!this.selectedRating },
         'emoji-button shadow-none text-4xl outline-none mr-8',
       ];
     },
-    selectRating(rating) {
-      this.selectedRating = rating.value;
+    onClick(rating) {
+      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 />
-        <label class="text-base font-medium text-black-800">
-          {{ $t('SURVEY.FEEDBACK.LABEL') }}
-        </label>
-        <text-area
-          v-model="message"
-          class="my-5"
-          :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+        <rating
+          :selected-rating="selectedRating"
+          @selectRating="selectRating"
+        />
+        <feedback
+          v-if="enableFeedbackForm"
+          :is-updating="isUpdating"
+          :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 Rating from 'survey/components/Rating.vue';
-import CustomButton from 'shared/components/Button';
-import TextArea from 'shared/components/TextArea.vue';
+import Branding from 'shared/components/Branding';
+import Spinner from 'shared/components/Spinner';
+import Rating from 'survey/components/Rating';
+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,
-    TextArea,
+    Spinner,
+    Banner,
+    Feedback,
   },
-  mixins: [configMixin],
+  mixins: [alertMixin, configMixin],
+  props: {
+    showHomePage: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
-      message: '',
-      isSubmitted: false,
+      surveyDetails: null,
+      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>