victorAnumudu
216 lines
13 KiB
JavaScript
216 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 * as Yup from "yup";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { sendContactMsg } from "../components/services/services";
|
|
|
|
export default function Home() {
|
|
const t = useTranslations("ContactsPage")
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
subject: Yup.string().required(t("required")),
|
|
name: Yup.string().required(t("required")),
|
|
email: Yup.string().required(t("required")),
|
|
message: Yup.string().required(t("required")),
|
|
})
|
|
|
|
const initialValues = {
|
|
subject: '',
|
|
name: '',
|
|
email: '',
|
|
message: ''
|
|
};
|
|
|
|
const contactMutation = useMutation({
|
|
mutationFn: (fields) => {
|
|
return sendContactMsg(fields)
|
|
},
|
|
onSuccess: (res) => {
|
|
// if (res?.data?.resultCode != '0') {
|
|
// throw({message: res?.data?.resultDescription})
|
|
// }
|
|
window.scrollTo(0, 0);
|
|
},
|
|
// onSettled: () => {
|
|
// setTimeout(() => {
|
|
// contactMutation.reset()
|
|
// }, 3000)
|
|
// }
|
|
// onError: (err) => {
|
|
// console.log('err', err)
|
|
// }
|
|
})
|
|
|
|
const handleContactMutation = (values) => {
|
|
let reqData = {
|
|
...values
|
|
}
|
|
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">
|
|
<h2 className="s-52 w-700">{t("title")}</h2>
|
|
<p className="p-lg">{t("description")}</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 */}
|
|
{contactMutation.isSuccess ?
|
|
<div className='w-100 text-center'>
|
|
<p className='p-lg' style={{lineHeight: '30px'}}>
|
|
Thank you for reaching out to us. We have received your message and will treat it with utmost urgency. Our team will respond to you as soon as possible.
|
|
</p>
|
|
<div className="d-flex justify-content-center mt-15" style={{marginTop: '80px'}}>
|
|
<Link href="/" className="btn btn--theme hover--theme submit">
|
|
Return Home
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
:contactMutation.isError ?
|
|
<div className='w-100 text-center'>
|
|
<p className='p-lg' style={{lineHeight: '30px', color: 'red'}}>
|
|
Opps! An error occured, please try again.
|
|
</p>
|
|
<div className="d-flex justify-content-center mt-15" style={{marginTop: '80px'}}>
|
|
<button onClick={()=>contactMutation.reset()} type='button' className="btn btn--theme hover--theme submit">
|
|
Resend Message
|
|
</button>
|
|
</div>
|
|
</div>
|
|
:
|
|
<>
|
|
<div className="col-md-12 input-subject">
|
|
<p className="p-lg">{t("questionAbout")}{(props.errors.subject && props.touched.subject) &&
|
|
<span style={{display: 'inline'}} className='text-danger'>{props.errors.subject}</span>}</p>
|
|
<span>{t("chooseTopic")}</span>
|
|
<select name='subject' onChange={props.handleChange}
|
|
className="form-select subject"
|
|
aria-label="Default select example">
|
|
<option value=''>{t("selectDefault")}</option>
|
|
<option value='registering or account'>{t("optionRegistering")}</option>
|
|
<option value='using application'>{t("optionApplication")}</option>
|
|
<option value='troubleshooting'>{t("optionTroubleshooting")}</option>
|
|
<option value='data and files'>{t("optionData")}</option>
|
|
<option value='others'>{t("optionOther")}</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-12">
|
|
<p className="p-lg">{t("nameLabel")}{(props.errors.name && props.touched.name) &&
|
|
<span style={{display: 'inline'}} className='text-danger'>{props.errors.name}</span>}</p>
|
|
<span>{t("namePlaceholder")}</span>
|
|
<input type="text" onChange={props.handleChange}
|
|
name="name" className="form-control name"
|
|
placeholder={t("nameInput")}/>
|
|
</div>
|
|
<div className="col-md-12">
|
|
<p className="p-lg">{t("emailLabel")}{(props.errors.email && props.touched.email) &&
|
|
<span style={{display: 'inline'}} className='text-danger'>{props.errors.email}</span>}</p>
|
|
<span>{t("emailPlaceholder")}</span>
|
|
<input type="text" onChange={props.handleChange}
|
|
name="email" className="form-control email"
|
|
placeholder={t("emailInput")}/>
|
|
</div>
|
|
<div className="col-md-12">
|
|
<p className="p-lg">{t("messageLabel")}{(props.errors.message && props.touched.message) &&
|
|
<span style={{display: 'inline'}} className='text-danger'>{props.errors.message}</span>}</p>
|
|
<span>{t("messagePlaceholder")}</span>
|
|
<textarea onChange={props.handleChange}
|
|
className="form-control message"
|
|
name="message" rows={6}
|
|
placeholder={t("messageInput")}/>
|
|
</div>
|
|
<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 ? t("sending") : contactMutation.isSuccess ? t("messageSent") : t("submitRequest")}
|
|
</button>
|
|
</div>
|
|
</>
|
|
}
|
|
<div className="contact-form-notice">
|
|
<p className="p-sm">{t("privacy")}</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>
|
|
</>
|
|
)
|
|
}
|
|
export async function getStaticProps({ locale }) {
|
|
const { getMessages } = await import('../utils/getMessages')
|
|
return {
|
|
props: {
|
|
locale,
|
|
messages: await getMessages(locale),
|
|
}
|
|
}
|
|
}
|