MED-103: add booking functionality
This commit is contained in:
Helena
@@ -1,94 +1,257 @@
|
||||
import React from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import { formatCurrency } from '@/packages/shared/src/utils';
|
||||
import { format } from 'date-fns';
|
||||
import { addHours, isAfter, isSameDay } from 'date-fns';
|
||||
import { orderBy } from 'lodash';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { pathsConfig } from '@kit/shared/config';
|
||||
import { formatDateAndTime } from '@kit/shared/utils';
|
||||
import { Button } from '@kit/ui/shadcn/button';
|
||||
import { Card } from '@kit/ui/shadcn/card';
|
||||
import { toast } from '@kit/ui/sonner';
|
||||
import { Trans } from '@kit/ui/trans';
|
||||
import { cn } from '@kit/ui/utils';
|
||||
|
||||
import { AvailableAppointmentsResponse } from '~/lib/types/connected-online';
|
||||
import { createInitialReservationAction } from '../../_lib/server/actions';
|
||||
import { ServiceProvider, TimeSlot } from './booking.context';
|
||||
import { useBooking } from './booking.provider';
|
||||
|
||||
const dummyData: AvailableAppointmentsResponse['Data']['T_Booking'] = [
|
||||
{
|
||||
ServiceID: 1,
|
||||
StartTime: new Date('2024-10-10T10:00:00Z'),
|
||||
EndTime: new Date('2024-10-10T11:00:00Z'),
|
||||
HKServiceID: 0,
|
||||
ClinicID: '',
|
||||
LocationID: 0,
|
||||
UserID: 0,
|
||||
SyncUserID: 0,
|
||||
PayorCode: '',
|
||||
},
|
||||
{
|
||||
ServiceID: 1,
|
||||
StartTime: new Date('2024-10-10T11:00:00Z'),
|
||||
EndTime: new Date('2024-10-10T12:00:00Z'),
|
||||
HKServiceID: 0,
|
||||
ClinicID: '',
|
||||
LocationID: 0,
|
||||
UserID: 0,
|
||||
SyncUserID: 0,
|
||||
PayorCode: '',
|
||||
},
|
||||
{
|
||||
ServiceID: 2,
|
||||
StartTime: new Date('2024-10-10T12:00:00Z'),
|
||||
EndTime: new Date('2024-10-10T13:00:00Z'),
|
||||
HKServiceID: 0,
|
||||
ClinicID: '',
|
||||
LocationID: 0,
|
||||
UserID: 0,
|
||||
SyncUserID: 0,
|
||||
PayorCode: '',
|
||||
},
|
||||
];
|
||||
const getServiceProviderTitle = (
|
||||
currentLocale: string,
|
||||
serviceProvider?: ServiceProvider,
|
||||
) => {
|
||||
if (!serviceProvider) return null;
|
||||
if (currentLocale === 'en') return serviceProvider.jobTitleEn;
|
||||
if (currentLocale === 'ru') return serviceProvider.jobTitleRu;
|
||||
|
||||
return serviceProvider.jobTitleEt;
|
||||
};
|
||||
|
||||
const PAGE_SIZE = 7;
|
||||
|
||||
const TimeSlots = ({ countryCode }: { countryCode: string }) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const {
|
||||
t,
|
||||
i18n: { language: currentLocale },
|
||||
} = useTranslation();
|
||||
|
||||
const booking = useBooking();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const selectedDate = booking.selectedDate ?? new Date();
|
||||
|
||||
const filteredBookings = useMemo(
|
||||
() =>
|
||||
orderBy(
|
||||
booking?.timeSlots?.filter(({ StartTime }) => {
|
||||
const firstAvailableTimeToSelect = isSameDay(selectedDate, new Date())
|
||||
? addHours(new Date(), 0.5)
|
||||
: selectedDate;
|
||||
return isAfter(StartTime, firstAvailableTimeToSelect);
|
||||
}) ?? [],
|
||||
'StartTime',
|
||||
'asc',
|
||||
),
|
||||
[booking.timeSlots, selectedDate],
|
||||
);
|
||||
|
||||
const totalPages = Math.ceil(filteredBookings.length / PAGE_SIZE);
|
||||
|
||||
const paginatedBookings = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * PAGE_SIZE;
|
||||
const endIndex = startIndex + PAGE_SIZE;
|
||||
return filteredBookings.slice(startIndex, endIndex);
|
||||
}, [filteredBookings, currentPage, PAGE_SIZE]);
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
const generatePageNumbers = () => {
|
||||
const pages = [];
|
||||
const maxVisiblePages = 5;
|
||||
|
||||
if (totalPages <= maxVisiblePages) {
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
if (currentPage <= 3) {
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push('...');
|
||||
pages.push(totalPages);
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
pages.push(1);
|
||||
pages.push('...');
|
||||
for (let i = totalPages - 3; i <= totalPages; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
pages.push(1);
|
||||
pages.push('...');
|
||||
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push('...');
|
||||
pages.push(totalPages);
|
||||
}
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
if (!booking?.timeSlots?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleBookTime = async (timeSlot: TimeSlot, comments?: string) => {
|
||||
const selectedService = booking.selectedService;
|
||||
|
||||
const selectedVariant = selectedService?.variants?.[0];
|
||||
|
||||
const syncedService = timeSlot.syncedService;
|
||||
if (!syncedService || !selectedVariant) {
|
||||
return toast.error(t('booking:serviceNotFound'));
|
||||
}
|
||||
|
||||
const bookTimePromise = createInitialReservationAction(
|
||||
selectedVariant,
|
||||
countryCode,
|
||||
Number(syncedService.id),
|
||||
syncedService?.clinic_id,
|
||||
timeSlot.UserID,
|
||||
timeSlot.SyncUserID,
|
||||
timeSlot.StartTime,
|
||||
booking.selectedLocationId ? booking.selectedLocationId : null,
|
||||
comments,
|
||||
).then(() => {
|
||||
router.push(pathsConfig.app.cart);
|
||||
});
|
||||
|
||||
toast.promise(() => bookTimePromise, {
|
||||
success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
|
||||
error: <Trans i18nKey={'booking:bookTimeError'} />,
|
||||
loading: <Trans i18nKey={'booking:bookTimeLoading'} />,
|
||||
});
|
||||
};
|
||||
|
||||
const TimeSlots = () => {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
{dummyData.map((data) => (
|
||||
<Card
|
||||
className="flex justify-between p-4"
|
||||
key={data.ServiceID + '-time-slot'}
|
||||
>
|
||||
<div>
|
||||
<span>{format(data.StartTime.toString(), 'HH:mm')}</span>
|
||||
<div className="flex">
|
||||
<h5 className="after:mx-2 after:content-['·']">
|
||||
Dr. Jüri Mardikas
|
||||
</h5>
|
||||
<span className="after:mx-2 after:content-['·']">Kardioloog</span>
|
||||
<span>Tervisekassa aeg</span>
|
||||
</div>
|
||||
<div className="flex text-xs">
|
||||
<span className="after:mx-2 after:content-['·']">
|
||||
Ülemiste Tervisemaja 2
|
||||
</span>
|
||||
<span className="after:mx-2 after:content-['·']">
|
||||
Ülemiste füsioteraapiakliinik
|
||||
</span>
|
||||
<span className="after:mx-2 after:content-['·']">
|
||||
Sepapaja 2/1
|
||||
</span>
|
||||
<span>Tallinn</span>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<div className="flex h-full w-full flex-col gap-2 overflow-auto">
|
||||
{paginatedBookings.map((timeSlot, index) => {
|
||||
const isEHIF = timeSlot.HKServiceID > 0;
|
||||
const serviceProviderTitle = getServiceProviderTitle(
|
||||
currentLocale,
|
||||
timeSlot.serviceProvider,
|
||||
);
|
||||
const price =
|
||||
booking.selectedService?.variants?.[0]?.calculated_price
|
||||
?.calculated_amount;
|
||||
return (
|
||||
<Card className="flex justify-between p-4" key={index}>
|
||||
<div>
|
||||
<span>{formatDateAndTime(timeSlot.StartTime.toString())}</span>
|
||||
<div className="flex">
|
||||
<h5
|
||||
className={cn(
|
||||
(serviceProviderTitle || isEHIF) &&
|
||||
"after:mx-2 after:content-['·']",
|
||||
)}
|
||||
>
|
||||
{timeSlot.serviceProvider?.name}
|
||||
</h5>
|
||||
{serviceProviderTitle && (
|
||||
<span
|
||||
className={cn(isEHIF && "after:mx-2 after:content-['·']")}
|
||||
>
|
||||
{serviceProviderTitle}
|
||||
</span>
|
||||
)}
|
||||
{isEHIF && <span>{t('booking:ehifBooking')}</span>}
|
||||
</div>
|
||||
<div className="flex text-xs">
|
||||
{timeSlot.location?.address}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-end flex items-center justify-center gap-2">
|
||||
<span className="text-sm font-semibold">
|
||||
{formatCurrency({
|
||||
currencyCode: 'EUR',
|
||||
locale: 'et-EE',
|
||||
value: price ?? '',
|
||||
})}
|
||||
</span>
|
||||
<Button onClick={() => handleBookTime(timeSlot)} size="sm">
|
||||
<Trans i18nKey="common:book" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
{!paginatedBookings.length && (
|
||||
<div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
|
||||
<p>{t('booking:noResults')}</p>
|
||||
</div>
|
||||
<div className="flex-end flex items-center justify-center gap-2">
|
||||
<span className="text-sm font-semibold">
|
||||
{formatCurrency({
|
||||
currencyCode: 'EUR',
|
||||
locale: 'et-EE',
|
||||
value: 20,
|
||||
})}
|
||||
</span>
|
||||
<Button>
|
||||
<Trans i18nKey="Broneeri" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-muted-foreground text-sm">
|
||||
{t('common:pageOfPages', {
|
||||
page: currentPage,
|
||||
total: totalPages,
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<Trans i18nKey="common:previous" defaultValue="Previous" />
|
||||
</Button>
|
||||
|
||||
{generatePageNumbers().map((page, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={page === currentPage ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
typeof page === 'number' && handlePageChange(page)
|
||||
}
|
||||
disabled={page === '...'}
|
||||
className={cn(
|
||||
'min-w-[2rem]',
|
||||
page === '...' && 'cursor-default hover:bg-transparent',
|
||||
)}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
<Trans i18nKey="common:next" defaultValue="Next" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user