Merge branch 'develop' into feat/voice-channel

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -1,14 +1,16 @@
 <script>
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
-import { CSAT_RATINGS } from 'shared/constants/messages';
+import { CSAT_RATINGS, CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import StarRating from 'shared/components/StarRating.vue';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
     Spinner,
     FluentIcon,
+    StarRating,
   },
   props: {
     messageContentAttributes: {
@@ -19,6 +21,14 @@ export default {
       type: Number,
       required: true,
     },
+    displayType: {
+      type: String,
+      default: CSAT_DISPLAY_TYPES.EMOJI,
+    },
+    message: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -47,7 +57,13 @@ export default {
     title() {
       return this.isRatingSubmitted
         ? this.$t('CSAT.SUBMITTED_TITLE')
-        : this.$t('CSAT.TITLE');
+        : this.message || this.$t('CSAT.TITLE');
+    },
+    isEmojiType() {
+      return this.displayType === CSAT_DISPLAY_TYPES.EMOJI;
+    },
+    isStarType() {
+      return this.displayType === CSAT_DISPLAY_TYPES.STAR;
     },
   },
 
@@ -88,10 +104,15 @@ export default {
         this.isUpdating = false;
       }
     },
+
     selectRating(rating) {
       this.selectedRating = rating.value;
       this.onSubmit();
     },
+    selectStarRating(value) {
+      this.selectedRating = value;
+      this.onSubmit();
+    },
   },
 };
 </script>
@@ -104,7 +125,7 @@ export default {
     <h6 class="text-n-slate-12 text-sm font-medium pt-5 px-2.5 text-center">
       {{ title }}
     </h6>
-    <div class="ratings flex justify-around py-5 px-4">
+    <div v-if="isEmojiType" class="ratings flex justify-around py-5 px-4">
       <button
         v-for="rating in ratings"
         :key="rating.key"
@@ -114,6 +135,12 @@ export default {
         {{ rating.emoji }}
       </button>
     </div>
+    <StarRating
+      v-else-if="isStarType"
+      :selected-rating="selectedRating"
+      :is-disabled="isRatingSubmitted"
+      @select-rating="selectStarRating"
+    />
     <form
       v-if="!isFeedbackSubmitted"
       class="feedback-form flex"

app/javascript/shared/components/StarRating.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  selectedRating: {
+    type: Number,
+    default: null,
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['selectRating']);
+
+const starRatings = [1, 2, 3, 4, 5];
+const hoveredRating = ref(0);
+
+const onHoverRating = value => {
+  if (props.isDisabled) return;
+  hoveredRating.value = value;
+};
+
+const selectRating = value => {
+  if (props.isDisabled) return;
+  emit('selectRating', value);
+};
+
+const getStarClass = value => {
+  const isStarActive =
+    (hoveredRating.value > 0 &&
+      !props.isDisabled &&
+      hoveredRating.value >= value) ||
+    props.selectedRating >= value;
+
+  const starTypeClass = isStarActive
+    ? 'i-ri-star-fill text-n-amber-9'
+    : 'i-ri-star-line text-n-slate-10';
+
+  return starTypeClass;
+};
+</script>
+
+<template>
+  <div class="flex justify-center py-5 px-4 gap-3">
+    <button
+      v-for="value in starRatings"
+      :key="value"
+      type="button"
+      class="rounded-full p-1 transition-all duration-200 focus:enabled:scale-[1.2] focus-within:enabled:scale-[1.2] hover:enabled:scale-[1.2] focus:outline-none flex items-center flex-shrink-0"
+      :class="{ 'cursor-not-allowed opacity-50': isDisabled }"
+      :disabled="isDisabled"
+      :aria-label="'Star ' + value"
+      @click="selectRating(value)"
+      @mouseenter="onHoverRating(value)"
+      @mouseleave="onHoverRating(0)"
+    >
+      <span
+        :class="getStarClass(value)"
+        class="transition-all duration-500 text-2xl"
+      />
+    </button>
+  </div>
+</template>