- Updated DoctorPage component to accept bookingResources prop for appointment list. - Added serviceQuery function to serialize service item UUIDs for API requests. - Introduced new API endpoints for fetching booking resources and resource slots. - Enhanced tests for new resource-based booking functionality, including resource selection and service availability. - Created ResourceSelect component for selecting appointment types, including doctor and resource options. - Updated appointment submission logic to include resource_uuid in payload when applicable. - Ensured UI reflects changes in booking flow without disrupting existing doctor-centric experience.
108 lines
3.2 KiB
JavaScript
108 lines
3.2 KiB
JavaScript
import { useState } from "react";
|
||
import Hour from "./hour";
|
||
import Time from "./Time";
|
||
|
||
function Date({
|
||
doctor,
|
||
setStep,
|
||
disabledDates,
|
||
setSelectedSlot,
|
||
setSelectedDate,
|
||
serviceMode = false,
|
||
selectedServiceUuids = [],
|
||
onChangeService,
|
||
selectedLocation = null,
|
||
clinicUuid = null,
|
||
resourceUuid = null,
|
||
onChangeLocation,
|
||
onChangeResource,
|
||
onDateChange,
|
||
closedOnDate = false,
|
||
}) {
|
||
const [date, setDate] = useState();
|
||
|
||
const pickDate = (value) => {
|
||
setDate(value);
|
||
onDateChange?.(value);
|
||
};
|
||
|
||
return (
|
||
<div className="w-full lg:w-[61%]">
|
||
<div
|
||
className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]"
|
||
>
|
||
{(onChangeLocation || onChangeResource || (serviceMode && onChangeService)) && (
|
||
<div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1">
|
||
{onChangeLocation && (
|
||
<button
|
||
type="button"
|
||
onClick={onChangeLocation}
|
||
className="text-[13px] text-[#5559CE] hover:underline"
|
||
>
|
||
← تغییر محل{selectedLocation?.title ? ` (${selectedLocation.title})` : ""}
|
||
</button>
|
||
)}
|
||
{onChangeResource && (
|
||
<button
|
||
type="button"
|
||
onClick={onChangeResource}
|
||
className="text-[13px] text-[#5559CE] hover:underline"
|
||
>
|
||
← تغییر نوع نوبت
|
||
</button>
|
||
)}
|
||
{serviceMode && onChangeService && (
|
||
<button
|
||
type="button"
|
||
onClick={onChangeService}
|
||
className="text-[13px] text-[#5559CE] hover:underline"
|
||
>
|
||
← تغییر سرویس
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
{closedOnDate && (
|
||
<div className="mb-3 rounded-[8px] border border-solid border-[#F17732] bg-[rgba(241,119,50,0.08)] p-[12px]">
|
||
<p className="text-[13px] text-[#B4541F] leading-relaxed">
|
||
«{selectedLocation?.title}» در روز انتخابشده نوبتدهی ندارد.
|
||
{onChangeLocation && (
|
||
<button
|
||
type="button"
|
||
onClick={onChangeLocation}
|
||
className="mr-1 font-medium text-[#5559CE] hover:underline"
|
||
>
|
||
انتخاب محل دیگر
|
||
</button>
|
||
)}
|
||
</p>
|
||
</div>
|
||
)}
|
||
<Time
|
||
setDate={pickDate}
|
||
isStep
|
||
disabledDates={disabledDates}
|
||
clinicUuid={clinicUuid}
|
||
resourceUuid={resourceUuid}
|
||
selectedServiceUuids={selectedServiceUuids}
|
||
/>
|
||
<Hour
|
||
isStep
|
||
setStep={setStep}
|
||
doctor={doctor}
|
||
date={date}
|
||
setSelectedSlot={setSelectedSlot}
|
||
setSelectedDate={setSelectedDate}
|
||
serviceMode={serviceMode}
|
||
selectedServiceUuids={selectedServiceUuids}
|
||
clinicUuid={clinicUuid}
|
||
resourceUuid={resourceUuid}
|
||
selectedLocation={selectedLocation}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Date;
|