language implementation MERMS
This commit is contained in:
+41
-54
@@ -2,16 +2,17 @@ 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";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function Home() {
|
||||
const t = useTranslations("ContactsPage")
|
||||
|
||||
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"),
|
||||
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 = {
|
||||
@@ -56,13 +57,8 @@ export default function Home() {
|
||||
<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>
|
||||
<h2 className="s-52 w-700">{t("title")}</h2>
|
||||
<p className="p-lg">{t("description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,74 +86,56 @@ export default function Home() {
|
||||
<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>
|
||||
<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=''>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>
|
||||
<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>
|
||||
{/* 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>
|
||||
<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="Your Name*"/>
|
||||
placeholder={t("nameInput")}/>
|
||||
</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>
|
||||
<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="Email Address*"/>
|
||||
placeholder={t("emailInput")}/>
|
||||
</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>
|
||||
<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="I have a problem with..."/>
|
||||
placeholder={t("messageInput")}/>
|
||||
</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'}
|
||||
{contactMutation.isPending ? t("sending") : contactMutation.isSuccess ? t("messageSent") : t("submitRequest")}
|
||||
</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>
|
||||
<p className="p-sm">{t("privacy")}</p>
|
||||
</div>
|
||||
{/* Contact Form Message */}
|
||||
<div className="col-lg-12 contact-form-msg">
|
||||
@@ -194,4 +172,13 @@ export default function Home() {
|
||||
</Layout>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
export async function getStaticProps({ locale }) {
|
||||
const { getMessages } = await import('../utils/getMessages')
|
||||
return {
|
||||
props: {
|
||||
locale,
|
||||
messages: await getMessages(locale),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user