feat: Update design - CSAT survey page (#2964)

app/javascript/survey/components/Feedback.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mt-6">
     <label class="text-base font-medium text-black-800">
       {{ $t('SURVEY.FEEDBACK.LABEL') }}
     </label>

app/javascript/survey/components/Rating.vue

@@ -35,7 +35,7 @@ export default {
         { selected: rating.value === this.selectedRating },
         { disabled: !!this.selectedRating },
         { hover: !!this.selectedRating },
-        'emoji-button shadow-none text-4xl outline-none mr-8',
+        'emoji-button shadow-none text-3xl lg:text-4xl outline-none mr-8',
       ];
     },
     onClick(rating) {

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

@@ -1,6 +1,6 @@
 {
   "SURVEY": {
-    "DESCRIPTION": "Dear customer 👋 , please take a few moments to complete the feedback about the conversation.",
+    "DESCRIPTION": "Dear customer 👋, please take a few moments to share feedback about the conversation you had with %{inboxName}.",
     "RATING": {
       "LABEL": "Rate your conversation",
       "SUCCESS_MESSAGE": "Thank you for submitting the rating"

app/javascript/survey/views/Response.vue

@@ -7,13 +7,18 @@
   </div>
   <div
     v-else
-    class="w-full h-full flex flex-col flex-no-wrap overflow-hidden bg-white"
+    class="w-full h-full flex overflow-auto bg-slate-50 items-center justify-center"
   >
-    <div class="flex flex-1 overflow-auto">
+    <div
-      <div class="max-w-screen-sm w-full my-0 m-auto px-8 py-12">
+      class="flex bg-white shadow-lg rounded-lg flex-col w-full lg:w-2/5 h-full lg:h-auto"
-        <img :src="logo" alt="Chatwoot logo" class="logo" @error="imgUrlAlt" />
+    >
-        <p class="text-black-700 text-lg leading-relaxed mt-4 mb-4">
+      <div class="w-full my-0 m-auto px-12 pt-12 pb-6">
-          {{ surveyDescription }}
+        <img v-if="logo" :src="logo" alt="Chatwoot logo" class="logo mb-6" />
+        <p
+          v-if="!isRatingSubmitted"
+          class="text-black-700 text-lg leading-relaxed mb-8"
+        >
+          {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
         </p>
         <banner
           v-if="shouldShowBanner"
@@ -23,7 +28,7 @@
         />
         <label
           v-if="!isRatingSubmitted"
-          class="text-base font-medium text-black-800 mt-4 mb-4"
+          class="text-base font-medium text-black-800 mb-4"
         >
           {{ $t('SURVEY.RATING.LABEL') }}
         </label>
@@ -39,11 +44,11 @@
           @sendFeedback="sendFeedback"
         />
       </div>
-    </div>
+      <div class="mb-3">
-    <div class="footer-wrap flex-shrink-0 w-full flex flex-col relative">
         <branding></branding>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -55,9 +60,9 @@ 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',
+  name: 'Response',
   components: {
     Branding,
     Rating,
@@ -82,6 +87,7 @@ export default {
       feedbackMessage: '',
       isUpdating: false,
       logo: '',
+      inboxName: '',
     };
   },
   computed: {
@@ -116,9 +122,6 @@ export default {
       }
       return this.$t('SURVEY.RATING.SUCCESS_MESSAGE');
     },
-    surveyDescription() {
-      return this.isRatingSubmitted ? '' : this.$t('SURVEY.DESCRIPTION');
-    },
   },
   async mounted() {
     this.getSurveyDetails();
@@ -132,14 +135,12 @@ export default {
       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.inboxName = result.data.inbox_name;
         this.surveyDetails = result?.data?.csat_survey_response;
         this.selectedRating = this.surveyDetails?.rating;
         this.feedbackMessage = this.surveyDetails?.feedback_message || '';
@@ -184,7 +185,8 @@ export default {
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
+
 .logo {
-  max-height: $space-large;
+  max-height: $space-larger;
 }
 </style>

app/views/public/api/v1/models/_csat_survey.json.jbuilder

@@ -1,5 +1,6 @@
 json.id resource.id
 json.csat_survey_response resource.csat_survey_response
 json.inbox_avatar_url resource.inbox.avatar_url
+json.inbox_name resource.inbox.name
 json.conversation_id resource.conversation_id
 json.created_at resource.created_at