feat: Use vue-router on widget route management (#3415)

* feat: Add vue-router to widget

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

* Move to dynamic imports

* Move to routerMixin

* Fix popup button display

* Remove unnecessary import

* router -> route

* Fix open state

* Fix issues

* Remove used CSS

* Fix specs

* Fix specs

* Fix widgetColor specs

* Fix mutation specs

* Fixes broken lint errors

* Fixes issues with widget flow

Co-authored-by: Nithin <nithin@chatwoot.com>
Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/widget/views/PreChatForm.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import PreChatForm from '../components/PreChat/Form';
+import configMixin from '../mixins/configMixin';
+import routerMixin from '../mixins/routerMixin';
+
+export default {
+  components: {
+    PreChatForm,
+  },
+  mixins: [configMixin, routerMixin],
+  computed: {
+    ...mapGetters({
+      conversationSize: 'conversation/getConversationSize',
+    }),
+  },
+  watch: {
+    conversationSize(newSize, oldSize) {
+      if (!oldSize && newSize > oldSize) {
+        this.replaceRoute('messages');
+      }
+    },
+  },
+  methods: {
+    onSubmit({ fullName, emailAddress, message, activeCampaignId }) {
+      if (activeCampaignId) {
+        bus.$emit('execute-campaign', activeCampaignId);
+        this.$store.dispatch('contacts/update', {
+          user: {
+            email: emailAddress,
+            name: fullName,
+          },
+        });
+      } else {
+        this.$store.dispatch('conversation/createConversation', {
+          fullName: fullName,
+          emailAddress: emailAddress,
+          message: message,
+        });
+      }
+    },
+  },
+};
+</script>