%PDF-
%PDF-
Mini Shell
Mini Shell
import { forwardRef, useState } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import Script from "next/script";
import parse from "html-react-parser";
import CustomHead from "../../../src/Components/Global/CustomHead";
//Swiper
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
//calendar
import "react-datepicker/dist/react-datepicker.css";
//icons
import {
ChevronLeft,
ChevronRight,
BookCheckmark,
CalendarIcon,
ArrowsRightBlack,
BookNotCheckmark,
} from "../../../src/Components/Icons";
import {
BookBorder,
BookTourVector,
} from "../../../src/Components/Backgrounds";
import Footer from "../../../src/Components/Footer";
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 TourDetails({ data, title, seo }) {
const router = useRouter();
const [slideSwipe, setSlideSwipe] = useState({});
const [pagination, setPagination] = useState(1);
const [openCalendar, setOpenCalendar] = useState(false);
const CustomDateinput = forwardRef(({ value, onClick }, ref) => (
<div className="dateInput" onClick={() => setOpenCalendar(true)}>
<CalendarIcon />
<label onClick={onClick} ref={ref}>
{value || placeholder}
</label>
</div>
));
CustomDateinput.displayName = "CustomDateInput";
const page = [1, 2, 3, 4, 5];
// 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]);
return (
<>
<CustomHead data={seo} />
<Script src="https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=0d4eaba0-0578-4436-8cbd-fac0d53a0473" />
<div className="mainTourDetails">
<div className="animationWrap">
<div className="animate">
<div className="items sec">
<span>Tours</span>
<span>Tours</span>
</div>
<div className="items">
<span>Tours</span>
<span>Tours</span>
</div>
</div>
</div>
<div className="content">
<div className="contentWrapper">
<div className="toursDiv">
<h4>Tour</h4>
</div>
<h1>{title ?? title}</h1>
<div className="intro">
<div className="introSpecs">
<h3>
Tour Duration: <span> {data?.tour_duration}</span>
</h3>
<h3>
Starting Times: <span>{data?.starting_time} </span>
</h3>
</div>
<div className="image">
<Image
src={data?.image_hero}
alt=""
layout="responsive"
width={1240}
height={650}
objectFit="cover"
/>
</div>
<div className="about">
<div className="info">
<div className="aboutDiv">
<h4>{data?.small_title_about}</h4>
</div>
<h1>{parse(data?.title_about)}</h1>
<p>{parse(data?.description_about)}</p>
</div>
<div className="imgInfo">
<h5>{data?.max_people}</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 className="pagination">
<BookTourVector />
{data?.slider.map((page, idx) => {
return (
<span
onClick={() => {
setPagination(idx + 1);
slideSwipe.slideTo(idx);
}}
key={idx + 1}
className={idx + 1 === pagination ? "active-pagination" : ""}
style={{
backgroundColor: idx + 1 === pagination ? "#f26739" : "",
}}
>
0{idx + 1}
</span>
);
})}
</div>
<div className="slides">
<Swiper
spaceBetween={100}
slidesPerView={1}
onInit={(e) => setSlideSwipe(e)}
onSlideChange={() => setPagination(slideSwipe.activeIndex + 1)}
>
{data?.slider.map((slide, index) => {
return (
<SwiperSlide key={index}>
<div className="swiperContent">
<div className="text">
<div className="pointDiv">
<h5>{slide?.small_title_slider}</h5>
</div>
<h2>{parse(slide?.title_slider)}</h2>
<p>{parse(slide?.description_slider)}</p>
</div>
<div className="image">
<Image
src={slide?.image_slider}
alt=""
width={400}
height={500}
objectFit="contain"
/>
</div>
</div>
</SwiperSlide>
);
})}
<div className="buttons">
<button
onClick={() => {
slideSwipe.slidePrev();
setPagination(slideSwipe.activeIndex + 1);
}}
>
<ChevronLeft />
</button>
<button
onClick={() => {
slideSwipe.slideNext();
setPagination(slideSwipe.activeIndex + 1);
}}
>
<ChevronRight />
</button>
</div>
</Swiper>
</div>
</div>
<div className="bookNow">
<div className="animationWrap">
<div className="animate">
<div className="items sec">
<span>Book</span>
<span>Book</span>
</div>
<div className="items">
<span>Book</span>
<span>Book</span>
</div>
</div>
</div>
<div className="bookIntro">
<div className="bookNowDiv">
<h4>{data?.small_title_book}</h4>
</div>
<h2>{data?.small_title_book}</h2>
<h1>{parse(data?.title_book)}</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="whatToBring">
<div>
<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>
<BookBorder />
<div>
<h1>Requirements</h1>
<ul>
{data?.requirments.map((item, idx) => {
return (
<li key={idx}>
<BookCheckmark /> {item.text}
</li>
);
})}
</ul>
</div>
<div className="vehicles">
<BookBorder />
<p>{data?.footnote}</p>
</div>
</div>
<div className="calendar">
<h3 className="calendar_heading">
Unforgettable adventure start here!
</h3>
<div className="tourInfo">
<h1>Tour Information</h1>
<h2>
Name: <span>{title}</span>
</h2>
<h2>
Tour capacity: <span> {data?.max_people} </span>
</h2>
<h2>
Tour duration: <span>{data?.tour_duration}</span>
</h2>
<div className="calendarBook">
<div className="book-inner-price-info">
<div className="book-block">
<p>{data?.single_price_label}</p>
<h3>{parse(data?.price)}</h3>
</div>
<div className="book-block">
<p>{data?.double_price_label}</p>
<h3>{parse(data?.double_price)}</h3>
</div>
</div>
{router.query.slug === "atv-dubrovnik-safari-tour" ? (
<>
<button
className="book bokunButton"
id="bokun_d12823a2_e3ad_43b0_b007_232e02cf2cc1"
data-src="https://widgets.bokun.io/online-sales/0d4eaba0-0578-4436-8cbd-fac0d53a0473/experience/741862?partialView=1"
data-testid="widget-book-button"
>
<div className="arrows">
<ArrowsRightBlack />
</div>
<span>Book Now</span>
</button>
</>
) : router.query.slug === "buggy-dubrovnik-safari-tour" ? (
<>
<button
className="book bokunButton"
id="bokun_aae68d0c_785b_444c_81e3_12cc7225b5bd"
data-src="https://widgets.bokun.io/online-sales/0d4eaba0-0578-4436-8cbd-fac0d53a0473/experience/706501?partialView=1"
data-testid="widget-book-button"
>
{" "}
<div className="arrows">
<ArrowsRightBlack />
</div>
<span>Book Now</span>
</button>
</>
) : router.query.slug === "buggy-panorama-dubrovnik" ? (
<>
<button
className="book bokunButton"
id="bokun_c2700c8b_3711_44b6_8aaa_319f4a71c203"
data-src="https://widgets.bokun.io/online-sales/0d4eaba0-0578-4436-8cbd-fac0d53a0473/experience/706500?partialView=1"
data-testid="widget-book-button"
>
{" "}
<div className="arrows">
<ArrowsRightBlack />
</div>
<span>Book Now</span>
</button>
</>
) : (
""
)}
</div>
</div>
<p className="important-info">{parse(data?.important_info)}</p>
</div>
</div>
</div>
<Footer />
</>
);
}
export default TourDetails;
export async function getServerSideProps(ctx) {
const slug = ctx.query.slug;
const res = await fetch(
`https://api.atvbuggy-dubrovnik.com/wp-json/wp/v2/tours?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