Merge branch 'contact-address' of WrenchBoard/WrenchBoardMainSite2025 into master

app/contact/Forms.js

@@ -17,19 +17,38 @@ function Forms() {
         terms_conditions: false
     })
 
-    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
-
+    
     const handleChange = ({target:{name, value}}) => {
-        setFormDetails(prev => ({...prev, [name]:value}))
+        if(name == 'terms_conditions'){
+            setFormDetails(prev => ({...prev, [name]:!prev.terms_conditions}))
+        }else{
+            setFormDetails(prev => ({...prev, [name]:value}))
+        }
     }
-
+    
     const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
-
+    
+    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
     function handleSubmit(e) {
         e.preventDefault()
+        const isChecked = formDetails.terms_conditions
         setRequestStatus({loading:true, status:false, msg:''})
         if(!validForm){
-            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
+            setRequestStatus({loading:false, status:false, msg:'Please, fill all fields'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        if(!(/^\d{7,15}$/.test(formDetails.phone_number))){
+            setRequestStatus({loading:false, status:false, msg:'Please, enter a valid phone number'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        if(!isChecked){
+            setRequestStatus({loading:false, status:false, msg:'Please, Accept Terms & Conditions'})
             setTimeout(()=>{
                 setRequestStatus({loading:false, status:false, msg:''})
             },3000)
@@ -79,7 +98,7 @@ function Forms() {
                             <div className="contact--info-area">
                                 <h3>Get in touch</h3>
                                 <p>Looking for help? Fill the form and start a new discussion.</p>
-                                <div className="single-info">
+                                {/* <div className="single-info">
                                     <h5>Headquaters</h5>
                                     <p>
                                         <i className="fal fa-home"></i>
@@ -93,7 +112,7 @@ function Forms() {
                                         {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
                                         <br />
                                     </p>
-                                </div>
+                                </div> */}
                                 <div className="single-info">
                                     <h5>Support</h5>
                                     <p>
@@ -135,14 +154,14 @@ function Forms() {
                                             type="email"
                                             name="email"
                                             placeholder="Email Address" 
-                                            maxLength={35} 
+                                            maxLength={55} 
                                             onChange={handleChange}
                                             value={formDetails.email}
                                         />
                                     </div>
                                     <div className="col-md-6">
                                         <input
-                                            type="number"
+                                            type="text"
                                             name="phone_number"
                                             placeholder="Phone Number" 
                                             maxLength={15} 
@@ -151,7 +170,7 @@ function Forms() {
                                         />
                                     </div>
                                     <div className="col-md-12">
-                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={150} value={formDetails.subject} onChange={handleChange}  />
                                     </div>
                                     <div className="col-md-12">
                                         <textarea
@@ -159,6 +178,7 @@ function Forms() {
                                             placeholder="How can we help?"
                                             onChange={handleChange}
                                             value={formDetails.message}
+                                            maxLength={350}
                                         ></textarea>
                                     </div>
                                     <div className="col-md-6">