53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { DataNotFound } from '@/components/shared/alert';
|
|
import { ServiceCard } from '@/components/shared/service-card';
|
|
import { useServicesQuery } from '@/hooks/api/services';
|
|
import { useOrderStore } from '@/stores/order';
|
|
import { type ServiceFieldsFragment } from '@repo/graphql/types';
|
|
import { cn } from '@repo/ui/lib/utils';
|
|
|
|
export function ServiceSelect() {
|
|
const { data: { services } = {} } = useServicesQuery({});
|
|
|
|
if (!services?.length) return <DataNotFound title="Услуги не найдены" />;
|
|
|
|
return (
|
|
<div className="space-y-2 px-6">
|
|
{services.map(
|
|
(service) => service && <ServiceCardRadio key={service.documentId} {...service} />,
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ServiceCardRadio({ documentId, ...props }: Readonly<ServiceFieldsFragment>) {
|
|
const serviceId = useOrderStore((store) => store.serviceId);
|
|
const setServiceId = useOrderStore((store) => store.setServiceId);
|
|
|
|
const selected = serviceId === documentId;
|
|
|
|
function handleOnSelect() {
|
|
setServiceId(documentId);
|
|
}
|
|
|
|
return (
|
|
<label
|
|
className={cn(
|
|
'flex items-center justify-between rounded-2xl border-2 cursor-pointer',
|
|
selected ? 'border-primary' : 'border-transparent',
|
|
)}
|
|
>
|
|
<input
|
|
checked={selected}
|
|
className="hidden"
|
|
name="service"
|
|
onChange={() => handleOnSelect()}
|
|
type="radio"
|
|
value={documentId}
|
|
/>
|
|
<ServiceCard {...props} />
|
|
</label>
|
|
);
|
|
}
|