Feature: Send chat transcript via email (#1152)
Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
This commit is contained in:
Sojan Jose
GitHub
parent
4b70e4e3d6
commit
22880df429
31 changed files with 559 additions and 59 deletions
49
app/javascript/dashboard/components/widgets/Button.vue
Normal file
49
app/javascript/dashboard/components/widgets/Button.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<button :type="type" class="button nice" :class="variant" @click="onClick">
|
||||
<i
|
||||
v-if="!isLoading && icon"
|
||||
class="icon"
|
||||
:class="buttonIconClass + ' ' + icon"
|
||||
/>
|
||||
<spinner v-if="isLoading" />
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
buttonIconClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'button',
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
this.$emit('click', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
font-size: var(--font-size-large) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
v-if="currentChat.id"
|
||||
:inbox-id="inboxId"
|
||||
:is-contact-panel-open="isContactPanelOpen"
|
||||
@contactPanelToggle="onToggleContactPanel"
|
||||
@contact-panel-toggle="onToggleContactPanel"
|
||||
/>
|
||||
<empty-state v-else />
|
||||
</div>
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
onToggleContactPanel() {
|
||||
this.$emit('contactPanelToggle');
|
||||
this.$emit('contact-panel-toggle');
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="conv-header">
|
||||
<div class="user">
|
||||
<div v-if="!isContactPanelOpen" class="user">
|
||||
<Thumbnail
|
||||
:src="currentContact.thumbnail"
|
||||
size="40px"
|
||||
|
|
@ -14,13 +14,20 @@
|
|||
</h3>
|
||||
<button
|
||||
class="user--profile__button clear button small"
|
||||
@click="$emit('contactPanelToggle')"
|
||||
@click="$emit('contact-panel-toggle')"
|
||||
>
|
||||
{{ viewProfileButtonLabel }}
|
||||
{{
|
||||
`${$t('CONVERSATION.HEADER.OPEN')} ${$t(
|
||||
'CONVERSATION.HEADER.DETAILS'
|
||||
)}`
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<div
|
||||
class="flex-container"
|
||||
:class="{ 'justify-space-between w-100': isContactPanelOpen }"
|
||||
>
|
||||
<div class="multiselect-box ion-headphone">
|
||||
<multiselect
|
||||
v-model="currentChat.meta.assignee"
|
||||
|
|
@ -38,24 +45,20 @@
|
|||
<span slot="noResult">{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}</span>
|
||||
</multiselect>
|
||||
</div>
|
||||
<ResolveButton />
|
||||
|
||||
<more-actions :conversation-id="currentChat.id" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/* eslint no-console: 0 */
|
||||
/* eslint no-param-reassign: 0 */
|
||||
/* eslint no-shadow: 0 */
|
||||
/* global bus */
|
||||
|
||||
import { mapGetters } from 'vuex';
|
||||
import MoreActions from './MoreActions';
|
||||
import Thumbnail from '../Thumbnail';
|
||||
import ResolveButton from '../../buttons/ResolveButton';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MoreActions,
|
||||
Thumbnail,
|
||||
ResolveButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -104,13 +107,6 @@ export default {
|
|||
...this.agents,
|
||||
];
|
||||
},
|
||||
viewProfileButtonLabel() {
|
||||
return `${
|
||||
this.isContactPanelOpen
|
||||
? this.$t('CONVERSATION.HEADER.CLOSE')
|
||||
: this.$t('CONVERSATION.HEADER.OPEN')
|
||||
} ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<woot-modal :show.sync="show" :on-close="onCancel">
|
||||
<div class="column content-box">
|
||||
<woot-modal-header
|
||||
:header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
|
||||
:header-content="$t('EMAIL_TRANSCRIPT.DESC')"
|
||||
/>
|
||||
<form @submit.prevent="onSubmit">
|
||||
<div class="medium-12 columns">
|
||||
<div v-if="currentChat.meta.sender && currentChat.meta.sender.email">
|
||||
<input
|
||||
id="contact"
|
||||
v-model="selectedType"
|
||||
type="radio"
|
||||
name="selectedType"
|
||||
value="contact"
|
||||
/>
|
||||
<label for="contact">{{
|
||||
$t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="currentChat.meta.assignee">
|
||||
<input
|
||||
id="assignee"
|
||||
v-model="selectedType"
|
||||
type="radio"
|
||||
name="selectedType"
|
||||
value="assignee"
|
||||
/>
|
||||
<label for="assignee">{{
|
||||
$t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
|
||||
}}</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="other_email_address"
|
||||
v-model="selectedType"
|
||||
type="radio"
|
||||
name="selectedType"
|
||||
value="other_email_address"
|
||||
/>
|
||||
<label for="other_email_address">{{
|
||||
$t('EMAIL_TRANSCRIPT.FORM.SEND_TO_OTHER_EMAIL_ADDRESS')
|
||||
}}</label>
|
||||
</div>
|
||||
<div v-if="sentToOtherEmailAddress" class="medium-6 columns">
|
||||
<label :class="{ error: $v.email.$error }">
|
||||
<input
|
||||
v-model.trim="email"
|
||||
type="text"
|
||||
:placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
|
||||
@input="$v.email.$touch"
|
||||
/>
|
||||
<span v-if="$v.email.$error" class="message">
|
||||
{{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="medium-12 row">
|
||||
<woot-submit-button
|
||||
:button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
|
||||
:disabled="!isFormValid"
|
||||
/>
|
||||
<button class="button clear" @click.prevent="onCancel">
|
||||
{{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</woot-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required, minLength, email } from 'vuelidate/lib/validators';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
export default {
|
||||
mixins: [alertMixin],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
currentChat: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
selectedType: '',
|
||||
isSubmitting: false,
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
minLength: minLength(4),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
sentToOtherEmailAddress() {
|
||||
return this.selectedType === 'other_email_address';
|
||||
},
|
||||
isFormValid() {
|
||||
if (this.selectedType) {
|
||||
if (this.sentToOtherEmailAddress) {
|
||||
return !!this.email && !this.$v.email.$error;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
selectedEmailAddress() {
|
||||
const { meta } = this.currentChat;
|
||||
switch (this.selectedType) {
|
||||
case 'contact':
|
||||
return meta.sender.email;
|
||||
case 'assignee':
|
||||
return meta.assignee.email;
|
||||
case 'other_email_address':
|
||||
return this.email;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.$emit('cancel');
|
||||
},
|
||||
async onSubmit() {
|
||||
this.isSubmitting = false;
|
||||
try {
|
||||
await this.$store.dispatch('sendEmailTranscript', {
|
||||
email: this.selectedEmailAddress,
|
||||
conversationId: this.currentChat.id,
|
||||
});
|
||||
this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
|
||||
this.onCancel();
|
||||
} catch (error) {
|
||||
this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
|
||||
} finally {
|
||||
this.isSubmitting = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<conversation-header
|
||||
:chat="currentChat"
|
||||
:is-contact-panel-open="isContactPanelOpen"
|
||||
@contactPanelToggle="onToggleContactPanel"
|
||||
@contact-panel-toggle="onToggleContactPanel"
|
||||
/>
|
||||
<div v-if="!currentChat.can_reply" class="banner messenger-policy--banner">
|
||||
<span>
|
||||
|
|
@ -238,7 +238,7 @@ export default {
|
|||
this.conversationPanel.scrollTop = this.conversationPanel.scrollHeight;
|
||||
},
|
||||
onToggleContactPanel() {
|
||||
this.$emit('contactPanelToggle');
|
||||
this.$emit('contact-panel-toggle');
|
||||
},
|
||||
setScrollParams() {
|
||||
this.heightBeforeLoad = this.conversationPanel.scrollHeight;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="flex-container actions--container">
|
||||
<resolve-action
|
||||
:conversation-id="currentChat.id"
|
||||
:status="currentChat.status"
|
||||
/>
|
||||
<woot-button
|
||||
class="success hollow more--button"
|
||||
icon="ion-more"
|
||||
:class="buttonClass"
|
||||
@click="toggleConversationActions"
|
||||
/>
|
||||
<div
|
||||
v-if="showConversationActions"
|
||||
v-on-clickaway="hideConversationActions"
|
||||
class="dropdown-pane"
|
||||
:class="{ 'dropdown-pane--open': showConversationActions }"
|
||||
>
|
||||
<button
|
||||
v-if="!currentChat.muted"
|
||||
class="button small clear row nice alert small-6 action--button"
|
||||
@click="mute"
|
||||
>
|
||||
<i class="icon ion-volume-mute" />
|
||||
<span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button small clear row nice small-6 action--button"
|
||||
@click="toggleEmailActionsModal"
|
||||
>
|
||||
<i class="icon ion-ios-copy" />
|
||||
{{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
|
||||
</button>
|
||||
</div>
|
||||
<email-transcript-modal
|
||||
v-if="showEmailActionsModal"
|
||||
:show="showEmailActionsModal"
|
||||
:current-chat="currentChat"
|
||||
@cancel="toggleEmailActionsModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import EmailTranscriptModal from './EmailTranscriptModal';
|
||||
import ResolveAction from '../../buttons/ResolveAction';
|
||||
import wootConstants from '../../../constants';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EmailTranscriptModal,
|
||||
ResolveAction,
|
||||
},
|
||||
mixins: [alertMixin, clickaway],
|
||||
data() {
|
||||
return {
|
||||
showConversationActions: false,
|
||||
showEmailActionsModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentChat: 'getSelectedChat',
|
||||
}),
|
||||
|
||||
buttonClass() {
|
||||
return this.currentChat.status !== wootConstants.STATUS_TYPE.OPEN
|
||||
? 'warning'
|
||||
: 'success';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
mute() {
|
||||
this.$store.dispatch('muteConversation', this.currentChat.id);
|
||||
this.showAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
|
||||
this.toggleConversationActions();
|
||||
},
|
||||
toggleEmailActionsModal() {
|
||||
this.showEmailActionsModal = !this.showEmailActionsModal;
|
||||
this.hideConversationActions();
|
||||
},
|
||||
toggleConversationActions() {
|
||||
this.showConversationActions = !this.showConversationActions;
|
||||
},
|
||||
hideConversationActions() {
|
||||
this.showConversationActions = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.more--button {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: var(--space-small);
|
||||
padding: var(--space-small);
|
||||
}
|
||||
|
||||
.actions--container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-pane {
|
||||
right: 0;
|
||||
top: 48px;
|
||||
border: 1px solid var(--s-100);
|
||||
border-radius: var(--space-smaller);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dropdown-pane--open {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.action--button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--space-small) 0;
|
||||
|
||||
.icon {
|
||||
margin-right: var(--space-small);
|
||||
min-width: var(--space-normal);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue