%PDF-
%PDF-
Mini Shell
Mini Shell
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Form, Formik, ErrorMessage, Field } from "formik";
import { boolean, string, object } from "yup";
import parse from "html-react-parser";
import {
ArrowsRightWhite,
TwitterIcon,
FbIcon,
InstaIcon,
CloseIcon,
DPLogo,
} from "./Icons";
import { useGlobalContext } from "./store/context/GlobalContext";
// import { useInView } from "./useInView";
function Contact() {
const { contact, footer, setIsColor } = useGlobalContext();
const [msg, setMsg] = useState(false);
const [errMsg, setErrMsg] = useState(false);
// const targetColorRef = useRef(null);
// const targetColorSecondRef = useRef(null);
// const useTarget = useInView(targetColorRef, {
// rootMargin: "200px 0px -700px 0px",
// threshold: 0.8,
// });
// const useSecondTarget = useInView(targetColorSecondRef, {
// rootMargin: "200px 0px -700px 0px",
// threshold: 0.2,
// });
// useEffect(() => {
// if (useTarget) {
// console.log("a");
// setIsColor("white");
// } else if (useSecondTarget) {
// console.log("b");
// setIsColor("original");
// } else {
// setIsColor("original");
// }
// }, [useTarget, useSecondTarget]);
useEffect(() => {
// window.addEventListener("loadstart", () => {
// ScrollTrigger.clearScrollMemory();
// });
// window.history.scrollRestoration = "manual";
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
}, []);
const [legalModal, setLegalModal] = useState(false);
const hideScroll = () => {
let html = document.querySelector("html");
html.classList.add("overflowHidden");
};
const showScroll = () => {
let html = document.querySelector("html");
html.classList.remove("overflowHidden");
};
return (
<div className="mainContact">
<div className="newsBackground">
<div className="intro">
<div className="contactUsDiv">
<h4>{contact?.small_title}</h4>
</div>
<h2>{contact?.title}</h2>
<h1>
<a href={`tel:${contact?.phone}`}>{contact?.phone}</a>
</h1>
</div>
</div>
<div className="content">
<Formik
validationSchema={object({
Email: string().email().required(`Email is required`),
terms: boolean().oneOf(
[true],
"You must accept the terms and conditions"
),
})}
initialValues={{
First_name: "",
Email: "",
Message: "",
terms: false,
}}
onSubmit={async (values, { resetForm }) => {
setMsg(false);
setErrMsg(false);
const { First_name, Email, Message, terms } = values;
let body = {
First_name: First_name,
Email: Email,
Message: Message,
};
const res = await fetch(
`https://api.atvbuggy-dubrovnik.com/wp-json/api/v1/sendMail`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
}
)
.then((response) => response.json())
.then((data) => data);
if (res.status === true) {
resetForm({ values: "" });
setMsg(true);
} else {
setErrMsg(true);
}
}}
>
{({ isSubmitting, isValidating }) => (
<Form>
<div className="form">
<h3>{contact?.form_description}</h3>
<Field
type={"text"}
placeholder={"Enter your name"}
name={"First_name"}
/>
<Field
type={"text"}
placeholder={"Enter your email address"}
name={"Email"}
/>
<ErrorMessage name="Email">
{(msg) => <div className="error-msg">{msg}</div>}
</ErrorMessage>
<Field
type={"text"}
placeholder={"Enter your message here"}
name={"Message"}
/>
<div className="policy">
<div className="conditions">
<Field type="checkbox" name="terms" />
<label htmlFor="terms">
I have read and accepted the{" "}
<Link href={"/terms-and-conditions"}>
Terms and Conditions
</Link>{" "}
and <Link href={"/privacy-policy"}>Privacy Policy</Link>.
</label>
</div>
<ErrorMessage name="terms">
{(msg) => <div className="error-msg">{msg}</div>}
</ErrorMessage>
{msg ? (
<p className="success-msg">Thank you for contacting us!</p>
) : (
<>
<button
type="submit"
disabled={isSubmitting || isValidating}
className="disabled-btn"
>
<div className="arrowsDiv">
<ArrowsRightWhite />
</div>
Submit Your Message
</button>
{errMsg && (
<p className="error-msg">
Something went wrong, please try again
</p>
)}
</>
)}
<p className="email-text">
Or send us and email to:{" "}
<a
href={"mailto:" + footer?.socials?.email}
>{`${footer?.socials?.email}`}</a>
</p>
</div>
</div>
</Form>
)}
</Formik>
<div className="newsletter">
{/* <h2>Click on the image for Google maps location.</h2> */}
<Link
href={contact?.location_url ? contact?.location_url : "/"}
passHref
>
<a target={"_blank"} rel="noopener noreferrer">
<span className="newsletterLink">
Click on the image for Google maps location.
</span>
{contact?.location_image ? (
<Image
src={`${contact?.location_image}`}
width={736}
height={770}
objectFit="cover"
objectPosition="right"
/>
) : (
""
)}
</a>
</Link>
</div>
</div>
<div className="footer">
<a
href={"https://digitalpresent.io/"}
target="_blank"
rel="noopener noreferrer"
aria-label="developed by Digital Present"
className={"developed"}
>
<p className={"developed__p"}>Developed by</p>
<DPLogo color={"#fff"} />
</a>
<p>Copyright {new Date().getFullYear()} ATV. All rights reserved.</p>
{footer?.footer?.slice(0, 1).map((links, index) => (
<div className="legal" key={index}>
<p
onClick={() => {
setLegalModal(true);
hideScroll();
}}
>
{links?.title}
</p>
<div
className="legal-modal"
style={{ display: legalModal ? "flex" : "none" }}
>
<div className="legal-modal-content">
<button
onClick={(e) => {
setLegalModal(false);
showScroll();
}}
>
<CloseIcon />
</button>
<p>{parse(footer?.legal)}</p>
</div>
</div>
</div>
))}
{footer?.footer?.slice(1).map((links, index) => (
<div className="terms" key={index}>
<Link href={`/${links.slug}`}>
<p>{links.title}</p>
</Link>
</div>
))}
<div className="icons">
{`${footer?.socials?.tw}` ? (
<a href={`${footer?.socials?.tw}`} target="_blank" rel="noreferrer">
<TwitterIcon />
</a>
) : (
""
)}
{`${footer?.socials?.in}` ? (
<a href={`${footer?.socials?.in}`} target="_blank" rel="noreferrer">
<InstaIcon />
</a>
) : (
""
)}
{`${footer?.socials?.fb}` ? (
<a href={`${footer?.socials?.fb}`} target="_blank" rel="noreferrer">
<FbIcon />
</a>
) : (
""
)}
</div>
</div>
</div>
);
}
export default Contact;
Zerion Mini Shell 1.0