Fix: issue 1b upcoming and ingoing bookings were not disabled on time selection

src/pages/Common/Booking/PropertyPage.jsx

@@ -1,6 +1,12 @@
 import React, { useContext, useEffect } from "react";
 import { useState } from "react";
-import { Link, Navigate, useLocation, useNavigate, useParams } from "react-router-dom";
+import {
+  Link,
+  Navigate,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
 import FaqAccordion from "@/components/frontend/FaqAccordion";
 import ReviewCard from "@/components/frontend/ReviewCard";
 
@@ -15,7 +21,15 @@ import { GlobalContext } from "@/globalContext";
 import FavoriteButton from "@/components/frontend/FavoriteButton";
 import Counter from "@/components/frontend/Counter";
 import { Tooltip } from "react-tooltip";
-import { usePropertyAddons, usePropertySpace, usePropertySpaceImages, usePublicUserData, usePropertySpaceAmenities, usePropertySpaceFaqs, usePropertySpaceReviews } from "@/hooks/api";
+import {
+  usePropertyAddons,
+  usePropertySpace,
+  usePropertySpaceImages,
+  usePublicUserData,
+  usePropertySpaceAmenities,
+  usePropertySpaceFaqs,
+  usePropertySpaceReviews,
+} from "@/hooks/api";
 import PropertyImageSlider from "@/components/frontend/PropertyImageSlider";
 import PropertySpaceMapImage from "@/components/frontend/PropertySpaceMapImage";
 import AllReviewsModal from "@/components/frontend/AllReviewsModal";
@@ -25,7 +39,8 @@ import CircleCheckIcon from "@/components/frontend/icons/CircleCheckIcon";
 let sdk = new MkdSDK();
 
 const PropertyPage = () => {
-  const { dispatch: globalDispatch, state: globalState } = useContext(GlobalContext);
+  const { dispatch: globalDispatch, state: globalState } =
+    useContext(GlobalContext);
   const { state: authState, dispatch: authDispatch } = useContext(AuthContext);
   const { state: spaceData } = useLocation();
   const { bookingData, dispatch } = useBookingContext();
@@ -34,7 +49,10 @@ const PropertyPage = () => {
   const [fetching, setFetching] = useState(true);
   const navigate = useNavigate();
   const { id } = useParams();
-  const bookingDetails = bookingData?.from === "" ? bookingData : JSON.parse(localStorage.getItem("booking_details"));
+  const bookingDetails =
+    bookingData?.from === ""
+      ? bookingData
+      : JSON.parse(localStorage.getItem("booking_details"));
   const [reviewDirection, setReviewDirection] = useState("DESC");
   const [bookedSlots, setBookedSlots] = useState([]);
   const [scheduleTemplate, setScheduleTemplate] = useState({});
@@ -47,7 +65,11 @@ const PropertyPage = () => {
 
   const { propertySpace, notFound } = usePropertySpace(id, render);
   const hostData = usePublicUserData(propertySpace.host_id);
-  const spaceImages = usePropertySpaceImages(propertySpace.id, true, setFetching);
+  const spaceImages = usePropertySpaceImages(
+    propertySpace.id,
+    true,
+    setFetching
+  );
   const spaceAddons = usePropertyAddons(propertySpace.property_id);
   const spaceAmenities = usePropertySpaceAmenities(propertySpace.id);
   const faqs = usePropertySpaceFaqs(propertySpace.id);
@@ -56,12 +78,19 @@ const PropertyPage = () => {
   const { pathname } = useLocation();
 
   if (!fetching && spaceImages.length === 0) {
-    navigate("*")
+    navigate("*");
   }
 
   async function fetchBookedSlots(id) {
     try {
-      const result = await callCustomAPI("customer/schedule", "post", { property_spaces_id: id }, "", null, "v3");
+      const result = await callCustomAPI(
+        "customer/schedule",
+        "post",
+        { property_spaces_id: id },
+        "",
+        null,
+        "v3"
+      );
       if (Array.isArray(result.list)) {
         setBookedSlots(result.list);
       }
@@ -86,11 +115,10 @@ const PropertyPage = () => {
           limit: 1,
           where: [`property_spaces_id = ${id}`],
         },
-        "PAGINATE",
+        "PAGINATE"
       );
       if (Array.isArray(result.list) && result.list.length > 0) {
         setScheduleTemplate({ custom_slots: result.list[0].custom_slots });
-
       }
       if (result.list[0]?.schedule_template_id) {
         const templateResult = await callCustomAPI(
@@ -101,9 +129,12 @@ const PropertyPage = () => {
             limit: 1,
             where: [`id = ${result.list[0].schedule_template_id}`],
           },
-          "PAGINATE",
+          "PAGINATE"
         );
-        if (Array.isArray(templateResult.list) && (templateResult.list[0] ?? {})) {
+        if (
+          Array.isArray(templateResult.list) &&
+          (templateResult.list[0] ?? {})
+        ) {
           setScheduleTemplate((prev) => {
             let updated = { ...prev, ...templateResult.list[0] };
             return updated;
@@ -140,15 +171,24 @@ const PropertyPage = () => {
     }
 
     if (authState.user == propertySpace.host_id) {
-      globalDispatch({ type: "SHOW_ERROR", payload: { heading: "error", message: "Owners can't book their own spaces" } })
-      return
+      globalDispatch({
+        type: "SHOW_ERROR",
+        payload: {
+          heading: "error",
+          message: "Owners can't book their own spaces",
+        },
+      });
+      return;
     }
 
     if (globalState.user.verificationStatus != 1) {
       globalDispatch({ type: "OPEN_NOT_VERIFIED_MODAL" });
       return;
     }
-    dispatch({ type: "SET_BOOKING_DETAILS", payload: { ...data, ...propertySpace } });
+    dispatch({
+      type: "SET_BOOKING_DETAILS",
+      payload: { ...data, ...propertySpace },
+    });
     navigate("booking-preview");
   };
 
@@ -169,99 +209,119 @@ const PropertyPage = () => {
     return new Date(a.post_date) - new Date(b.post_date);
   };
 
-  if (notFound || isNaN(id)) return <Navigate to="/not-found" />;
+  if (notFound || isNaN(id)) return <Navigate to='/not-found' />;
 
   return (
     <div
-      className="container mx-auto min-h-screen pt-[140px] text-sm normal-case md:text-base 2xl:px-16"
+      className='container mx-auto min-h-screen pt-[140px] text-sm normal-case md:text-base 2xl:px-16'
       onClick={() => {
         setShowCalendar(false);
       }}
     >
-      <div className="mb-[18px] flex flex-col items-start justify-between px-[17px] md:flex-row md:items-center md:px-0">
-        <div className="flex flex-col items-start gap-4 normal-case md:flex-row md:items-center">
-          <h2 className="text-3xl font-semibold">{propertySpace.name ?? spaceData?.name}</h2>
+      <div className='mb-[18px] flex flex-col items-start justify-between px-[17px] md:flex-row md:items-center md:px-0'>
+        <div className='flex flex-col items-start gap-4 normal-case md:flex-row md:items-center'>
+          <h2 className='text-3xl font-semibold'>
+            {propertySpace.name ?? spaceData?.name}
+          </h2>
           <button
-            className="whitespace-nowrap text-sm underline"
-            target="_blank"
+            className='whitespace-nowrap text-sm underline'
+            target='_blank'
             onClick={() => setShowMap(true)}
           >
             (view on map)
           </button>
         </div>
-        <div className="mt-[19px] flex w-full justify-center gap-4 md:mt-0 md:w-[unset]">
-          <p className="flex flex-grow items-center justify-center gap-2 rounded-sm border bg-[#F3F9F7] px-[14px] py-[10px]">
+        <div className='mt-[19px] flex w-full justify-center gap-4 md:mt-0 md:w-[unset]'>
+          <p className='flex flex-grow items-center justify-center gap-2 rounded-sm border bg-[#F3F9F7] px-[14px] py-[10px]'>
             <StarIcon />
-            <strong className="font-semibold">
-              {(Number(propertySpace.average_space_rating ?? spaceData?.average_space_rating) || 0).toFixed(1)}
-              <span className="font-normal">({propertySpace.space_rating_count ?? spaceData?.space_rating_count})</span>
+            <strong className='font-semibold'>
+              {(
+                Number(
+                  propertySpace.average_space_rating ??
+                    spaceData?.average_space_rating
+                ) || 0
+              ).toFixed(1)}
+              <span className='font-normal'>
+                (
+                {propertySpace.space_rating_count ??
+                  spaceData?.space_rating_count}
+                )
+              </span>
             </strong>
           </p>
-          <div className="flex flex-grow items-center justify-center gap-2 rounded-sm border bg-[#F3F9F7] px-[14px] py-[10px]">
+          <div className='flex flex-grow items-center justify-center gap-2 rounded-sm border bg-[#F3F9F7] px-[14px] py-[10px]'>
             <FavoriteButton
               space_id={propertySpace.id}
               user_property_spaces_id={propertySpace.user_property_spaces_id}
               reRender={forceRender}
               withLoader={true}
-              className="-mb-1"
-              buttonClassName=""
-              stroke="#344054"
+              className='-mb-1'
+              buttonClassName=''
+              stroke='#344054'
               favColor={"black"}
             />
             <span>Save</span>
           </div>
         </div>
       </div>
-      <div className="snap-scroll relative mb-[66px] flex h-[381px] gap-[32px] px-[14px] md:px-0">
-        {spaceImages[0]?.photo_url &&
+      <div className='snap-scroll relative mb-[66px] flex h-[381px] gap-[32px] px-[14px] md:px-0'>
+        {spaceImages[0]?.photo_url && (
           <img
             src={spaceImages[0]?.photo_url}
-            className="h-full rounded-lg object-cover xl:min-w-[616px]"
+            className='h-full rounded-lg object-cover xl:min-w-[616px]'
           />
-        }
-        {spaceImages[1]?.photo_url &&
+        )}
+        {spaceImages[1]?.photo_url && (
           <img
             src={spaceImages[1]?.photo_url}
-            className="h-full w-[292px] rounded-lg object-cover"
+            className='h-full w-[292px] rounded-lg object-cover'
           />
-        }
-        <div className={`${((!spaceImages[3]?.photo_url)) ? "flex min-w-[550px] flex-col" : "block"} "gap-4 overflow-hidden md:gap-[32px]"`}>
-          {spaceImages[2]?.photo_url &&
+        )}
+        <div
+          className={`${
+            !spaceImages[3]?.photo_url ? "flex min-w-[550px] flex-col" : "block"
+          } "gap-4 md:gap-[32px]" overflow-hidden`}
+        >
+          {spaceImages[2]?.photo_url && (
             <img
               src={spaceImages[2]?.photo_url}
-              className={`${spaceImages[3]?.photo_url && "h-1/2"} "rounded-lg object-cover md:w-full"`}
+              className={`${
+                spaceImages[3]?.photo_url && "h-1/2"
+              } "rounded-lg md:w-full" object-cover`}
             />
-          }
-          {spaceImages[3]?.photo_url &&
+          )}
+          {spaceImages[3]?.photo_url && (
             <img
               src={spaceImages[3]?.photo_url}
-              className="h-1/2 rounded-lg object-cover md:w-full"
+              className='h-1/2 rounded-lg object-cover md:w-full'
             />
-          }
+          )}
         </div>
-        {spaceImages[4]?.photo_url &&
+        {spaceImages[4]?.photo_url && (
           <img
             src={spaceImages[4]?.photo_url}
-            className="h-full w-[292px] rounded-lg object-cover"
+            className='h-full w-[292px] rounded-lg object-cover'
           />
-        }
+        )}
         <button
-          className="sticky right-6 mb-[8px] min-w-[170px] self-end border bg-[#00000080] px-3 py-1 text-center text-sm text-white"
+          className='sticky right-6 mb-[8px] min-w-[170px] self-end border bg-[#00000080] px-3 py-1 text-center text-sm text-white'
           onClick={() => setGalleryOpen(true)}
         >
           View all photos ({spaceImages.length})
         </button>
       </div>
-      <section className="relative flex flex-col items-start xl:flex-row xl:gap-12 lg:w-[90%] w-full mx-auto">
-        <div className="w-full md:px-0 xl:w-3/5 px-10">
-          <h3 className="mb-[8px] text-2xl font-semibold">Description</h3>
-          <p className="">{propertySpace.description ?? spaceData?.description}</p>
-          <hr className="my-[32px] md:my-[47px]" />
-          <h3 className="mb-[8px] text-2xl font-semibold">Amenities</h3>
-          <ul className="addons-grid list-disk-important">
+      <section className='relative mx-auto flex w-full flex-col items-start lg:w-[90%] xl:flex-row xl:gap-12'>
+        <div className='w-full px-10 md:px-0 xl:w-3/5'>
+          <h3 className='mb-[8px] text-2xl font-semibold'>Description</h3>
+          <p className=''>
+            {propertySpace.description ?? spaceData?.description}
+          </p>
+          <hr className='my-[32px] md:my-[47px]' />
+          <h3 className='mb-[8px] text-2xl font-semibold'>Amenities</h3>
+          <ul className='addons-grid list-disk-important'>
             {spaceAmenities.map((am, idx) => (
               <li
-                className="flex w-fit items-center gap-2 mb-4 sm:mb-0"
+                className='mb-4 flex w-fit items-center gap-2 sm:mb-0'
                 key={idx}
               >
                 <CircleCheckIcon />
@@ -269,72 +329,80 @@ const PropertyPage = () => {
               </li>
             ))}
           </ul>
-          <hr className="my-[32px] md:my-[47px]" />
-          <h3 className="mb-[8px] text-2xl font-semibold">Add ons</h3>
-          <ul className="addons-grid list-disk-important">
+          <hr className='my-[32px] md:my-[47px]' />
+          <h3 className='mb-[8px] text-2xl font-semibold'>Add ons</h3>
+          <ul className='addons-grid list-disk-important'>
             {spaceAddons.map((addon) => (
               <li
-                className="flex w-fit sm:w-full items-center gap-2 mb-4 sm:mb-0"
+                className='mb-4 flex w-fit items-center gap-2 sm:mb-0 sm:w-full'
                 key={addon.id}
               >
-                <span className="w-fit">
+                <span className='w-fit'>
                   {" "}
-                  <div className="flex gap-4">
+                  <div className='flex gap-4'>
                     <CircleCheckIcon /> {addon.add_on_name}
                   </div>{" "}
                 </span>{" "}
-                <strong className="font-semibold">${addon.cost}/h</strong>
+                <strong className='font-semibold'>${addon.cost}/h</strong>
               </li>
             ))}
           </ul>
-          <hr className="my-[32px] md:my-[47px]" />
-          <div className="mb-[28px] flex flex-wrap items-center justify-between">
-            <h3 className="mb-2 text-xl font-semibold md:mb-0 md:text-2xl">About the host</h3>
-            {(authState.role == "customer" && propertySpace?.id) && (
+          <hr className='my-[32px] md:my-[47px]' />
+          <div className='mb-[28px] flex flex-wrap items-center justify-between'>
+            <h3 className='mb-2 text-xl font-semibold md:mb-0 md:text-2xl'>
+              About the host
+            </h3>
+            {authState.role == "customer" && propertySpace?.id && (
               <Link
                 to={`/account/messages?other_user_id=${propertySpace.host_id}&space=${propertySpace.id}`}
-                className="my-text-gradient hidden w-[178px] whitespace-nowrap rounded-md border border-[#33D4B7] px-6 py-2 text-center font-semibold md:inline"
-                id="contact-host"
+                className='my-text-gradient hidden w-[178px] whitespace-nowrap rounded-md border border-[#33D4B7] px-6 py-2 text-center font-semibold md:inline'
+                id='contact-host'
               >
                 Contact the host
               </Link>
             )}
           </div>
-          <div className="flex items-center justify-between gap-4 md:justify-start md:gap-[24px]">
-            <div className="w-max-content">
-            <img
-              src={hostData.photo ?? "/default.png"}
-              className="h-[72px] w-[72px] rounded-full object-cover"
-            />
+          <div className='flex items-center justify-between gap-4 md:justify-start md:gap-[24px]'>
+            <div className='w-max-content'>
+              <img
+                src={hostData.photo ?? "/default.png"}
+                className='h-[72px] w-[72px] rounded-full object-cover'
+              />
             </div>
-            <div className="space-y-3 w-[90%]">
-              <p className="hidden text-xl font-bold md:block">{propertySpace.first_name}</p>
-              <p className="hidden md:block">{propertySpace.about ?? spaceData?.about}</p>
+            <div className='w-[90%] space-y-3'>
+              <p className='hidden text-xl font-bold md:block'>
+                {propertySpace.first_name}
+              </p>
+              <p className='hidden md:block'>
+                {propertySpace.about ?? spaceData?.about}
+              </p>
             </div>
-            {(authState.role == "customer" && propertySpace?.id) && (
+            {authState.role == "customer" && propertySpace?.id && (
               <Link
                 to={`/account/messages?other_user_id=${propertySpace.host_id}&space=${propertySpace.id}`}
-                className="my-text-gradient inline whitespace-nowrap rounded-md border border-[#33D4B7] px-4 py-1 text-center text-sm font-semibold md:hidden"
-                id="contact-host"
+                className='my-text-gradient inline whitespace-nowrap rounded-md border border-[#33D4B7] px-4 py-1 text-center text-sm font-semibold md:hidden'
+                id='contact-host'
               >
                 Contact the host
               </Link>
             )}
           </div>
-          <p className="mt-4 block md:hidden">{propertySpace.about ?? spaceData?.about}</p>
+          <p className='mt-4 block md:hidden'>
+            {propertySpace.about ?? spaceData?.about}
+          </p>
 
-          <hr className="my-[32px] md:my-[47px]" />
-          <div className="mb-[18px] flex items-center justify-between">
-            <h3 className="mb-[8px] text-2xl font-semibold">Reviews</h3>
+          <hr className='my-[32px] md:my-[47px]' />
+          <div className='mb-[18px] flex items-center justify-between'>
+            <h3 className='mb-[8px] text-2xl font-semibold'>Reviews</h3>
             <CustomSelect
               options={[
                 { label: "By Date: Newest First", value: "DESC" },
                 { label: "By Date: Oldest First", value: "ASC" },
               ]}
               onChange={setReviewDirection}
-              accessor="label"
-              valueAccessor="value"
-              className="min-w-[200px]"
+              accessor='label'
+              valueAccessor='value'
+              className='min-w-[200px]'
               listOptionClassName={"pl-4"}
             />
           </div>
@@ -344,15 +412,12 @@ const PropertyPage = () => {
               .sort(sortByPostDate)
               .slice(0, 10)
               .map((rw) => (
-                <ReviewCard
-                  key={rw.id}
-                  data={rw}
-                />
+                <ReviewCard key={rw.id} data={rw} />
               ))}
-            <div className="text-center">
+            <div className='text-center'>
               {reviews.length > 10 ? (
                 <button
-                  className="font-semibold underline"
+                  className='font-semibold underline'
                   onClick={() => setReviewsPopup(true)}
                 >
                   View more ({reviews.length})
@@ -360,52 +425,57 @@ const PropertyPage = () => {
               ) : null}
             </div>
           </section>
-          <hr className="my-[32px] md:my-[47px]" />
-          <h3 className="mb-[8px] text-2xl font-semibold">FAQs</h3>
+          <hr className='my-[32px] md:my-[47px]' />
+          <h3 className='mb-[8px] text-2xl font-semibold'>FAQs</h3>
           {faqs.map((faq) => (
-            <FaqAccordion
-              key={faq.id}
-              data={faq}
-            />
+            <FaqAccordion key={faq.id} data={faq} />
           ))}
-          <hr className="my-[32px] md:my-[47px]" />
-          <h3 className="mb-4 text-2xl font-semibold">Property rules</h3>
-          <p className="mb-32">{propertySpace.rule ?? spaceData?.rule}</p>
+          <hr className='my-[32px] md:my-[47px]' />
+          <h3 className='mb-4 text-2xl font-semibold'>Property rules</h3>
+          <p className='mb-32'>{propertySpace.rule ?? spaceData?.rule}</p>
         </div>
-        <div className="sticky bottom-0 hidden w-full flex-grow bg-white xl:top-16 xl:bottom-[unset] xl:block xl:w-[unset] ml-24">
-          <div className="sticky-price-summary mx-auto max-w-2xl p-6 md:border-2">
-            <h3 className="mb-[8px] text-2xl font-semibold">Price and availability</h3>
-            <div className="mb-[13px] flex justify-between">
-              <span className="text-lg">Max capacity</span>
+        <div className='sticky bottom-0 ml-24 hidden w-full flex-grow bg-white xl:bottom-[unset] xl:top-16 xl:block xl:w-[unset]'>
+          <div className='sticky-price-summary mx-auto max-w-2xl p-6 md:border-2'>
+            <h3 className='mb-[8px] text-2xl font-semibold'>
+              Price and availability
+            </h3>
+            <div className='mb-[13px] flex justify-between'>
+              <span className='text-lg'>Max capacity</span>
               <span>
                 {" "}
-                <strong className="font-semibold">{propertySpace.max_capacity ?? spaceData?.max_capacity}</strong> people
+                <strong className='font-semibold'>
+                  {propertySpace.max_capacity ?? spaceData?.max_capacity}
+                </strong>{" "}
+                people
               </span>
             </div>
-            <div className="mb-[13px] flex justify-between">
-              <span className="text-lg">Pricing from</span>
+            <div className='mb-[13px] flex justify-between'>
+              <span className='text-lg'>Pricing from</span>
               <span>
-                from: <strong className="font-semibold">${propertySpace.rate ?? spaceData?.rate}</strong>/h
+                from:{" "}
+                <strong className='font-semibold'>
+                  ${propertySpace.rate ?? spaceData?.rate}
+                </strong>
+                /h
               </span>
             </div>
 
-            <form
-              className="flex flex-col"
-              onSubmit={handleSubmit(onSubmit)}
-            >
-              <div className="mb-[13px] flex items-center justify-between">
-                <span className="text-lg">Number of guests</span>
+            <form className='flex flex-col' onSubmit={handleSubmit(onSubmit)}>
+              <div className='mb-[13px] flex items-center justify-between'>
+                <span className='text-lg'>Number of guests</span>
                 <Counter
                   register={register}
-                  name="num_guests"
+                  name='num_guests'
                   setValue={setValue}
                   initialValue={bookingDetails.num_guests || 1}
-                  maxCount={propertySpace.max_capacity ?? spaceData?.max_capacity}
+                  maxCount={
+                    propertySpace.max_capacity ?? spaceData?.max_capacity
+                  }
                   minCount={1}
                 />
               </div>
-              <hr className="mb-[24px] hidden md:block" />
-              <div className="z-50 mb-3">
+              <hr className='mb-[24px] hidden md:block' />
+              <div className='z-50 mb-3'>
                 <DateTimePicker
                   register={register}
                   setValue={setValue}
@@ -414,68 +484,76 @@ const PropertyPage = () => {
                   setShowCalendar={setShowCalendar}
                   fromDefault={bookingDetails.from}
                   toDefault={bookingDetails.to}
-                  bookedSlots={bookedSlots.map((slot) => ({ fromTime: new Date(slot.start_time), toTime: new Date(slot.end_time) }))}
+                  bookedSlots={bookedSlots}
                   scheduleTemplate={scheduleTemplate}
                   defaultDate={bookingDetails.selectedDate || undefined}
                 />
               </div>
               {authState.role != "customer" && authState.isAuthenticated ? (
                 <button
-                  type="button"
+                  type='button'
                   onClick={switchToCustomer}
-                  className="login-btn-gradient gap-2 rounded-sm py-3 px-2 text-center tracking-wide text-white outline-none focus:outline-none"
+                  className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
                 >
                   Join as customer to book
                 </button>
               ) : (
                 <button
-                  type="submit"
-                  id="proceed-to-preview"
-                  className="login-btn-gradient gap-2 rounded-sm py-3 px-2 text-center tracking-wide text-white outline-none focus:outline-none"
+                  type='submit'
+                  id='proceed-to-preview'
+                  className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
                   disabled={(() => {
                     const el = document.getElementById("booking-time");
                     return !(el && !el.innerText.includes("Select"));
                   })()}
                 >
-                  {window.innerWidth > 500 ? "Continue" : "Continue to checkout"}
+                  {window.innerWidth > 500
+                    ? "Continue"
+                    : "Continue to checkout"}
                 </button>
               )}
             </form>
           </div>
         </div>
-        <div className="mx-auto -mt-16 block w-full max-w-xl p-6 xl:hidden">
-          <h3 className="mb-[8px] text-2xl font-semibold">Price and availability</h3>
-          <div className="mb-[13px] flex justify-between">
-            <span className="text-lg">Max capacity</span>
+        <div className='mx-auto -mt-16 block w-full max-w-xl p-6 xl:hidden'>
+          <h3 className='mb-[8px] text-2xl font-semibold'>
+            Price and availability
+          </h3>
+          <div className='mb-[13px] flex justify-between'>
+            <span className='text-lg'>Max capacity</span>
             <span>
               {" "}
-              <strong className="font-semibold">{propertySpace.max_capacity ?? spaceData?.max_capacity}</strong> people
+              <strong className='font-semibold'>
+                {propertySpace.max_capacity ?? spaceData?.max_capacity}
+              </strong>{" "}
+              people
             </span>
           </div>
-          <div className="mb-[13px] flex justify-between">
-            <span className="text-lg">Pricing from</span>
+          <div className='mb-[13px] flex justify-between'>
+            <span className='text-lg'>Pricing from</span>
             <span>
-              from: <strong className="font-semibold">${propertySpace.rate ?? spaceData?.rate}</strong>/h
+              from:{" "}
+              <strong className='font-semibold'>
+                ${propertySpace.rate ?? spaceData?.rate}
+              </strong>
+              /h
             </span>
           </div>
 
-          <form
-            className="flex flex-col"
-            onSubmit={handleSubmit(onSubmit)}
-          >
-            <div className="mb-[13px] flex items-center justify-between">
-              <span className="text-lg">Number of guests</span>
+          <form className='flex flex-col' onSubmit={handleSubmit(onSubmit)}>
+            <div className='mb-[13px] flex items-center justify-between'>
+              <span className='text-lg'>Number of guests</span>
               <Counter
                 register={register}
-                name="num_guests"
+                name='num_guests'
                 setValue={setValue}
                 initialValue={bookingDetails.num_guests || 1}
                 maxCount={propertySpace.max_capacity ?? spaceData?.max_capacity}
                 minCount={1}
               />
             </div>
-            <hr className="mb-[24px] hidden md:block" />
-            <div className="z-50 mb-3">
+            <hr className='mb-[24px] hidden md:block' />
+            <div className='z-50 mb-3'>
               <DateTimePicker
                 register={register}
                 setValue={setValue}
@@ -484,26 +562,28 @@ const PropertyPage = () => {
                 setShowCalendar={setShowCalendar}
                 fromDefault={bookingDetails.from}
                 toDefault={bookingDetails.to}
-                bookedSlots={bookedSlots.map((slot) => ({ fromTime: new Date(slot.start_time), toTime: new Date(slot.end_time) }))}
+                bookedSlots={bookedSlots}
                 scheduleTemplate={scheduleTemplate}
               />
             </div>
             {authState.role != "customer" && authState.isAuthenticated ? (
               <button
-                type="button"
+                type='button'
                 onClick={switchToCustomer}
-                className="login-btn-gradient gap-2 rounded-sm py-3 px-2 text-center tracking-wide text-white outline-none focus:outline-none"
+                className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
               >
                 Join as customer to book
               </button>
             ) : (
               <button
-                type="submit"
-                id="proceed-to-preview"
-                className="login-btn-gradient gap-2 rounded-sm py-3 px-2 text-center tracking-wide text-white outline-none focus:outline-none"
+                type='submit'
+                id='proceed-to-preview'
+                className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
                 disabled={(() => {
                   const els = document.querySelectorAll("#booking-time");
-                  return Array.from(els).every((el) => el.innerText.includes("Select"));
+                  return Array.from(els).every((el) =>
+                    el.innerText.includes("Select")
+                  );
                 })()}
               >
                 {window.innerWidth > 500 && "Continue"}
@@ -525,20 +605,25 @@ const PropertyPage = () => {
         onDirectionChange={setReviewDirection}
       />
       <Tooltip
-        anchorId="proceed-to-preview"
-        place="bottom"
+        anchorId='proceed-to-preview'
+        place='bottom'
         content={"Proceed to book"}
         noArrow
       />
       <Tooltip
-        anchorId="contact-host"
-        place="bottom"
+        anchorId='contact-host'
+        place='bottom'
         content={"Chat with Host"}
         noArrow
       />
       <PropertySpaceMapImage
-        modalImage={`https://maps.googleapis.com/maps/api/staticmap?center=${propertySpace.address_line_1 ?? ""},${propertySpace.address_line_2 ?? ""},${propertySpace.city ?? ""},${propertySpace.country ?? ""
-          }&zoom=15&size=600x400&maptype=roadmap&markers=color:red|${propertySpace.address_line_1 ?? ""},${propertySpace.address_line_2 ?? ""}
+        modalImage={`https://maps.googleapis.com/maps/api/staticmap?center=${
+          propertySpace.address_line_1 ?? ""
+        },${propertySpace.address_line_2 ?? ""},${propertySpace.city ?? ""},${
+          propertySpace.country ?? ""
+        }&zoom=15&size=600x400&maptype=roadmap&markers=color:red|${
+          propertySpace.address_line_1 ?? ""
+        },${propertySpace.address_line_2 ?? ""}
       &key=${import.meta.env.VITE_GOOGLE_API_KEY}`}
         modalOpen={showMap}
         closeModal={() => setShowMap(false)}