feat(new tool): VAT Number Validator

Author: sharevb

components.d.ts

@@ -129,6 +129,7 @@ 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']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
@@ -185,6 +186,7 @@ declare module '@vue/runtime-core' {
     UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
     UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
     UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    VatValidator: typeof import('./src/tools/vat-validator/vat-validator.vue')['default']
     WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
     XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
     XmlToJson: typeof import('./src/tools/xml-to-json/xml-to-json.vue')['default']

package.json

@@ -70,6 +70,7 @@
     "ibantools": "^4.3.3",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
+    "jsvat-next": "^3.0.4",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as vatValidator } from './vat-validator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -188,7 +189,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+      vatValidator,
+    ],
   },
 ];
 

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { ReceiptTax } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'VAT Numbers Validator',
+  path: '/vat-validator',
+  description: 'Validate VAT Numbers',
+  keywords: ['vat', 'validator'],
+  component: () => import('./vat-validator.vue'),
+  icon: ReceiptTax,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/vat-validator/index.ts

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { checkVAT, countries } from 'jsvat-next';
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const rawVATNumber = ref('BE0411905847');
+const vatInfos = computed<{ isValid: boolean; infos: CKeyValueListItems }>(() => {
+  const vat = checkVAT(rawVATNumber.value, countries);
+  if (vat == null) {
+    return { isValid: false, infos: [] };
+  }
+  return {
+    isValid: vat.isValid,
+    infos: [
+      {
+        label: 'Is VAT Number valid ?',
+        value: vat.isValid,
+      },
+      {
+        label: 'Is VAT Number valid format ?',
+        value: vat.isValidFormat,
+      },
+      {
+        label: 'Cleaned VAT Number',
+        value: vat.value,
+      },
+      {
+        label: 'Country (name)',
+        value: vat.country?.name || 'Unknown',
+      },
+      {
+        label: 'Country (ISO2)',
+        value: vat.country?.isoCode?.short || 'unk',
+      },
+      {
+        label: 'Country (ISO3)',
+        value: vat.country?.isoCode?.long || 'unk',
+      },
+      {
+        label: 'Country (ISO Num)',
+        value: vat.country?.isoCode?.numeric || 0,
+      },
+    ],
+  };
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="rawVATNumber" placeholder="Enter a VAT number to check for validity..." test-id="vat-input" mb-2 />
+    <n-alert v-if="!vatInfos.isValid" type="error" mb-2>
+      Invalid VAT Number.
+    </n-alert>
+
+    <c-card v-if="vatInfos.infos.length > 0" title="VAT Number Infos">
+      <c-key-value-list :items="vatInfos.infos" data-test-id="vat-info" />
+    </c-card>
+  </div>
+</template>