Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/survey/components/Banner.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  props: {
+    showSuccess: {
+      type: Boolean,
+      default: false,
+    },
+    showError: {
+      type: Boolean,
+      default: false,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<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-n-slate-12 mt-4 mb-4">
+      {{ message }}
+    </label>
+  </div>
+</template>

research/chatwoot/app/javascript/survey/components/Feedback.vue

@@ -0,0 +1,50 @@
+<script>
+import CustomButton from 'shared/components/Button.vue';
+import TextArea from 'shared/components/TextArea.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  name: 'Feedback',
+  components: {
+    CustomButton,
+    TextArea,
+    Spinner,
+  },
+  props: {
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['sendFeedback'],
+  data() {
+    return {
+      feedback: '',
+    };
+  },
+  methods: {
+    onClick() {
+      this.$emit('sendFeedback', this.feedback);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mt-6">
+    <label class="text-base font-medium text-n-slate-12">
+      {{ $t('SURVEY.FEEDBACK.LABEL') }}
+    </label>
+    <TextArea
+      v-model="feedback"
+      class="my-5"
+      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+    />
+    <div class="flex items-center float-right font-medium">
+      <CustomButton @click="onClick">
+        <Spinner v-if="isUpdating" class="p-0" />
+        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
+      </CustomButton>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/survey/components/Rating.vue

@@ -0,0 +1,67 @@
+<script>
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+export default {
+  props: {
+    selectedRating: {
+      type: Number,
+      default: null,
+    },
+  },
+  emits: ['selectRating'],
+  data() {
+    return {
+      ratings: CSAT_RATINGS,
+    };
+  },
+
+  methods: {
+    buttonClass(rating) {
+      return [
+        { selected: rating.value === this.selectedRating },
+        { disabled: !!this.selectedRating },
+        { hover: !!this.selectedRating },
+        'emoji-button shadow-none text-3xl lg:text-4xl outline-none mr-8',
+      ];
+    },
+    onClick(rating) {
+      this.$emit('selectRating', rating.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="customer-satisfcation mb-2">
+    <div class="ratings flex py-5 px-0">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="onClick(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.emoji-button {
+  filter: grayscale(100%);
+  &.selected,
+  &:hover,
+  &:focus,
+  &:active {
+    filter: grayscale(0%);
+    transform: scale(1.32);
+    transition: transform 300ms;
+  }
+
+  &.disabled {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+</style>