A compound component for managing restaurant reservations - JavaScript version with independent styles
npm install @happychef/reservation-sidebarbash
npm install @happychef/reservation-sidebar
`
Features
- Complete reservation management UI with sidebar
- Guest selection and date/time picking
- Menu and staff assignment
- Giftcard selection support
- Seat/table assignment (terras/restaurant)
- Auto-fill customer information
- Multi-language support (NL/EN)
- TypeScript support with full type definitions
- Both ESM and CJS module formats
Usage
$3
The component styles are scoped under .new-reservation-page class and require CSS variables. Make sure to:
1. Wrap your app (or at least the component) with the .new-reservation-page class
2. Define required CSS variables in your app's CSS:
`css
:root {
--color-blue: #4CAF50;
--color-blue-hover-accent: #45a049;
--color-white: #ffffff;
--border-radius: 4px;
--z-index-sidebar-reservation: 1000;
--z-index-modal: 999;
}
`
$3
`tsx
import { ReservationSidebar } from '@happychef/reservation-sidebar';
import type { FormData, FormErrors } from '@happychef/reservation-sidebar';
function App() {
const [isOpen, setIsOpen] = useState(false);
const [formData, setFormData] = useState({
guests: 2,
date: '',
time: '',
firstName: '',
lastName: '',
email: '',
phone: '',
extraInfo: '',
menu: '',
personeel: '',
giftcard: '',
zitplaats: '',
selectedTableNumbers: [],
selectedTableIds: [],
reservationMode: 'met_limieten',
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [reservationSubmitted, setReservationSubmitted] = useState(false);
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleFinalSubmit = async () => {
setIsSubmitting(true);
// Submit logic here
setIsSubmitting(false);
setReservationSubmitted(true);
};
const handleNewReservation = () => {
setReservationSubmitted(false);
// Reset form
};
return (
onClose={() => setIsOpen(false)}
formData={formData}
errors={errors}
handleChange={handleChange}
handleFinalSubmit={handleFinalSubmit}
setFormData={setFormData}
isSubmitting={isSubmitting}
reservationSubmitted={reservationSubmitted}
onNewReservation={handleNewReservation}
apiBaseDomain="https://happychef.cloud/"
/>
);
}
`
Sub-components
You can also use individual sub-components:
`tsx
import {
FormField,
GiftcardSelection,
ZitplaatsSelection,
ReservationStepTwo,
ReservationSummary,
} from '@happychef/reservation-sidebar';
`
API Configuration
$3
You can configure the API base domain in two ways:
Method 1: Via Component Prop (Recommended)
`tsx
// ... other props
/>
`
Method 2: Via window.baseDomain
`tsx
// Set before rendering the component
(window as any).baseDomain = 'https://happychef.cloud/';
`
$3
The component expects the following API endpoints to be available:
- GET {baseDomain}api/auth-restaurant/ - Restaurant configuration, timeblocks, menu
- GET {baseDomain}api/personeel - Staff/personnel data
- POST {baseDomain}api/autofill - Customer autofill by email/phone
- GET {baseDomain}api/slots/{restaurantId}/{beginDate}/{endDate} - Reservation slots (for table assignment)
Important Notes
$3
The ReservationStepOne component in this package is currently a placeholder implementation. The full implementation requires:
1. @happychef/algorithm package - for table availability calculations
2. Multiple complex sub-components:
- Calendar
- DateSelector
- TimeSelector
- TableSelector
- ValueSelector
To use the full date/time selection functionality, you'll need to:
- Install the @happychef/algorithm package
- Copy the complete StepOne implementation from the source repository
- Ensure all sub-components are properly integrated
The current placeholder provides basic input fields for guests, date, and time.
TypeScript
Full TypeScript support is included with comprehensive type definitions.
`tsx
import type {
FormData,
FormErrors,
ReservationSidebarProps,
RestaurantData,
MenuData,
Timeblock,
} from '@happychef/reservation-sidebar';
``