updated time&date selection in the differnt file

scheduler_app/app/(routes)/[business]/_components/MeetingEventSelection.js

@@ -1,12 +1,15 @@
 import { GoClock } from "react-icons/go";
-import { PiMapPinLight, PiInfo  } from "react-icons/pi";
+import { PiMapPinLight, PiInfo, PiCalendarCheck } from "react-icons/pi";
-import { Calendar } from "@/components/ui/calendar"
 import React, { useEffect, useState } from 'react'
 import Link from "next/link";
+import { format } from "date-fns";
+import TimeDateSelection from "./TimeDateSelection";
 
 const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
     const [date, setDate] = useState(new Date());
     const [timeSlots, setTimeSlots] = useState();
+    const [unavialableTime, setUnavialableTime] = useState(false)
+    const [selectedTime, setSelectedTime] = useState();
 
     useEffect(() => {
         meetingEventInfo?.timeDuration && createTimeSlot(meetingEventInfo?.timeDuration)
@@ -27,31 +30,32 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
         setTimeSlots(slots);
     }
 
+    const handleDatechange = (date) => {
+        setDate(date);
+        const day = format(date, 'EEEE')
+        if(businessInfo?.availableDays?.[day]){
+            setUnavialableTime(true)
+        } else {
+            setUnavialableTime(false)
+        }
+    }
+    
 
     return (
-    <div className='px-5 py-10 shadow-md m-4 border-t-8 mx-10 md:mx-20 lg:mx-40 my-10 lg:my-20' style={{borderTopColor: meetingEventInfo?.themeColor}}>
+    <div className='px-5 py-10 shadow-md m-4 border-t-8 mx-10 md:mx-20 lg:mx-40 my-10 xl:mx-60 lg:my-20' style={{borderTopColor: meetingEventInfo?.themeColor}}>
         <p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
         <div className='grid grid-cols-1 lg:grid-cols-3 mt-5'>
             <div className='border-r'>
                 <p className='font-semibold mb-5 text-xl'>{businessInfo?.businessName}</p>
                 <p className="font-normal flex items-center gap-1"><PiInfo/> {meetingEventInfo?.eventName?meetingEventInfo?.eventName:'Meeting/Event Name'}</p>
                 <div className='mt-2 flex flex-col gap-2'>
-                    <p className='flex gap-1 items-center'><GoClock/>{meetingEventInfo?.timeDuration} minutes</p>
+                    <p className='flex gap-1 items-center'><PiCalendarCheck/>{format(date, 'PPP')}</p>
+                    <p className='flex gap-1 items-center'><GoClock/>{meetingEventInfo?.timeDuration} minutes {selectedTime && <span className="text-sm text-gray-500">({selectedTime})</span>}</p>
                     <p className='flex gap-1 items-center'><PiMapPinLight/>{meetingEventInfo?.locationMeeting}</p>
                     <Link href={meetingEventInfo?.urlMeeting?meetingEventInfo?.urlMeeting:''} className="text-gray-500 underline text-sm">{meetingEventInfo?.urlMeeting}</Link>
                 </div>
             </div>
-            <div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
+            <TimeDateSelection date={date} unavialableTime={unavialableTime} handleDatechange={handleDatechange} setSelectedTime={setSelectedTime} timeSlots={timeSlots}/>
-                <div className="flex flex-col">
-                    <p className="font-semibold mt-5 lg:mt-0">Select your meeting date & time</p>
-                    <Calendar disabled={(date) => date < new Date()} mode="single" selected={date} onSelect={setDate} className="rounded-md border mt-5"/>
-                </div>
-                <div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
-                    {timeSlots?.map((time, index) => (
-                        <button key={index} className='text-xs p-2 border rounded-md hover:bg-gray-100'>{time}</button>
-                    ))}
-                </div>
-            </div>
         </div>
     </div>
   )

scheduler_app/app/(routes)/[business]/_components/TimeDateSelection.js

@@ -0,0 +1,20 @@
+import { Calendar } from "@/components/ui/calendar"
+import React from 'react'
+
+const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime, unavialableTime}) => {
+  return (
+    <div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
+        <div className="flex flex-col">
+            <p className="font-semibold mt-5 lg:mt-0">Select your meeting date & time</p>
+            <Calendar disabled={(date) => date < new Date()} mode="single" selected={date} onSelect={(d) => handleDatechange(d)} className="rounded-md border mt-5"/>
+        </div>
+        <div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
+            {timeSlots?.map((time, index) => (
+                <button key={index} disabled={!unavialableTime} onClick={() => setSelectedTime(time)} className='text-xs p-2 border rounded-md hover:bg-gray-100'>{time}</button>
+            ))}
+        </div>
+    </div>
+  )
+}
+
+export default TimeDateSelection