victorAnumudu
197 lines
12 KiB
JavaScript
197 lines
12 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-start">
|
||
{/* IMAGE BLOCK */}
|
||
<div className="col-md-6 col-lg-6">
|
||
<div className="img-block left-column wow fadeInRight">
|
||
<img className="img-fluid" src="/images/contact-us-page.png" alt="content-image"/>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div className="col-md-6 col-lg-6">
|
||
<div className="form-holder">
|
||
<Formik
|
||
initialValues={initialValues}
|
||
validationSchema={validationSchema}
|
||
onSubmit={handleContactMutation}
|
||
>
|
||
{(props) => {
|
||
return (
|
||
<Form 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 how 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>Please provide specific details regarding your request or any feedback you wish to share.</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 protecting your privacy. MERMS uses the information you provide to communicate with you regarding our relevant content, products, and services. You may unsubscribe from these communications at any time.
|
||
</p>
|
||
</div>
|
||
{/* Contact Form Message */}
|
||
<div className="col-lg-12 contact-form-msg">
|
||
<span className="loading"/>
|
||
</div>
|
||
</Form>
|
||
);
|
||
}}
|
||
</Formik>
|
||
</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>
|
||
</>
|
||
)
|
||
} |