diff --git a/components.d.ts b/components.d.ts index 3e65c3cc..1dac3be3 100644 --- a/components.d.ts +++ b/components.d.ts @@ -129,8 +129,10 @@ 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'] - NCheckbox: typeof import('naive-ui')['NCheckbox'] + NButton: typeof import('naive-ui')['NButton'] + NCode: typeof import('naive-ui')['NCode'] NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NDivider: typeof import('naive-ui')['NDivider'] @@ -141,7 +143,8 @@ declare module '@vue/runtime-core' { NLayout: typeof import('naive-ui')['NLayout'] NLayoutSider: typeof import('naive-ui')['NLayoutSider'] NMenu: typeof import('naive-ui')['NMenu'] - NSpace: typeof import('naive-ui')['NSpace'] + 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'] diff --git a/locales/en.yml b/locales/en.yml index d03d80d3..c4ae572e 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -299,7 +299,7 @@ tools: phone-parser-and-formatter: title: Phone parser and formatter - description: Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc. + 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. ipv4-subnet-calculator: title: IPv4 subnet calculator diff --git a/src/tools/phone-parser-and-formatter/index.ts b/src/tools/phone-parser-and-formatter/index.ts index 094b21e8..24ea425e 100644 --- a/src/tools/phone-parser-and-formatter/index.ts +++ b/src/tools/phone-parser-and-formatter/index.ts @@ -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 5bc67780..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 @@ -9,9 +9,10 @@ import { import { withDefaultOnError } from '@/utils/defaults'; import { booleanToHumanReadable } from '@/utils/boolean'; import { useValidation } from '@/composable/validation'; +import { useQueryParamOrStorage } from '@/composable/queryParams'; const rawPhone = ref(''); -const defaultCountryCode = ref(getDefaultCountryCode()); +const defaultCountryCode = useQueryParamOrStorage({ name: 'country', storageName: 'phone-parser:country', defaultValue: getDefaultCountryCode() }); const validation = useValidation({ source: rawPhone, rules: [ @@ -22,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; } @@ -81,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)}`; +});