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/ChatHeader.vue

@@ -1,9 +1,12 @@
 <template>
-  <header class="header-collapsed">
-    <div class="header-branding">
+  <header class="flex justify-between p-5 w-full">
+    <div class="flex items-center">
+      <button v-if="showBackButton" @click="onBackButtonClick">
+        <fluent-icon icon="chevron-left" size="24" />
+      </button>
       <img
         v-if="avatarUrl"
-        class="inbox--avatar mr-3"
+        class="h-8 w-8 rounded-full mr-3"
         :src="avatarUrl"
         alt="avatar"
       />
@@ -12,14 +15,13 @@
           <span class="mr-1" v-html="title" />
           <div
             :class="
-              `status-view--badge rounded-full leading-4 ${
-                isOnline ? 'bg-green-500' : 'hidden'
-              }`
+              `h-2 w-2 rounded-full leading-4
+              ${isOnline ? 'bg-green-500' : 'hidden'}`
             "
           />
         </div>
         <div class="text-xs mt-1 text-black-700">
-          {{ replyWaitMeessage }}
+          {{ replyWaitMessage }}
         </div>
       </div>
     </div>
@@ -29,15 +31,19 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import HeaderActions from './HeaderActions';
+
 import availabilityMixin from 'widget/mixins/availability';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import HeaderActions from './HeaderActions';
+import routerMixin from 'widget/mixins/routerMixin';
 
 export default {
   name: 'ChatHeader',
   components: {
+    FluentIcon,
     HeaderActions,
   },
-  mixins: [availabilityMixin],
+  mixins: [availabilityMixin, routerMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -51,15 +57,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    showBackButton: {
+      type: Boolean,
+      default: false,
+    },
     availableAgents: {
       type: Array,
       default: () => {},
     },
   },
   computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
+    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
@@ -69,47 +77,16 @@ export default {
       }
       return anyAgentOnline;
     },
-    replyWaitMeessage() {
+    replyWaitMessage() {
       return this.isOnline
         ? this.replyTimeStatus
         : this.$t('TEAM_AVAILABILITY.OFFLINE');
     },
   },
+  methods: {
+    onBackButtonClick() {
+      this.replaceRoute('home');
+    },
+  },
 };
 </script>
-
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
-
-.header-collapsed {
-  display: flex;
-  justify-content: space-between;
-  padding: $space-two $space-medium;
-  width: 100%;
-  box-sizing: border-box;
-
-  .header-branding {
-    display: flex;
-    align-items: center;
-
-    img {
-      border-radius: 50%;
-    }
-  }
-
-  .title {
-    font-weight: $font-weight-medium;
-  }
-
-  .inbox--avatar {
-    height: 32px;
-    width: 32px;
-  }
-}
-
-.status-view--badge {
-  height: $space-small;
-  width: $space-small;
-}
-</style>