Merge branch 'myFit--ContactPageForm' of MyFit/www-myfit into master
This commit is contained in:
Gogs
+223
-51
@@ -1,24 +1,128 @@
|
||||
/** @format */
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import Bredcrumb from "../Bredcrumb/Main";
|
||||
import BGImg from "../../assets/images/bread_crumb_bg.png";
|
||||
import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
|
||||
import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
|
||||
import axios from "axios";
|
||||
|
||||
import SiteService from "../../vendors/service/siteService";
|
||||
|
||||
// Form Inputs
|
||||
const FormInput = (props) => {
|
||||
let {
|
||||
name,
|
||||
type,
|
||||
placeholder,
|
||||
required,
|
||||
maxLenght,
|
||||
errorMessage,
|
||||
value,
|
||||
onChange,
|
||||
pattern,
|
||||
} = props;
|
||||
|
||||
const [focused, setFocused] = useState(false);
|
||||
const handleFocus = () => {
|
||||
return setFocused(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<input
|
||||
name={name}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className="form-control"
|
||||
maxLength={maxLenght}
|
||||
required={required}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onBlur={handleFocus}
|
||||
pattern={pattern}
|
||||
focused={focused.toString()}
|
||||
/>
|
||||
<span>{errorMessage}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Main = ({ brdcum }) => {
|
||||
let [countries, setCountries] = useState([]) // initial state for country dropdown
|
||||
let countryClass = new SiteService() // instantiating the class
|
||||
|
||||
let response = document.getElementById("contact_loader");
|
||||
let contact_body = document.getElementById("contact_body");
|
||||
let errText = document.getElementById("errText");
|
||||
let navigate = useNavigate();
|
||||
|
||||
// Form Validation
|
||||
const [values, setValues] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
message: "",
|
||||
country: "",
|
||||
}); //initial state values
|
||||
const [countries, setCountries] = useState([]); // initial state for country dropdown
|
||||
const [myData, setMyData] = useState(null);
|
||||
// Gave a generic name for multiple calls
|
||||
const API_CALL = new SiteService(); // instantiating the class
|
||||
// API CALL
|
||||
const allCountry = () => {
|
||||
return countryClass.countryData();
|
||||
}
|
||||
return API_CALL.countryData();
|
||||
};
|
||||
const contactForm = async (value) => {
|
||||
return await API_CALL.contactData(value);
|
||||
};
|
||||
|
||||
const onChange = (e) => {
|
||||
setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
};
|
||||
console.log(values);
|
||||
|
||||
// Submitting form
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
response.innerHTML = `<div
|
||||
class="loader loader-sm"
|
||||
id="loader-1" style='margin-right: 20px'></div>`;
|
||||
|
||||
contactForm(values)
|
||||
.then((contact) => {
|
||||
setMyData(contact);
|
||||
|
||||
// Checking for errors
|
||||
if (contact?.data?.status < 1 || contact?.data?.message_id == "")
|
||||
return (errText.textContent =
|
||||
"unable to send your message, please try able");
|
||||
else {
|
||||
response.innerHTML = `<p> SEND MESSAGE </p>`;
|
||||
|
||||
contact_body.innerHTML = `<div class='contact_body animate pop'>
|
||||
<div><img /></div>
|
||||
<p>We have received your message and will follow up promptly.</p>
|
||||
</div>`;
|
||||
setTimeout(() => {
|
||||
navigate("/");
|
||||
}, 10000);
|
||||
|
||||
setValues((prev) => ({ ...prev, [e.target.name]: "" }));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
//CALLS THE API AFTER COMPONENT LOADS
|
||||
useEffect(()=>{
|
||||
allCountry().then((data)=> setCountries(Object.values(data.data)))
|
||||
},[])
|
||||
useEffect(() => {
|
||||
allCountry().then((data) => setCountries(Object.values(data.data)));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(myData);
|
||||
}, [myData]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -71,107 +175,175 @@ const Main = ({ brdcum }) => {
|
||||
/>
|
||||
)}
|
||||
|
||||
<section className="contact_page_section" id="contact">
|
||||
<section
|
||||
className="contact_page_section"
|
||||
id="contact">
|
||||
<div className="container">
|
||||
<div className="contact_inner">
|
||||
<div className="contact_form">
|
||||
<div
|
||||
className="contact_form"
|
||||
id="contact_body">
|
||||
<div className="section_title">
|
||||
<h2>
|
||||
Leave a <span>message</span>
|
||||
<span>Leave a</span> message
|
||||
</h2>
|
||||
<p>Fill up form below, our team will get back soon</p>
|
||||
</div>
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<FormInput
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
errorMessage="Please enter your name"
|
||||
required={true}
|
||||
maxLenght={35}
|
||||
value={values.name}
|
||||
onChange={onChange}
|
||||
pattern="^[A-Za-z]{1,35}$"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
errorMessage="It should be a valid email address!"
|
||||
required={true}
|
||||
maxLenght={35}
|
||||
value={values.email}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
||||
<div className="form-group">
|
||||
<select className="form-control">
|
||||
<option value="">Country</option>
|
||||
{countries.length > 0 && countries.map((country, index) => <option key={index} value={country}>{country}</option>)}
|
||||
<select
|
||||
className="form-control"
|
||||
name="country"
|
||||
value={values.country}
|
||||
onChange={onChange}
|
||||
required>
|
||||
<option
|
||||
value={""}
|
||||
onCha>
|
||||
Country
|
||||
</option>
|
||||
{countries.length > 0 &&
|
||||
countries.map((country, index) => (
|
||||
<option
|
||||
key={index}
|
||||
value={country}>
|
||||
{country}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Phone"
|
||||
className="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormInput
|
||||
name="phone"
|
||||
type="text"
|
||||
placeholder="Phone"
|
||||
errorMessage="It should be a valid phone number!"
|
||||
maxLenght={15}
|
||||
value={values.phone}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
name="msg"
|
||||
className="form-control"
|
||||
placeholder="Your message"
|
||||
></textarea>
|
||||
value={values.msg}
|
||||
onChange={onChange}
|
||||
maxLength={350}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group term_check">
|
||||
<input type="checkbox" id="term" />
|
||||
<input
|
||||
type="checkbox"
|
||||
id="term"
|
||||
onChange={onChange}
|
||||
required
|
||||
/>
|
||||
<label htmlFor="term">
|
||||
I agree to the terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group mb-0">
|
||||
<button type="submit" className="btn puprple_btn">
|
||||
SEND MESSAGE
|
||||
<button
|
||||
type="submit"
|
||||
className="btn puprple_btn contact_btn"
|
||||
aria-label="submit form"
|
||||
id="contact_loader">
|
||||
<p> SEND MESSAGE </p>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/* Error Tag */}
|
||||
<p id="errText" />
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="contact_info">
|
||||
<div className="icon">
|
||||
<img src="assets/images/contact_message_icon.png" alt="image" />
|
||||
<img
|
||||
src="assets/images/contact_message_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<div className="section_title">
|
||||
<h2>
|
||||
Have any <span>question?</span>
|
||||
<span> Have any </span>question?
|
||||
</h2>
|
||||
<p>
|
||||
If you have any question about our product, service, payment
|
||||
or company, Visit our <Link to="/faq">FAQs page.</Link>
|
||||
</p>
|
||||
</div>
|
||||
<Link to="/faq" className="btn puprple_btn">
|
||||
<Link
|
||||
to="/faq"
|
||||
className="btn puprple_btn">
|
||||
READ FAQ
|
||||
</Link>
|
||||
<ul className="contact_info_list">
|
||||
<li>
|
||||
<div className="img">
|
||||
<img src="assets/images/mail_icon.png" alt="image" />
|
||||
<img
|
||||
src="assets/images/mail_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Email Us</span>
|
||||
<Link to="#">example@gmail.com</Link>
|
||||
<a href={`mailto: ${process.env.REACT_APP_SUPPORT_EMAIL}`}>
|
||||
{process.env.REACT_APP_SUPPORT_EMAIL}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="img">
|
||||
<img src="assets/images/call_icon.png" alt="image" />
|
||||
<img
|
||||
src="assets/images/call_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Call Us</span>
|
||||
<Link to="#">+1 (888) 553-46-11</Link>
|
||||
<a href={`tel: ${process.env.REACT_APP_US_PHONE}`}>
|
||||
{process.env.REACT_APP_US_PHONE}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="img">
|
||||
<img src="assets/images/location_icon.png" alt="image" />
|
||||
<img
|
||||
src="assets/images/location_icon.png"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>Visit Us</span>
|
||||
<p>5687, Business Avenue, New York, USA 5687</p>
|
||||
<p>{process.env.REACT_APP_US_ADDRESS}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -180,7 +352,7 @@ const Main = ({ brdcum }) => {
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am map_section">
|
||||
<div className="container"></div>
|
||||
<div className="container" />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user