Updated footer component #28
+109
-41
@@ -1,40 +1,92 @@
|
||||
import React from 'react';
|
||||
import React, {useState} from 'react';
|
||||
import getConfig from './../../Config/config'
|
||||
import ContactData from '../../Services/ContactData';
|
||||
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
// console.log('You clicked submit.');
|
||||
// console.log(e);
|
||||
// debugger;
|
||||
const firstname = e.target['f-name'].value;
|
||||
const lastname = e.target['l-name'].value;
|
||||
const email = e.target['email'].value;
|
||||
const phone = e.target['phone'].value;
|
||||
const subject = e.target['subject'].value;
|
||||
const message = e.target['message'].value;
|
||||
const terms = e.target['terms-conditions'].checked;
|
||||
//alert(terms);
|
||||
|
||||
var callData = [{
|
||||
"firstname": firstname,
|
||||
"lastname": lastname,
|
||||
"email": email,
|
||||
"phone": phone,
|
||||
"subject": subject,
|
||||
"message": message,
|
||||
"channel": 'WEB'
|
||||
}];
|
||||
|
||||
const callRet = ContactData(callData);
|
||||
console.log('You clicked submit========> '+ callRet);
|
||||
|
||||
const handleChange = ({target:{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'})
|
||||
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)
|
||||
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 (
|
||||
@@ -46,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>
|
||||
@@ -57,9 +109,8 @@ function Forms() {
|
||||
<i className="fal fa-home"></i>
|
||||
{process.env.REACT_APP_SUPPORT_US_ADDRESS}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div className="single-info">
|
||||
</div> */}
|
||||
{/* <div className="single-info">
|
||||
<h5>Phone</h5>
|
||||
<p>
|
||||
<i className="fal fa-phone"></i>
|
||||
@@ -67,7 +118,7 @@ function Forms() {
|
||||
<br />
|
||||
{process.env.REACT_APP_SUPPORT_PHONE}
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="single-info">
|
||||
<h5>Support</h5>
|
||||
<p>
|
||||
@@ -98,47 +149,64 @@ 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
|
||||
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"
|
||||
name="phone"
|
||||
type="text"
|
||||
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={150} value={formDetails.subject} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="How can we help?"
|
||||
onChange={handleChange}
|
||||
value={formDetails.message}
|
||||
maxLength={350}
|
||||
></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>
|
||||
|
||||
@@ -25,7 +25,7 @@ function FooterHomeOne({ className }) {
|
||||
<a href="/service">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
<div className="social mt-30">
|
||||
{/* <div className="social mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href={site.facebook_link}>
|
||||
@@ -38,8 +38,7 @@ function FooterHomeOne({ className }) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
@@ -96,20 +95,37 @@ function FooterHomeOne({ className }) {
|
||||
<i className="fal fa-envelope" /> {site.support_email}
|
||||
</a>
|
||||
</li>
|
||||
{/*<li>*/}
|
||||
{/* <a href="#">*/}
|
||||
{/* <i className="fal fa-phone" /> 404-855-7966*/}
|
||||
{/* </a>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li>*/}
|
||||
{/* <a href="#">*/}
|
||||
{/* <i className="fal fa-map-marker-alt" />Atlanta, GA 30339*/}
|
||||
{/* </a>*/}
|
||||
{/*</li>*/}
|
||||
{/* <li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone" /> 404-855-7966
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt" />Atlanta, GA 30339
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
<div className='footer-about-widget'>
|
||||
<div className="social mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href={site.facebook_link}>
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="twi" href={process.env.REACT_APP_TWITTER_LINK}>
|
||||
<i className="fab fa-x-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="footer-copyright d-flex align-items-center justify-content-between pt-2">
|
||||
|
||||
Reference in New Issue
Block a user