diff --git a/src/components/ui/VnLinkPhone.vue b/src/components/ui/VnLinkPhone.vue index 4068498cd..c5d5df394 100644 --- a/src/components/ui/VnLinkPhone.vue +++ b/src/components/ui/VnLinkPhone.vue @@ -1,23 +1,28 @@ <script setup> -import { reactive, useAttrs, onBeforeMount, capitalize } from 'vue'; +import { ref, reactive, useAttrs, onBeforeMount, capitalize } from 'vue'; import axios from 'axios'; import { parsePhone } from 'src/filters'; +import useOpenURL from 'src/composables/useOpenURL'; + const props = defineProps({ phoneNumber: { type: [String, Number], default: null }, channel: { type: Number, default: null }, + country: { type: String, default: null }, }); +const phone = ref(props.phoneNumber); const config = reactive({ sip: { icon: 'phone', href: `sip:${props.phoneNumber}` }, 'say-simple': { icon: 'vn:saysimple', - href: null, + url: null, channel: props.channel, }, }); const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip'; onBeforeMount(async () => { + if (!phone.value) return; let { channel } = config[type]; if (type === 'say-simple') { @@ -25,23 +30,28 @@ onBeforeMount(async () => { .data; if (!channel) channel = defaultChannel; - config[type].href = `${url}?customerIdentity=%2B${parsePhone( - props.phoneNumber - )}&channelId=${channel}`; + phone.value = await parsePhone(props.phoneNumber, props.country.toLowerCase()); + config[ + type + ].url = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`; } }); + +function handleClick() { + if (config[type].url) useOpenURL(config[type].url); + else if (config[type].href) window.location.href = config[type].href; +} </script> <template> <QBtn - v-if="phoneNumber" + v-if="phone" flat round :icon="config[type].icon" size="sm" color="primary" padding="none" - :href="config[type].href" - @click.stop + @click.stop="handleClick" > <QTooltip> {{ capitalize(type).replace('-', '') }} diff --git a/src/filters/parsePhone.js b/src/filters/parsePhone.js index 696f55007..27474321f 100644 --- a/src/filters/parsePhone.js +++ b/src/filters/parsePhone.js @@ -1,12 +1,16 @@ -export default function (phone, prefix = 34) { - if (phone.startsWith('+')) { - return `${phone.slice(1)}`; +import axios from 'axios'; + +export default async function parsePhone(phone, country) { + if (!phone) return; + if (phone.startsWith('+')) return `${phone.slice(1)}`; + if (phone.startsWith('00')) return `${phone.slice(2)}`; + try { + const prefix = ( + await axios.get(`Prefixes/${country.toLowerCase()}`) + ).data?.prefix.replace(/^0+/, ''); + if (phone.startsWith(prefix)) return phone; + return `${prefix}${phone}`; + } catch (e) { + return null; } - if (phone.startsWith('00')) { - return `${phone.slice(2)}`; - } - if (phone.startsWith(prefix) && phone.length === prefix.length + 9) { - return `${prefix}${phone.slice(prefix.length)}`; - } - return `${prefix}${phone}`; } diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue index 4fa7b9bdc..2cad13115 100644 --- a/src/pages/Customer/Card/CustomerSummary.vue +++ b/src/pages/Customer/Card/CustomerSummary.vue @@ -95,6 +95,7 @@ const sumRisk = ({ clientRisks }) => { :phone-number="entity.mobile" :channel="entity.country?.saySimpleCountry?.channel" class="q-ml-xs" + :country="entity.country?.code" /> </template> </VnLv> diff --git a/test/vitest/__tests__/components/common/VnLinkPhone.spec.js b/test/vitest/__tests__/components/common/VnLinkPhone.spec.js index e460ab2fc..1505e32f7 100644 --- a/test/vitest/__tests__/components/common/VnLinkPhone.spec.js +++ b/test/vitest/__tests__/components/common/VnLinkPhone.spec.js @@ -1,29 +1,39 @@ -import { describe, it, expect } from 'vitest'; +import { describe, it, expect, beforeAll, vi } from 'vitest'; +import { axios } from 'app/test/vitest/helper'; import parsePhone from 'src/filters/parsePhone'; describe('parsePhone filter', () => { - it("adds prefix +34 if it doesn't have one", () => { - const resultado = parsePhone('123456789', '34'); - expect(resultado).toBe('34123456789'); + beforeAll(async () => { + vi.spyOn(axios, 'get').mockReturnValue({ data: { prefix: '34' } }); }); - it('maintains prefix +34 if it is already correct', () => { - const resultado = parsePhone('+34123456789', '34'); - expect(resultado).toBe('34123456789'); + it('no phone', async () => { + const phone = await parsePhone(null, '34'); + expect(phone).toBe(undefined); }); - it('converts prefix 0034 to +34', () => { - const resultado = parsePhone('0034123456789', '34'); - expect(resultado).toBe('34123456789'); + it("adds prefix +34 if it doesn't have one", async () => { + const phone = await parsePhone('123456789', '34'); + expect(phone).toBe('34123456789'); }); - it('converts prefix 34 without symbol to +34', () => { - const resultado = parsePhone('34123456789', '34'); - expect(resultado).toBe('34123456789'); + it('maintains prefix +34 if it is already correct', async () => { + const phone = await parsePhone('+34123456789', '34'); + expect(phone).toBe('34123456789'); }); - it('replaces incorrect prefix with the correct one', () => { - const resultado = parsePhone('+44123456789', '34'); - expect(resultado).toBe('44123456789'); + it('converts prefix 0034 to +34', async () => { + const phone = await parsePhone('0034123456789', '34'); + expect(phone).toBe('34123456789'); + }); + + it('converts prefix 34 without symbol to +34', async () => { + const phone = await parsePhone('34123456789', '34'); + expect(phone).toBe('34123456789'); + }); + + it('replaces incorrect prefix with the correct one', async () => { + const phone = await parsePhone('+44123456789', '34'); + expect(phone).toBe('44123456789'); }); });