diff --git a/components.d.ts b/components.d.ts index f2c3146f..bbc04bc9 100644 --- a/components.d.ts +++ b/components.d.ts @@ -126,7 +126,9 @@ declare module '@vue/runtime-core' { MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'] MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'] MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'] + NA: typeof import('naive-ui')['NA'] NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] + NButton: typeof import('naive-ui')['NButton'] NCode: typeof import('naive-ui')['NCode'] NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] @@ -145,6 +147,7 @@ declare module '@vue/runtime-core' { NMenu: typeof import('naive-ui')['NMenu'] NScrollbar: typeof import('naive-ui')['NScrollbar'] NSpin: typeof import('naive-ui')['NSpin'] + NTable: typeof import('naive-ui')['NTable'] NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default'] OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'] PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default'] diff --git a/src/tools/phone-parser-and-formatter/index.ts b/src/tools/phone-parser-and-formatter/index.ts index 094b21e8..d3f28867 100644 --- a/src/tools/phone-parser-and-formatter/index.ts +++ b/src/tools/phone-parser-and-formatter/index.ts @@ -1,11 +1,11 @@ import { Phone } from '@vicons/tabler'; import { defineTool } from '../tool'; -import { translate } from '@/plugins/i18n.plugin'; export const tool = defineTool({ - name: translate('tools.phone-parser-and-formatter.title'), + name: 'Phone parser and formatter', path: '/phone-parser-and-formatter', - description: translate('tools.phone-parser-and-formatter.description'), + description: + 'Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc. Forge link to send message in WhatsApp and SMS', keywords: [ 'phone', 'parser', @@ -18,6 +18,9 @@ export const tool = defineTool({ 'cell', 'international', 'national', + 'whatsapp', + 'sms', + 'message', ], component: () => import('./phone-parser-and-formatter.vue'), icon: Phone, diff --git a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue index 1d721449..f4b83e06 100644 --- a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue +++ b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue @@ -23,13 +23,16 @@ const validation = useValidation({ ], }); -const parsedDetails = computed(() => { +const parsedRaw = computed(() => { if (!validation.isValid) { return undefined; } - const parsed = withDefaultOnError(() => parsePhoneNumber(rawPhone.value, defaultCountryCode.value), undefined); + return withDefaultOnError(() => parsePhoneNumber(rawPhone.value, defaultCountryCode.value), undefined); +}); +const parsedDetails = computed(() => { + const parsed = parsedRaw.value; if (!parsed) { return undefined; } @@ -82,6 +85,27 @@ const countriesOptions = getCountries().map(code => ({ label: `${lookup.byIso(code)?.country || code} (+${getCountryCallingCode(code)})`, value: code, })); + +const messageToSend = ref(''); +const whatsAppLink = computed(() => { + const parsed = parsedRaw.value; + if (!parsed) { + return undefined; + } + + const internationalNoPunts = parsed.formatInternational().replace(/^\+0*/g, '').replace(/\D/g, ''); + + return `https://wa.me/${internationalNoPunts}?text=${encodeURIComponent(messageToSend.value)}`; +}); +const smsLink = computed(() => { + const parsed = parsedRaw.value; + if (!parsed) { + return undefined; + } + + const internationalNoSpaces = parsed.formatInternational().replace(/\s/g, ''); + return `sms:${internationalNoSpaces}&body=${encodeURIComponent(messageToSend.value)}`; +});