contact layout
This commit is contained in:
CHIEFSOFT\ameye
+137
-84
@@ -1,8 +1,9 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
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({
|
||||
@@ -24,25 +25,25 @@ export default function Home() {
|
||||
return null //completePWDReset(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
if (res?.data?.resultCode != '0') {
|
||||
throw({message: res?.data?.resultDescription})
|
||||
}
|
||||
},
|
||||
// onError: (err) => {
|
||||
// console.log('err', err)
|
||||
// }
|
||||
})
|
||||
|
||||
const handleContactMutation = (values) => {
|
||||
let reqData = {
|
||||
...values
|
||||
})
|
||||
|
||||
const handleContactMutation = (values) => {
|
||||
let reqData = {
|
||||
...values
|
||||
}
|
||||
console.log(reqData)
|
||||
setTimeout(() => {
|
||||
contactMutation.reset()
|
||||
}, 3000)
|
||||
// contactMutation.mutate(reqData)
|
||||
}
|
||||
console.log(reqData)
|
||||
setTimeout(()=>{
|
||||
contactMutation.reset()
|
||||
},3000)
|
||||
// contactMutation.mutate(reqData)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -57,85 +58,137 @@ export default function Home() {
|
||||
{/* 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?
|
||||
<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 className="row justify-content-center">
|
||||
<div className="col-md-11 col-lg-10 col-xl-8">
|
||||
<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 know who to send 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/authorising'>Registering/Authorising</option>
|
||||
<option value='using application'>Using Application</option>
|
||||
<option value='troubleshooting'>Troubleshooting</option>
|
||||
<option value='backup/restore'>Backup/Restore</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 real 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>Your OS version, MERMS version & build, steps you did. 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>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
|
||||
<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">
|
||||
<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 know who to send 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/authorising'>Registering/Authorising
|
||||
</option>
|
||||
<option value='using application'>Using
|
||||
Application
|
||||
</option>
|
||||
<option value='troubleshooting'>Troubleshooting
|
||||
</option>
|
||||
<option value='backup/restore'>Backup/Restore
|
||||
</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 real 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>Your OS version, MERMS version & build, steps you did. 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>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {/* END CONTACT FORM */}
|
||||
</div> {/* End container */}
|
||||
</section> {/* END CONTACTS-1 */}
|
||||
{/* 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" />
|
||||
<hr className="divider"/>
|
||||
{/* NEWSLETTER-1
|
||||
============================================= */}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user