feat: CSAT response collection public page (#2685)

app/javascript/survey/App.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="app" class="woot-survey-wrap">
+    <response />
+  </div>
+</template>
+
+<script>
+import Response from './views/Response.vue';
+
+export default {
+  name: 'App',
+  components: {
+    Response,
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~survey/assets/scss/woot.scss';
+</style>

app/javascript/survey/assets/scss/woot.scss

@@ -0,0 +1,21 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import 'widget/assets/scss/reset';
+@import 'widget/assets/scss/variables';
+@import 'widget/assets/scss/buttons';
+@import 'widget/assets/scss/mixins';
+@import 'widget/assets/scss/forms';
+@import 'shared/assets/fonts/widget_fonts';
+
+html,
+body {
+  font-family: $font-family;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+}
+
+.woot-survey-wrap {
+  height: 100%;
+}

app/javascript/survey/components/Rating.vue

@@ -0,0 +1,73 @@
+<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="selectRating(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+export default {
+  props: {
+    messageContentAttributes: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      email: '',
+      ratings: CSAT_RATINGS,
+      selectedRating: null,
+    };
+  },
+  computed: {
+    isRatingSubmitted() {
+      return this.messageContentAttributes?.csat_survey_response?.rating;
+    },
+  },
+
+  methods: {
+    buttonClass(rating) {
+      return [
+        { selected: rating.value === this.selectedRating },
+        { disabled: this.isRatingSubmitted },
+        { hover: this.isRatingSubmitted },
+        'emoji-button shadow-none text-4xl outline-none mr-8',
+      ];
+    },
+    selectRating(rating) {
+      this.selectedRating = rating.value;
+    },
+  },
+};
+</script>
+
+<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>

app/javascript/survey/i18n/index.js

@@ -0,0 +1,5 @@
+import { default as en } from './locale/en.json';
+
+export default {
+  en,
+};

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

@@ -0,0 +1,15 @@
+{
+  "SURVEY": {
+    "DESCRIPTION": "Dear customer 👋 , please take a few moments to complete the feedback about the conversation.",
+    "RATING": {
+      "LABEL": "Rate your conversation",
+      "SUCCESS_MESSAGE": "Thank you for submitting the rating"
+    },
+    "FEEDBACK": {
+      "LABEL": "Do you have any thoughts you'd like to share?",
+      "PLACEHOLDER": "Your feedback (optional)",
+      "BUTTON_TEXT": "Submit feedback"
+    }
+  },
+  "POWERED_BY": "Powered by Chatwoot"
+}

app/javascript/survey/views/Response.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="w-full h-full flex flex-col flex-no-wrap overflow-hidden bg-white"
+  >
+    <div class="flex flex-1 overflow-auto">
+      <div class="max-w-screen-sm w-full my-0 m-auto px-8 py-12">
+        <img src="/brand-assets/logo.svg" alt="Chatwoot logo" class="logo" />
+        <p class="text-black-700 text-lg leading-relaxed mt-4 mb-4">
+          {{ $t('SURVEY.DESCRIPTION') }}
+        </p>
+        <label class="text-base font-medium text-black-800">
+          {{ $t('SURVEY.RATING.LABEL') }}
+        </label>
+        <rating />
+        <label class="text-base font-medium text-black-800">
+          {{ $t('SURVEY.FEEDBACK.LABEL') }}
+        </label>
+        <text-area
+          v-model="message"
+          class="my-5"
+          :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+        />
+        <custom-button class="font-medium float-right">
+          <spinner v-if="isSubmitted" class="p-0" />
+          {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
+        </custom-button>
+      </div>
+    </div>
+    <div class="footer-wrap flex-shrink-0 w-full flex flex-col relative">
+      <branding></branding>
+    </div>
+  </div>
+</template>
+
+<script>
+import Branding from 'shared/components/Branding.vue';
+import Rating from 'survey/components/Rating.vue';
+import CustomButton from 'shared/components/Button';
+import TextArea from 'shared/components/TextArea.vue';
+import configMixin from 'shared/mixins/configMixin';
+export default {
+  name: 'Home',
+  components: {
+    Branding,
+    Rating,
+    CustomButton,
+    TextArea,
+  },
+  mixins: [configMixin],
+  data() {
+    return {
+      message: '',
+      isSubmitted: false,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+.logo {
+  max-height: $space-large;
+}
+</style>