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/components/PreChat/Form.vue

@@ -34,7 +34,7 @@
       "
     />
     <form-text-area
-      v-if="!activeCampaignExist"
+      v-if="!hasActiveCampaign"
       v-model="message"
       class="my-5"
       :label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
@@ -63,7 +63,7 @@ import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import { isEmptyObject } from 'widget/helpers/utils';
-
+import routerMixin from 'widget/mixins/routerMixin';
 export default {
   components: {
     FormInput,
@@ -71,6 +71,7 @@ export default {
     CustomButton,
     Spinner,
   },
+  mixins: [routerMixin],
   props: {
     options: {
       type: Object,
@@ -95,7 +96,7 @@ export default {
       },
     };
     // For campaign, message field is not required
-    if (this.activeCampaignExist) {
+    if (this.hasActiveCampaign) {
       return identityValidations;
     }
     if (this.options.requireEmail) {
@@ -122,14 +123,14 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
-    activeCampaignExist() {
+    hasActiveCampaign() {
       return !isEmptyObject(this.activeCampaign);
     },
     shouldShowHeaderMessage() {
-      return this.activeCampaignExist || this.options.preChatMessage;
+      return this.hasActiveCampaign || this.options.preChatMessage;
     },
     headerMessage() {
-      if (this.activeCampaignExist) {
+      if (this.hasActiveCampaign) {
         return this.$t('PRE_CHAT_FORM.CAMPAIGN_HEADER');
       }
       return this.options.preChatMessage;
@@ -141,22 +142,12 @@ export default {
       if (this.$v.$invalid) {
         return;
       }
-      // Check any active campaign exist or not
-      if (this.activeCampaignExist) {
-        bus.$emit('execute-campaign', this.activeCampaign.id);
-        this.$store.dispatch('contacts/update', {
-          user: {
-            email: this.emailAddress,
-            name: this.fullName,
-          },
-        });
-      } else {
-        this.$store.dispatch('conversation/createConversation', {
-          fullName: this.fullName,
-          emailAddress: this.emailAddress,
-          message: this.message,
-        });
-      }
+      this.$emit('submit', {
+        fullName: this.fullName,
+        emailAddress: this.emailAddress,
+        message: this.message,
+        activeCampaignId: this.activeCampaign.id,
+      });
     },
   },
 };