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,30 +1,31 @@
<template>
<div>
<footer v-if="!hideReplyBox" class="footer">
<ChatInputWrap
:on-send-message="handleSendMessage"
:on-send-attachment="handleSendAttachment"
/>
</footer>
<div v-else>
<custom-button
class="font-medium"
block
:bg-color="widgetColor"
:text-color="textColor"
@click="startNewConversation"
>
{{ $t('START_NEW_CONVERSATION') }}
</custom-button>
<custom-button
v-if="showEmailTranscriptButton"
type="clear"
class="font-normal"
@click="sendTranscript"
>
{{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
</custom-button>
</div>
<footer
v-if="!hideReplyBox"
class="shadow-sm rounded-lg bg-white mb-1 z-50 relative"
>
<chat-input-wrap
:on-send-message="handleSendMessage"
:on-send-attachment="handleSendAttachment"
/>
</footer>
<div v-else>
<custom-button
class="font-medium"
block
:bg-color="widgetColor"
:text-color="textColor"
@click="startNewConversation"
>
{{ $t('START_NEW_CONVERSATION') }}
</custom-button>
<custom-button
v-if="showEmailTranscriptButton"
type="clear"
class="font-normal"
@click="sendTranscript"
>
{{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
</custom-button>
</div>
</template>
@ -115,19 +116,8 @@ export default {
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
@import '~widget/assets/scss/mixins.scss';
.footer {
background: $color-white;
box-sizing: border-box;
width: 100%;
border-radius: 7px;
@include shadow-big;
}
.branding {
align-items: center;