Untitled

mail@pastecode.io avatar
unknown
plain_text
6 days ago
29 kB
2
Indexable
Never
// ======= ===v2===========optimize
import CustomImage from "@/app/_components/ui/CustomImage";
import { useCreateBookingMutation, useGetTempBookingMutationMutation, useGetTempBookingQuery } from "@/app/features/booking/bookingApi";
import { useGetRoomsByDateMutationMutation, useGetRoomsByDateQuery, useGetRoomsQuery } from "@/app/features/room/roomApi";
import { useRouter } from "next/navigation";
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
import toast from "react-hot-toast";
import { Tooltip } from "rizzui";
import CustomButton from "../../_components/CustomButton";
import { useBookingCtx } from "../context/BookingProvider";
import DateSection from "./DateSection";
import GuestCounter from "./GuestCounter";
import PakageImageSlider from "./PakageImageSlider";
import RoomSelector from "./RoomSelector ";

// Define room images
const roomImages = {
  notBooked: [
    "/room/not-booked/Room1.png",
    "/room/not-booked/Room2.png",
    "/room/not-booked/Room3.png",
    "/room/not-booked/Room4.png",
    "/room/not-booked/Room5.png",
    "/room/not-booked/Room6.png"
  ],
  selected: [
    "/room/selected/Room1.png",
    "/room/selected/Room2.png",
    "/room/selected/Room3.png",
    "/room/selected/Room4.png",
    "/room/selected/Room5.png",
    "/room/selected/Room6.png"
  ],
  booked: [
    "/room/booked/Room1.png",
    "/room/booked/Room2.png",
    "/room/booked/Room3.png",
    "/room/booked/Room4.png",
    "/room/booked/Room5.png",
    "/room/booked/Room6.png"
  ]
};

// Define interfaces for room and booking data
interface RoomData {
  id: string;
  name: string;
  price: number;
  maxCapacity: number;
  status: string;
  discount: number;
  images: string[];
  videos: string[];
  selected?: boolean;
  selectedRoomId?: number;
  confirmed?: string;
  image?: string;
  booked?: boolean;
  hold?: boolean;
  holdByCurrentUser?: any[];
}

interface BookingData {
  ownHold?: RoomData[];
  totalHolds?: string[];
}

// Enum for different actions
enum ActionType {
  SUBMIT = "SUBMIT",
  NEXT = "NEXT",
  PREVIOUS = "PREVIOUS",
  FINAL_SUBMIT = "FINAL_SUBMIT"
}

// Props for BookingHome component
interface BookingHomeProps {
  data: any; // Replace with specific type if possible
  resource: any; // Replace with specific type if possible
}

// Main component
export default function BookingHome({ data, resource }: BookingHomeProps) {
  const {
    availableRoom,
    setAvailableRoom,
    pickerDate,
    setPickerDate,
    holdData,
    setHoldData,
    handleImageClick,
    userSubmitRoomData,
    setUserSubmitRoomData
  }: any = useBookingCtx();
  const router = useRouter();
  const [createBooking] = useCreateBookingMutation({});
  const [userInformation, setUserInformation] = useState<{ name: string; phone: string }>({ name: "", phone: "" });
  const { data: availableRooms, isLoading: avRoomIsLoading } = useGetRoomsByDateQuery({ paginate: false, startDate: pickerDate.startDate });
  const { data: rooms, isLoading } = useGetRoomsQuery<any>({ paginate: false });
  const [getRoomsByDateMutation] = useGetRoomsByDateMutationMutation({});
  const { data: tempBook, isLoading: tempLoading } = useGetTempBookingQuery({ date: pickerDate.startDate });
  const [getTempBookingMutation] = useGetTempBookingMutationMutation({});

  // Function to update rooms data based on booking and availability information
  const getBookings = useCallback(
    async (data: BookingData, available: any) => {
      if (!rooms?.data) return;
      const ownHoldIds = new Set(data?.ownHold?.map((hold: any) => hold.id));
      setHoldData(ownHoldIds);

      const updatedRooms = rooms.data.map((room: any, index: number) => {
        const isSelected = data?.ownHold?.some((r: RoomData) => r.id === room.id);
        return {
          ...room,
          selected: isSelected,
          selectedRoomId: index + 1,
          confirmed: "start",
          image: roomImages.notBooked[index],
          booked: !available?.data?.some((avRoom: any) => avRoom.id === room.id),
          hold: data?.totalHolds?.includes(room.id),
          holdByCurrentUser: data?.ownHold
        };
      });

      setAvailableRoom(updatedRooms);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [rooms?.data, setAvailableRoom]
  );

  useEffect(() => {
    if (rooms?.data || availableRooms || tempBook) {
      getBookings(tempBook?.data, availableRooms);
    }
    if (rooms?.data || availableRooms || tempBook) {
      const filteredRoomsWithGuests = availableRoom
        ?.filter((room: RoomData) => holdData?.has(room.id))
        .map((room: RoomData) => ({
          guests: 2,
          room: room.id
        }));
      setUserSubmitRoomData(filteredRoomsWithGuests);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [rooms?.data, availableRooms, tempBook, pickerDate.startDate, getBookings]);

  // Handle date change
  const handleDateChange = useCallback(
    (date: string) => {
      const mainDate = new Date(new Date(date).setUTCHours(0, 0, 0, 0)).toISOString();
      const endDate = new Date(new Date(mainDate).getTime() + 24 * 60 * 60 * 1000).toISOString();
      setPickerDate({ startDate: mainDate, endDate });
    },
    [setPickerDate]
  );

  // State for active room and final room data
  const [activeRoom, setActiveRoom] = useState<number>(0);
  const [userFinalRoomData, setUserFinalRoomData] = useState<any[]>([]);
  const [numberOfGuest, setNumberOfGuest] = useState<number>(2);

  useEffect(() => {
    if (availableRoom) {
      setUserFinalRoomData(availableRoom.filter((room: RoomData) => holdData?.has(room.id)));
    }
  }, [availableRoom, holdData]);

  // Get matched objects between user submitted rooms and final rooms
  const getMatchedObjects = useCallback((submitData: any[], finalData: any[]) => {
    return submitData?.filter(obj2 => finalData.some(obj1 => obj1.id === obj2.room));
  }, []);

  const res = useMemo(
    () => getMatchedObjects(userSubmitRoomData, userFinalRoomData),
    [userSubmitRoomData, userFinalRoomData, getMatchedObjects]
  );

  // Handle input change for user information
  const inputOnChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setUserInformation(prev => ({ ...prev, [name]: value }));
  }, []);

  // Handle form submission
  const handleSubmit = async ({ action, index, id }: { action: string; index?: number; id?: string | number; guests?: number }) => {
    switch (action) {
      case ActionType.SUBMIT:
        if (!id) {
          toast.success("Select a room first");
          return;
        }
        break;

      case ActionType.NEXT:
        if (index !== undefined) {
          setActiveRoom(index);
        } else {
          setActiveRoom(prev => prev + 1);
        }
        break;

      case ActionType.PREVIOUS:
        setActiveRoom(prev => prev - 1);
        break;

      case ActionType.FINAL_SUBMIT:
        if (!userInformation.name || !userInformation.phone) {
          toast.error("Please fill in name and phone number");
          return;
        }

        const sendData = {
          rooms: res,
          name: userInformation.name,
          phone: userInformation.phone,
          startDate: pickerDate.startDate,
          endDate: pickerDate.endDate
        };

        try {
          await createBooking(sendData);
          toast.success("Booking created successfully");
          setActiveRoom(0);
          router.push("/success");
        } catch (error) {
          toast.error("Error creating booking");
        }
        break;

      default:
        break;
    }
  };

  // ==========v2===========optimize

  return (
    <div className=''>
      <div className=''>
        <DateSection pickerDate={pickerDate} handleDateChange={handleDateChange} />
      </div>
      <div>
        <p className='px-1 flex justify-center lg:justify-start pb-4 text-xs font-normal capitalize'>Click to select or deselect rooms.</p>
        <div className='mb-5 flex justify-center lg:justify-start gap-4 mx-2 lg:mx-2'>
          <div className='flex gap-8 items-center'>
            <div className='h-5 w-5 rounded-sm border bg-[#F9FAFA]'></div>
            <span className='text-[10px] lg:font-medium lg:text-xs'>Available</span>
          </div>
          <div className='flex gap-3 items-center'>
            <div className='h-5 w-5 rounded-sm border bg-[#C7C8CA]'></div>
            <span className='text-[10px] lg:font-medium lg:text-xs'>Booked</span>
          </div>
          <div className='flex gap-3 items-center'>
            <div className='h-5 w-5 rounded-sm border bg-[#98C157]'></div>
            <span className='text-[10px] lg:font-medium lg:text-xs'>Selected</span>
          </div>
        </div>
      </div>
      <div className='grid grid-cols-1 lg:grid-cols-7 gap-4 content-center m-2 lg:m-0 sm:mx-24'>
        {/* booking room section */}
        <div className='border-2 border-gray-300 col-span-7 lg:col-span-2 w-full h-full flex justify-center items-center'>
          <div className='grid grid-cols-2 gap-6 py-5 lg:py-0 '>
            {avRoomIsLoading || !availableRoom
              ? roomImages.notBooked.map((room: string, index: number) => (
                  <div key={index} className='relative overflow-hidden'>
                    <CustomImage
                      src={roomImages.notBooked[index]}
                      alt='available room'
                      className='h-28 w-24 sm:h-36 md:h-44 md:w-32 my-2'
                    />
                    <div className='absolute top-0 left-0 z-10'>
                      <span className='relative flex h-[20rem] w-[20rem]'>
                        <span className='animate-pulse custom-animation absolute inline-flex rounded-none h-full w-full bg-[#7e7777af] opacity-70 '></span>
                      </span>
                    </div>
                  </div>
                ))
              : availableRoom &&
                availableRoom.map((room: RoomData, index: number) => (
                  <div key={room.id}>
                    {room.booked ? (
                      <CustomImage
                        src={roomImages.booked[index]}
                        alt='booked room'
                        className='cursor-not-allowed h-28 w-24 sm:h-36 xl:h-44 md:h-36 md:w-24 xl:w-32'
                      />
                    ) : room.selected && room.hold ? (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={roomImages.selected[index]}
                          alt='selected room'
                          className='h-28 w-24 sm:h-36 xl:h-44 md:h-36 md:w-24 xl:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index, numberOfGuest, resource?.data?.booking)}
                        />
                      </Tooltip>
                    ) : room.hold ? (
                      <CustomImage
                        src={roomImages.booked[index]}
                        alt='booked room'
                        className='cursor-not-allowed h-28 w-24 sm:h-36 xl:h-44 md:h-36 md:w-24 xl:w-32'
                      />
                    ) : room.selected ? (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={roomImages.selected[index]}
                          alt='selected room'
                          className='h-28 w-24 sm:h-36 xl:h-44 md:h-36 md:w-24 xl:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index, numberOfGuest, resource?.data?.booking)}
                        />
                      </Tooltip>
                    ) : (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={roomImages.notBooked[index]}
                          alt='available room'
                          className='h-28 w-24 sm:h-36 xl:h-44 md:h-36 md:w-24 xl:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index, numberOfGuest, resource?.data?.booking)}
                        />
                      </Tooltip>
                    )}
                  </div>
                ))}
          </div>
        </div>
        {/* booking room section */}

        <div className='col-span-7 mt-5 md:mt-0 lg:col-span-5 w-full h-full flex flex-col justify-center items-end '>
          <div className='md:w-[72%] w-[100%]  lg:-mt-[51px]'>
            <RoomSelector userFinalRoomData={userFinalRoomData} activeRoom={activeRoom} setActiveRoom={setActiveRoom} />
          </div>
          {/* </div> */}
          <div className='w-[100%] lg:w-[72%] max-h-[100%] bg-white shadow-lg rounded-2xl overflow-hidden'>
            <div className='w-full'>
              <PakageImageSlider images={userFinalRoomData && userFinalRoomData[activeRoom]?.images} />
            </div>
            <div className='grid grid-cols-1 gap-y-7 pb-3 m-6 md:mt-5 xl:mt-10'>
              <GuestCounter
                number={numberOfGuest}
                setNumber={setNumberOfGuest}
                maxCapacity={(userFinalRoomData && userFinalRoomData[activeRoom]?.maxCapacity) ?? 2}
                roomId={userFinalRoomData && userFinalRoomData[activeRoom]?.id}
                setUserSubmitRoomData={setUserSubmitRoomData}
                holdByCurrentUser={availableRoom && availableRoom[0].holdByCurrentUser}
                finalData={res || []}
              />
              {activeRoom === userFinalRoomData?.length - 1 && (
                <div className='flex w-full gap-5 items-center'>
                  <div className='w-full'>
                    <input
                      onChange={inputOnChange}
                      name='name'
                      type='text'
                      value={userInformation.name}
                      className='w-full border-b border-[#E3DBB7] py-2 text-sm font-light capitalize tracking-wide outline-none lg:text-base'
                      placeholder='Your Name'
                    />
                    {!userInformation.name && (
                      <div className='md:text-xs text-[10px] font-light text-red-500 mt-2'>Name field is required</div>
                    )}
                  </div>
                  <div className='w-full'>
                    <input
                      onChange={inputOnChange}
                      name='phone'
                      type='text'
                      value={userInformation.phone}
                      className='w-full border-b border-[#E3DBB7] py-2 text-sm font-light capitalize tracking-wide outline-none'
                      placeholder='Phone Number'
                    />
                    {!userInformation.phone && (
                      <div className='md:text-xs text-[10px] font-light text-red-500 mt-2 '>Phone number field is required</div>
                    )}
                  </div>
                </div>
              )}
              <div>
                <p className='mb-2 text-sm md:text-base font-light capitalize tracking-wider lg:text-md'>
                  from ৳
                  {userFinalRoomData.length > 0 ? (
                    <strong className='text-base font-semibold lg:text-lg mx-2'>
                      {userFinalRoomData &&
                        Math.ceil(
                          userFinalRoomData[activeRoom]?.price[numberOfGuest - 1]?.price /
                            userFinalRoomData[activeRoom]?.price[numberOfGuest - 1]?.numberOfPerson
                        )}
                    </strong>
                  ) : (
                    <strong className='text-sm md:text-base font-semibold lg:text-lg mx-2'>0</strong>
                  )}
                  per person
                </p>
                <p className='mb-1 text-sm md:text-base font-light capitalize tracking-wider'>
                  sub total ৳
                  {userFinalRoomData.length > 0 ? (
                    <strong className='text-sm md:text-base font-semibold lg:text-xl mx-2'>
                      {userFinalRoomData && userFinalRoomData[activeRoom]?.price[numberOfGuest - 1]?.price}
                    </strong>
                  ) : (
                    <strong className='text-sm md:text-base font-semibold lg:text-lg mx-2'>0</strong>
                  )}
                  for this room
                </p>
              </div>
              {/* <div className='my-5'>
                {activeRoom > 0 && (
                  <CustomButton
                    onClick={() => handleSubmit({ action: "PREVIOUS" })}
                    customClass='w-[150px] text-white bg-[#1DC5CE] py-2 text-2xl me-2 rounded-none'
                    text='Previous'
                  />
                )}
                {activeRoom < userFinalRoomData?.length - 1 ? (
                  <CustomButton
                    onClick={() =>
                      handleSubmit({
                        action: "NEXT",
                        index: activeRoom + 1,
                        id: userFinalRoomData[activeRoom]?.id
                      })
                    }
                    customClass='w-[150px] text-white bg-[#1DC5CE] py-2 text-2xl me-2 rounded-none'
                    text='Next'
                  />
                ) : (
                  <CustomButton
                    onClick={() =>
                      handleSubmit({
                        action: "FINAL_SUBMIT",
                        index: activeRoom + 1,
                        id: userFinalRoomData[activeRoom]?.id
                      })
                    }
                    customClass='w-[150px] text-white bg-[#1DC5CE] py-2 me-2 text-2xl rounded-none'
                    text='Final Submit'
                  />
                )}
              </div> */}
              <div className='flex gap-3'>
                {activeRoom > 0 && (
                  <CustomButton
                    onClick={() => handleSubmit({ action: "PREVIOUS" })}
                    customClass='w-[80px] !px-0 font-normal lg:font-medium lg:px-2 lg:w-[100px] text-white bg-[#1DC5CE] py-[11px] !text-xs rounded-sm'
                    text='PREVIOUS'
                  />
                )}
                {activeRoom < userFinalRoomData?.length - 1 ? (
                  <CustomButton
                    onClick={() =>
                      handleSubmit({
                        action: "NEXT",
                        index: activeRoom + 1,
                        id: userFinalRoomData[activeRoom]?.id
                      })
                    }
                    customClass='w-[80px] !px-0 font-normal lg:font-medium lg:px-2 lg:w-[100px] text-white bg-[#1DC5CE] py-[11px] !text-xs rounded-sm'
                    text='NEXT'
                  />
                ) : (
                  <CustomButton
                    onClick={() =>
                      handleSubmit({
                        action: "FINAL_SUBMIT",
                        index: activeRoom + 1,
                        id: userFinalRoomData[activeRoom]?.id
                      })
                    }
                    customClass='w-[80px] !px-0 lg:px-2 font-normal lg:font-medium lg:w-[100px] text-white bg-[#1DC5CE] py-[11px] !text-xs rounded-sm'
                    text='CONFIRM'
                  />
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// "use client";
// import CustomImage from "@/app/_components/ui/CustomImage";
// import { useCreateBookingMutation, useGetTempBookingMutationMutation, useGetTempBookingQuery } from "@/app/features/booking/bookingApi";
// import { useGetRoomsByDateMutationMutation, useGetRoomsByDateQuery, useGetRoomsQuery } from "@/app/features/room/roomApi";
// import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
// import toast from "react-hot-toast";
// import { Tooltip } from "rizzui";
// import CustomButton from "../../_components/CustomButton";
// import { useBookingCtx } from "../context/BookingProvider";
// import DateSection from "./DateSection";
// import GuestCounter from "./GuestCounter";
// import PakageImageSlider from "./PakageImageSlider";
// import RoomSelector from "./RoomSelector ";

// const roomImages = {
//   notBooked: [
//     "/room/not-booked/Room1.png",
//     "/room/not-booked/Room2.png",
//     "/room/not-booked/Room3.png",
//     "/room/not-booked/Room4.png",
//     "/room/not-booked/Room5.png",
//     "/room/not-booked/Room6.png"
//   ],
//   selected: [
//     "/room/selected/Room1.png",
//     "/room/selected/Room2.png",
//     "/room/selected/Room3.png",
//     "/room/selected/Room4.png",
//     "/room/selected/Room5.png",
//     "/room/selected/Room6.png"
//   ],
//   booked: [
//     "/room/booked/Room1.png",
//     "/room/booked/Room2.png",
//     "/room/booked/Room3.png",
//     "/room/booked/Room4.png",
//     "/room/booked/Room5.png",
//     "/room/booked/Room6.png"
//   ]
// };

// interface RoomData {
//   id: string;
//   name: string;
//   price: number;
//   maxCapacity: number;
//   status: string;
//   discount: number;
//   images: string[];
//   videos: string[];
//   selected?: boolean;
//   selectedRoomId?: number;
//   confirmed?: string;
//   image?: string;
//   booked?: boolean;
//   hold?: boolean;
//   holdByCurrentUser?: any[];
// }

// interface BookingData {
//   ownHold?: RoomData[];
//   totalHolds?: string[];
// }

// interface BookingHomeProps {
//   data: any;
//   resource: any;
// }

// enum ActionType {
//   SUBMIT = "SUBMIT",
//   NEXT = "NEXT",
//   PREVIOUS = "PREVIOUS"
// }

// interface IRoom {
//   id: string;
//   guests: number;
// }

// export default function BookingHome({ data, resource }: BookingHomeProps) {
//   const [createBooking] = useCreateBookingMutation({});
//   const {
//     availableRoom,
//     setAvailableRoom,
//     pickerDate,
//     setPickerDate,
//     toISOString,
//     holdData,
//     setHoldData,
//     handleImageClick,
//     tempHoldRooms,
//     setSelectedRoomIndex,
//     selectedRoomIndex,
//     userSubmitRoomData,
//     setUserSubmitRoomData
//   }: any = useBookingCtx();

//   const [roomInfo, setRoomInfo] = useState<RoomData[]>([]);
//   const [guests, setGuests] = useState<number>(1);
//   const [userInformation, setUserInformation] = useState<{
//     name: string;
//     phone: string;
//   }>({
//     name: "",
//     phone: ""
//   });
//   const { data: availableRooms, isLoading: avRoomIsLoading } = useGetRoomsByDateQuery({
//     paginate: false,
//     startDate: pickerDate.startDate
//   });

//   const { data: rooms, isLoading } = useGetRoomsQuery<any>({ paginate: false });
//   const [getRoomsByDateMutation] = useGetRoomsByDateMutationMutation({});
//   const { data: tempBook, isLoading: tempLoading } = useGetTempBookingQuery({
//     date: pickerDate.startDate
//   });
//   const [getTempBookingMutation] = useGetTempBookingMutationMutation({});

//   const getBookings = useCallback(
//     async (data: BookingData, available: any) => {
//       if (!rooms?.data) return;
//       const ownHoldIds = new Set(data?.ownHold?.map((hold: any) => hold.id));
//       setHoldData(ownHoldIds);

//       const updatedRooms = rooms.data.map((room: any, index: number) => {
//         const isSelected = data?.ownHold?.some((r: RoomData) => r.id === room.id);
//         return {
//           ...room,
//           selected: isSelected,
//           selectedRoomId: index + 1,
//           confirmed: "start",
//           image: roomImages.notBooked[index],
//           booked: !available?.data?.some((avRoom: any) => avRoom.id === room.id),
//           hold: data?.totalHolds?.includes(room.id),
//           holdByCurrentUser: data?.ownHold
//         };
//       });

//       setAvailableRoom(updatedRooms);
//     },
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//     [rooms?.data, setAvailableRoom]
//   );

//   useEffect(() => {
//     if (rooms?.data || availableRooms || tempBook) {
//       getBookings(tempBook?.data, availableRooms);
//     }
//     if (rooms?.data || availableRooms || tempBook) {
//       const filteredRoomsWithGuests = availableRoom
//         ?.filter((room: RoomData) => holdData?.has(room.id))
//         .map((room: RoomData) => ({
//           guests: 2,
//           room: room.id
//         }));
//       setUserSubmitRoomData(filteredRoomsWithGuests);
//     }
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//   }, [rooms?.data, availableRooms, tempBook, pickerDate.startDate, getBookings]);

//   const handleGuestChange = useCallback(
//     (delta: number) => {
//       if (selectedRoomIndex !== null) {
//         setRoomInfo(prevRoomInfo =>
//           prevRoomInfo.map((room: any, i: number) =>
//             i === selectedRoomIndex
//               ? {
//                   ...room,
//                   guests: Math.min(4, Math.max(1, room.guests + delta))
//                 }
//               : room
//           )
//         );
//       }
//     },
//     [selectedRoomIndex]
//   );

//   const handleDateChange = useCallback(
//     (date: string) => {
//       const mainDate = new Date(new Date(date).setUTCHours(0, 0, 0, 0)).toISOString();
//       const endDate = new Date(new Date(mainDate).getTime() + 24 * 60 * 60 * 1000).toISOString();
//       setPickerDate({ startDate: mainDate, endDate });
//     },
//     [setPickerDate]
//   );

//   const [activeRoom, setActiveRoom] = useState<number>(0);
//   const [userFinalRoomData, setUserFinalRoomData] = useState<any[]>([]);
//   const [numberOfGuest, setNumberOfGuest] = useState<number>(2);

//   useEffect(() => {
//     if (availableRoom) {
//       setUserFinalRoomData(availableRoom.filter((room: RoomData) => holdData?.has(room.id)));
//     }
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//   }, [availableRoom, holdData]);

//   const getMatchedObjects = useCallback((submitData: any[], finalData: any[]) => {
//     return submitData?.filter(obj2 => finalData.some(obj1 => obj1.id === obj2.room));
//   }, []);

//   const res = useMemo(
//     () => getMatchedObjects(userSubmitRoomData, userFinalRoomData),
//     [userSubmitRoomData, userFinalRoomData, getMatchedObjects]
//   );

//   const inputOnChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
//     const { name, value } = e.target;
//     setUserInformation(prev => ({ ...prev, [name]: value }));
//     setRoomInfo(prevRoomInfo => prevRoomInfo.map(room => ({ ...room, [name]: value })));
//   }, []);

//   const handleSubmit = async ({ action, index, id }: { action: string; index?: number; id?: string | number; guests?: number }) => {
//     switch (action) {
//       case "SUBMIT":
//         if (!id) {
//           toast.success("select the room?");
//           return;
//         }
//         break;

//       case "NEXT":
//         if (index !== undefined) {
//           setActiveRoom(index);
//         } else {
//           setActiveRoom(prev => prev + 1);
//         }
//         break;

//       case "PREVIOUS":
//         setActiveRoom(prev => prev - 1);
//         break;

//       case "FINAL_SUBMIT":
//         if (!userInformation.name || !userInformation.phone) {
//           toast.error("Fill name or phone number");
//           return;
//         }

//         const sendData = {
//           rooms: res,
//           name: userInformation.name,
//           phone: userInformation.phone,
//           startDate: pickerDate.startDate,
//           endDate: pickerDate.endDate
//         };

//         try {
//           await createBooking(sendData);
//           toast.success("Booking created successfully");
//           setActiveRoom(0);
//         } catch (error) {
//           toast.error("Error creating booking");
//         }
//         break;

//       default:
//         break;
//     }
//   };
Leave a Comment