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/router.js

@@ -1,24 +1,42 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import Home from './views/Home.vue';
+import ViewWithHeader from './components/layouts/ViewWithHeader.vue';
 
 Vue.use(Router);
 
 export default new Router({
+  mode: 'hash',
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: Home,
+      path: '/unread-messages',
+      name: 'unread-messages',
+      component: () => import('./views/UnreadMessages.vue'),
+    },
+    {
+      path: '/campaigns',
+      name: 'campaigns',
+      component: () => import('./views/Campaigns.vue'),
+    },
+    {
+      path: '/',
+      component: ViewWithHeader,
+      children: [
+        {
+          path: '',
+          name: 'home',
+          component: () => import('./views/Home.vue'),
+        },
+        {
+          path: '/prechat-form',
+          name: 'prechat-form',
+          component: () => import('./views/PreChatForm.vue'),
+        },
+        {
+          path: '/messages',
+          name: 'messages',
+          component: () => import('./views/Messages.vue'),
+        },
+      ],
     },
-    // {
-    //   path: '/about',
-    //   name: 'about',
-    //   // route level code-splitting
-    //   // this generates a separate chunk (about.[hash].js) for this route
-    //   // which is lazy-loaded when the route is visited.
-    //   component: () =>
-    //     import(/* webpackChunkName: "about" */ './views/About.vue'),
-    // },
   ],
 });