Merge pull request #15 from Craftserve/rozwader/pra-59-podlaczenie-formularza-kontaktowego

endpoint handling and validation review

Author: rozwader

src/components/Button.astro

@@ -3,9 +3,10 @@ interface Props {
     id: string;
     fontSize?: string;
     variant: "primary" | "secondary" | "outlined";
+    type: "button" | "submit" | "reset" | null | undefined,
 }
 
-const { id, variant, fontSize = "1em" } = Astro.props as Props;
+const { id, variant, fontSize = "1em", type="button" } = Astro.props as Props;
 
 const variantClassMap: Record<string, string> = {
     primary: "dark",
@@ -15,7 +16,7 @@ const variantClassMap: Record<string, string> = {
 const buttonClass = variantClassMap[variant] ?? "outlined";
 ---
 
-<button type="button" id={id} class={`button ${buttonClass}`}>
+<button type={type} id={id} class={`button ${buttonClass}`}>
     <slot />
 </button>
 

src/components/Textarea.astro

@@ -19,6 +19,7 @@ const props = Astro.props as textareaProps;
         resize: none;
         overflow-wrap: break-word;
         white-space: pre-wrap;
+        width: 100%;
     }
 
     .textarea-container {

src/scripts/api.ts

@@ -0,0 +1,38 @@
+import type { FormFields } from "../types";
+
+const API_URL = "https://craftserve.zendesk.com/api/v2/requests.json"
+
+export const sendTicket = async (data: FormFields) => {
+    try{
+        const request = await fetch(API_URL, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                "request": {
+                    "requester": {
+                        "name": `${data.name} ${data.surname}`,
+                        "email": `${data.email}`
+                    },
+                    "subject": `[AGENCY] ${data.subject}`,
+                    "comment": {
+                        "body": `
+                        Firma: ${data.company}\n
+                        Numer telefonu kontaktowego: ${data.phone}\n
+                        Treść: ${data.content}
+                        `
+                    },
+                    "tags": ["agency", "contact_form"]
+                }
+            })
+        })
+
+        const response = await request.json();
+        
+        return response;
+    }catch(err){
+        console.warn(err);
+        return "Error has occured while creating ticket";
+    }
+}

src/scripts/helpers.ts

@@ -0,0 +1,34 @@
+import type { FormFields } from "../types";
+
+const validateEmail = (email: string) => {
+    const emailRegExp = /^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d-]+(?:\.[a-z\d-]+)*\.[a-z]{2,}$/i; // np. example@gmail.com | there MUST be atleast two letters after @gmail.
+    return email.length > 0 && emailRegExp.test(email);
+}
+
+const validatePhone = (phone: string) => {
+    const phoneRegExp = /^(\+?\d{2}|00\d{2})?\s?([0-9]{3}\s[0-9]{3}\s[0-9]{3}|[0-9]{9})$/;
+    return phone.length > 0 && phoneRegExp.test(phone);
+}
+
+export const validateContactForm = (data: FormFields) => {
+    const array = Object.entries(data);
+    let valid = true;
+
+    array.forEach((entry) => {
+        const crop: string = entry[1].trim();
+        valid = crop.length > 0 ? valid : false;
+    })
+
+    if(!valid){
+        return false;
+    }
+
+    const isEmailValid = validateEmail(data.email.trim());    
+    const isPhoneValid = validatePhone(data.phone.trim());
+    
+    if(!isEmailValid || !isPhoneValid){
+        return false;
+    }
+
+    return true;
+}

src/sections/ContactForm.astro

@@ -6,6 +6,7 @@ import starsIconGroupWhite from "../../src/assets/starsIconGroupWhite.svg";
 import Input from "../components/Input.astro";
 import Button from "../components/Button.astro";
 import { getLangFromUrl, useTranslations } from "../i18n/utils";
+import Textarea from "../components/Textarea.astro";
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
@@ -22,7 +23,7 @@ const t = useTranslations(lang);
         <div class="formTopBar">
             <Image src={LogoDark} alt="logo" width={30} height={30} />
         </div>
-        <form class="formContainer">
+        <form class="formContainer" id="form">
             <div class="formSections">
                 <div class="formTopSection">
                     <div class="formTopSectionInput">
@@ -32,20 +33,31 @@ const t = useTranslations(lang);
                         <Input type="text" placeholder={t("surname")} name="surname" />
                     </div>
                     <div class="formTopSectionInput">
-                        <Input type="tel" placeholder={t("phone")} name="tel" />
+                        <Input 
+                            type="tel" 
+                            placeholder={t("phone")}
+                            name="phone"
+                        />
                     </div>
                     <div class="formTopSectionInput">
                         <Input type="text" placeholder={t("subject")} name="subject" />
                     </div>
                 </div>
                 <div class="formBottomSection">
-                    <Input type="email" placeholder={t("email")} name="email" />
+                    <Input 
+                        type="email" 
+                        placeholder={t("email")} 
+                        name="email" 
+                    />
                     <Input type="text" placeholder={t("company")} name="company" />
-                    <Input type="text" placeholder={t("content")} name="content" />
+                    <Textarea placeholder={t("content")} name="content" />
                 </div>
             </div>
+            <div class="errorMessageContainer">
+                <span id="errorMessage"></span>
+            </div>
             <div class="formButtonContainer">
-                <Button variant="primary" id="formSubmitButton">{t("send")}</Button>
+                <Button variant="primary" type="submit" id="formSubmitButton">{t("send")}</Button>
             </div>
         </form>
     </div>
@@ -65,6 +77,35 @@ const t = useTranslations(lang);
     </ul>
 </div>
 
+<script>
+    import { type FormFields} from "../types.ts";
+    import { sendTicket } from "../scripts/api.ts";
+    import { validateContactForm } from "../scripts/helpers.ts"
+
+    const form = document.getElementById("form") as HTMLFormElement;
+    const errorMessageSpan = document.getElementById("errorMessage");
+
+    form?.addEventListener("submit", async (e: SubmitEvent) => {
+        e.preventDefault();
+
+        const formData = new FormData(form);
+        const data = Object.fromEntries(formData.entries()) as unknown as FormFields;
+        console.log(data);
+        const validation = validateContactForm(data);
+
+        if(!validation && errorMessageSpan != null){
+            errorMessageSpan.innerText = "Please ensure all required fields are filled out correctly before submitting.";
+            return;
+        }
+
+        const response = await sendTicket(data); 
+
+        // if response is positive, change the view to "sent form view"
+    })
+
+
+</script>
+
 <style>
     .wrapper{
         width: 900px;
@@ -85,6 +126,19 @@ const t = useTranslations(lang);
         margin-top: 70px;
     }
 
+    .errorMessageContainer{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    #errorMessage{
+        color: red;
+        width: 100%;
+        padding: 0px 20px;
+    }
+
     .infoWrapper{
         display: flex;
         flex-direction: column;
@@ -118,6 +172,11 @@ const t = useTranslations(lang);
         top: 10%;
         opacity: 0.25;
         filter: blur(2px);
+        z-index: -1;
+    }
+
+    .infoWrapper, .formWrapper, .contactWrapper{
+        z-index: 1;
     }
 
     .formWrapper{

src/sections/Icons.astro

@@ -70,7 +70,7 @@ const contentData: (IconItem | ImageItem)[] = [
             ) : (
                 ""
             )
-        }
+        )}
     </div>
     <div class="item-wrapper">
         {contentData.map((item, index) =>

src/types.ts

@@ -0,0 +1,9 @@
+export interface FormFields{
+    name: string,
+    surname: string,
+    phone: string,
+    subject: string,
+    email: string,
+    company: string,
+    content: string,
+}