Merge branch 'develop' into feat/email-forwarding

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -81,6 +81,7 @@ onMounted(() => {
     <button
       v-for="(item, index) in filteredMenuItems"
       :key="index"
+      type="button"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
         'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -25,6 +25,10 @@ const props = defineProps({
     type: String,
     default: 'faded',
   },
+  label: {
+    type: String,
+    default: null,
+  },
 });
 
 const selected = defineModel({
@@ -56,7 +60,7 @@ const updateSelected = newValue => {
           :variant
           :icon="iconToRender"
           :trailing-icon="selectedOption.icon ? false : true"
-          :label="hideLabel ? null : selectedOption.label"
+          :label="label || (hideLabel ? null : selectedOption.label)"
           @click="toggle"
         />
       </slot>

app/javascript/dashboard/components-next/message/bubbles/CSAT.vue

@@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import BaseBubble from './Base.vue';
 import { useI18n } from 'vue-i18n';
-import { CSAT_RATINGS } from 'shared/constants/messages';
+import { CSAT_RATINGS, CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
 import { useMessageContext } from '../provider.js';
 
-const { contentAttributes } = useMessageContext();
+const { contentAttributes, content } = useMessageContext();
 const { t } = useI18n();
 
 const response = computed(() => {
@@ -16,6 +16,14 @@ const isRatingSubmitted = computed(() => {
   return !!response.value.rating;
 });
 
+const displayType = computed(() => {
+  return contentAttributes.value?.displayType || CSAT_DISPLAY_TYPES.EMOJI;
+});
+
+const isStarRating = computed(() => {
+  return displayType.value === CSAT_DISPLAY_TYPES.STAR;
+});
+
 const rating = computed(() => {
   if (isRatingSubmitted.value) {
     return CSAT_RATINGS.find(
@@ -25,16 +33,33 @@ const rating = computed(() => {
 
   return null;
 });
+
+const starRatingValue = computed(() => {
+  return response.value.rating || 0;
+});
 </script>
 
 <template>
   <BaseBubble class="px-4 py-3" data-bubble-name="csat">
-    <h4>{{ t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
+    <h4>{{ content || t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
     <dl v-if="isRatingSubmitted" class="mt-4">
       <dt class="text-n-slate-11 italic">
         {{ t('CONVERSATION.RATING_TITLE') }}
       </dt>
-      <dd>{{ t(rating.translationKey) }}</dd>
+      <dd v-if="!isStarRating">
+        {{ t(rating.translationKey) }}
+      </dd>
+      <dd v-else class="flex mt-1">
+        <span v-for="n in 5" :key="n" class="text-2xl mr-1">
+          <i
+            :class="[
+              n <= starRatingValue
+                ? 'i-ri-star-fill text-n-amber-9'
+                : 'i-ri-star-line text-n-slate-10',
+            ]"
+          />
+        </span>
+      </dd>
 
       <dt v-if="response.feedbackMessage" class="text-n-slate-11 italic mt-2">
         {{ t('CONVERSATION.FEEDBACK_TITLE') }}

app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue

@@ -185,6 +185,7 @@ watch(
               "
               trailing-icon
               :disabled="disabled"
+              type="button"
               class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >