CHIEFSOFT\ameye
202 lines
13 KiB
JavaScript
202 lines
13 KiB
JavaScript
import {useMutation} from '@tanstack/react-query';
|
||
import Layout from "../components/layout/Layout"
|
||
import Link from "next/link"
|
||
//import {Form, Formik} from 'formik';
|
||
//import {Form, Formik} from 'formik';
|
||
import * as Yup from "yup";
|
||
|
||
export default function Home() {
|
||
|
||
const validationSchema = Yup.object().shape({
|
||
subject: Yup.string().required("Required"),
|
||
name: Yup.string().required("Required"),
|
||
email: Yup.string().required("Required"),
|
||
message: Yup.string().required("Required"),
|
||
})
|
||
|
||
const initialValues = {
|
||
subject: '',
|
||
name: '',
|
||
email: '',
|
||
message: ''
|
||
};
|
||
|
||
const contactMutation = useMutation({
|
||
mutationFn: (fields) => {
|
||
return null //completePWDReset(fields)
|
||
},
|
||
onSuccess: (res) => {
|
||
if (res?.data?.resultCode != '0') {
|
||
throw({message: res?.data?.resultDescription})
|
||
}
|
||
},
|
||
// onError: (err) => {
|
||
// console.log('err', err)
|
||
// }
|
||
})
|
||
|
||
const handleContactMutation = (values) => {
|
||
let reqData = {
|
||
...values
|
||
}
|
||
console.log(reqData)
|
||
setTimeout(() => {
|
||
contactMutation.reset()
|
||
}, 3000)
|
||
contactMutation.mutate(reqData)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
|
||
<div>
|
||
<section id="contacts-1" className="pb-50 inner-page-hero contacts-section division">
|
||
<div className="container">
|
||
{/* SECTION TITLE */}
|
||
<div className="row justify-content-center">
|
||
<div className="col-md-10 col-lg-9">
|
||
<div className="section-title text-center mb-80">
|
||
{/* Title */}
|
||
<h2 className="s-52 w-700">Questions? Let's Talk</h2>
|
||
{/* Text */}
|
||
<p className="p-lg">Want to learn more about MERMS, get a quote, or speak with
|
||
an expert?
|
||
Let us know what you are looking for and we’ll get back to you right away
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* CONTACT FORM */}
|
||
|
||
<div>
|
||
<div className="row d-flex align-items-center">
|
||
{/* IMAGE BLOCK */}
|
||
<div className="col-md-6 col-lg-6">
|
||
<div className="img-block left-column wow fadeInRight">
|
||
<img className="img-fluid" src="/images/img-14.png" alt="content-image"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-6 col-lg-6">
|
||
<div className="form-holder">
|
||
<div
|
||
initialValues={initialValues}
|
||
validationSchema={validationSchema}
|
||
onSubmit={handleContactMutation}
|
||
>
|
||
{(props) => {
|
||
return (
|
||
<div name="contactform" className="row contact-form">
|
||
{/* Form Select */}
|
||
<div className="col-md-12 input-subject">
|
||
<p className="p-lg">This question is
|
||
about:{(props.errors.subject && props.touched.subject) &&
|
||
<span style={{display: 'inline'}}
|
||
className='text-danger'>{props.errors.subject}</span>}</p>
|
||
<span>Choose a topic, so we can best determine hot to handle your request to: </span>
|
||
<select name='subject' onChange={props.handleChange}
|
||
className="form-select subject"
|
||
aria-label="Default select example">
|
||
<option value=''>This question is about...</option>
|
||
<option
|
||
value='registering or account'>Registering or
|
||
Accounts
|
||
</option>
|
||
<option value='using application'>Application
|
||
</option>
|
||
<option value='troubleshooting'>Troubleshooting
|
||
</option>
|
||
<option value='data and files'>Data or Files
|
||
</option>
|
||
<option value='others'>Other</option>
|
||
</select>
|
||
</div>
|
||
{/* Contact Form Input */}
|
||
<div className="col-md-12">
|
||
<p className="p-lg">Your
|
||
Name:{(props.errors.name && props.touched.name) &&
|
||
<span style={{display: 'inline'}}
|
||
className='text-danger'>{props.errors.name}</span>}</p>
|
||
<span>Please enter your name: </span>
|
||
<input type="text" onChange={props.handleChange}
|
||
name="name" className="form-control name"
|
||
placeholder="Your Name*"/>
|
||
</div>
|
||
<div className="col-md-12">
|
||
<p className="p-lg">Your Email
|
||
Address:{(props.errors.email && props.touched.email) &&
|
||
<span style={{display: 'inline'}}
|
||
className='text-danger'>{props.errors.email}</span>}</p>
|
||
<span>Please carefully check your email address for accuracy:</span>
|
||
<input type="text" onChange={props.handleChange}
|
||
name="email" className="form-control email"
|
||
placeholder="Email Address*"/>
|
||
</div>
|
||
<div className="col-md-12">
|
||
<p className="p-lg">Explain your question in
|
||
details:{(props.errors.message && props.touched.message) &&
|
||
<span style={{display: 'inline'}}
|
||
className='text-danger'>{props.errors.message}</span>}</p>
|
||
<span>Details like yur Your OS version, browser and any specific steps will really help. Be VERY precise!</span>
|
||
<textarea onChange={props.handleChange}
|
||
className="form-control message"
|
||
name="message" rows={6}
|
||
placeholder="I have a problem with..."/>
|
||
</div>
|
||
{/* Contact Form Button */}
|
||
<div className="d-flex justify-content-end mt-15 form-btn">
|
||
<button
|
||
type="submit"
|
||
className="btn btn--theme hover--theme submit"
|
||
disabled={contactMutation.isPending || contactMutation.isSuccess}
|
||
>
|
||
{contactMutation.isPending ? 'Sending' : contactMutation.isSuccess ? 'Message Sent' : 'Submit Request'}
|
||
</button>
|
||
</div>
|
||
<div className="contact-form-notice">
|
||
<p className="p-sm">We are committed to your privacy.
|
||
MERMS uses the information you
|
||
provide us to contact you about our relevant
|
||
content, products, and services.
|
||
You may unsubscribe from these communications at any
|
||
time. For more information,
|
||
check out our <Link href="/privacy">Privacy
|
||
Policy</Link>.
|
||
</p>
|
||
</div>
|
||
{/* Contact Form Message */}
|
||
<div className="col-lg-12 contact-form-msg">
|
||
<span className="loading"/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}}
|
||
</div>
|
||
</div>
|
||
{/*</div>*/}
|
||
</div>
|
||
</div>
|
||
{/* End row */}
|
||
</div>
|
||
|
||
|
||
{/*<div className="row justify-content-center">*/}
|
||
{/* <div className="col-md-11 col-lg-10 col-xl-8">*/}
|
||
|
||
{/* </div>*/}
|
||
{/*</div> */}
|
||
</div>
|
||
{/* End container */}
|
||
</section>
|
||
{/* END CONTACTS-1 */}
|
||
{/* DIVIDER LINE */}
|
||
<hr className="divider"/>
|
||
{/* NEWSLETTER-1
|
||
============================================= */}
|
||
|
||
</div>
|
||
|
||
</Layout>
|
||
</>
|
||
)
|
||
} |