feat(new tool): VAT Number Validator

src/tools/index.ts

@@ -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/vat-validator/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/vat-validator.vue

@@ -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" />
+    <n-alert v-if="!vatInfos.isValid" type="error">
+      Invalid VAT Number.
+    </n-alert>
+
+    <c-card v-if="vatInfos.infos.length > 0" mt-5 title="VAT Number Infos">
+      <c-key-value-list :items="vatInfos.infos" data-test-id="vat-info" />
+    </c-card>
+  </div>
+</template>