86 lines
No EOL
3.3 KiB
JavaScript
86 lines
No EOL
3.3 KiB
JavaScript
"use client"
|
|
import DaysList from '@/app/_utils/DaysList'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { doc, getDoc, getFirestore, updateDoc } from 'firebase/firestore'
|
|
import { app } from '@/config/FirebaseConfig'
|
|
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
|
|
import { toast } from 'sonner'
|
|
|
|
|
|
const Availability = () => {
|
|
const [availableDays, setAvailableDays] = useState({Sunday: false}, {Monday: false}, {Tuesday:false}, {Wednesday: false}, {Thuesday:false}, {Friday: false}, {Saturday: false});
|
|
const [startTime, setStartTime] = useState();
|
|
const [endTime, setEndTime] = useState();
|
|
const {user} = useKindeBrowserClient();
|
|
const db = getFirestore(app);
|
|
|
|
//available days functionality
|
|
const handleChange = (day, value) => {
|
|
setAvailableDays({
|
|
...availableDays, [day]: value
|
|
})
|
|
console.log(availableDays)
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
console.log(availableDays, startTime, endTime);
|
|
const docRef = doc(db, 'Business', user?.email)
|
|
await updateDoc(docRef, {
|
|
availableDays: availableDays,
|
|
startTime: startTime,
|
|
endTime: endTime
|
|
}).then(res => {
|
|
toast('Available days and time are updated.')
|
|
})
|
|
}
|
|
|
|
//get information after save
|
|
const getInfo = async () => {
|
|
const docRef = doc(db, 'Business', user?.email);
|
|
const docSnap = await getDoc(docRef);
|
|
const result = docSnap.data();
|
|
setAvailableDays(result.availableDays);
|
|
setStartTime(result.startTime);
|
|
setEndTime(result.endTime);
|
|
}
|
|
|
|
useEffect(() => {
|
|
user && getInfo();
|
|
}, [user])
|
|
|
|
|
|
return (
|
|
<div className='px-5'>
|
|
<p className='font-semibold text-xl'>Availability</p><hr className='my-5'/>
|
|
<div>
|
|
<p className='my-5 font-semibold'>Available days & time</p>
|
|
<div className='grid grid-cols-2 md:grid-cols-4 gap-5'>
|
|
{DaysList.map((item, index) => (
|
|
<div key={index} className='grid grid-cols-3 mb-2'>
|
|
<p className='flex items-center gap-2 text-sm sm:text-base'>
|
|
<Checkbox onCheckedChange={(e) => handleChange(item.day, e)}
|
|
checked={availableDays[item.day] ?availableDays[item.day] : false}/>{item.day}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className='flex gap-2 mb-2 mt-5'>
|
|
<div>
|
|
<p className='mb-1 text-xs font-semibold text-gray-700'>Start time</p>
|
|
<p className='flex gap-1 sm:gap-2 items-center'><Input type='time' onChange={(e) => setStartTime(e.target.value)} defaultValue={startTime}/> - </p>
|
|
</div>
|
|
<div>
|
|
<p className='mb-1 text-xs font-semibold text-gray-700'>End time</p>
|
|
<Input type="time" onChange={(e) => setEndTime(e.target.value)} defaultValue={endTime}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button onClick={handleSave} className="mt-5">Save</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Availability |