@happychef/reservation-sidebar 2.8.2 → 2.8.3

package/README.md

@@ -1,202 +1,202 @@
-# @happychef/reservation-sidebar
-
-A compound React component for managing restaurant reservations with a sidebar interface.
-
-## Installation
-
-```bash
-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
-
-### Important: Styling Setup
-
-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;
-}
-```
-
-### Basic Usage
-
-```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<FormData>({
-    guests: 2,
-    date: '',
-    time: '',
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    extraInfo: '',
-    menu: '',
-    personeel: '',
-    giftcard: '',
-    zitplaats: '',
-    selectedTableNumbers: [],
-    selectedTableIds: [],
-    reservationMode: 'met_limieten',
-  });
-  const [errors, setErrors] = useState<FormErrors>({});
-  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 (
-    <div className="new-reservation-page">
-      <button onClick={() => setIsOpen(true)}>Open Reservation</button>
-      <ReservationSidebar
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        formData={formData}
-        errors={errors}
-        handleChange={handleChange}
-        handleFinalSubmit={handleFinalSubmit}
-        setFormData={setFormData}
-        isSubmitting={isSubmitting}
-        reservationSubmitted={reservationSubmitted}
-        onNewReservation={handleNewReservation}
-        apiBaseDomain="https://happychef.cloud/"
-      />
-    </div>
-  );
-}
-```
-
-## Sub-components
-
-You can also use individual sub-components:
-
-```tsx
-import {
-  FormField,
-  GiftcardSelection,
-  ZitplaatsSelection,
-  ReservationStepTwo,
-  ReservationSummary,
-} from '@happychef/reservation-sidebar';
-```
-
-## API Configuration
-
-### Setting the API Base Domain
-
-You can configure the API base domain in two ways:
-
-**Method 1: Via Component Prop (Recommended)**
-```tsx
-<ReservationSidebar
-  apiBaseDomain="https://happychef.cloud/"
-  // ... other props
-/>
-```
-
-**Method 2: Via window.baseDomain**
-```tsx
-// Set before rendering the component
-(window as any).baseDomain = 'https://happychef.cloud/';
-```
-
-### API Endpoints
-
-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
-
-### ReservationStepOne Component
-
-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';
-```
-
-## Dependencies
-
-### Peer Dependencies
-- react >=16.8.0
-- react-dom >=16.8.0
-
-### Required Dependencies
-- axios
-- lottie-react
-- moment-timezone
-- react-icons
-
-## License
-
-MIT
+# @happychef/reservation-sidebar
+
+A compound React component for managing restaurant reservations with a sidebar interface.
+
+## Installation
+
+```bash
+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
+
+### Important: Styling Setup
+
+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;
+}
+```
+
+### Basic Usage
+
+```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<FormData>({
+    guests: 2,
+    date: '',
+    time: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    extraInfo: '',
+    menu: '',
+    personeel: '',
+    giftcard: '',
+    zitplaats: '',
+    selectedTableNumbers: [],
+    selectedTableIds: [],
+    reservationMode: 'met_limieten',
+  });
+  const [errors, setErrors] = useState<FormErrors>({});
+  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 (
+    <div className="new-reservation-page">
+      <button onClick={() => setIsOpen(true)}>Open Reservation</button>
+      <ReservationSidebar
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        formData={formData}
+        errors={errors}
+        handleChange={handleChange}
+        handleFinalSubmit={handleFinalSubmit}
+        setFormData={setFormData}
+        isSubmitting={isSubmitting}
+        reservationSubmitted={reservationSubmitted}
+        onNewReservation={handleNewReservation}
+        apiBaseDomain="https://happychef.cloud/"
+      />
+    </div>
+  );
+}
+```
+
+## Sub-components
+
+You can also use individual sub-components:
+
+```tsx
+import {
+  FormField,
+  GiftcardSelection,
+  ZitplaatsSelection,
+  ReservationStepTwo,
+  ReservationSummary,
+} from '@happychef/reservation-sidebar';
+```
+
+## API Configuration
+
+### Setting the API Base Domain
+
+You can configure the API base domain in two ways:
+
+**Method 1: Via Component Prop (Recommended)**
+```tsx
+<ReservationSidebar
+  apiBaseDomain="https://happychef.cloud/"
+  // ... other props
+/>
+```
+
+**Method 2: Via window.baseDomain**
+```tsx
+// Set before rendering the component
+(window as any).baseDomain = 'https://happychef.cloud/';
+```
+
+### API Endpoints
+
+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
+
+### ReservationStepOne Component
+
+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';
+```
+
+## Dependencies
+
+### Peer Dependencies
+- react >=16.8.0
+- react-dom >=16.8.0
+
+### Required Dependencies
+- axios
+- lottie-react
+- moment-timezone
+- react-icons
+
+## License
+
+MIT