From e57756e4330785b7e8c33fa3144cf76f6d132b16 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 12 Jun 2025 22:35:17 +0200
Subject: [PATCH] Add phone number formatting and improve UI components

- Integrate libphonenumber-js for proper phone number formatting
- Display phone numbers in national format in PhoneInput component
- Strip non-numeric characters from phone input automatically
- Fix refresh button icon rendering in EmailThreadView
- Improve EOI button layout alignment and centering
---
 components/EOISection.vue      |  3 ++-
 components/EmailThreadView.vue |  4 ++--
 components/PhoneInput.vue      | 22 ++++++++++++++++------
 package-lock.json              |  7 +++++++
 package.json                   |  1 +
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/components/EOISection.vue b/components/EOISection.vue
index e64b67e..f3fe867 100644
--- a/components/EOISection.vue
+++ b/components/EOISection.vue
@@ -29,7 +29,7 @@
       </div>
       
       <!-- Generate EOI Button - Only show if no documents uploaded and no generated EOI -->
-      <div v-if="!hasGeneratedEOI && !hasEOIDocuments" class="d-flex flex-wrap" :class="mobile ? 'gap-3' : 'gap-4'">
+      <div v-if="!hasGeneratedEOI && !hasEOIDocuments" class="d-flex flex-wrap justify-space-between align-center" :class="mobile ? 'gap-3' : 'gap-4'">
         <v-btn
           @click="generateEOI"
           :loading="isGenerating"
@@ -37,6 +37,7 @@
           variant="flat"
           prepend-icon="mdi-file-document-plus"
           :size="mobile ? 'default' : 'large'"
+          class="justify-center"
           :class="mobile ? 'flex-grow-1' : ''"
         >
           Generate EOI
diff --git a/components/EmailThreadView.vue b/components/EmailThreadView.vue
index a5b8ccf..8b5aac2 100644
--- a/components/EmailThreadView.vue
+++ b/components/EmailThreadView.vue
@@ -5,12 +5,12 @@
       Email History
       <v-spacer />
       <v-btn
-        icon="mdi-refresh"
-        :size="mobile ? 'small' : 'small'"
+        icon
         variant="text"
         @click="loadEmails"
         :loading="loading"
       >
+        <v-icon size="small">mdi-refresh</v-icon>
         <v-tooltip activator="parent" location="bottom">
           Refresh emails
         </v-tooltip>
diff --git a/components/PhoneInput.vue b/components/PhoneInput.vue
index f2eda42..550efa8 100644
--- a/components/PhoneInput.vue
+++ b/components/PhoneInput.vue
@@ -80,6 +80,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 interface Country {
   name: string;
@@ -386,8 +387,16 @@ const filteredCountries = computed(() => {
   return [...preferred, ...others];
 });
 
-// Display value (local number without country code)
-const displayValue = computed(() => localNumber.value);
+// Display value with local formatting
+const displayValue = computed(() => {
+  const full = selectedCountry.value.dialCode + localNumber.value;
+  try {
+    const phoneNumber = parsePhoneNumberFromString(full);
+    return phoneNumber ? phoneNumber.format('NATIONAL') : localNumber.value;
+  } catch {
+    return localNumber.value;
+  }
+});
 
 // Parse initial value
 watch(() => props.modelValue, (newValue) => {
@@ -416,11 +425,12 @@ watch(() => props.modelValue, (newValue) => {
   }
 }, { immediate: true });
 
-// Update phone number
+// Update phone number - strip non-numeric characters
 const updatePhone = (value: string) => {
-  localNumber.value = value;
-  if (value) {
-    emit('update:modelValue', selectedCountry.value.dialCode + value);
+  const digits = value.replace(/\D/g, '');
+  localNumber.value = digits;
+  if (digits) {
+    emit('update:modelValue', selectedCountry.value.dialCode + digits);
   } else {
     emit('update:modelValue', '');
   }
diff --git a/package-lock.json b/package-lock.json
index 2480daa..7836ff8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@vite-pwa/nuxt": "^0.10.6",
         "formidable": "^3.5.4",
         "imap": "^0.8.19",
+        "libphonenumber-js": "^1.12.9",
         "lodash-es": "^4.17.21",
         "mailparser": "^3.7.3",
         "mime-types": "^3.0.1",
@@ -8771,6 +8772,12 @@
         "libqp": "2.1.1"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.12.9",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.9.tgz",
+      "integrity": "sha512-VWwAdNeJgN7jFOD+wN4qx83DTPMVPPAUyx9/TUkBXKLiNkuWWk6anV0439tgdtwaJDrEdqkvdN22iA6J4bUCZg==",
+      "license": "MIT"
+    },
     "node_modules/libqp": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/libqp/-/libqp-2.1.1.tgz",
diff --git a/package.json b/package.json
index 4bf79b9..53b402f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@vite-pwa/nuxt": "^0.10.6",
     "formidable": "^3.5.4",
     "imap": "^0.8.19",
+    "libphonenumber-js": "^1.12.9",
     "lodash-es": "^4.17.21",
     "mailparser": "^3.7.3",
     "mime-types": "^3.0.1",