LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Adds new inbox selector with more info for new message modal [cw-1358] (#6823)

Browse Source
This commit is contained in:
Nithin David Thomas
2023-04-19 23:02:50 +05:30
committed by GitHub
parent 76d4c22c2d
commit bd1e69e4b4
6 changed files with 282 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
View File

@@ -8,17 +8,43 @@
<div v-else>
<div class="row gutter-small">
<div class="columns">
<label :class="{ error: $v.targetInbox.$error }">
<label>
{{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
<select v-model="targetInbox">
<option
v-for="contactableInbox in inboxes"
:key="contactableInbox.inbox.id"
:value="contactableInbox"
>
{{ contactableInbox.inbox.name }}
</option>
</select>
</label>
<div class="multiselect-wrap--small">
<multiselect
v-model="targetInbox"
track-by="id"
label="name"
:placeholder="$t('FORMS.MULTISELECT.SELECT')"
selected-label=""
select-label=""
deselect-label=""
:max-height="160"
:close-on-select="true"
:options="[...inboxes, ...inboxes]"
>
<template slot="singleLabel" slot-scope="{ option }">
<inbox-dropdown-item
v-if="option.name"
:name="option.name"
:inbox-identifier="computedInboxSource(option)"
:channel-type="option.channel_type"
/>
<span v-else>
{{ $t('NEW_CONVERSATION.FORM.INBOX.PLACEHOLDER') }}
</span>
</template>
<template slot="option" slot-scope="{ option }">
<inbox-dropdown-item
:name="option.name"
:inbox-identifier="computedInboxSource(option)"
:channel-type="option.channel_type"
/>
</template>
</multiselect>
</div>
<label :class="{ error: $v.targetInbox.$error }">
<span v-if="$v.targetInbox.$error" class="message">
{{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
</span>
@@ -129,10 +155,12 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead';
import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem.vue';
import WhatsappTemplates from './WhatsappTemplates.vue';
import alertMixin from 'shared/mixins/alertMixin';
import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
import { getInboxSource } from 'dashboard/helper/inbox';
import { required, requiredIf } from 'vuelidate/lib/validators';
export default {
@@ -142,6 +170,7 @@ export default {
ReplyEmailHead,
CannedResponse,
WhatsappTemplates,
InboxDropdownItem,
},
mixins: [alertMixin],
props: {
@@ -161,9 +190,9 @@ export default {
message: '',
showCannedResponseMenu: false,
cannedResponseSearchKey: '',
selectedInbox: '',
bccEmails: '',
ccEmails: '',
targetInbox: {},
whatsappTemplateSelected: false,
};
},
@@ -186,8 +215,8 @@ export default {
}),
emailMessagePayload() {
const payload = {
inboxId: this.targetInbox.inbox.id,
sourceId: this.targetInbox.source_id,
inboxId: this.targetInbox.id,
sourceId: this.targetInbox.sourceId,
contactId: this.contact.id,
message: { content: this.message },
mailSubject: this.subject,
@@ -202,12 +231,17 @@ export default {
}
return payload;
},
targetInbox: {
selectedInbox: {
get() {
return this.selectedInbox || {};
const inboxList = this.contact.contactableInboxes || [];
return (
inboxList.find(inbox => inbox.inbox.id === this.targetInbox.id) || {
inbox: {},
}
);
},
set(value) {
this.selectedInbox = value;
this.targetInbox = value.inbox;
},
},
showNoInboxAlert() {
@@ -217,7 +251,11 @@ export default {
return this.inboxes.length === 0 && !this.uiFlags.isFetchingInboxes;
},
inboxes() {
return this.contact.contactableInboxes || [];
const inboxList = this.contact.contactableInboxes || [];
return inboxList.map(inbox => ({
...inbox.inbox,
sourceId: inbox.source_id,
}));
},
isAnEmailInbox() {
return (
@@ -267,8 +305,8 @@ export default {
},
prepareWhatsAppMessagePayload({ message: content, templateParams }) {
const payload = {
inboxId: this.targetInbox.inbox.id,
sourceId: this.targetInbox.source_id,
inboxId: this.targetInbox.id,
sourceId: this.targetInbox.sourceId,
contactId: this.contact.id,
message: { content, template_params: templateParams },
assigneeId: this.currentUser.id,
@@ -311,6 +349,18 @@ export default {
const payload = this.prepareWhatsAppMessagePayload(messagePayload);
await this.createConversation(payload);
},
inboxReadableIdentifier(inbox) {
return `${inbox.name} (${inbox.channel_type})`;
},
computedInboxSource(inbox) {
if (!inbox.channel_type) return '';
const classByType = getInboxSource(
inbox.channel_type,
inbox.phone_number,
inbox
);
return classByType;
},
},
};
</script>
@@ -352,11 +402,23 @@ export default {
gap: var(--space-small);
}
::v-deep .mention--box {
left: 0;
margin: auto;
right: 0;
top: unset;
height: fit-content;
::v-deep {
.mention--box {
left: 0;
margin: auto;
right: 0;
top: unset;
height: fit-content;
}
/* TODO: Remove when have standardized a component out of multiselect */
.multiselect .multiselect__content .multiselect__option span {
display: inline-flex;
width: var(--space-medium);
color: var(--s-600);
}
.multiselect .multiselect__content .multiselect__option {
padding: var(--space-micro) var(--space-smaller);
}
}
</style>