feat: refs #6818 add URL handling vn-link-phone

src/components/ui/VnLinkPhone.vue

@@ -2,6 +2,7 @@
 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 },
@@ -14,13 +15,14 @@ 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') {
@@ -31,9 +33,14 @@ onBeforeMount(async () => {
         phone.value = await parsePhone(props.phoneNumber, props.country.toLowerCase());
         config[
             type
-        ].href = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
+        ].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
@@ -44,8 +51,7 @@ onBeforeMount(async () => {
         size="sm"
         color="primary"
         padding="none"
-        :href="config[type].href"
-        @click.stop
+        @click.stop="handleClick"
     >
         <QTooltip>
             {{ capitalize(type).replace('-', '') }}

test/vitest/__tests__/components/common/VnLinkPhone.spec.js

@@ -7,28 +7,33 @@ describe('parsePhone filter', () => {
         vi.spyOn(axios, 'get').mockReturnValue({ data: { prefix: '34' } });
     });
 
+    it('no phone', () => {
+        const phone = parsePhone(null, '34');
+        expect(phone).toBe(undefined);
+    });
+
     it("adds prefix +34 if it doesn't have one", async () => {
-        const resultado = await parsePhone('123456789', '34');
-        expect(resultado).toBe('34123456789');
+        const phone = await parsePhone('123456789', '34');
+        expect(phone).toBe('34123456789');
     });
 
     it('maintains prefix +34 if it is already correct', async () => {
-        const resultado = await parsePhone('+34123456789', '34');
-        expect(resultado).toBe('34123456789');
+        const phone = await parsePhone('+34123456789', '34');
+        expect(phone).toBe('34123456789');
     });
 
     it('converts prefix 0034 to +34', async () => {
-        const resultado = await parsePhone('0034123456789', '34');
-        expect(resultado).toBe('34123456789');
+        const phone = await parsePhone('0034123456789', '34');
+        expect(phone).toBe('34123456789');
     });
 
     it('converts prefix 34 without symbol to +34', async () => {
-        const resultado = await parsePhone('34123456789', '34');
-        expect(resultado).toBe('34123456789');
+        const phone = await parsePhone('34123456789', '34');
+        expect(phone).toBe('34123456789');
     });
 
     it('replaces incorrect prefix with the correct one', async () => {
-        const resultado = await parsePhone('+44123456789', '34');
-        expect(resultado).toBe('44123456789');
+        const phone = await parsePhone('+44123456789', '34');
+        expect(phone).toBe('44123456789');
     });
 });