updated event selection and time-date selection && created user information component
This commit is contained in:
parent
c48a4cb1e1
commit
22a69caa86
3 changed files with 94 additions and 12 deletions
|
|
@ -1,19 +1,32 @@
|
|||
"use client"
|
||||
import { GoClock } from "react-icons/go";
|
||||
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";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import UserFormInfo from "./UserFormInfo";
|
||||
import { doc, getFirestore, setDoc } from "firebase/firestore";
|
||||
import { app } from "@/config/FirebaseConfig";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
|
||||
const [date, setDate] = useState(new Date());
|
||||
const [timeSlots, setTimeSlots] = useState();
|
||||
const [unavialableTime, setUnavialableTime] = useState(false)
|
||||
const [unavialableTime, setUnavialableTime] = useState(false);
|
||||
const [selectedTime, setSelectedTime] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
meetingEventInfo?.timeDuration && createTimeSlot(meetingEventInfo?.timeDuration)
|
||||
}, [meetingEventInfo])
|
||||
//set user schedule data
|
||||
const [userName, setUserName] = useState();
|
||||
const [userEmail, setUserEmail] = useState();
|
||||
const [userMessage, setUserMessage] = useState('');
|
||||
|
||||
//setup the next step
|
||||
const [nextStep, setNextStep] = useState(1);
|
||||
|
||||
const db = getFirestore(app);
|
||||
|
||||
//create time slot
|
||||
const createTimeSlot = (interval) => {
|
||||
const startTime = 8 * 60;
|
||||
|
|
@ -40,9 +53,39 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
|
|||
}
|
||||
}
|
||||
|
||||
//store user scheduale data
|
||||
const handleSchedule = async () => {
|
||||
const regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
|
||||
if(regex.test(userEmail) == false){
|
||||
toast('Please enter your valid email!')
|
||||
return ;
|
||||
}
|
||||
|
||||
const docId = Date.now().toString();
|
||||
await setDoc(doc(db, 'ScheduleMeeting', docId), {
|
||||
businessName: businessInfo.businessName,
|
||||
businessEmail: businessInfo.email,
|
||||
selectedTime: selectedTime,
|
||||
selectedDate: date,
|
||||
duration: meetingEventInfo.timeDuration,
|
||||
urlMeeting: meetingEventInfo.urlMeeting,
|
||||
eventId: meetingEventInfo.id,
|
||||
id: docId,
|
||||
userName: userName,
|
||||
userEmail: userEmail,
|
||||
userMessage: userMessage
|
||||
}).then(res => {
|
||||
toast('Your schedule is created successfully');
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
meetingEventInfo?.timeDuration && createTimeSlot(meetingEventInfo?.timeDuration)
|
||||
}, [meetingEventInfo])
|
||||
|
||||
|
||||
return (
|
||||
<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}}>
|
||||
<div className='px-5 py-10 shadow-md m-4 border-t-8 mx-5 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'>
|
||||
|
|
@ -50,12 +93,26 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
|
|||
<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'><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'><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>
|
||||
<Link href={meetingEventInfo?.urlMeeting?meetingEventInfo?.urlMeeting:'#'} className="text-gray-500 underline text-sm">{meetingEventInfo?.urlMeeting}</Link>
|
||||
</div>
|
||||
</div>
|
||||
<TimeDateSelection date={date} unavialableTime={unavialableTime} handleDatechange={handleDatechange} setSelectedTime={setSelectedTime} timeSlots={timeSlots}/>
|
||||
{nextStep == 1 ?
|
||||
<TimeDateSelection date={date} unavialableTime={unavialableTime} handleDatechange={handleDatechange} setSelectedTime={setSelectedTime} timeSlots={timeSlots} selectedTime={selectedTime}/>
|
||||
:
|
||||
<UserFormInfo setUserName={setUserName} setUserEmail={setUserEmail} setUserMessage={setUserMessage}/>
|
||||
}
|
||||
</div>
|
||||
<div className="flex justify-end px-5 sm:px-10 gap-2">
|
||||
{nextStep == 2 && <Button variant='outline' onClick={() => setNextStep(1)} className="mt-5 w-full sm:w-auto">Back</Button>}
|
||||
{nextStep ==1 ?
|
||||
<Button disabled={!selectedTime || !date} onClick={() => setNextStep(nextStep+1)} className="mt-5 w-full sm:w-auto">Next</Button>
|
||||
:
|
||||
<Button disabled={!userName || !userEmail} onClick={handleSchedule} className="mt-5 w-full sm:w-auto">Schedule</Button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import { Calendar } from "@/components/ui/calendar"
|
||||
import React from 'react'
|
||||
|
||||
const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime, unavialableTime}) => {
|
||||
const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime, unavialableTime, selectedTime}) => {
|
||||
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"/>
|
||||
<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>
|
||||
<button disabled={!unavialableTime} onClick={() => setSelectedTime(time)} className={`text-xs p-2 border rounded-md hover:bg-gray-100 ${time == selectedTime && 'bg-gray-200'}`}>{time}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import { Input } from '@/components/ui/input'
|
||||
import React from 'react'
|
||||
|
||||
const UserFormInfo = ({setUserName, setUserEmail, setUserMessage}) => {
|
||||
|
||||
return (
|
||||
<div className='px-2 md:px-5 flex flex-col gap-3'>
|
||||
<p className='font-semibold mt-5 lg:mt-0'>Schedule Form</p>
|
||||
<div>
|
||||
<p className='font-semibold mb-1 text-sm'>Name<span className='text-red-500'>*</span></p>
|
||||
<Input onChange={(e) => setUserName(e.target.value)} placeholder='Enter your name' className='text-xs'/>
|
||||
</div>
|
||||
<div>
|
||||
<p className='font-semibold mb-1 text-sm'>Email<span className='text-red-500'>*</span></p>
|
||||
<Input onChange={(e) => setUserEmail(e.target.value)} placeholder='Enter your email' className='text-xs'/>
|
||||
</div>
|
||||
<div>
|
||||
<p className='font-semibold mb-1 text-sm'>Message</p>
|
||||
<Input onChange={(e) => setUserMessage(e.target.value)} placeholder='Enter your brief message' className='text-xs'/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserFormInfo
|
||||
Loading…
Add table
Reference in a new issue