asyavee/vitrify-me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

timeslots API

Browse Source
This commit is contained in:
Asya Vee
2025-08-26 23:36:24 +04:00
parent 47baf8dfe2
commit c0647fe512
47 changed files with 830 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/web/components/CustomerDetails.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { User, Users } from 'lucide-react';
import { UseFormRegister, FieldErrors } from 'react-hook-form';
import { useTranslations } from 'next-intl';
import { BookingType } from '@/types/bookings';
interface FormData {
customerName: string;
@@ -13,6 +15,7 @@ interface CustomerDetailsProps {
errors: FieldErrors<FormData>;
participantsCount: number;
onParticipantsCountChange: (count: number) => void;
bookingType: BookingType;
}
const CustomerDetails: React.FC<CustomerDetailsProps> = ({
@@ -20,7 +23,13 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = ({
errors,
participantsCount,
onParticipantsCountChange,
bookingType,
}) => {
const t = useTranslations('bookingForm');
// Calculate min and max based on booking type
const minParticipants = bookingType.min_capacity;
const maxParticipants = bookingType.max_capacity;
return (
<div className="bg-white rounded-xl p-6 shadow-sm">
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
@@ -80,9 +89,9 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = ({
<div className="flex items-center justify-center bg-gray-100 rounded-lg p-1 max-w-xs">
<button
type="button"
onClick={() => onParticipantsCountChange(Math.max(1, participantsCount - 1))}
className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
disabled={participantsCount <= 1}
onClick={() => onParticipantsCountChange(Math.max(minParticipants, participantsCount - 1))}
className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled={participantsCount <= minParticipants}
>
<span className="text-xl font-medium">−</span>
</button>
@@ -92,18 +101,23 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = ({
</div>
<button
type="button"
onClick={() => onParticipantsCountChange(Math.min(8, participantsCount + 1))}
className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
disabled={participantsCount >= 8}
onClick={() => onParticipantsCountChange(Math.min(maxParticipants, participantsCount + 1))}
className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
disabled={participantsCount >= maxParticipants}
>
<span className="text-xl font-medium">+</span>
</button>
</div>
<div className="text-xs text-gray-500 mt-2 text-center">
Min: {minParticipants} • Max: {maxParticipants}
</div>
<input
type="hidden"
{...register('participantsCount', {
min: { value: 1, message: 'At least 1 participant required' },
max: { value: 8, message: 'Maximum 8 participants allowed' }
min: { value: minParticipants, message: `At least ${minParticipants} participants required` },
max: { value: maxParticipants, message: `Maximum ${maxParticipants} participants allowed` }
})}
value={participantsCount}
/>