mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 19:48:08 +00:00
55d41b112b
# Pull Request Template ## Description This PR adds the ability to see the shared contact name in Telegram channels. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? **Loom video** https://www.loom.com/share/cd318056ad4d44d4a1fc4b5d4ad38d60?sid=26d833ae-ded9-4cf0-9af7-81eecfa37f19 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useAlert } from 'dashboard/composables';
|
|
import { useStore } from 'dashboard/composables/store';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useMessageContext } from '../provider.js';
|
|
import BaseAttachmentBubble from './BaseAttachment.vue';
|
|
|
|
import {
|
|
DuplicateContactException,
|
|
ExceptionWithMessage,
|
|
} from 'shared/helpers/CustomErrors';
|
|
|
|
const { attachments } = useMessageContext();
|
|
|
|
const $store = useStore();
|
|
const { t } = useI18n();
|
|
|
|
const attachment = computed(() => {
|
|
return attachments.value[0];
|
|
});
|
|
|
|
const phoneNumber = computed(() => {
|
|
return attachment.value.fallbackTitle;
|
|
});
|
|
|
|
const contactName = computed(() => {
|
|
const { meta } = attachment.value ?? {};
|
|
const { firstName, lastName } = meta ?? {};
|
|
return `${firstName ?? ''} ${lastName ?? ''}`.trim();
|
|
});
|
|
|
|
const formattedPhoneNumber = computed(() => {
|
|
return phoneNumber.value.replace(/\s|-|[A-Za-z]/g, '');
|
|
});
|
|
|
|
const rawPhoneNumber = computed(() => {
|
|
return phoneNumber.value.replace(/\D/g, '');
|
|
});
|
|
|
|
function getContactObject() {
|
|
const contactItem = {
|
|
name: contactName.value,
|
|
phone_number: `+${rawPhoneNumber.value}`,
|
|
};
|
|
return contactItem;
|
|
}
|
|
|
|
async function filterContactByNumber(searchCandidate) {
|
|
const query = {
|
|
attribute_key: 'phone_number',
|
|
filter_operator: 'equal_to',
|
|
values: [searchCandidate],
|
|
attribute_model: 'standard',
|
|
custom_attribute_type: '',
|
|
};
|
|
|
|
const queryPayload = { payload: [query] };
|
|
const contacts = await $store.dispatch('contacts/filter', {
|
|
queryPayload,
|
|
resetState: false,
|
|
});
|
|
return contacts.shift();
|
|
}
|
|
|
|
function openContactNewTab(contactId) {
|
|
const accountId = window.location.pathname.split('/')[3];
|
|
const url = `/app/accounts/${accountId}/contacts/${contactId}`;
|
|
window.open(url, '_blank');
|
|
}
|
|
|
|
async function addContact() {
|
|
try {
|
|
let contact = await filterContactByNumber(rawPhoneNumber);
|
|
if (!contact) {
|
|
contact = await $store.dispatch('contacts/create', getContactObject());
|
|
useAlert(t('CONTACT_FORM.SUCCESS_MESSAGE'));
|
|
}
|
|
openContactNewTab(contact.id);
|
|
} catch (error) {
|
|
if (error instanceof DuplicateContactException) {
|
|
if (error.data.includes('phone_number')) {
|
|
useAlert(t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
|
|
}
|
|
} else if (error instanceof ExceptionWithMessage) {
|
|
useAlert(error.data);
|
|
} else {
|
|
useAlert(t('CONTACT_FORM.ERROR_MESSAGE'));
|
|
}
|
|
}
|
|
}
|
|
|
|
const action = computed(() => ({
|
|
label: t('CONVERSATION.SAVE_CONTACT'),
|
|
onClick: addContact,
|
|
}));
|
|
</script>
|
|
|
|
<template>
|
|
<BaseAttachmentBubble
|
|
icon="i-teenyicons-user-circle-solid"
|
|
icon-bg-color="bg-[#D6409F]"
|
|
sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
|
|
:title="contactName"
|
|
:content="phoneNumber"
|
|
:action="formattedPhoneNumber ? action : null"
|
|
/>
|
|
</template>
|