d109d50120
- Introduced a new `QuickAppointment` component for scheduling appointments directly from the profile page. - Integrated the `QuickAppointment` component into the profile layout, allowing users to book appointments with a selected master or client. - Implemented a Radix UI Drawer for the appointment booking interface, enhancing user experience with a modal-like interaction. - Updated `pnpm-lock.yaml` and `package.json` to include new dependencies for the Radix UI components and the `vaul` library.
93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
import { useCustomerQuery } from '@/hooks/api/customers';
|
||
import { usePushWithData } from '@/hooks/url';
|
||
import { Button } from '@repo/ui/components/ui/button';
|
||
import {
|
||
Drawer,
|
||
DrawerClose,
|
||
DrawerContent,
|
||
DrawerDescription,
|
||
DrawerFooter,
|
||
DrawerHeader,
|
||
DrawerTitle,
|
||
DrawerTrigger,
|
||
} from '@repo/ui/components/ui/drawer';
|
||
|
||
type QuickAppointmentProps = {
|
||
readonly telegramId: number;
|
||
};
|
||
|
||
export function QuickAppointment({ telegramId }: Readonly<QuickAppointmentProps>) {
|
||
const push = usePushWithData();
|
||
|
||
const { data: { customer: profile } = {} } = useCustomerQuery({ telegramId });
|
||
const { data: { customer: currentUser } = {} } = useCustomerQuery();
|
||
|
||
const handleBookAsClient = () => {
|
||
push('/orders/add', {
|
||
client: currentUser,
|
||
slot: { master: profile },
|
||
});
|
||
};
|
||
|
||
const handleBookAsMaster = () => {
|
||
push('/orders/add', {
|
||
client: profile,
|
||
slot: { master: currentUser },
|
||
});
|
||
};
|
||
|
||
if (!telegramId) return null;
|
||
|
||
return (
|
||
<Drawer>
|
||
<DrawerTrigger asChild>
|
||
<div className="mt-4 flex justify-center">
|
||
<Button className="px-6 py-2 text-sm font-semibold" size="sm">
|
||
Быстрая запись
|
||
</Button>
|
||
</div>
|
||
</DrawerTrigger>
|
||
<DrawerContent>
|
||
<div className="mx-auto w-full max-w-sm">
|
||
<DrawerHeader>
|
||
<DrawerTitle>Быстрая запись</DrawerTitle>
|
||
<DrawerDescription>Выберите действие</DrawerDescription>
|
||
</DrawerHeader>
|
||
<div className="p-4 pt-0">
|
||
<div className="flex flex-col gap-3">
|
||
<DrawerClose asChild>
|
||
<Button
|
||
className="w-full text-sm"
|
||
disabled={!handleBookAsClient}
|
||
onClick={handleBookAsClient}
|
||
size="sm"
|
||
>
|
||
Записаться к мастеру {profile?.name}
|
||
</Button>
|
||
</DrawerClose>
|
||
<DrawerClose asChild>
|
||
<Button
|
||
className="w-full text-sm"
|
||
disabled={!handleBookAsMaster}
|
||
onClick={handleBookAsMaster}
|
||
size="sm"
|
||
variant="secondary"
|
||
>
|
||
Записать клиента к себе
|
||
</Button>
|
||
</DrawerClose>
|
||
</div>
|
||
</div>
|
||
<DrawerFooter>
|
||
<DrawerClose asChild>
|
||
<Button variant="outline">Отмена</Button>
|
||
</DrawerClose>
|
||
</DrawerFooter>
|
||
</div>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
);
|
||
}
|