muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated time&date selection in the differnt file

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-29 14:48:12 -05:00
parent 66513ddd2f
commit c48a4cb1e1
2 changed files with 39 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,15 @@
import { GoClock } from "react-icons/go";
import { PiMapPinLight, PiInfo } from "react-icons/pi";
import { Calendar } from "@/components/ui/calendar"
import { PiMapPinLight, PiInfo, PiCalendarCheck } from "react-icons/pi";
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)
@ -26,32 +29,33 @@ 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'>
<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>
<TimeDateSelection date={date} unavialableTime={unavialableTime} handleDatechange={handleDatechange} setSelectedTime={setSelectedTime} timeSlots={timeSlots}/>
</div>
</div>
)

20
scheduler_app/app/(routes)/[business]/_components/TimeDateSelection.js Normal file
View file

@ -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