WrenchBoardMainSite2025/app/contact/Forms.js

"use client"
import React, {useState} from 'react';
import ContactData from '../Services/ContactData';


function Forms() {

    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()
        setRequestStatus({loading:true, status:false, msg:''})
        if(!validForm){
            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
            setTimeout(()=>{
                setRequestStatus({loading:false, status:false, msg:''})
            },3000)
            return
        }

        delete formDetails.terms_conditions

       ContactData(formDetails).then(res =>{
        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 (
        <>
            <section className="contact-section">
                <div className="container">
                    <div className="row">
                        <div className="col-md-4">
                            <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">
                                    <h5>Headquaters</h5>
                                    <p>
                                        <i className="fal fa-home"></i>
                                        {process.env.NEXT_PUBLIC_SUPPORT_US_ADDRESS}
                                    </p>
                                </div>
                                <div className="single-info">
                                    <h5>Phone</h5>
                                    <p>
                                        <i className="fal fa-phone"></i>
                                        {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
                                        <br />
                                    </p>
                                </div>
                                <div className="single-info">
                                    <h5>Support</h5>
                                    <p>
                                        <i className="fal fa-envelope"></i>
                                        {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
                                       
                                    </p>
                                </div>
                                <div className="ab-social">
                                    <h5>Follow Us</h5>
                                    <a className="fac" href={process.env.NEXT_PUBLIC_FACEBOOK_LINK}>
                                        <i className="fab fa-facebook-f"></i>
                                    </a>
                                    <a className="twi" href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
                                        {/* <i className="fab fa-twitter"></i> */}
                                        <i className="fab fa-x-twitter" />
                                    </a>
                                    <a className="you" href="#">
                                        <i className="fab fa-youtube"></i>
                                    </a>
                                    <a className="lin" href={process.env.NEXT_PUBLIC_LINKEDIN_LINK}>
                                        <i className="fab fa-linkedin-in"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-8">
                            <div className="contact-form">
                                <h4>Let’s Connect</h4>
                                <form onSubmit={handleSubmit} className="row">
                                    <div className="col-md-6">
                                        <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="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
                                    </div>
                                    <div className="col-md-6">
                                        <input
                                            type="email"
                                            name="email"
                                            placeholder="Email Address" 
                                            maxLength={35} 
                                            onChange={handleChange}
                                            value={formDetails.email}
                                        />
                                    </div>
                                    <div className="col-md-6">
                                        <input
                                            type="number"
                                            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} 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" 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"  
                                            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>
                    </div>
                </div>
            </section>

            <div className="bisylms-map">
                <iframe
                    title="map"
                    src="https://maps.google.com/maps?width=720&amp;height=600&amp;hl=en&amp;coord=33.8573837,-84.4766235&amp;q=Cumberland+Pkwy+SE,+Atlanta,+GA+30339&amp;ie=UTF8&amp;t=p&amp;z=16&amp;iwloc=B&amp;output=embed"
                ></iframe>
            </div>
        </>
    );
}

export default Forms;