Merge pull request #54 from IDEjr/Issues-#22-#23

Issues#22 #23
IDEjr · Apr 23, 2024 · 3db070c · 3db070c
2 parents 0571cd9 + cef80ed
commit 3db070c
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 22 deletions.
diff --git a/src/components/contato/ContactForm/form.module.css b/src/components/contato/ContactForm/form.module.css
@@ -2,11 +2,18 @@
     font-size: large;
     display: flex;
     flex-direction: column;
-    height: 60vh;
     width: 60vw;
     margin: auto;
 }
 
+.mainDiv {
+    font-size: large;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+}
+
+
 .row{
     display: flex;
     flex-direction: row;
@@ -17,7 +24,7 @@
 
 }
 
-.row input, .row select {
+.row input, .row select{
     height: 70% !important; 
     width: 32%;
     box-sizing:content-box;
@@ -30,26 +37,103 @@
 }
 
 
-.row > input, .row > select, .Form > input{
+.row > input, .row > select, .form > input, .form > textarea{
 
     height: 7vh;
-    border-radius: 15px;
+    border-radius: 20px;
     border-style: hidden;
     background-color: #D9D9D9;
 }
 
+.form > textarea {
+    max-width: 100%;
+    min-width: 100%;
+    min-height: 7vh;
+    overflow-y: hidden;
+}
+
 .submit {
     background-color: #D45827 !important;
     margin-top: 3vh !important;
     color: white;
+    height: 7vh;
 
 }
 
-.form > input {
+.form > input, .form > textarea {
     margin-top: 1.5vh;
 }
 
 #projects, #howDidUMeet, #date{
     text-align: center;
     color: black;
-}
+}
+
+
+input[type="date"]:not(.has-value):before{
+    color: rgb(0, 0, 0);
+    content: attr(placeholder);
+}
+
+input[type="date"]:not(.has-value):valid:before{
+    content: attr(none);
+}
+
+
+.rectangleSuccess {
+    background-color: #D472A8;
+    width: 40%;
+    height: 7vh;
+    border-radius: 20px;
+    margin-top: 5vh;
+    text-align: center;
+    color: white;
+    line-height: 7vh;
+    margin-left: 30%;
+    font-size: 1vw;
+    display: none;
+}
+
+.rectangleFailed {
+    background-color: #E01D1D;
+    width: 40%;
+    height: 7vh;
+    border-radius: 20px;
+    margin-top: 5vh;
+    text-align: center;
+    color: white;
+    line-height: 7vh;
+    margin-left: 30%;
+    font-size: 1vw;
+}
+
+@media screen and (max-width: 600px) {
+
+    .row{
+        flex-direction: column;
+        justify-content: center;
+        height: 20vh;
+        width: 100%;
+        align-items: center;
+    }
+
+
+    .row > input, .row > select, .form > input, .form > textarea{
+        height: 12vh !important;
+        width: 100% ; 
+        margin-top: 2vh;
+        border-radius: 20px;
+    }
+
+    .form{
+        margin: auto;
+        align-items: center;
+        width: 80vw;
+    }
+
+    .submit {
+        width: 70% !important;
+        height: 12vh;
+    }
+
+  }
diff --git a/src/components/contato/ContactForm/headerForm.module.css b/src/components/contato/ContactForm/headerForm.module.css
@@ -1,7 +1,7 @@
 .headerForm{
     display: flex;
     flex-direction: row;
-
+    margin-top: 0;
 }
 
 .headerFormTxt{
@@ -29,4 +29,33 @@
     font-size: 1.8vw;
     text-align: left;
     color: white;
-}
+}
+
+@media screen and (max-width: 600px) {
+
+    .hr {
+        display: none;
+    }
+
+    .headerFormHR{
+        display: none;
+    }
+
+    .headerFormTxt{
+        width: 100%;
+        display: flex;
+        justify-content: center;
+
+    }
+
+
+    .headerFormTxt > p {
+        font-size: 5vw;
+    }
+
+    .lowTxt {
+        font-size: 3.235vw;
+    }
+
+
+  }
diff --git a/src/components/contato/ContactForm/index.js b/src/components/contato/ContactForm/index.js
@@ -1,19 +1,68 @@
+"use client";
+import { useState } from 'react';
 import styles from "./form.module.css"
 import HeaderForm from './HeaderForm'
 
+
+
+
+
 function Form() {
+
+    const [phone, setPhone] = useState("");
+    const [showSuccessMessage, setShowSuccessMessage] = useState(false);
+    const [showFailureMessage, setShowFailureMessage] = useState(false);
+
+
+
+    const formatPhoneNumber = (inputNumber) => {
+        // Remove any non-digit characters from the input
+        const cleanedNumber = inputNumber.replace(/\D/g, '');
+
+        // Insert a hyphen after the fifth digit
+        const formattedNumber = `(${cleanedNumber.slice(0, 2)}) ${cleanedNumber.slice(2, 7)}-${cleanedNumber.slice(7)}`;
+
+        return formattedNumber;
+    }
+
+    const handlePhoneChange = (e) => {
+        const inputNumber = e.target.value;
+        const formattedNumber = formatPhoneNumber(inputNumber);
+        setPhone(formattedNumber);
+    }
+
+    const showSuccess = (e) => {
+        e.preventDefault();
+        setShowSuccessMessage(true);
+        setShowFailureMessage(false); // Reset failure message visibility
+    }
+
+    const handleButtonClick = (e) => {
+        // Trigger form submission when the button is clicked
+        setShowFailureMessage(true);
+        setShowSuccessMessage(false); // Reset success message visibility
+        handleFormSubmit(e);
+    };
+
     return(
-        <div>
+        <div className={styles.mainDiv}>
             <HeaderForm />
-            <form className={styles.form} action="">
+            <form className={styles.form} action="" onSubmit={showSuccess}>
+
                 <div className={styles.row}>
                     <input type="text" required placeholder="Nome" />
-                    <input type="text" required placeholder="E-mail"/>
-                    <input type="text" required placeholder="Telefone"/>
+                    <input type="email" required placeholder="E-mail"/>
+                    <input
+                        type="tel"
+                        required
+                        placeholder="Telefone"
+                        value={phone}
+                        onChange={handlePhoneChange}
+                    />
                 </div>
 
                 <div className={styles.row}>
-                    <select name="Projects" id={styles.project}>
+                    <select name="projects" id={styles.projects}>
                         <option value="" disabled selected>Qual tipo de projeto?</option>
                         <option value="Identidade Visual">Identidade Visual</option>
                         <option value="Design de Produto">Design de Produto</option>
@@ -24,9 +73,9 @@ function Form() {
                         <option value="Design de Serviços">Design de Serviços</option>
                     </select>
 
-                    <input required type="date" placeholder="Prazo de Entrega" id={styles.date}/>
-                    
-                    <select name="HowDidUMeet" id={styles.howDidUMeet}>
+                    <input required type="date" placeholder="Prazo de Entrega:" id={styles.date}/>
+
+                    <select name="howDidUMeet" id={styles.howDidUMeet}>
                         <option value="" disabled selected>Como conheceu a Faísca?</option>
                         <option value="Instagram">Instagram</option>
                         <option value="Facebook">Facebook</option>
@@ -37,11 +86,20 @@ function Form() {
 
                     </select>
                 </div>
+
+                <textarea className={styles.aboutProject} rows="4" required placeholder="Nos conte mais detalhes sobre o seu projeto!"></textarea>
 
-                <input className={styles.aboutProject} required type="text" placeholder="Nos conte mais detalhes sobre o seu projeto!"/>
 
-                <input className={styles.submit} type="submit" placeholder="Enviar"/>
+                <input className={styles.submit} type="submit" onClick={handleButtonClick} placeholder="Enviar"/>
             </form>
+
+            {showSuccessMessage && (
+                <div className={styles.rectangleSuccess} style={{ display: 'inline-block' }}>Sua resposta foi enviada!</div>
+            )}
+            {showFailureMessage && (
+                <div className={styles.rectangleFailed} style={{ display: 'inline-block' }}>Existem campos que devem ser preenchidos</div>
+            )}
+
         </div>
     )
 }