contact API added

src/Services/ContactData.js

@@ -1,11 +1,12 @@
-import Axios from 'axios';
+import axios from 'axios';
-import getConfig from './../Config/config'
 
-async function ContactData(callData) {
+async function ContactData(reqData) {
-    // debugger;
+    let formData = new FormData()
-    var site = getConfig()[0];
+    for (let value in reqData) {
-    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, callData);
+        formData.append(value, reqData[value]);
-    return response.data.result;
+      }
+    let response = await axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, reqData);
+    return response;
 }
 
 export default ContactData;

src/assets/css/main.css

@@ -6657,13 +6657,13 @@ blockquote cite {
   left: 0;
   top: -710px;
   height: 645px;
-  width: 100%;
+  width: 80vw;
   background-image: url(../images/about-us-main.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
-/* @media only screen and (min-width: 992px) and (max-width: 1200px) {
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-about-page-content::before {
     width: 94vw;
   }
@@ -6672,19 +6672,19 @@ blockquote cite {
   .appie-about-page-content::before {
     width: 100%;
   }
-} */
+}
 @media (max-width: 767px) {
   .appie-about-page-content::before {
     display: none;
   }
 }
-/* @media only screen and (min-width: 576px) and (max-width: 767px) {
+@media only screen and (min-width: 576px) and (max-width: 767px) {
   .appie-about-page-content::before {
     width: 100%;
     height: 400px;
     display: block;
   }
-} */
+}
 
 .appie-how-it-work-content > .title {
   font-size: 44px;

src/components/AboutUs/HeroAbout.js

@@ -5,7 +5,7 @@ function HeroAbout() {
       <div className="appie-about-top-title-area">
         <div className="container">
           <div className="row">
-            <div className="col-12">
+            <div className="col-lg-7">
               <div className="appie-about-top-title">
                 <h2 className="title">Plan and reward accomplishment with ease.</h2>
               </div>

src/components/Contact/Forms.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import getConfig from './../../Config/config'
 import ContactData from '../../Services/ContactData';
 
@@ -7,34 +7,69 @@ function Forms() {
 
     var site = getConfig()[0];
 
+    const [formDetails, setFormDetails] = useState({
+        first_name: '',
+        last_name: '',
+        email: '',
+        subject: '',
+        phone_number: '',
+        action: 1001,
+        message: '',
+        channel: 'WEB',
+        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}))
+    }
+
+    const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
+
     function handleSubmit(e) {
-        e.preventDefault();
+        e.preventDefault()
-      //  console.log('You clicked submit.');
+        setRequestStatus({loading:true, status:false, msg:''})
-      //  console.log(e);
+        if(!validForm){
-       // debugger;
+            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
-        const firstname = e.target['f-name'].value;
+            setTimeout(()=>{
-        const lastname = e.target['l-name'].value;
+                setRequestStatus({loading:false, status:false, msg:''})
-        const email = e.target['email'].value;
+            },3000)
-        const phone = e.target['phone'].value;
+            return
-        const subject = e.target['subject'].value;
+        }
-        const message =  e.target['message'].value;
-        const terms =   e.target['terms-conditions'].checked;
-//alert(terms);
 
-        var callData = [{
+        delete formDetails.terms_conditions
-            "firstname": firstname,
-            "lastname": lastname,
-            "email": email,
-            "phone": phone,
-            "subject": subject,
-            "message": message,
-            "channel": 'WEB'
-        }];
 
-       const callRet = ContactData(callData);
+       ContactData(formDetails).then(res =>{
-       console.log('You clicked submit========> '+ callRet);
+        if(res?.data?.result != '100'){
-
+            setRequestStatus({loading:false, status:false, msg:'failed to send message'})
-      }
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        setRequestStatus({loading:false, status:true, msg:'message Sent'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+            setFormDetails({
+                first_name: '',
+                last_name: '',
+                email: '',
+                subject: '',
+                phone_number: '',
+                action: 1001,
+                message: '',
+                channel: 'WEB',
+                terms_conditions: false
+            })
+        },3000)
+       }).catch(err => {
+        setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+        },3000)
+       });
+    }
 
 
     return (
@@ -99,10 +134,10 @@ function Forms() {
                                 <h4>Let’s Connect</h4>
                                 <form onSubmit={handleSubmit} className="row">
                                     <div className="col-md-6">
-                                        <input type="text" name="f-name" placeholder="First Name"  maxLength={15} />
+                                        <input type="text" name="first_name" placeholder="First Name"  maxLength={15} onChange={handleChange} value={formDetails.first_name} />
                                     </div>
                                     <div className="col-md-6">
-                                        <input type="text" name="l-name" placeholder="Last Name"  maxLength={15} />
+                                        <input type="text" name="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
                                     </div>
                                     <div className="col-md-6">
                                         <input
@@ -110,36 +145,52 @@ function Forms() {
                                             name="email"
                                             placeholder="Email Address" 
                                             maxLength={35} 
+                                            onChange={handleChange}
+                                            value={formDetails.email}
                                         />
                                     </div>
                                     <div className="col-md-6">
                                         <input
                                             type="number"
-                                            name="phone"
+                                            name="phone_number"
                                             placeholder="Phone Number" 
                                             maxLength={15} 
+                                            onChange={handleChange}
+                                            value={formDetails.phone_number}
                                         />
                                     </div>
                                     <div className="col-md-12">
-                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35}  />
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
                                     </div>
                                     <div className="col-md-12">
                                         <textarea
                                             name="message"
                                             placeholder="How can we help?"
+                                            onChange={handleChange}
+                                            value={formDetails.message}
                                         ></textarea>
                                     </div>
                                     <div className="col-md-6">
                                         <div className="condition-check">
-                                            <input id="terms-conditions" name="terms-conditions" type="checkbox" />
+                                            <input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
                                             <label htmlFor="terms-conditions">
                                                 I agree to the <a href="#">Terms & Conditions</a>
                                             </label>
                                         </div>
                                     </div>
                                     <div className="col-md-6 text-right">
-                                        <input type="submit" name="submit" value="Send Message" />
+                                        <input 
+                                            type="submit"  
+                                            value={ requestStatus.loading ? 'Sending...' : 'Send Message'} 
+                                            disabled={requestStatus.loading} 
+                                            className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
+                                        />
                                     </div>
+                                    {/* <div className="p-2 col-12">
+                                        {requestStatus.msg &&
+                                        }
+                                    </div> */}
+                                    <p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
                                 </form>
                             </div>
                         </div>

src/components/HomeOne/FooterHomeOne.js

@@ -16,7 +16,7 @@ function FooterHomeOne({ className }) {
                             <div className="footer-about-widget">
                                 <div className="logo">
                                     <a href="#">
-                                        <img src={logo} alt="WrenchBoard" loading='eager' width={300} height={65} />
+                                        <img src={logo} alt="WrenchBoard" loading='eager' width={175} height={38} />
                                     </a>
                                 </div>
                                 <p>

src/components/lnd/LndParts/Design/Right.js

@@ -13,7 +13,7 @@ export default function Right() {
         {/* <div className='px-2 w-100 mb-2'>  */}
         <div className='color-purple text-center mb-2'>
             {/* <h3 className='color-purple font-25 mb-10'>Ask our <span>&#x275B;&#x275B;<span className='color-blue italic'>wrench</span>Agent&#x275C;&#x275C;</span> Generative AI to assist</h3> */}
-            <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>Wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
+            <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
             <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
         </div>
         {/* </div> */}