feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/survey/App.vue

@@ -10,11 +10,11 @@ export default {
 </script>
 
 <template>
-  <div id="app" class="woot-survey-wrap">
+  <div id="app" class="woot-survey-wrap min-h-screen">
     <Response />
   </div>
 </template>
 
 <style lang="scss">
-@import '~survey/assets/scss/woot.scss';
+@import './assets/scss/woot.scss';
 </style>

app/javascript/survey/components/Feedback.vue

@@ -10,12 +10,17 @@ export default {
     TextArea,
     Spinner,
   },
+  props: {
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       feedback: '',
     };
   },
-
   methods: {
     onClick() {
       this.$emit('sendFeedback', this.feedback);
@@ -36,7 +41,7 @@ export default {
     />
     <div class="flex items-center float-right font-medium">
       <CustomButton @click="onClick">
-        <Spinner v-if="feedback" class="p-0" />
+        <Spinner v-if="isUpdating" class="p-0" />
         {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
       </CustomButton>
     </div>

app/javascript/survey/store/index.js

@@ -1,10 +1,7 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 import globalConfig from 'shared/store/globalConfig';
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default createStore({
   modules: {
     globalConfig,
   },

app/javascript/survey/views/Response.vue

@@ -129,13 +129,13 @@ export default {
 <template>
   <div
     v-if="isLoading"
-    class="flex items-center justify-center flex-1 h-full bg-black-25"
+    class="flex items-center justify-center flex-1 h-full min-h-screen bg-black-25"
   >
     <Spinner size="" />
   </div>
   <div
     v-else
-    class="flex items-center justify-center w-full h-full overflow-auto bg-slate-50"
+    class="flex items-center justify-center w-full h-full min-h-screen overflow-auto bg-slate-50"
   >
     <div
       class="flex flex-col w-full h-full bg-white rounded-lg shadow-lg lg:w-2/5 lg:h-auto"
@@ -180,7 +180,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
+@import 'widget/assets/scss/variables.scss';
 
 .logo {
   max-height: $space-larger;