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 Layout from "../components/layout/Layout"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { Form, Formik } from 'formik';
|
import {Form, Formik} from 'formik';
|
||||||
import * as Yup from "yup";
|
import * as Yup from "yup";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
|
||||||
const validationSchema = Yup.object().shape({
|
const validationSchema = Yup.object().shape({
|
||||||
@@ -24,25 +25,25 @@ export default function Home() {
|
|||||||
return null //completePWDReset(fields)
|
return null //completePWDReset(fields)
|
||||||
},
|
},
|
||||||
onSuccess: (res) => {
|
onSuccess: (res) => {
|
||||||
if(res?.data?.resultCode != '0'){
|
if (res?.data?.resultCode != '0') {
|
||||||
throw({message: res?.data?.resultDescription})
|
throw({message: res?.data?.resultDescription})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// onError: (err) => {
|
// onError: (err) => {
|
||||||
// console.log('err', err)
|
// console.log('err', err)
|
||||||
// }
|
// }
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleContactMutation = (values) => {
|
const handleContactMutation = (values) => {
|
||||||
let reqData = {
|
let reqData = {
|
||||||
...values
|
...values
|
||||||
|
}
|
||||||
|
console.log(reqData)
|
||||||
|
setTimeout(() => {
|
||||||
|
contactMutation.reset()
|
||||||
|
}, 3000)
|
||||||
|
// contactMutation.mutate(reqData)
|
||||||
}
|
}
|
||||||
console.log(reqData)
|
|
||||||
setTimeout(()=>{
|
|
||||||
contactMutation.reset()
|
|
||||||
},3000)
|
|
||||||
// contactMutation.mutate(reqData)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -57,85 +58,137 @@ export default function Home() {
|
|||||||
{/* Title */}
|
{/* Title */}
|
||||||
<h2 className="s-52 w-700">Questions? Let's Talk</h2>
|
<h2 className="s-52 w-700">Questions? Let's Talk</h2>
|
||||||
{/* Text */}
|
{/* 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
|
Let us know what you are looking for and we’ll get back to you right away
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* CONTACT FORM */}
|
{/* CONTACT FORM */}
|
||||||
<div className="row justify-content-center">
|
|
||||||
<div className="col-md-11 col-lg-10 col-xl-8">
|
<div>
|
||||||
<div className="form-holder">
|
<div className="row d-flex align-items-center">
|
||||||
<Formik
|
{/* IMAGE BLOCK */}
|
||||||
initialValues={initialValues}
|
<div className="col-md-6 col-lg-6">
|
||||||
validationSchema={validationSchema}
|
<div className="img-block left-column wow fadeInRight">
|
||||||
onSubmit={handleContactMutation}
|
<img className="img-fluid" src="/images/img-14.png" alt="content-image" />
|
||||||
>
|
</div>
|
||||||
{(props) => {
|
</div>
|
||||||
return (
|
|
||||||
<Form name="contactform" className="row contact-form">
|
<div className="col-md-6 col-lg-6">
|
||||||
{/* Form Select */}
|
<div className="form-holder">
|
||||||
<div className="col-md-12 input-subject">
|
<Formik
|
||||||
<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>
|
initialValues={initialValues}
|
||||||
<span>Choose a topic, so we know who to send your request to: </span>
|
validationSchema={validationSchema}
|
||||||
<select name='subject' onChange={props.handleChange} className="form-select subject" aria-label="Default select example">
|
onSubmit={handleContactMutation}
|
||||||
<option value=''>This question is about...</option>
|
>
|
||||||
<option value='registering/authorising'>Registering/Authorising</option>
|
{(props) => {
|
||||||
<option value='using application'>Using Application</option>
|
return (
|
||||||
<option value='troubleshooting'>Troubleshooting</option>
|
<Form name="contactform" className="row contact-form">
|
||||||
<option value='backup/restore'>Backup/Restore</option>
|
{/* Form Select */}
|
||||||
<option value='others'>Other</option>
|
<div className="col-md-12 input-subject">
|
||||||
</select>
|
<p className="p-lg">This question is
|
||||||
</div>
|
about:{(props.errors.subject && props.touched.subject) &&
|
||||||
{/* Contact Form Input */}
|
<span style={{display: 'inline'}}
|
||||||
<div className="col-md-12">
|
className='text-danger'>{props.errors.subject}</span>}</p>
|
||||||
<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>Choose a topic, so we know who to send your request to: </span>
|
||||||
<span>Please enter your real name: </span>
|
<select name='subject' onChange={props.handleChange}
|
||||||
<input type="text" onChange={props.handleChange} name="name" className="form-control name" placeholder="Your Name*" />
|
className="form-select subject"
|
||||||
</div>
|
aria-label="Default select example">
|
||||||
<div className="col-md-12">
|
<option value=''>This question is about...</option>
|
||||||
<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>
|
<option
|
||||||
<span>Please carefully check your email address for accuracy</span>
|
value='registering/authorising'>Registering/Authorising
|
||||||
<input type="text" onChange={props.handleChange} name="email" className="form-control email" placeholder="Email Address*" />
|
</option>
|
||||||
</div>
|
<option value='using application'>Using
|
||||||
<div className="col-md-12">
|
Application
|
||||||
<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>
|
</option>
|
||||||
<span>Your OS version, MERMS version & build, steps you did. Be VERY precise!</span>
|
<option value='troubleshooting'>Troubleshooting
|
||||||
<textarea onChange={props.handleChange} className="form-control message" name="message" rows={6} placeholder="I have a problem with..." />
|
</option>
|
||||||
</div>
|
<option value='backup/restore'>Backup/Restore
|
||||||
{/* Contact Form Button */}
|
</option>
|
||||||
<div className="d-flex justify-content-end mt-15 form-btn">
|
<option value='others'>Other</option>
|
||||||
<button
|
</select>
|
||||||
type="submit"
|
</div>
|
||||||
className="btn btn--theme hover--theme submit"
|
{/* Contact Form Input */}
|
||||||
disabled={contactMutation.isPending || contactMutation.isSuccess}
|
<div className="col-md-12">
|
||||||
>
|
<p className="p-lg">Your
|
||||||
{contactMutation.isPending ? 'Sending' : contactMutation.isSuccess ? 'Message Sent' : 'Submit Request'}
|
Name:{(props.errors.name && props.touched.name) &&
|
||||||
</button>
|
<span style={{display: 'inline'}}
|
||||||
</div>
|
className='text-danger'>{props.errors.name}</span>}</p>
|
||||||
<div className="contact-form-notice">
|
<span>Please enter your real name: </span>
|
||||||
<p className="p-sm">We are committed to your privacy. MERMS uses the information you
|
<input type="text" onChange={props.handleChange}
|
||||||
provide us to contact you about our relevant content, products, and services.
|
name="name" className="form-control name"
|
||||||
You may unsubscribe from these communications at any time. For more information,
|
placeholder="Your Name*"/>
|
||||||
check out our <Link href="/privacy">Privacy Policy</Link>.
|
</div>
|
||||||
</p>
|
<div className="col-md-12">
|
||||||
</div>
|
<p className="p-lg">Your Email
|
||||||
{/* Contact Form Message */}
|
Address:{(props.errors.email && props.touched.email) &&
|
||||||
<div className="col-lg-12 contact-form-msg">
|
<span style={{display: 'inline'}}
|
||||||
<span className="loading" />
|
className='text-danger'>{props.errors.email}</span>}</p>
|
||||||
</div>
|
<span>Please carefully check your email address for accuracy</span>
|
||||||
</Form>
|
<input type="text" onChange={props.handleChange}
|
||||||
);
|
name="email" className="form-control email"
|
||||||
}}
|
placeholder="Email Address*"/>
|
||||||
</Formik>
|
</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>
|
</div>
|
||||||
</div> {/* END CONTACT FORM */}
|
{/* End row */}
|
||||||
</div> {/* End container */}
|
</div>
|
||||||
</section> {/* END CONTACTS-1 */}
|
|
||||||
|
|
||||||
|
{/*<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 */}
|
{/* DIVIDER LINE */}
|
||||||
<hr className="divider" />
|
<hr className="divider"/>
|
||||||
{/* NEWSLETTER-1
|
{/* NEWSLETTER-1
|
||||||
============================================= */}
|
============================================= */}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user