fix: Update the order of display of the CSAT ratings (#7805)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center text-left">
+  <div class="flex items-center gap-1.5 text-left">
     <thumbnail
       :src="user.thumbnail"
       :size="size"
@@ -7,7 +7,7 @@
       :status="user.availability_status"
     />
     <h6
-      class="my-0 mx-2 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
       :class="textClass"
     >
       {{ user.name }}

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex flex-wrap mx-0 csat--metrics-container">
+  <div
+    class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+  >
     <csat-metric-card
       :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
       :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
@@ -18,23 +20,21 @@
     />
     <div
       v-if="metrics.totalResponseCount && !ratingFilterEnabled"
-      class="w-[50%] max-w-[50%] flex-[50%] report-card"
+      class="w-[50%] max-w-[50%] flex-[50%] report-card rtl:[direction:initial]"
     >
       <h3 class="heading text-slate-800 dark:text-slate-100">
-        <div class="emoji--distribution">
+        <div class="flex justify-end flex-row-reverse">
           <div
             v-for="(rating, key, index) in ratingPercentage"
             :key="rating + key + index"
-            class="emoji--distribution-item"
+            class="pl-4"
           >
-            <span class="emoji--distribution-key">{{
+            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
-              ratingToEmoji(key)
-            }}</span>
             <span>{{ formatToPercent(rating) }}</span>
           </div>
         </div>
       </h3>
-      <div class="emoji--distribution-chart">
+      <div class="mt-2">
         <woot-horizontal-bar :collection="chartData" :height="24" />
       </div>
     </div>
@@ -71,9 +71,10 @@ export default {
       return Boolean(this.filters.rating);
     },
     chartData() {
+      const sortedRatings = [...CSAT_RATINGS].sort((a, b) => b.value - a.value);
       return {
         labels: ['Rating'],
-        datasets: CSAT_RATINGS.map(rating => ({
+        datasets: sortedRatings.map(rating => ({
           label: rating.emoji,
           data: [this.ratingPercentage[rating.value]],
           backgroundColor: rating.color,
@@ -96,24 +97,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.csat--metrics-container {
-  @apply bg-white dark:bg-slate-800 rounded p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700;
-}
-
-.emoji--distribution {
-  @apply flex justify-end;
-
-  .emoji--distribution-item {
-    @apply pl-4;
-  }
-}
-
-.emoji--distribution-chart {
-  @apply mt-2;
-}
-
-.emoji--distribution-key {
-  @apply my-0 mx-0.5;
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -59,7 +59,7 @@ export default {
             if (row.contact) {
               return (
                 <UserAvatarWithName
-                  textClass="text-sm !pl-2 text-slate-800"
+                  textClass="text-sm text-slate-800"
                   size="24px"
                   user={row.contact}
                 />

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CsatMetrics.vue computes response count correctly 1`] = `
-<div class="flex flex-wrap mx-0 csat--metrics-container">
+<div class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP"></csat-metric-card-stub>