7bcae12d54
* web/packages: upgrade next * fix(api/orders): update master validation logic to handle optional masters * fix(api/notify, api/orders): enhance notification messages and update order state handling for masters * fix react typings * refactor(order-buttons, action-panel): streamline button handlers and add return functionality * fix(contacts, orders): replace empty state messages with DataNotFound component for better user feedback * feat(bot): add share bot command and update environment configuration for BOT_URL * fix: pnpm-lock.yaml * feat(bot): implement add contact wizard scene and enhance contact handling logic * feat(profile): add BookContactButton component to enhance booking functionality * fix(order-buttons): update cancel and confirm button logic based on order state * feat(service-select): share services list for all enhance service card display with duration formatting and improve layout
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { DataNotFound } from '@/components/shared/alert';
|
|
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';
|
|
import { formatTime } from '@repo/utils/datetime-format';
|
|
|
|
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 && <ServiceCard key={service.documentId} {...service} />)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ServiceCard({ documentId, duration, name }: 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 border-2 rounded-2xl bg-background p-4 cursor-pointer dark:bg-primary/5',
|
|
selected ? 'border-primary' : 'border-transparent',
|
|
)}
|
|
>
|
|
<input
|
|
checked={selected}
|
|
className="hidden"
|
|
name="service"
|
|
onChange={() => handleOnSelect()}
|
|
type="radio"
|
|
value={documentId}
|
|
/>
|
|
<div className="flex w-full items-center justify-between gap-2">
|
|
<span className="text-base font-semibold text-foreground">{name}</span>
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1 px-4 p-2 rounded-full bg-secondary dark:bg-background text-primary text-xs font-medium',
|
|
)}
|
|
>
|
|
<svg
|
|
className="size-4 opacity-70"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M8 1.5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13ZM2.5 8a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0Zm6-2.75a.5.5 0 0 0-1 0v3c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H8.5V5.25Z" />
|
|
</svg>
|
|
{formatTime(duration).user()}
|
|
</span>
|
|
</div>
|
|
</label>
|
|
);
|
|
}
|