From 3dd3ad24d00f40106f62b09a7aa9cc3a3b5843a0 Mon Sep 17 00:00:00 2001
From: James Otten <jamesotten1@gmail.com>
Date: Sun, 21 Apr 2024 17:20:19 -0400
Subject: [PATCH] Simplify phone input

---
 components/JoinForm/JoinForm.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/JoinForm/JoinForm.tsx b/components/JoinForm/JoinForm.tsx
index 927fd7f..a80f273 100644
--- a/components/JoinForm/JoinForm.tsx
+++ b/components/JoinForm/JoinForm.tsx
@@ -2,11 +2,12 @@
 
 import { JoinFormInput, submitJoinForm } from "@/app/api";
 import 'react-phone-number-input/style.css';
-import PhoneInput from 'react-phone-number-input';
+import PhoneInput from 'react-phone-number-input/input';
 import { E164Number } from 'libphonenumber-js/core';
 import { toastErrorMessage } from "@/app/utils/toastErrorMessage";
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { formatPhoneNumberIntl, parsePhoneNumber } from 'react-phone-number-input'
 
 import styles from './JoinForm.module.scss'
 
@@ -31,6 +32,13 @@ const JoinForm = () => {
         data[key] = value === 'on' ? true : false;
       } else if (key === 'zip') {
         data[key] = Number(value);
+      } else if (key === 'phone') {
+        const parsedPhone = parsePhoneNumber(value as string, "US");
+        if(parsedPhone?.number) {
+          data[key] = formatPhoneNumberIntl(parsedPhone?.number)
+        } else {
+          data[key] = value;
+        }
       } else {
         data[key] = value;
       }
@@ -102,7 +110,6 @@ const JoinForm = () => {
             name="phone"
             placeholder="Phone Number"
             defaultCountry="US"
-            international={true}
             value={phoneNumber}
             onChange={setPhoneNumber}/>
         </div>