Merge branch 'calendar'

G-Yachts · Aug 13, 2024 · 9b7182f · 9b7182f
2 parents 3fde280 + 381c28c
commit 9b7182f
Show file tree

Hide file tree

Showing 21 changed files with 518 additions and 434 deletions.
diff --git a/web/actions/yachts.ts b/web/actions/yachts.ts
@@ -318,6 +318,10 @@ export const fetchCharter = async (id: string): Promise<ICharter> => {
           featured
           keyFeatures
           description
+          reservations {
+            from
+            to
+          }
           broker {
             id
             name
@@ -523,6 +527,7 @@ export const fetchSimilarYachts = async (
             sleeps
             yearBuilt
             clicks
+            etiquette
             photos {
               featured {
                 sizes {
@@ -555,6 +560,7 @@ export const fetchSimilarYachts = async (
             sleeps
             yearBuilt
             clicks
+            etiquette
             photos {
               featured {
                 sizes {
@@ -587,6 +593,7 @@ export const fetchSimilarYachts = async (
             sleeps
             yearBuilt
             clicks
+            etiquette
             photos {
               featured {
                 sizes {
@@ -629,6 +636,7 @@ export const fetchSimilarCharters = async (
             sleeps
             yearBuilt
             clicks
+            etiquette
             photos {
               featured {
                 sizes {
@@ -664,6 +672,7 @@ export const fetchSimilarCharters = async (
             sleeps
             yearBuilt
             clicks
+            etiquette
             photos {
               featured {
                 sizes {
@@ -699,6 +708,7 @@ export const fetchSimilarCharters = async (
             sleeps
             yearBuilt
             clicks
+            etiquette
             photos {
               featured {
                 sizes {

diff --git a/web/app/[locale]/charter/[id]/page.tsx b/web/app/[locale]/charter/[id]/page.tsx
@@ -20,7 +20,6 @@ const Charter = async ({ params }: { params: { id: string } }) => {
         <View />
         <Hero />
         <Details />
-        <Reservations data={charter.reservations} />
         <Similar type="charters" length={charter.length} />
         <Newsletter />
         <Footer />

diff --git a/web/components/charter/details/details.tsx b/web/components/charter/details/details.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import dynamic from "next/dynamic";
 import { useCharter } from "@/context/charter";
 import Brokerino from "@/components/yacht/brokerino";
+import Reservations from "@/components/charter/reservations";
 
 const Gallery = dynamic(() => import("@/components/charter/gallery/gallery"));
 
@@ -58,8 +59,12 @@ const Details = () => {
       value: convertUnit(charter.beam, units.length),
     },
     {
-      label: t("characteristics.draft"),
-      value: (charter.maxDraft + charter.minDraft) / 2,
+      label: charter.minDraft
+        ? t("characteristics.draft")
+        : t("characteristics.maxDraft"),
+      value: charter.minDraft
+        ? (charter.maxDraft + charter.minDraft) / 2
+        : charter.maxDraft,
     },
     {
       label: t("characteristics.tonnage"),
@@ -192,21 +197,24 @@ const Details = () => {
             </button>
           )}
         </div>
-        <div
-          className={
-            "w-full flex flex-col justify-center items-center gap-[2vh] border-rock-400 border-[0.25vh] p-[2vh]"
-          }
-        >
-          <Brokerino brokerino={charter.broker} />
-          <a
-            href={`mailto:${charter.broker.email}`}
+        {charter.broker && (
+          <div
             className={
-              "py-[1vh] w-full text-white bg-black hover:bg-teal active:bg-teal transition-colors duration-200 ease-in-out uppercase text-center"
+              "w-full flex flex-col justify-center items-center gap-[2vh] border-rock-400 border-[0.25vh] p-[2vh]"
             }
           >
-            {t("CTA")}
-          </a>
-        </div>
+            <Brokerino brokerino={charter.broker} />
+            <a
+              href={`mailto:${charter.broker.email}`}
+              className={
+                "py-[1vh] w-full text-white bg-black hover:bg-teal active:bg-teal transition-colors duration-200 ease-in-out uppercase text-center"
+              }
+            >
+              {t("CTA")}
+            </a>
+          </div>
+        )}
+        <Reservations data={charter.reservations} />
       </div>
     </section>
   );

diff --git a/web/components/charter/gallery/gallery.tsx b/web/components/charter/gallery/gallery.tsx
@@ -34,7 +34,7 @@ const Thumb: React.FC<TThumbnail> = (props) => {
         type="button"
         className={`w-[24vw] md:w-[16vw] md:h-[16vh] h-[10vh] bg-cover bg-center mx-[0.5vw] ${selected ? "brightness-100 scale-100" : "brightness-50 scale-90"} hover:brightness-100 hover:scale-95 transition-[filter,_transform] duration-200 ease-in-out`}
         style={{
-          backgroundImage: `url(${charter.photos.gallery[index].image.sizes.thumbnail.url})`,
+          backgroundImage: `url(${encodeURI(charter.photos.gallery[index].image.sizes.thumbnail.url)})`,
         }}
       />
     </div>
@@ -86,7 +86,7 @@ const EmblaCarousel: React.FC<TCarousel> = (props) => {
               key={i}
               width={index.image.sizes.fhd.width}
               height={index.image.sizes.fhd.height}
-              src={`${index.image.sizes.fhd.url}`}
+              src={`${encodeURI(index.image.sizes.fhd.url)}`}
               alt={index.image.alt}
               className={"cursor-grab mx-[1vw] h-full w-auto"}
             />
@@ -160,7 +160,7 @@ const Gallery = ({
                 onClick={() => setCurrent(i)}
                 width={photo.image.sizes.fhd.width}
                 height={photo.image.sizes.fhd.height}
-                src={`${photo.image.sizes.fhd.url}`}
+                src={`${encodeURI(photo.image.sizes.fhd.url)}`}
                 alt={photo.image.alt}
                 className={
                   "size-[49vw] md:size-[24vw] lg:size-[16vw] object-cover object-center hover:scale-95 transition-transform duration-200 ease-in-out hover:cursor-pointer"

diff --git a/web/components/charter/hero.tsx b/web/components/charter/hero.tsx
@@ -18,7 +18,7 @@ const Hero = () => {
         "w-full px-[4vw] md:px-[8vw] h-[36dvh] md:h-screen bg-cover bg-center flex flex-col justify-end items-start text-white uppercase py-[2vh] md:py-[6vh]"
       }
       style={{
-        backgroundImage: `url(${charter.photos.featured.sizes.fhd.url})`,
+        backgroundImage: `url(${encodeURI(charter.photos.featured.sizes.fhd.url)})`,
       }}
     >
       <h1 className={"font-classic normal-case"}>{charter.name}</h1>
@@ -27,9 +27,9 @@ const Hero = () => {
         {charter.yearBuilt} | {charter.sleeps + " " + t("sleeps")}
       </p>
       <p>{`${formatCurrency(charter.price.low * rates[currency], currency)} - ${formatCurrency(
-            charter.price.high * rates[currency],
-            currency
-        )}`}</p>
+        charter.price.high * rates[currency],
+        currency,
+      )}`}</p>
     </section>
   );
 };

diff --git a/web/components/charter/reservations.tsx b/web/components/charter/reservations.tsx
@@ -1,11 +1,46 @@
+"use client";
+
 import { ICharter } from "@/types/charter";
-import Calendar from "react-calendar";
+import { isWithinInterval } from "date-fns";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import { useLocale, useTranslations } from "next-intl";
 
 const Reservations = ({ data }: { data: ICharter["reservations"] }) => {
+  const locale = useLocale() as "en" | "fr",
+    t = useTranslations("charters.listing.views");
+  const reserved = (date: Date) => {
+    return data.some((reservation) => {
+      const start = new Date(reservation.from);
+      const end = new Date(reservation.to);
+      return isWithinInterval(date, { start, end });
+    });
+  };
+
   return (
-    <section className={"w-full flex flex-col justify-center items-start"}>
+    <section className={"flex flex-col justify-center items-start w-full"}>
       <h2>Availability</h2>
-      <Calendar className={"w-full"} />
+      <FullCalendar
+        locale={locale}
+        height={"auto"}
+        plugins={[dayGridPlugin]}
+        initialView={"dayGridMonth"}
+        events={data.map((reservation) => ({
+          title: t("reserved"),
+          start: reservation.from,
+          end: reservation.to,
+        }))}
+        eventBorderColor={"transparent"}
+        eventBackgroundColor={"#ef4444"}
+        displayEventTime={false}
+        progressiveEventRendering={true}
+        titleFormat={{ year: "numeric", month: "long" }}
+        headerToolbar={{
+          left: "title",
+          center: "",
+          right: "prev,next today",
+        }}
+      />
     </section>
   );
 };