Merge branch 'fix/phone-parser-storage' into chore/all-my-stuffs

Author: sharevb

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']

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

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,

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)}`;
+});
 </script>
 
 <template>
@@ -110,5 +135,34 @@ const countriesOptions = getCountries().map(code => ({
         </tr>
       </tbody>
     </n-table>
+
+    <n-divider />
+
+    <c-input-text
+      v-model:value="messageToSend"
+      multiline
+      rows="4"
+      placeholder="Enter a message to send"
+      label="Message to send:"
+      mb-2
+    />
+
+    <c-card v-if="whatsAppLink" title="WhatsApp Send link" mb-2>
+      <input-copyable :value="whatsAppLink" mb-2 />
+      <div flex justify-center>
+        <!-- //NOSONAR --><c-button :href="whatsAppLink" target="_blank">
+          Send via WhatsApp
+        </c-button>
+      </div>
+    </c-card>
+
+    <c-card v-if="smsLink" title="SMS Send link">
+      <input-copyable :value="smsLink" mb-2 />
+      <div flex justify-center>
+        <!-- //NOSONAR --><c-button :href="smsLink" target="_blank">
+          Send via SMS
+        </c-button>
+      </div>
+    </c-card>
   </div>
 </template>