From 140a6fe6f70ec3f9337406a7d84c4725cc569798 Mon Sep 17 00:00:00 2001
From: EnjoyBacon7 <59032058+EnjoyBacon7@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:31:03 +0100
Subject: [PATCH] Fixed ContactUS component

---
 .../layout/Overlay/ContactUs.svelte           | 86 +++++++------------
 1 file changed, 33 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/layout/Overlay/ContactUs.svelte b/src/lib/components/layout/Overlay/ContactUs.svelte
index 26b97c982f..1a0ac6dcb8 100644
--- a/src/lib/components/layout/Overlay/ContactUs.svelte
+++ b/src/lib/components/layout/Overlay/ContactUs.svelte
@@ -14,45 +14,6 @@
         message: string;
     }
 
-    function sendForm(event: Event) {
-        event.preventDefault();
-        const form = event.target as HTMLFormElement;
-        const formData = new FormData(form);
-        
-        const contact: Contact = {
-            first_name: formData.get('firstname') as string,
-            last_name: formData.get('lastname') as string,
-            company: formData.get('company') as string,
-            position: formData.get('position') as string,
-            email: formData.get('email') as string,
-            phone: formData.get('phone') as string,
-            message: formData.get('message') as string
-        };
-
-        console.log(contact);
-
-        // Send form to /contact api
-        fetch('/contact/contact', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(contact),
-        })
-            .then((response) => {
-                if (response.ok) {
-                    console.log('Form submitted successfully');
-                } else {
-                    console.error('Form submission failed');
-                }
-            })
-            .catch((error) => {
-                console.error('Form submission failed', error);
-            });
-            
-        closeModal();
-    }
-
 	const validateEmailFormat = (email: string): boolean => {
 		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 		return emailRegex.test(email);
@@ -70,28 +31,48 @@
 	function submitForm(event: Event) {
 		event.preventDefault();
 
-		// Parse form data
-		const firstName = (document.getElementById('firstname') as HTMLInputElement).value;
-		const lastName = (document.getElementById('lastname') as HTMLInputElement).value;
-		const company = (document.getElementById('company') as HTMLInputElement).value ?? '';
-		const position = (document.getElementById('position') as HTMLInputElement).value ?? '';
-		const email = (document.getElementById('email') as HTMLInputElement).value;
-		const phone = (document.getElementById('phone') as HTMLInputElement).value ?? '';
-		const message = (document.getElementById('message') as HTMLInputElement).value;
+        		// Parse form data
 
-		if (!validateForm(firstName, lastName, email, message)) {
+        const contact: Contact = {
+            first_name: (document.getElementById('firstname') as HTMLInputElement).value,
+            last_name: (document.getElementById('lastname') as HTMLInputElement).value,
+            company: (document.getElementById('company') as HTMLInputElement).value,
+            position: (document.getElementById('position') as HTMLInputElement).value,
+            email: (document.getElementById('email') as HTMLInputElement).value,
+            phone: (document.getElementById('phone') as HTMLInputElement).value,
+            message: (document.getElementById('message') as HTMLInputElement).value
+        }
+		if (!validateForm(contact.first_name, contact.last_name, contact.email, contact.message)) {
 			toast.error('Please fill out the required (*) fields.');
 			return;
 		}
-		if (!validateEmailFormat(email)) {
+		if (!validateEmailFormat(contact.email)) {
 			toast.error('Invalid email address.');
 			return;
 		}
 
-        sendForm(event);
+        console.log(contact);
 
-		// TODO : CALL API TO SEND MAIL
-		closeModal();
+        // Send form to /contact api
+        fetch('/contact/contact', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(contact),
+        })
+            .then((response) => {
+                if (response.ok) {
+                    console.log('Form submitted successfully');
+                } else {
+                    console.error('Form submission failed');
+                }
+            })
+            .catch((error) => {
+                console.error('Form submission failed', error);
+            });
+            
+        closeModal();
 	}
 
 	function closeModal() {
@@ -191,7 +172,6 @@
 				<button
 					type="submit"
 					class="form-button mt-4 w-full inline-flex justify-center py-3 px-4 border border-transparent shadow-sm text-sm font-medium rounded-3xl focus:outline-none focus:ring-2 focus:ring-offset-2"
-					on:click={submitForm}
 				>
 					Submit
 				</button>