updated event selection and time-date selection && created user information component

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

@@ -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(() => {
+    //set user schedule data
-        meetingEventInfo?.timeDuration && createTimeSlot(meetingEventInfo?.timeDuration)
+    const [userName, setUserName] = useState();
-    }, [meetingEventInfo])
+    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;
@@ -39,10 +52,40 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
             setUnavialableTime(false)
         }
     }
-    
+
+    //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>
   )

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

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

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

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