@happychef/reservation-sidebar 1.0.0

package/README.md

@@ -0,0 +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

package/dist/index.d.mts

@@ -0,0 +1,199 @@
+import React$1 from 'react';
+import { AxiosRequestConfig } from 'axios';
+
+interface FormData {
+    guests: number;
+    date: string;
+    time: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    extraInfo: string;
+    menu: string;
+    personeel: string;
+    giftcard: string;
+    zitplaats: string;
+    selectedTableNumbers: number[];
+    selectedTableIds: string[];
+    reservationMode: string;
+}
+interface FormErrors {
+    guests?: string;
+    date?: string;
+    time?: string;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    phone?: string;
+    menu?: string;
+    personeel?: string;
+    [key: string]: string | undefined;
+}
+interface ReservationSidebarProps {
+    isOpen: boolean;
+    onClose: () => void;
+    formData: FormData;
+    errors: FormErrors;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    handleFinalSubmit: () => void;
+    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
+    isSubmitting: boolean;
+    reservationSubmitted: boolean;
+    onNewReservation: () => void;
+    apiBaseDomain?: string;
+}
+interface Timeblock {
+    id: string;
+    startTime: string;
+    endTime: string;
+    capacity: number;
+    [key: string]: any;
+}
+interface MenuData {
+    name: string;
+    startDate: string;
+    endDate: string;
+    startHour: string;
+    endHour: string;
+    daysOfWeek: string[];
+    [key: string]: any;
+}
+interface RestaurantData {
+    timeblocks?: Timeblock[];
+    menu?: MenuData[];
+    'general-settings'?: {
+        seatSelectionEnabled?: boolean;
+        [key: string]: any;
+    };
+    'table-settings'?: {
+        isInstalled?: boolean;
+        assignmentMode?: string;
+        [key: string]: any;
+    };
+    floors?: Floor[];
+    [key: string]: any;
+}
+interface Floor {
+    tables: Table[];
+    [key: string]: any;
+}
+interface Table {
+    zitplaats?: string;
+    number?: number;
+    id?: string;
+    [key: string]: any;
+}
+interface Personeel {
+    voornaam: string;
+    achternaam: string;
+    startDate: string;
+    endDate: string;
+    [key: string]: any;
+}
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface FormFieldProps {
+    label: string;
+    name: string;
+    type?: 'text' | 'email' | 'tel' | 'textarea' | 'select';
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onBlur?: () => void;
+    error?: string;
+    placeholder?: string;
+    halfWidth?: boolean;
+    options?: SelectOption[];
+    selectPlaceholder?: string;
+    rightIcon?: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    onRightIconClick?: () => void;
+    tooltipContent?: React.ReactNode;
+}
+interface GiftcardSelectionProps {
+    restaurantData: RestaurantData;
+    formData: FormData;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    resetFormDataFields: (fields: string[]) => void;
+}
+interface ZitplaatsSelectionProps {
+    restaurantData: RestaurantData;
+    formData: FormData;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    resetFormDataFields: (fields: string[]) => void;
+}
+interface ReservationStepOneProps {
+    formData: FormData;
+    errors: FormErrors;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
+    timeblocks: Timeblock[];
+    loadingTimeblocks: boolean;
+    timeblocksError: Error | null;
+    restaurantData: RestaurantData;
+}
+interface ReservationStepTwoProps {
+    formData: FormData;
+    errors: FormErrors;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
+    isSubmitting: boolean;
+    menuData: MenuData[];
+}
+interface ReservationSummaryProps {
+    formData: FormData;
+    onNewReservation: () => void;
+}
+
+declare const ReservationSidebar: React$1.FC<ReservationSidebarProps>;
+
+declare const FormField: React$1.FC<FormFieldProps>;
+
+declare const GiftcardSelection: React$1.FC<GiftcardSelectionProps>;
+
+declare const ZitplaatsSelection: React$1.FC<ZitplaatsSelectionProps>;
+
+/**
+ * Placeholder for ReservationStepOne component
+ *
+ * This component has complex dependencies on:
+ * - @happychef/algorithm package for table availability
+ * - Multiple sub-components (Calendar, DateSelector, TimeSelector, TableSelector, ValueSelector)
+ * - Complex reservation logic
+ *
+ * To implement this component fully:
+ * 1. Install @happychef/algorithm package
+ * 2. Copy the sub-components from StepOne directory
+ * 3. Implement the full logic from the source repository
+ *
+ * For now, this is a placeholder that maintains the interface.
+ */
+declare const ReservationStepOne: React$1.FC<ReservationStepOneProps>;
+
+declare const ReservationStepTwo: React$1.FC<ReservationStepTwoProps>;
+
+declare const ReservationSummary: React$1.FC<ReservationSummaryProps>;
+
+interface ApiConfig extends AxiosRequestConfig {
+    noCache?: boolean;
+}
+interface ApiMethods {
+    get: (endpoint: string, config?: ApiConfig) => Promise<any>;
+    post: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
+    put: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
+    patch: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
+    delete: (endpoint: string, config?: AxiosRequestConfig) => Promise<any>;
+}
+declare const useApi: () => ApiMethods;
+
+declare const getPreferredLanguage: () => string;
+declare const getSection: (translationsObj: Record<string, any>, sectionKey: string, fallbackLang?: string) => Record<string, any>;
+
+export { type Floor, type FormData, type FormErrors, FormField, type FormFieldProps, GiftcardSelection, type GiftcardSelectionProps, type MenuData, type Personeel, ReservationSidebar, type ReservationSidebarProps, ReservationStepOne, type ReservationStepOneProps, ReservationStepTwo, type ReservationStepTwoProps, ReservationSummary, type ReservationSummaryProps, type RestaurantData, type SelectOption, type Table, type Timeblock, ZitplaatsSelection, type ZitplaatsSelectionProps, getPreferredLanguage, getSection, useApi };

package/dist/index.d.ts

@@ -0,0 +1,199 @@
+import React$1 from 'react';
+import { AxiosRequestConfig } from 'axios';
+
+interface FormData {
+    guests: number;
+    date: string;
+    time: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    extraInfo: string;
+    menu: string;
+    personeel: string;
+    giftcard: string;
+    zitplaats: string;
+    selectedTableNumbers: number[];
+    selectedTableIds: string[];
+    reservationMode: string;
+}
+interface FormErrors {
+    guests?: string;
+    date?: string;
+    time?: string;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    phone?: string;
+    menu?: string;
+    personeel?: string;
+    [key: string]: string | undefined;
+}
+interface ReservationSidebarProps {
+    isOpen: boolean;
+    onClose: () => void;
+    formData: FormData;
+    errors: FormErrors;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    handleFinalSubmit: () => void;
+    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
+    isSubmitting: boolean;
+    reservationSubmitted: boolean;
+    onNewReservation: () => void;
+    apiBaseDomain?: string;
+}
+interface Timeblock {
+    id: string;
+    startTime: string;
+    endTime: string;
+    capacity: number;
+    [key: string]: any;
+}
+interface MenuData {
+    name: string;
+    startDate: string;
+    endDate: string;
+    startHour: string;
+    endHour: string;
+    daysOfWeek: string[];
+    [key: string]: any;
+}
+interface RestaurantData {
+    timeblocks?: Timeblock[];
+    menu?: MenuData[];
+    'general-settings'?: {
+        seatSelectionEnabled?: boolean;
+        [key: string]: any;
+    };
+    'table-settings'?: {
+        isInstalled?: boolean;
+        assignmentMode?: string;
+        [key: string]: any;
+    };
+    floors?: Floor[];
+    [key: string]: any;
+}
+interface Floor {
+    tables: Table[];
+    [key: string]: any;
+}
+interface Table {
+    zitplaats?: string;
+    number?: number;
+    id?: string;
+    [key: string]: any;
+}
+interface Personeel {
+    voornaam: string;
+    achternaam: string;
+    startDate: string;
+    endDate: string;
+    [key: string]: any;
+}
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface FormFieldProps {
+    label: string;
+    name: string;
+    type?: 'text' | 'email' | 'tel' | 'textarea' | 'select';
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    onBlur?: () => void;
+    error?: string;
+    placeholder?: string;
+    halfWidth?: boolean;
+    options?: SelectOption[];
+    selectPlaceholder?: string;
+    rightIcon?: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    onRightIconClick?: () => void;
+    tooltipContent?: React.ReactNode;
+}
+interface GiftcardSelectionProps {
+    restaurantData: RestaurantData;
+    formData: FormData;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    resetFormDataFields: (fields: string[]) => void;
+}
+interface ZitplaatsSelectionProps {
+    restaurantData: RestaurantData;
+    formData: FormData;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    resetFormDataFields: (fields: string[]) => void;
+}
+interface ReservationStepOneProps {
+    formData: FormData;
+    errors: FormErrors;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
+    timeblocks: Timeblock[];
+    loadingTimeblocks: boolean;
+    timeblocksError: Error | null;
+    restaurantData: RestaurantData;
+}
+interface ReservationStepTwoProps {
+    formData: FormData;
+    errors: FormErrors;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
+    setFormData: React.Dispatch<React.SetStateAction<FormData>>;
+    isSubmitting: boolean;
+    menuData: MenuData[];
+}
+interface ReservationSummaryProps {
+    formData: FormData;
+    onNewReservation: () => void;
+}
+
+declare const ReservationSidebar: React$1.FC<ReservationSidebarProps>;
+
+declare const FormField: React$1.FC<FormFieldProps>;
+
+declare const GiftcardSelection: React$1.FC<GiftcardSelectionProps>;
+
+declare const ZitplaatsSelection: React$1.FC<ZitplaatsSelectionProps>;
+
+/**
+ * Placeholder for ReservationStepOne component
+ *
+ * This component has complex dependencies on:
+ * - @happychef/algorithm package for table availability
+ * - Multiple sub-components (Calendar, DateSelector, TimeSelector, TableSelector, ValueSelector)
+ * - Complex reservation logic
+ *
+ * To implement this component fully:
+ * 1. Install @happychef/algorithm package
+ * 2. Copy the sub-components from StepOne directory
+ * 3. Implement the full logic from the source repository
+ *
+ * For now, this is a placeholder that maintains the interface.
+ */
+declare const ReservationStepOne: React$1.FC<ReservationStepOneProps>;
+
+declare const ReservationStepTwo: React$1.FC<ReservationStepTwoProps>;
+
+declare const ReservationSummary: React$1.FC<ReservationSummaryProps>;
+
+interface ApiConfig extends AxiosRequestConfig {
+    noCache?: boolean;
+}
+interface ApiMethods {
+    get: (endpoint: string, config?: ApiConfig) => Promise<any>;
+    post: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
+    put: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
+    patch: (endpoint: string, data?: any, config?: AxiosRequestConfig) => Promise<any>;
+    delete: (endpoint: string, config?: AxiosRequestConfig) => Promise<any>;
+}
+declare const useApi: () => ApiMethods;
+
+declare const getPreferredLanguage: () => string;
+declare const getSection: (translationsObj: Record<string, any>, sectionKey: string, fallbackLang?: string) => Record<string, any>;
+
+export { type Floor, type FormData, type FormErrors, FormField, type FormFieldProps, GiftcardSelection, type GiftcardSelectionProps, type MenuData, type Personeel, ReservationSidebar, type ReservationSidebarProps, ReservationStepOne, type ReservationStepOneProps, ReservationStepTwo, type ReservationStepTwoProps, ReservationSummary, type ReservationSummaryProps, type RestaurantData, type SelectOption, type Table, type Timeblock, ZitplaatsSelection, type ZitplaatsSelectionProps, getPreferredLanguage, getSection, useApi };