%PDF-
%PDF-
Mini Shell
Mini Shell
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import parse from "html-react-parser";
import { string, object } from "yup";
import CustomHead from "../../../src/Components/Global/CustomHead";
//icons
import {
ArrowsRightBlack,
BookCheckmark,
BookNotCheckmark,
} from "../../../src/Components/Icons";
import { BookBorder, ToursBg } from "../../../src/Components/Backgrounds";
import Footer from "../../../src/Components/Footer";
import { ErrorMessage, Field, Form, Formik } from "formik";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
// import { useGlobalContext } from "../../../src/Components/store/context/GlobalContext";
// import { useInView } from "../../../src/Components/useInView";
gsap.registerPlugin(ScrollTrigger);
function RentDetails({ data, title, seo }) {
const router = useRouter();
const { slug } = router.query;
const [duration, setDuration] = useState(data.prices[0].duration);
const [price, setPrices] = useState(data.prices[0].price);
const [modal, setModal] = useState(false);
const [msg, setMsg] = useState("");
// const { setIsColor } = useGlobalContext();
// const targetColorRef = useRef(null);
// const useTarget = useInView(targetColorRef, {
// rootMargin: "200px 0px 0px 0px",
// threshold: 0.4,
// });
// useEffect(() => {
// if (useTarget) {
// setIsColor("white");
// } else {
// setIsColor("original");
// }
// }, [useTarget]);
useEffect(() => {
setTimeout(() => {
setDuration(data.prices[0].duration);
setPrices(data.prices[0].price);
}, []);
}, [slug]);
return (
<>
<CustomHead data={seo} />
<div className="mainTourDetails">
<div className="animationWrap">
<div className="animate">
<div className="items sec">
<span>Rent</span>
<span>Rent</span>
</div>
<div className="items">
<span>Rent</span>
<span>Rent</span>
</div>
</div>
</div>
<div className="content">
<div className="contentWrapper">
<div className="toursBackground">
<ToursBg />
</div>
<div className="toursDiv">
<h4>Rent</h4>
</div>
<h1>{title}</h1>
<div className="intro">
<div className="introSpecs"></div>
<div className="image">
<Image
src={data?.image_hero}
alt=""
layout="responsive"
width={1550}
height={819}
objectFit="cover"
/>
</div>
<div className="about">
<div className="info">
<div className="aboutDiv">
<h4>{data?.small_title_about}</h4>
</div>
{parse(data?.title_about)}
<p>{parse(data?.description_about)}</p>
</div>
<div className="imgInfo">
{data?.max_people && (
<h5>Max {data?.max_people} people per vehicle</h5>
)}
<div className="img">
<Image
src={data?.image_about}
alt=""
width={586}
height={615}
objectFit="contain"
quality={100}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="bookNow">
<div className="animationWrap">
<div className="animate">
<div className="items sec">
<span>Rent </span>
<span>Rent</span>
</div>
<div className="items">
<span>Rent</span>
<span>Rent</span>
</div>
</div>
</div>
<div className="bookIntro">
<div className="bookNowDiv">
<h4>{data?.small_title_rent}</h4>
</div>
<h2>{data?.small_title_rent}</h2>
<h1>{parse(data?.title_rent)}</h1>
</div>
<div className="bookContent">
<div className="requirements">
<div className="included">
<h1>Included in price</h1>
<ul>
{data?.price_includes.map((item, idx) => {
return (
<li key={idx}>
<BookCheckmark /> {item.text}
</li>
);
})}
</ul>
</div>
<BookBorder />
{/* <div className="notIncluded">
<h1>Not included in price</h1>
<ul>
{data?.price_not_includes.map((item, idx) => {
return (
<li key={idx}>
<BookNotCheckmark /> {item.text}
</li>
);
})}
</ul>
<BookBorder />
</div> */}
<div className="included">
<h1>What to bring</h1>
<ul>
{data?.what_to_bring.map((item, index) => (
<li key={index}>
<Image
src={item?.icon}
alt=""
width={24}
height={24}
objectFit="contain"
/>{" "}
<span>{item?.text}</span>
</li>
))}
</ul>
</div>
<div className="included">
<BookBorder />
<h1>Requirements</h1>
<ul>
{data?.requirments.map((item, idx) => {
return (
<li key={idx}>
<BookCheckmark /> {item.text}
</li>
);
})}
</ul>
</div>
</div>
<div className="calendar">
<div className="chooseInputs">
<div className="time">
<h1>Choose Duration</h1>
<div className="select-wrapper">
<select
name="time"
id="time"
value={duration}
onChange={(e) => {
data?.prices.filter((i) => {
if (i.duration === e.target.value) {
setDuration(i.duration);
setPrices(i.price);
}
});
}}
>
{data?.prices?.map((option, idx) => {
return (
<option value={option.duration} key={idx}>
{option.duration}
</option>
);
})}
</select>
</div>
</div>
</div>
<div className="tourInfo">
<h1>Rent Information</h1>
<h2>
Renting: <span>{data?.title_rent}</span>
</h2>
<h2>
Duration:
<span> {duration} </span>
</h2>
{/* {data.max_people && (
<h2>
Number of people:
<span> {data.max_people} </span>
</h2>
)} */}
<div className="calendarBookRent">
<button
className="book bokunButton"
onClick={() => setModal(true)}
>
<div className="arrows">
<ArrowsRightBlack />
</div>
<span>ON REQUEST</span>
</button>
{/* <h3>{parse(price)}</h3> */}
</div>
{msg ? <p className="msg">{msg.message}</p> : ""}
</div>
<p className="important-info">
<span>Important information:</span> consuming alcohol and other
addictive substances during tour is strictly forbidden. Alcoholic
drivers will be excluded without the right of a refund.
</p>
</div>
</div>
</div>
{modal && (
<div className="modalForm">
<div className="modalBody">
<Formik
validationSchema={object({
Email: string().email().required(`Email is required`),
})}
initialValues={{
Subject: data.title_rent,
Duration: duration,
Price: price,
First_name: "",
Last_name: "",
Email: "",
Phone: "",
Participants: "",
Date: "",
}}
onSubmit={async (values) => {
const {
Subject,
Duration,
Price,
First_name,
Last_name,
Email,
Phone,
Participants,
Date,
} = values;
let body = {
Subject: Subject,
Duration: Duration,
Price: Price,
First_name: First_name,
Last_name: Last_name,
Email: Email,
Phone: Phone,
Participants: Participants,
Date: Date,
};
setModal(false);
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),
}
);
const data = await res.json();
setMsg(data);
}}
>
{({ isSubmitting, isValidating }) => (
<Form>
<div className="form-block">
<h3>On Request</h3>
<button
type="button"
className="closeBtn"
onClick={() => setModal(false)}
>
X
</button>
</div>
<div className="form-block">
<div className="form-control">
<label htmlFor="First_name">Enter your first name</label>
<Field type={"text"} name={"First_name"} />
</div>
<div className="form-control">
<label htmlFor="Last_name">Enter your last name</label>
<Field type={"text"} name={"Last_name"} />
</div>
</div>
<div className="form-block">
<div className="form-control">
<label htmlFor="Email">Enter your email</label>
<Field type={"text"} name={"Email"} />
<ErrorMessage name="Email">
{(msg) => <div className="error-msg">{msg}</div>}
</ErrorMessage>
</div>
<div className="form-control">
<label htmlFor="Phone">Enter your phone number</label>
<Field type={"text"} name={"Phone"} />
</div>
</div>
<div className="form-block">
<div className="form-control">
<label htmlFor="Participants">Participants</label>
<Field type={"text"} name={"Participants"} />
</div>
<div className="form-control">
<label htmlFor="Date">Choose a date</label>
<Field type={"date"} name={"Date"} />
</div>
</div>
<div className="form-control">
<button
type="submit"
disabled={isSubmitting && isValidating ? true : false}
>
SEND
</button>
</div>
</Form>
)}
</Formik>
</div>
</div>
)}
<Footer />
</>
);
}
export default RentDetails;
export async function getServerSideProps(ctx) {
const slug = ctx.query.slug;
const res = await fetch(
`https://api.atvbuggy-dubrovnik.com/wp-json/wp/v2/rent?slug=${slug}`
)
.then((response) => response.json())
.then((data) => data);
if (!res) {
return {
notFound: true,
};
}
return {
props: {
data: res[0].acf,
title: res[0].title.rendered,
seo: res[0].yoast_head_json,
},
};
}
Zerion Mini Shell 1.0