feat: CSAT response collection public page (#2685)

app/javascript/shared/components/Branding.vue

@@ -0,0 +1,93 @@
+<template>
+  <div v-if="globalConfig.brandName" class="branding">
+    <a
+      :href="brandRedirectURL"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+      class="branding--link w-full justify-center"
+    >
+      <img :alt="globalConfig.brandName" :src="globalConfig.logoThumbnail" />
+      <span>
+        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
+      </span>
+    </a>
+  </div>
+  <div v-else class="brand--alternative" />
+</template>
+
+<script>
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
+const {
+  LOGO_THUMBNAIL: logoThumbnail,
+  BRAND_NAME: brandName,
+  WIDGET_BRAND_URL: widgetBrandURL,
+} = window.globalConfig || {};
+
+export default {
+  mixins: [globalConfigMixin],
+  data() {
+    return {
+      referrerHost: '',
+      globalConfig: {
+        brandName,
+        logoThumbnail,
+        widgetBrandURL,
+      },
+    };
+  },
+  computed: {
+    brandRedirectURL() {
+      const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=widget_branding`;
+      if (this.referrerHost) {
+        return `${baseURL}&utm_referrer=${this.referrerHost}`;
+      }
+      return baseURL;
+    },
+  },
+  mounted() {
+    bus.$on(BUS_EVENTS.SET_REFERRER_HOST, referrerHost => {
+      this.referrerHost = referrerHost;
+    });
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.branding {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: $space-normal 0 $space-slab;
+  text-align: center;
+
+  img {
+    margin-right: $space-smaller;
+    max-width: $space-slab;
+    max-height: $space-slab;
+  }
+}
+
+.branding--link {
+  color: $color-light-gray;
+  cursor: pointer;
+  display: flex;
+  filter: grayscale(1);
+  font-size: $font-size-small;
+  opacity: 0.9;
+  text-decoration: none;
+
+  &:hover {
+    filter: grayscale(0);
+    opacity: 1;
+    color: $color-gray;
+  }
+}
+
+.brand--alternative {
+  padding: $space-slab;
+}
+</style>

app/javascript/shared/components/Button.vue

@@ -1,5 +1,10 @@
 <template>
-  <button :class="buttonClassName" :style="buttonStyles" @click="onClick">
+  <button
+    :class="buttonClassName"
+    :style="buttonStyles"
+    :disabled="disabled"
+    @click="onClick"
+  >
     <slot></slot>
   </button>
 </template>
@@ -22,6 +27,10 @@ export default {
       type: String,
       default: '',
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     buttonClassName() {

app/javascript/shared/components/TextArea.vue

@@ -0,0 +1,74 @@
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium"
+      :class="{
+        'text-black-800': !error,
+        'text-red-400': error,
+      }"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="
+        resize-none
+        border
+        rounded
+        w-full
+        py-2
+        px-3
+        text-slate-700
+        leading-tight
+        outline-none
+      "
+      :class="{
+        'border-black-200 hover:border-black-300 focus:border-black-300':
+          !error,
+        'border-red-200 hover:border-red-300 focus:border-red-300': error,
+      }"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
+      {{ error }}
+    </div>
+  </label>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    error: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onChange(event) {
+      this.$emit('input', event.target.value);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+textarea {
+  min-height: 8rem;
+}
+</style>