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>
This commit is contained in:
Pranav Raj S 2022-01-12 02:55:27 -08:00 committed by GitHub
parent 991a42c417
commit 9c31d7c672
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 617 additions and 725 deletions

View file

@ -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>