@happychef/reservation-sidebar 2.0.9 → 2.1.0

package/dist/index.js

@@ -1,18 +1,20 @@
 'use strict';
 
-var React4 = require('react');
+var React9 = require('react');
+var framerMotion = require('framer-motion');
+var moment2 = require('moment-timezone');
 var algorithm = require('@happychef/algorithm');
+var luxon = require('luxon');
+var axios = require('axios');
 var Lottie = require('lottie-react');
 var fa = require('react-icons/fa');
-var axios = require('axios');
-var moment2 = require('moment-timezone');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
-var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
-var axios__default = /*#__PURE__*/_interopDefault(axios);
+var React9__default = /*#__PURE__*/_interopDefault(React9);
 var moment2__default = /*#__PURE__*/_interopDefault(moment2);
+var axios__default = /*#__PURE__*/_interopDefault(axios);
+var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -4050,7 +4052,7 @@ var require_nl = __commonJS({
   "node_modules/moment/locale/nl.js"(exports$1, module) {
     (function(global, factory) {
       typeof exports$1 === "object" && typeof module !== "undefined" && typeof __require === "function" ? factory(require_moment()) : typeof define === "function" && define.amd ? define(["../moment"], factory) : factory(global.moment);
-    })(exports$1, (function(moment3) {
+    })(exports$1, (function(moment7) {
       var monthsShortWithDots = "jan._feb._mrt._apr._mei_jun._jul._aug._sep._okt._nov._dec.".split("_"), monthsShortWithoutDots = "jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_"), monthsParse = [
         /^jan/i,
         /^feb/i,
@@ -4065,7 +4067,7 @@ var require_nl = __commonJS({
         /^nov/i,
         /^dec/i
       ], monthsRegex = /^(januari|februari|maart|april|mei|ju[nl]i|augustus|september|oktober|november|december|jan\.?|feb\.?|mrt\.?|apr\.?|ju[nl]\.?|aug\.?|sep\.?|okt\.?|nov\.?|dec\.?)/i;
-      var nl = moment3.defineLocale("nl", {
+      var nl = moment7.defineLocale("nl", {
         months: "januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split(
           "_"
         ),
@@ -4161,26 +4163,1129 @@ function styleInject(css, { insertAt } = {}) {
   }
 }
 
+// src/components/ReservationStepOne/css/valueSelector.css
+styleInject(".new-reservation-page .value-selector {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  margin-bottom: 20px;\n}\n.new-reservation-page .non-absolute {\n  position: relative !important;\n}\n.new-reservation-page .non-absolute::before {\n  background: none;\n}\n.new-reservation-page .predefined-values {\n  display: flex;\n  gap: 10px;\n}\n.new-reservation-page .predefined-value-button {\n  flex: 1;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius);\n  background-color: var(--color-white);\n  cursor: pointer;\n  font-size: 1rem;\n  transition: background-color 0.3s ease;\n}\n.new-reservation-page .predefined-value-button.active,\n.new-reservation-page .predefined-value-button:hover {\n  background-color: var(--color-blue);\n  color: var(--color-white);\n}\n.new-reservation-page .slider-container {\n  display: flex;\n  align-items: center;\n  gap: 15px;\n}\n.new-reservation-page .slider {\n  flex: 1;\n  appearance: none;\n  -webkit-appearance: none;\n  height: 5px;\n  background: #ddd;\n  border-radius: 5px;\n  outline: none;\n}\n.new-reservation-page .slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  background: var(--color-blue);\n  cursor: pointer;\n  border-radius: 50%;\n}\n.new-reservation-page .value-input {\n  width: 80px;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius);\n  font-size: 1rem;\n}\n");
+
+// src/components/ReservationStepOne/ValueSelector.js
+var ValueSelectorGuests = ({ setGuests, value: value2, onChange }) => {
+  const predefinedValues = [1, 2, 3, "4+"];
+  const [selectedValue, setSelectedValue] = React9.useState(value2 || "");
+  const [showSlider, setShowSlider] = React9.useState(false);
+  const handlePredefinedValueClick = (val) => {
+    if (val === "4+") {
+      setShowSlider(true);
+      setSelectedValue(4);
+      setGuests(4);
+      onChange({ target: { name: "guests", value: 4 } });
+    } else {
+      setShowSlider(false);
+      setSelectedValue(val);
+      setGuests(val);
+      onChange({ target: { name: "guests", value: val } });
+    }
+  };
+  const handleSliderChange = (e) => {
+    const val = e.target.value;
+    setSelectedValue(val);
+    setGuests(val);
+    onChange({ target: { name: "guests", value: val } });
+  };
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setSelectedValue(val);
+    setGuests(val);
+    onChange({ target: { name: "guests", value: val } });
+  };
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "value-selector", translate: "no" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "predefined-values" }, predefinedValues.map((val) => /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      key: val,
+      type: "button",
+      className: `predefined-value-button ${selectedValue == val || val === "4+" && showSlider ? "active" : ""}`,
+      onClick: () => handlePredefinedValueClick(val)
+    },
+    val === "4+" ? "4+" : `${val} ${val === 1 ? "p" : "p"}`
+  ))), /* @__PURE__ */ React9__default.default.createElement(framerMotion.AnimatePresence, null, showSlider && /* @__PURE__ */ React9__default.default.createElement(
+    framerMotion.motion.div,
+    {
+      className: "slider-container",
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 }
+    },
+    /* @__PURE__ */ React9__default.default.createElement(
+      "input",
+      {
+        type: "range",
+        min: "4",
+        max: "15",
+        step: "1",
+        value: selectedValue,
+        onChange: handleSliderChange,
+        className: "slider non-absolute"
+      }
+    ),
+    /* @__PURE__ */ React9__default.default.createElement(
+      "input",
+      {
+        type: "number",
+        name: "guests",
+        value: selectedValue,
+        onChange: handleInputChange,
+        className: "value-input",
+        min: "4",
+        max: "100",
+        step: "1"
+      }
+    )
+  )));
+};
+var ValueSelector_default = ValueSelectorGuests;
+
+// src/components/ReservationStepOne/Calendar.js
+__toESM(require_nl());
+var isWeekInPast = (weekStartDate) => {
+  const today = moment2__default.default().tz("Europe/Brussels").startOf("day");
+  const weekEndDate = weekStartDate.clone().add(6, "days").endOf("day");
+  return weekEndDate.isBefore(today);
+};
+var isSameDay = (date1, date2) => date1.isSame(date2, "day");
+
+// src/components/ReservationStepOne/css/calendar.css
+styleInject(".new-reservation-page .calendar-container {\n  position: relative;\n  width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-display {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  border: #ccc 1px solid;\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  border-radius: 5px;\n}\n.new-reservation-page .calendar-container .calendar-display span:first-child {\n  flex-grow: 1;\n}\n.new-reservation-page .calendar-container .calendar {\n  position: absolute;\n  z-index: 1000;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  border: 1px solid #ccc;\n  margin-top: 5px;\n  padding: 10px;\n  border-radius: 10px;\n  animation: fadeInCalendar 0.3s ease-in-out;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n@keyframes fadeInCalendar {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.new-reservation-page .calendar-container .availability-hold-btn {\n  font-size: 10px;\n}\n.new-reservation-page .calendar-container .calendar-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.new-reservation-page .calendar-container .calendar-header button {\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  font-size: 18px;\n}\n.new-reservation-page .calendar-container .calendar-header span {\n  font-size: 15px;\n  color: gray;\n  font-weight: 500;\n}\n.new-reservation-page .calendar-container .calendar-weeks-wrapper {\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n.new-reservation-page .calendar-container .calendar-table th,\n.new-reservation-page .calendar-container .calendar-table td {\n  width: 14.28%;\n  text-align: center;\n  padding: 5px;\n}\n.calendar-container .calendar-table th {\n  color: #666;\n  font-weight: normal;\n  padding-bottom: 10px;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n  vertical-align: middle;\n  cursor: pointer;\n  border: none;\n  opacity: 1;\n  position: relative;\n}\n.new-reservation-page .calendar-container .calendar-table td.empty-day {\n  cursor: default;\n}\n.new-reservation-page .calendar-container .calendar-table td:hover .day-square.available {\n  transform: scale(1.05);\n}\n.new-reservation-page .calendar-container .day-square {\n  position: relative;\n  width: 38px;\n  height: 38px;\n  border-radius: 4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  transition: all 0.2s ease;\n  font-size: 16px;\n  margin: 0 auto;\n}\n.new-reservation-page .calendar-container .day-number {\n  line-height: 1;\n  z-index: 2;\n}\n.new-reservation-page .calendar-container .available .day-square {\n  background-color: #ccffcc;\n  color: #006600;\n}\n.new-reservation-page .calendar-container .available:hover .day-square {\n  background-color: #b3ffb3;\n}\n.new-reservation-page .calendar-container .available:active .day-square {\n  background-color: #99ff99;\n}\n.new-reservation-page .calendar-container .unavailable .day-square {\n  background-color: rgba(139, 0, 0, 0.13);\n  color: darkred;\n}\n.new-reservation-page .calendar-container .gray-out .day-square {\n  background-color: #e0e0e0;\n  color: #999;\n  cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .selected .day-square {\n  background-color: #006600;\n  color: #ccffcc;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable,\n.new-reservation-page .calendar-container .calendar-table td.gray-out {\n  cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable:hover .day-square,\n.new-reservation-page .calendar-container .calendar-table td.gray-out:hover .day-square {\n  transform: none;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n  border: none;\n}\n.new-reservation-page .calendar-container .arrow {\n  margin-left: auto;\n  color: gray;\n  display: flex;\n  align-items: center;\n}\n.new-reservation-page .calendar-container .available .availability-badge {\n  background: #38a169;\n}\n.new-reservation-page .calendar-container .selected .availability-badge {\n  background: #2d3748;\n}\n@media screen and (max-width: 900px) {\n  .calendar-container .day-square {\n    width: 35px !important;\n    height: 35px !important;\n    font-size: 15px !important;\n  }\n  .calendar-container .calendar-header span {\n    font-size: 12px;\n  }\n  .new-reservation-page .calendar-container .availability-toggle-btn {\n    padding: 5px 8px;\n    font-size: 11px;\n  }\n}\n");
+
+// src/components/ReservationStepOne/translations.json
+var translations_default = {
+  nl: {
+    reservationStepOne: {
+      errors: {
+        openingHoursNotSet: "Openingstijden niet ingesteld.",
+        clickHereToSet: "Klik hier om uw openingsuren in te stellen."
+      },
+      modes: {
+        withLimits: "Met Limieten",
+        unlimited: "Onbeperkt",
+        openingHours: "Openingsuren",
+        free: "Vrij"
+      },
+      fields: {
+        time: "Tijd"
+      },
+      messages: {
+        searchingTables: "Beschikbare tafels zoeken...",
+        noTablesAvailable: "Geen specifieke tafels beschikbaar voor deze selectie."
+      },
+      warnings: {
+        unlimitedMode: "Onbeperkt zal geen rekening houden met maximum limieten."
+      }
+    },
+    calendar: {
+      selectDatePlaceholder: "Selecteer een datum",
+      today: "Vandaag",
+      tomorrow: "Morgen",
+      prevWeek: "Vorige week",
+      nextWeek: "Volgende week",
+      dayHeaders: ["Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
+      seatsQuestion: "Zitplaatsen?"
+    },
+    timeSelector: {
+      shifts: {
+        breakfast: "Ontbijt",
+        lunch: "Lunch",
+        dinner: "Diner"
+      },
+      selectMeal: "Selecteer een maaltijd",
+      selectTime: "Selecteer een tijd",
+      noDateSelected: "Selecteer eerst een datum.",
+      noTimes: "Geen beschikbare tijden.",
+      back: "Terug"
+    },
+    tableSelector: {
+      label: "Selecteer beschikbare tafel(s):",
+      table: "Tafel",
+      max: "Max",
+      noTables: "Geen specifieke tafels beschikbaar voor deze tijd/gasten combinatie."
+    }
+  },
+  en: {
+    reservationStepOne: {
+      errors: {
+        openingHoursNotSet: "Opening hours not set.",
+        clickHereToSet: "Click here to set your opening hours."
+      },
+      modes: {
+        withLimits: "With Limits",
+        unlimited: "Unlimited",
+        openingHours: "Opening Hours",
+        free: "Free"
+      },
+      fields: {
+        time: "Time"
+      },
+      messages: {
+        searchingTables: "Searching for available tables...",
+        noTablesAvailable: "No specific tables available for this selection."
+      },
+      warnings: {
+        unlimitedMode: "Unlimited will not take into account maximum limits."
+      }
+    },
+    calendar: {
+      selectDatePlaceholder: "Select a date",
+      today: "Today",
+      tomorrow: "Tomorrow",
+      prevWeek: "Previous week",
+      nextWeek: "Next week",
+      dayHeaders: ["M", "T", "W", "T", "F", "S", "S"],
+      seatsQuestion: "Seating?"
+    },
+    timeSelector: {
+      shifts: {
+        breakfast: "Breakfast",
+        lunch: "Lunch",
+        dinner: "Dinner"
+      },
+      selectMeal: "Select a meal",
+      selectTime: "Select a time",
+      noDateSelected: "Please select a date first.",
+      noTimes: "No available times.",
+      back: "Back"
+    },
+    tableSelector: {
+      label: "Select available table(s):",
+      table: "Table",
+      max: "Max",
+      noTables: "No specific tables available for this time/guest combination."
+    }
+  },
+  fr: {
+    reservationStepOne: {
+      errors: {
+        openingHoursNotSet: "Horaires non d\xE9finies.",
+        clickHereToSet: "Cliquez ici pour d\xE9finir vos horaires."
+      },
+      modes: {
+        withLimits: "Avec Limites",
+        unlimited: "Illimit\xE9",
+        openingHours: "Horaires",
+        free: "Libre"
+      },
+      fields: {
+        time: "Heure"
+      },
+      messages: {
+        searchingTables: "Recherche de tables disponibles...",
+        noTablesAvailable: "Aucune table sp\xE9cifique disponible pour cette s\xE9lection."
+      },
+      warnings: {
+        unlimitedMode: "Illimit\xE9 ne tiendra pas compte des limites maximales."
+      }
+    },
+    calendar: {
+      selectDatePlaceholder: "S\xE9lectionnez une date",
+      today: "Aujourd'hui",
+      tomorrow: "Demain",
+      prevWeek: "Semaine pr\xE9c\xE9dente",
+      nextWeek: "Semaine suivante",
+      dayHeaders: ["Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"],
+      seatsQuestion: "Places ?"
+    },
+    timeSelector: {
+      shifts: {
+        breakfast: "Petit-d\xE9jeuner",
+        lunch: "D\xE9jeuner",
+        dinner: "D\xEEner"
+      },
+      selectMeal: "S\xE9lectionnez un repas",
+      selectTime: "S\xE9lectionnez une heure",
+      noDateSelected: "Veuillez d'abord s\xE9lectionner une date.",
+      noTimes: "Aucun horaire disponible.",
+      back: "Retour"
+    },
+    tableSelector: {
+      label: "S\xE9lectionnez les table(s) disponibles :",
+      table: "Table",
+      max: "Max",
+      noTables: "Aucune table sp\xE9cifique disponible pour cette combinaison temps/convives."
+    }
+  }
+};
+
+// src/components/ReservationStepOne/Calendar.js
+moment2__default.default.locale("nl");
+var Calendar = ({
+  guests: guests2,
+  selectedDate,
+  onSelectDate,
+  autoExpand,
+  reservationMode,
+  restaurantData,
+  startDate,
+  onWeekChange,
+  reservations,
+  giftcard,
+  zitplaats
+}) => {
+  const lang = localStorage.getItem("preferredLanguage") || "nl";
+  const t = translations_default[lang].calendar;
+  const [isExpanded, setIsExpanded] = React9.useState(autoExpand || false);
+  const [showAvailabilities, setShowAvailabilities] = React9.useState(false);
+  const calendarRef = React9.useRef(null);
+  const hideAvailTimerRef = React9.useRef(null);
+  const maxDate = moment2__default.default().tz("Europe/Amsterdam").add(1, "year").endOf("day");
+  React9.useEffect(() => {
+    if (autoExpand) {
+      setIsExpanded(true);
+    }
+  }, [autoExpand]);
+  React9.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (calendarRef.current && !calendarRef.current.contains(event.target)) {
+        setIsExpanded(false);
+        setShowAvailabilities(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  React9.useEffect(() => {
+    return () => {
+      if (hideAvailTimerRef.current) {
+        clearTimeout(hideAvailTimerRef.current);
+        hideAvailTimerRef.current = null;
+      }
+    };
+  }, []);
+  const showAvailabilityNow = () => {
+    if (hideAvailTimerRef.current) {
+      clearTimeout(hideAvailTimerRef.current);
+      hideAvailTimerRef.current = null;
+    }
+    setShowAvailabilities(true);
+  };
+  const hideAvailabilityAfterDelay = (delay = 1e3) => {
+    if (hideAvailTimerRef.current) {
+      clearTimeout(hideAvailTimerRef.current);
+    }
+    hideAvailTimerRef.current = setTimeout(() => {
+      setShowAvailabilities(false);
+      hideAvailTimerRef.current = null;
+    }, delay);
+  };
+  const computeMaxGuestsForDate = (date, today) => {
+    if (date.isBefore(today, "day") || date.isAfter(maxDate, "day")) {
+      return 0;
+    }
+    const formattedDate = date.format("YYYY-MM-DD");
+    if (showAvailabilities) {
+      const tableSettings2 = restaurantData?.["table-settings"] || {};
+      const isTableAssignmentEnabled2 = tableSettings2.isInstalled === true && tableSettings2.assignmentMode === "automatic";
+      let maxFittable2 = 0;
+      for (let g = 1; g <= 21; g++) {
+        let ok;
+        if (isTableAssignmentEnabled2) {
+          ok = algorithm.isDateAvailableWithTableCheck(
+            restaurantData,
+            formattedDate,
+            reservations,
+            g,
+            giftcard || null
+          );
+        } else {
+          ok = algorithm.isDateAvailable(
+            restaurantData,
+            formattedDate,
+            reservations,
+            g,
+            giftcard || null
+          );
+        }
+        if (ok) maxFittable2 = g;
+      }
+      return maxFittable2;
+    }
+    if (reservationMode === "vrije_keuze") {
+      return 21;
+    }
+    if (reservationMode !== "met_limieten") {
+      const open = algorithm.isDateAvailable(
+        restaurantData,
+        formattedDate,
+        reservations,
+        -1e4,
+        null
+      );
+      return open ? 21 : 0;
+    }
+    const tableSettings = restaurantData?.["table-settings"] || {};
+    const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && reservationMode === "met_limieten";
+    let maxFittable = 0;
+    for (let g = 1; g <= 21; g++) {
+      let ok;
+      if (isTableAssignmentEnabled) {
+        ok = algorithm.isDateAvailableWithTableCheck(
+          restaurantData,
+          formattedDate,
+          reservations,
+          g,
+          giftcard || null
+        );
+      } else {
+        ok = algorithm.isDateAvailable(
+          restaurantData,
+          formattedDate,
+          reservations,
+          g,
+          giftcard || null
+        );
+      }
+      if (ok) maxFittable = g;
+    }
+    return maxFittable;
+  };
+  const generateCalendarDays = (currentDate) => {
+    const days2 = [];
+    const today = moment2__default.default().tz("Europe/Amsterdam").startOf("day");
+    const firstDayOfMonth = currentDate.clone().startOf("month");
+    const lastDayOfMonth = currentDate.clone().endOf("month");
+    const tableSettings = restaurantData?.["table-settings"] || {};
+    const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && reservationMode === "met_limieten";
+    let date = firstDayOfMonth.clone();
+    while (date.isSameOrBefore(lastDayOfMonth, "day")) {
+      const formattedDate = date.format("YYYY-MM-DD");
+      let isAvailable;
+      if (reservationMode === "vrije_keuze") {
+        isAvailable = date.isBetween(today, maxDate, null, "[]");
+      } else {
+        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
+        if (isTableAssignmentEnabled) {
+          isAvailable = algorithm.isDateAvailableWithTableCheck(
+            restaurantData,
+            formattedDate,
+            reservations,
+            adjustedGuests,
+            reservationMode === "met_limieten" ? giftcard : null
+          );
+        } else {
+          isAvailable = algorithm.isDateAvailable(
+            restaurantData,
+            formattedDate,
+            reservations,
+            adjustedGuests,
+            reservationMode === "met_limieten" ? giftcard : null
+          );
+        }
+      }
+      const maxGuestsAvailable = computeMaxGuestsForDate(date, today);
+      days2.push({
+        date: date.clone(),
+        isPast: date.isBefore(today, "day"),
+        isFuture: date.isAfter(maxDate, "day"),
+        isAvailable,
+        maxGuestsAvailable
+      });
+      date.add(1, "day");
+    }
+    return days2;
+  };
+  const handleDateClick = (day) => {
+    if (day.isAvailable && !day.isPast && !day.isFuture) {
+      onSelectDate(day.date.format("YYYY-MM-DD"));
+      setIsExpanded(false);
+      setShowAvailabilities(false);
+    }
+  };
+  const handlePrevMonth = () => {
+    const newStartDate = startDate.clone().subtract(1, "month").startOf("month");
+    const today = moment2__default.default().tz("Europe/Amsterdam").startOf("day");
+    if (newStartDate.clone().endOf("month").isBefore(today, "day")) {
+      console.log("Cannot go to previous month. It is in the past.");
+      return;
+    }
+    onWeekChange(newStartDate);
+  };
+  const handleNextMonth = () => {
+    const newStartDate = startDate.clone().add(1, "month").startOf("month");
+    onWeekChange(newStartDate);
+  };
+  const formatDisplayDate = () => {
+    if (!selectedDate) {
+      return t.selectDatePlaceholder;
+    }
+    const selectedMoment = moment2__default.default(selectedDate, "YYYY-MM-DD").tz("Europe/Amsterdam").startOf("day");
+    const today = moment2__default.default().tz("Europe/Amsterdam").startOf("day");
+    const tomorrow = today.clone().add(1, "day");
+    if (selectedMoment.isSame(today, "day")) {
+      return t.today;
+    } else if (selectedMoment.isSame(tomorrow, "day")) {
+      return t.tomorrow;
+    } else {
+      return selectedMoment.format("dddd D MMMM YYYY");
+    }
+  };
+  const renderCalendarGrid = (days2) => {
+    const firstDayOfMonth = startDate.clone().startOf("month");
+    const dayOfWeek = firstDayOfMonth.day();
+    const mondayStartDayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    const calendarGrid = [];
+    for (let i = 0; i < mondayStartDayOfWeek; i++) {
+      calendarGrid.push(null);
+    }
+    calendarGrid.push(...days2);
+    const totalCells = calendarGrid.length;
+    const weeksNeeded = Math.ceil(totalCells / 7);
+    while (calendarGrid.length < weeksNeeded * 7) {
+      calendarGrid.push(null);
+    }
+    const weeks2 = [];
+    for (let week = 0; week < weeksNeeded; week++) {
+      const weekDays = calendarGrid.slice(week * 7, week * 7 + 7);
+      weeks2.push(weekDays);
+    }
+    return weeks2;
+  };
+  const days = startDate ? generateCalendarDays(startDate) : [];
+  const weeks = startDate ? renderCalendarGrid(days) : [];
+  const dayHeaders = t.dayHeaders;
+  const renderAvailabilityNumber = (value2) => {
+    if (value2 >= 21) return "20+";
+    return String(value2);
+  };
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar-container", ref: calendarRef }, /* @__PURE__ */ React9__default.default.createElement(
+    "div",
+    {
+      className: "calendar-display",
+      onClick: () => setIsExpanded(!isExpanded)
+    },
+    /* @__PURE__ */ React9__default.default.createElement("span", null, formatDisplayDate()),
+    /* @__PURE__ */ React9__default.default.createElement("span", { className: "arrow" }, /* @__PURE__ */ React9__default.default.createElement(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 24 24",
+        style: {
+          transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+          transition: "transform 0.2s"
+        }
+      },
+      /* @__PURE__ */ React9__default.default.createElement(
+        "path",
+        {
+          d: "M7 10l5 5 5-5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }
+      )
+    ))
+  ), isExpanded && startDate && /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar-header" }, /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handlePrevMonth,
+      "aria-label": t.prevWeek
+    },
+    "<"
+  ), /* @__PURE__ */ React9__default.default.createElement("span", null, startDate.format("MMMM YYYY")), /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleNextMonth,
+      "aria-label": t.nextWeek
+    },
+    ">"
+  ), /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `availability-hold-btn ${showAvailabilities ? "active" : ""}`,
+      "aria-pressed": showAvailabilities,
+      "aria-label": "Houd ingedrukt om beschikbaarheden te tonen",
+      onMouseDown: showAvailabilityNow,
+      onMouseUp: () => hideAvailabilityAfterDelay(1e3),
+      onMouseLeave: () => hideAvailabilityAfterDelay(1e3),
+      onTouchStart: showAvailabilityNow,
+      onTouchEnd: () => hideAvailabilityAfterDelay(1e3),
+      onTouchCancel: () => hideAvailabilityAfterDelay(1e3),
+      onKeyDown: (e) => {
+        if (e.key === " " || e.key === "Enter") showAvailabilityNow();
+      },
+      onKeyUp: (e) => {
+        if (e.key === " " || e.key === "Enter")
+          hideAvailabilityAfterDelay(1e3);
+      },
+      style: {
+        fontSize: "15px",
+        color: "gray",
+        fontWeight: "450",
+        textDecoration: "underline"
+      }
+    },
+    t.seatsQuestion
+  )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "calendar-weeks-wrapper" }, /* @__PURE__ */ React9__default.default.createElement("table", { className: "calendar-table" }, /* @__PURE__ */ React9__default.default.createElement("thead", null, /* @__PURE__ */ React9__default.default.createElement("tr", { translate: "no" }, dayHeaders.map((day, i) => /* @__PURE__ */ React9__default.default.createElement("th", { key: i }, day)))), /* @__PURE__ */ React9__default.default.createElement("tbody", null, weeks.map((week, weekIndex) => /* @__PURE__ */ React9__default.default.createElement("tr", { key: weekIndex, translate: "no" }, week.map((dayObj, dayIndex) => {
+    if (!dayObj) {
+      return /* @__PURE__ */ React9__default.default.createElement("td", { key: dayIndex, className: "empty-day" });
+    }
+    const isSelected = selectedDate && isSameDay(
+      dayObj.date,
+      moment2__default.default(selectedDate, "YYYY-MM-DD").tz(
+        "Europe/Amsterdam"
+      )
+    );
+    const classNames = [];
+    if (dayObj.isPast) {
+      classNames.push("gray-out");
+    } else if (dayObj.isAvailable) {
+      classNames.push("available");
+    } else {
+      classNames.push("unavailable");
+    }
+    if (isSelected) {
+      classNames.push("selected");
+    }
+    return /* @__PURE__ */ React9__default.default.createElement(
+      "td",
+      {
+        key: dayIndex,
+        className: classNames.join(" "),
+        onClick: () => handleDateClick(dayObj),
+        style: {
+          "--animation-order": dayIndex + weekIndex * 7
+        }
+      },
+      /* @__PURE__ */ React9__default.default.createElement(
+        "div",
+        {
+          className: `day-square ${showAvailabilities ? "showing-availabilities" : ""}`
+        },
+        /* @__PURE__ */ React9__default.default.createElement("span", { className: "day-number" }, showAvailabilities ? renderAvailabilityNumber(
+          dayObj.maxGuestsAvailable
+        ) : dayObj.date.date())
+      )
+    );
+  }))))))));
+};
+var Calendar_default = Calendar;
+
+// src/components/ReservationStepOne/DateSelector.js
+var import_moment = __toESM(require_moment());
+var DateSelector = ({
+  guests: guests2,
+  formData,
+  handleChange,
+  resetFormDataFields,
+  restaurantData,
+  reservations,
+  startDate,
+  onWeekChange,
+  reservationMode
+}) => {
+  const handleDateSelect = (date) => {
+    const formatted = (0, import_moment.default)(date).format("YYYY-MM-DD");
+    console.log("Selected date:", formatted);
+    handleChange({ target: { name: "date", value: formatted } });
+    resetFormDataFields(["time"]);
+  };
+  const monthStartDate = startDate ? startDate.clone().startOf("month") : (0, import_moment.default)().startOf("month");
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group date-selector-container" }, /* @__PURE__ */ React9__default.default.createElement(
+    Calendar_default,
+    {
+      guests: guests2,
+      selectedDate: formData.date || null,
+      onSelectDate: handleDateSelect,
+      autoExpand: false,
+      reservationMode,
+      restaurantData,
+      startDate: monthStartDate,
+      onWeekChange,
+      reservations,
+      giftcard: formData.giftcard,
+      zitplaats: formData.zitplaats
+    }
+  ));
+};
+var DateSelector_default = DateSelector;
+
+// src/components/ReservationStepOne/css/timeSelector.css
+styleInject(".new-reservation-page .time-selector-container {\n  position: relative;\n}\n.new-reservation-page .time-display {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px;\n  background-color: #fff;\n  border: #ccc 1px solid;\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  border-radius: 5px;\n}\n.new-reservation-page .time-display span:first-child {\n  flex-grow: 1;\n}\n.new-reservation-page .time-selector {\n  position: absolute;\n  z-index: 1000;\n  width: 100%;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: rgba(255, 255, 255, 1);\n  border: 1px solid #ccc;\n  margin-top: 5px;\n  padding: 10px;\n  border-radius: 10px;\n  animation: fadeInTimeSelector 0.3s ease-in-out;\n  top: 75px;\n}\n@keyframes fadeInTimeSelector {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.new-reservation-page .time-period {\n  margin-bottom: 15px;\n}\n.new-reservation-page .time-period-label {\n  font-weight: bold;\n  margin-bottom: 5px;\n}\n.new-reservation-page .time-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n}\n.new-reservation-page .time-option {\n  padding: 8px 12px;\n  background-color: #ccffcc;\n  color: #006600;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.new-reservation-page .time-option:hover {\n  background-color: #b3ffb3;\n}\n.new-reservation-page .time-option.selected {\n  background-color: #006600;\n  color: #ccffcc;\n}\n.new-reservation-page .info-text {\n  color: #666;\n  font-style: italic;\n}\n.new-reservation-page .arrow {\n  margin-left: auto;\n  color: gray;\n  display: flex;\n  align-items: center;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .time-option {\n    padding: 6px 10px;\n    font-size: 14px;\n  }\n}\n");
+var TimeSelector = ({
+  guests: guests2,
+  formData,
+  handleChange,
+  field,
+  selectedDate,
+  expanded,
+  setCurrentExpandedField,
+  restaurantData,
+  reservations,
+  reservationMode
+}) => {
+  const lang = localStorage.getItem("preferredLanguage") || "nl";
+  const t = translations_default[lang].timeSelector;
+  const [isExpanded, setIsExpanded] = React9.useState(expanded || false);
+  const [availableTimes, setAvailableTimes] = React9.useState([]);
+  const [selectedMealPeriod, setSelectedMealPeriod] = React9.useState(null);
+  const timeSelectorRef = React9.useRef(null);
+  const shifts = {
+    breakfast: { start: "07:00", end: "11:00", label: t.shifts.breakfast },
+    lunch: { start: "11:00", end: "16:00", label: t.shifts.lunch },
+    dinner: { start: "16:00", end: "23:00", label: t.shifts.dinner }
+  };
+  React9.useEffect(() => {
+    if (!selectedDate || !guests2) {
+      setAvailableTimes([]);
+      return;
+    }
+    if (reservationMode === "vrije_keuze") {
+      if (selectedMealPeriod) {
+        const shift = shifts[selectedMealPeriod];
+        const start = luxon.DateTime.fromISO(`${selectedDate}T${shift.start}`, {
+          zone: "Europe/Brussels"
+        });
+        const end = luxon.DateTime.fromISO(`${selectedDate}T${shift.end}`, {
+          zone: "Europe/Brussels"
+        });
+        const times = [];
+        let current = start;
+        while (current < end) {
+          times.push({
+            value: current.toFormat("HH:mm"),
+            label: current.toFormat("HH:mm")
+          });
+          current = current.plus({ minutes: 15 });
+        }
+        setAvailableTimes(times);
+      } else {
+        setAvailableTimes([]);
+      }
+    } else {
+      if (restaurantData && reservations) {
+        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
+        const tableSettings = restaurantData?.["table-settings"] || {};
+        const shouldUseTableFiltering = reservationMode === "met_limieten" && tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
+        const selectedGiftcard = reservationMode === "met_limieten" ? formData.giftcard : null;
+        const timeblocks = algorithm.getAvailableTimeblocks(
+          restaurantData,
+          selectedDate,
+          reservations,
+          adjustedGuests,
+          selectedGiftcard
+        );
+        const filtered = shouldUseTableFiltering ? algorithm.getAvailableTimeblocksWithTableCheck(
+          restaurantData,
+          selectedDate,
+          timeblocks,
+          adjustedGuests,
+          reservations
+        ) : timeblocks;
+        const times = Object.keys(filtered).map((time) => ({
+          value: time,
+          label: filtered[time].name || time
+        }));
+        times.sort((a, b) => {
+          const [aH, aM] = a.value.split(":").map(Number);
+          const [bH, bM] = b.value.split(":").map(Number);
+          return aH * 60 + aM - (bH * 60 + bM);
+        });
+        setAvailableTimes(times);
+        if (formData[field.id] && !times.some((ti) => ti.value === formData[field.id])) {
+          handleChange({ target: { name: field.id, value: "" } });
+        }
+      } else {
+        setAvailableTimes([]);
+      }
+    }
+  }, [
+    selectedDate,
+    guests2,
+    restaurantData,
+    reservations,
+    reservationMode,
+    field.id,
+    selectedMealPeriod,
+    // only track the specific time value (not the whole formData) to avoid seat-triggered reruns
+    formData[field.id],
+    handleChange
+  ]);
+  React9.useEffect(() => {
+    if (reservationMode === "vrije_keuze") {
+      setSelectedMealPeriod(null);
+      if (formData[field.id]) {
+        handleChange({ target: { name: field.id, value: "" } });
+      }
+    }
+  }, [selectedDate, reservationMode]);
+  const handleTimeSelect = (timeValue) => {
+    handleChange({ target: { name: field.id, value: timeValue } });
+    setIsExpanded(false);
+    setCurrentExpandedField?.(null);
+  };
+  const handleMealPeriodSelect = (period) => {
+    if (selectedMealPeriod !== period && formData[field.id]) {
+      handleChange({ target: { name: field.id, value: "" } });
+    }
+    setSelectedMealPeriod(period);
+  };
+  const formatDisplayTime = () => {
+    if (reservationMode === "vrije_keuze") {
+      if (!selectedMealPeriod) {
+        return t.selectMeal;
+      }
+      if (formData[field.id]) {
+        return `${shifts[selectedMealPeriod].label} \u2013 ${formData[field.id]}`;
+      }
+      return `${shifts[selectedMealPeriod].label} \u2013 ${t.selectTime}`;
+    } else {
+      if (formData[field.id]) {
+        const sel = availableTimes.find(
+          (time) => time.value === formData[field.id]
+        );
+        return sel ? sel.label : t.selectTime;
+      }
+      return t.selectTime;
+    }
+  };
+  if (!field) return null;
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group time-selector-container", ref: timeSelectorRef }, !selectedDate ? /* @__PURE__ */ React9__default.default.createElement("p", { className: "info-text" }, t.noDateSelected) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, /* @__PURE__ */ React9__default.default.createElement(
+    "div",
+    {
+      className: "time-display",
+      onClick: () => {
+        setIsExpanded(!isExpanded);
+        if (!isExpanded) setCurrentExpandedField?.(field.id);
+      }
+    },
+    /* @__PURE__ */ React9__default.default.createElement("span", null, formatDisplayTime()),
+    /* @__PURE__ */ React9__default.default.createElement("span", { className: "arrow" }, /* @__PURE__ */ React9__default.default.createElement(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 24 24",
+        style: {
+          transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+          transition: "transform 0.2s"
+        }
+      },
+      /* @__PURE__ */ React9__default.default.createElement(
+        "path",
+        {
+          d: "M7 10l5 5 5-5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }
+      )
+    ))
+  ), isExpanded && /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-selector" }, reservationMode === "vrije_keuze" ? selectedMealPeriod ? /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-period" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-period-label" }, shifts[selectedMealPeriod].label, /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      onClick: () => setSelectedMealPeriod(null),
+      style: {
+        marginLeft: "10px",
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        color: "#006600",
+        fontSize: "0.9rem",
+        padding: 0
+      }
+    },
+    "\u2190 ",
+    t.back
+  )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-options" }, availableTimes.length === 0 ? /* @__PURE__ */ React9__default.default.createElement("div", { className: "no-times" }, t.noTimes) : availableTimes.map((time) => /* @__PURE__ */ React9__default.default.createElement(
+    "div",
+    {
+      key: time.value,
+      className: `time-option ${formData[field.id] === time.value ? "selected" : ""}`,
+      onClick: () => handleTimeSelect(time.value)
+    },
+    time.label
+  )))) : /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-options" }, Object.keys(shifts).map((period) => /* @__PURE__ */ React9__default.default.createElement(
+    "div",
+    {
+      key: period,
+      className: `time-option ${selectedMealPeriod === period ? "selected" : ""}`,
+      onClick: () => handleMealPeriodSelect(period)
+    },
+    shifts[period].label
+  ))) : /* @__PURE__ */ React9__default.default.createElement("div", { className: "time-options" }, availableTimes.length === 0 ? /* @__PURE__ */ React9__default.default.createElement("div", { className: "no-times" }, t.noTimes) : availableTimes.map((time) => /* @__PURE__ */ React9__default.default.createElement(
+    "div",
+    {
+      key: time.value,
+      className: `time-option ${formData[field.id] === time.value ? "selected" : ""}`,
+      onClick: () => handleTimeSelect(time.value)
+    },
+    time.label
+  ))))));
+};
+var TimeSelector_default = TimeSelector;
+
+// src/components/ReservationStepOne/css/tableSelector.css
+styleInject(".new-reservation-page .table-selector-container {\n  margin-top: 15px;\n  padding: 10px;\n  border: 1px solid #eee;\n  border-radius: 4px;\n  background-color: #f9f9f9;\n}\n.new-reservation-page .table-selector-label {\n  display: block;\n  margin-bottom: 10px;\n  font-weight: bold;\n  color: #333;\n  font-size: 0.95rem;\n}\n.new-reservation-page .table-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.new-reservation-page .table-option {\n  display: inline-block;\n  margin-right: 15px;\n  margin-bottom: 5px;\n  padding: 5px 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background-color: #fff;\n  transition: background-color 0.2s ease;\n}\n.new-reservation-page .table-option label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 0.9rem;\n  color: #555;\n}\n.new-reservation-page .table-option input[type=checkbox] {\n  margin-right: 8px;\n  cursor: pointer;\n  accent-color: var(--primary-color, #006600);\n}\n.new-reservation-page .table-option:has(input[type=checkbox]:checked) {\n  background-color: #e0f2e0;\n  border-color: #006600;\n}\n.new-reservation-page .table-option:hover {\n  background-color: #f0f0f0;\n}\n.new-reservation-page .info-text {\n  margin-top: 10px;\n  font-size: 0.85rem;\n  color: #666;\n}\n.new-reservation-page .selected-tables-info {\n  margin-top: 10px;\n  font-style: italic;\n}\n.new-reservation-page .info-text.loading-tables {\n  font-style: italic;\n  color: #006600;\n}\n");
+
+// src/components/ReservationStepOne/TableSelector.js
+var TableSelector = ({
+  availableTables = [],
+  isFetching = false,
+  formData = {},
+  handleChange,
+  setFormData
+  // optional fallback if handleChange not provided
+}) => {
+  const lang = localStorage.getItem("preferredLanguage") || "nl";
+  const troot = translations_default?.[lang]?.tableSelector || {};
+  const t = {
+    label: troot.label || "Tafels",
+    noTables: troot.noTables || "Geen tafels beschikbaar voor deze selectie.",
+    table: troot.table || "Tafel",
+    max: troot.max || "Max"
+  };
+  const selectedNumbers = Array.isArray(formData.selectedTableNumbers) ? formData.selectedTableNumbers : [];
+  const selectedIds = Array.isArray(formData.selectedTableIds) ? formData.selectedTableIds : [];
+  const updateSelection = (nextNums, nextIds) => {
+    if (typeof handleChange === "function") {
+      handleChange({
+        target: {
+          multiple: true,
+          updates: {
+            selectedTableNumbers: nextNums,
+            selectedTableIds: nextIds
+          }
+        }
+      });
+      return;
+    }
+    if (typeof setFormData === "function") {
+      setFormData((prev) => ({
+        ...prev,
+        selectedTableNumbers: nextNums,
+        selectedTableIds: nextIds
+      }));
+    }
+  };
+  const onToggle = (tableNumber) => (e) => {
+    const checked = e.target.checked;
+    const table = availableTables.find((t2) => t2.tableNumber === tableNumber);
+    if (!table) return;
+    let nextNums = [...selectedNumbers];
+    let nextIds = [...selectedIds];
+    if (checked) {
+      if (!nextNums.includes(tableNumber)) nextNums.push(tableNumber);
+      if (!nextIds.includes(table.tableId)) nextIds.push(table.tableId);
+    } else {
+      nextNums = nextNums.filter((n) => n !== tableNumber);
+      nextIds = nextIds.filter((id) => id !== table.tableId);
+    }
+    nextNums.sort((a, b) => a - b);
+    updateSelection(nextNums, nextIds);
+  };
+  if (isFetching) {
+    return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group table-selector-container" }, /* @__PURE__ */ React9__default.default.createElement("label", { className: "table-selector-label" }, t.label), /* @__PURE__ */ React9__default.default.createElement("p", { className: "info-text" }, "Laden\u2026"));
+  }
+  if (!availableTables || availableTables.length === 0) {
+    return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group table-selector-container" }, /* @__PURE__ */ React9__default.default.createElement("label", { className: "table-selector-label" }, t.label), /* @__PURE__ */ React9__default.default.createElement("p", { className: "info-text" }, t.noTables));
+  }
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group table-selector-container" }, /* @__PURE__ */ React9__default.default.createElement("label", { className: "table-selector-label" }, t.label), /* @__PURE__ */ React9__default.default.createElement("div", { className: "table-options" }, availableTables.map((table) => {
+    const number = table.tableNumber;
+    const maxCapacity = table.maxCapacity ?? table.capacity ?? table.seats ?? "-";
+    const checked = selectedNumbers.includes(number);
+    return /* @__PURE__ */ React9__default.default.createElement("div", { key: `${table.tableId || number}`, className: "table-option" }, /* @__PURE__ */ React9__default.default.createElement("label", null, /* @__PURE__ */ React9__default.default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        value: number,
+        checked,
+        onChange: onToggle(number)
+      }
+    ), t.table, " ", number, " (", t.max, ": ", maxCapacity, ")"));
+  })));
+};
+var TableSelector_default = TableSelector;
+
 // src/components/ReservationStepOne/css/reservationMode.css
 styleInject(".new-reservation-page .form-row .field-label {\n  display: block;\n  margin-bottom: 6px;\n  font-weight: 600;\n}\n.new-reservation-page .form-row .reservation-mode-buttons {\n  margin-top: 0;\n}\n.new-reservation-page .reservation-mode-buttons {\n  display: flex;\n  gap: 10px;\n  margin-top: 10px;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 1;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius);\n  background-color: var(--color-white);\n  cursor: pointer;\n  font-size: 1rem;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n  background-color: var(--color-blue);\n  color: var(--color-white);\n}\n.new-reservation-page .reservation-modes-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 -5px;\n  width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 0 0 calc(50% - 10px);\n  margin: 5px;\n  padding: 10px;\n  box-sizing: border-box;\n  text-align: center;\n  border: 1px solid #ccc;\n  background: #f7f7f7;\n  cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button:nth-child(3) {\n  flex: 0 0 100%;\n}\n.new-reservation-page .reservation-modes-container {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 -5px;\n  width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n  flex: 0 0 calc(50% - 10px);\n  margin: 5px;\n  padding: 10px;\n  box-sizing: border-box;\n  text-align: center;\n  border: 1px solid #ccc;\n  background: #f7f7f7;\n  cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n  background-color: var(--color-blue);\n  color: var(--color-white);\n}\n.new-reservation-page .unlimited-mode-warning {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  margin: 15px 0;\n  padding: 12px 15px;\n  background-color: #fff3cd;\n  border: 1px solid #ffeaa7;\n  border-radius: var(--border-radius, 4px);\n  border-left: 4px solid #e67e22;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n.new-reservation-page .unlimited-mode-warning .warning-icon {\n  color: #e67e22;\n  font-size: 1.1rem;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n.new-reservation-page .unlimited-mode-warning .warning-text {\n  color: #856404;\n  margin: 0;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .unlimited-mode-warning {\n    margin: 10px 0;\n    padding: 10px 12px;\n    font-size: 0.85rem;\n  }\n  .new-reservation-page .unlimited-mode-warning .warning-icon {\n    font-size: 1rem;\n  }\n}\n.new-reservation-page .reservation-sidebar-component {\n  position: fixed;\n  top: 0;\n  right: -400px;\n  width: 400px;\n  height: 100%;\n  background-color: #fff;\n  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n  z-index: var(--z-index-sidebar-reservation);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n  right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n  padding: 20px;\n  padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n  color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n  margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n  margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: var(--color-blue);\n  color: #fff;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  cursor: pointer;\n  z-index: var(--z-index-modal) !important;\n  transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n  background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n  position: relative;\n  top: 2px;\n}\n@media screen and (max-width: 480px) {\n  .new-reservation-page .reservation-sidebar-component {\n    width: 100%;\n  }\n}\n.new-reservation-page .sidebar-section-personeel {\n  margin-bottom: 10px;\n}\n");
 
-// src/components/ReservationStepOne/ReservationStepOne.js
+// src/components/ReservationStepOne/index.js
+var import_moment2 = __toESM(require_moment());
+var useApi = () => {
+  const getJwtToken = React9.useCallback(() => {
+    return localStorage.getItem("accessToken");
+  }, []);
+  const get = React9.useCallback(
+    (endpoint, config = {}) => {
+      const { params, ...axiosConfig } = config;
+      const token = getJwtToken();
+      return axios__default.default.get(endpoint, {
+        ...axiosConfig,
+        params,
+        headers: {
+          ...axiosConfig.headers,
+          ...token ? { Authorization: `Bearer ${token}` } : {}
+        }
+      }).then((response) => response.data).catch((error) => {
+        console.error("Error fetching data:", error);
+        throw error;
+      });
+    },
+    [getJwtToken]
+  );
+  const mutate = React9.useCallback(
+    (method, endpoint, data = null, config = {}) => {
+      const token = getJwtToken();
+      return axios__default.default({
+        method,
+        url: endpoint,
+        data,
+        ...config,
+        headers: {
+          ...config.headers,
+          ...token ? { Authorization: `Bearer ${token}` } : {}
+        }
+      }).then((response) => response.data).catch((error) => {
+        console.error(`Error with ${method} request:`, error);
+        throw error;
+      });
+    },
+    [getJwtToken]
+  );
+  const apiMethods = React9.useMemo(
+    () => ({
+      get,
+      post: (endpoint, data, config) => mutate("POST", endpoint, data, config),
+      put: (endpoint, data, config) => mutate("PUT", endpoint, data, config),
+      patch: (endpoint, data, config) => mutate("PATCH", endpoint, data, config),
+      delete: (endpoint, config) => mutate("DELETE", endpoint, null, config)
+    }),
+    [get, mutate]
+  );
+  return apiMethods;
+};
+var useApi_default = useApi;
 var ReservationStepOne = ({
   formData,
   errors,
   handleChange,
+  handleStepOneSubmit,
   setFormData,
-  restaurantData,
-  reservations = []
+  timeblocks,
+  loadingTimeblocks,
+  timeblocksError,
+  restaurantData
 }) => {
-  const [availableTables, setAvailableTables] = React4.useState([]);
-  const [isFetchingTables, setIsFetchingTables] = React4.useState(false);
-  const tableSettings = restaurantData?.["table-settings"] || {};
-  const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
-  const seatOptions = ["Terras", "Restaurant"];
-  React4.useEffect(() => {
-    const isAutomaticAssignment = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
-    if (isAutomaticAssignment && formData.date && formData.time && formData.guests > 0) {
+  const lang = localStorage.getItem("preferredLanguage") || "nl";
+  const t = translations_default[lang].reservationStepOne;
+  const [guests2, setGuests] = React9.useState(formData.guests || 2);
+  const [startDate, setStartDate] = React9.useState(null);
+  const [reservations, setReservations] = React9.useState([]);
+  const api = useApi_default();
+  const [availableTables, setAvailableTables] = React9.useState([]);
+  const [isFetchingTables, setIsFetchingTables] = React9.useState(false);
+  const initializationDone = React9.useRef(false);
+  const resetFormDataFields = React9.useCallback(
+    (fieldsToReset) => {
+      setFormData((prevFormData) => {
+        const newFormData = { ...prevFormData };
+        fieldsToReset.forEach((field) => {
+          newFormData[field] = "";
+        });
+        if (fieldsToReset.includes("date") || fieldsToReset.includes("time") || fieldsToReset.includes("guests")) {
+          newFormData.selectedTableNumbers = [];
+          newFormData.selectedTableIds = [];
+          setAvailableTables([]);
+        }
+        return newFormData;
+      });
+    },
+    [setFormData]
+  );
+  React9.useEffect(() => {
+    const today = (0, import_moment2.default)().tz("Europe/Amsterdam").startOf("day");
+    let firstWeekStart = today.clone().startOf("isoWeek");
+    while (isWeekInPast(firstWeekStart)) {
+      firstWeekStart.add(1, "week");
+    }
+    setStartDate(firstWeekStart);
+  }, []);
+  React9.useEffect(() => {
+    const fetchReservations = async () => {
+      if (startDate && (formData.reservationMode === "met_limieten" || formData.reservationMode === "zonder_regels")) {
+        const tableSettings2 = restaurantData?.["table-settings"] || {};
+        const isAutomaticAssignment = tableSettings2.isInstalled === true && tableSettings2.assignmentMode === "automatic";
+        if (formData.reservationMode === "met_limieten" || formData.reservationMode === "zonder_regels" && isAutomaticAssignment) {
+          const beginDate = startDate.format("YYYY-MM-DD");
+          const endDate = startDate.clone().add(13, "days").format("YYYY-MM-DD");
+          const restaurantId = localStorage.getItem("username");
+          const endpoint = `${window.baseDomain}api/slots/${restaurantId}/${beginDate}/${endDate}`;
+          try {
+            const data = await api.get(endpoint, { noCache: true });
+            setReservations(data || []);
+          } catch (error) {
+            console.error("Error fetching reservations:", error);
+            setReservations([]);
+          }
+        } else {
+          setReservations([]);
+        }
+      } else {
+        setReservations([]);
+      }
+    };
+    fetchReservations();
+  }, [startDate, api, formData.reservationMode, restaurantData]);
+  const handleWeekChange = (newStartDate) => {
+    setStartDate(newStartDate);
+    resetFormDataFields([
+      "date",
+      "time",
+      "selectedTableNumbers",
+      "selectedTableIds"
+    ]);
+  };
+  React9.useEffect(() => {
+    if (!initializationDone.current) {
+      let needsUpdate = false;
+      const updates = {};
+      if (!formData.reservationMode) {
+        updates.reservationMode = "met_limieten";
+        needsUpdate = true;
+      }
+      if (!formData.guests || formData.guests === "") {
+        updates.guests = guests2;
+        needsUpdate = true;
+      }
+      if (!Array.isArray(formData.selectedTableNumbers)) {
+        updates.selectedTableNumbers = [];
+        needsUpdate = true;
+      }
+      if (!Array.isArray(formData.selectedTableIds)) {
+        updates.selectedTableIds = [];
+        needsUpdate = true;
+      }
+      if (needsUpdate) {
+        setTimeout(() => {
+          handleChange({ target: { multiple: true, updates } });
+        }, 0);
+        initializationDone.current = true;
+      } else {
+        initializationDone.current = true;
+      }
+    }
+  }, [
+    formData.reservationMode,
+    formData.guests,
+    formData.selectedTableNumbers,
+    formData.selectedTableIds,
+    guests2,
+    handleChange
+  ]);
+  React9.useEffect(() => {
+    const tableSettings2 = restaurantData?.["table-settings"] || {};
+    const isAutomaticAssignment = tableSettings2.isInstalled === true && tableSettings2.assignmentMode === "automatic";
+    if (isAutomaticAssignment && formData.date && formData.time && formData.guests > 0 && restaurantData && reservations) {
       setIsFetchingTables(true);
       const available = algorithm.getAvailableTablesForTime(
         restaurantData,
@@ -4190,38 +5295,47 @@ var ReservationStepOne = ({
         reservations
       );
       setAvailableTables(available);
-      const selectedNumbers = formData.selectedTableNumbers || [];
-      const selectedIds = formData.selectedTableIds || [];
-      const stillAvailableNumbers = [];
-      const stillAvailableIds = [];
-      selectedNumbers.forEach((num) => {
-        const table = available.find((t) => t.tableNumber === num);
-        if (table && selectedIds.includes(table.tableId)) {
-          stillAvailableNumbers.push(num);
-          stillAvailableIds.push(table.tableId);
+      const currentlySelectedNumbers = formData.selectedTableNumbers || [];
+      const currentlySelectedIds = formData.selectedTableIds || [];
+      const stillAvailableSelectedNumbers = [];
+      const stillAvailableSelectedIds = [];
+      currentlySelectedNumbers.forEach((num) => {
+        const correspondingTable = available.find(
+          (at) => at.tableNumber === num
+        );
+        if (correspondingTable && currentlySelectedIds.includes(correspondingTable.tableId)) {
+          stillAvailableSelectedNumbers.push(num);
+          stillAvailableSelectedIds.push(correspondingTable.tableId);
         }
       });
-      if (stillAvailableNumbers.length !== selectedNumbers.length || stillAvailableIds.length !== selectedIds.length) {
-        handleChange({
-          target: {
-            multiple: true,
-            updates: {
-              selectedTableNumbers: stillAvailableNumbers,
-              selectedTableIds: stillAvailableIds
+      if (stillAvailableSelectedNumbers.length !== currentlySelectedNumbers.length) {
+        setTimeout(() => {
+          handleChange({
+            target: {
+              multiple: true,
+              updates: {
+                selectedTableNumbers: stillAvailableSelectedNumbers,
+                selectedTableIds: stillAvailableSelectedIds
+              }
             }
-          }
-        });
+          });
+        }, 0);
       }
       setIsFetchingTables(false);
     } else {
       setAvailableTables([]);
-      if ((formData.selectedTableNumbers?.length || 0) > 0 || (formData.selectedTableIds?.length || 0) > 0) {
-        handleChange({
-          target: {
-            multiple: true,
-            updates: { selectedTableNumbers: [], selectedTableIds: [] }
-          }
-        });
+      if (formData.selectedTableNumbers?.length > 0 || formData.selectedTableIds?.length > 0) {
+        setTimeout(() => {
+          handleChange({
+            target: {
+              multiple: true,
+              updates: {
+                selectedTableNumbers: [],
+                selectedTableIds: []
+              }
+            }
+          });
+        }, 0);
       }
     }
   }, [
@@ -4230,60 +5344,165 @@ var ReservationStepOne = ({
     formData.guests,
     restaurantData,
     reservations,
+    formData.reservationMode,
     formData.selectedTableNumbers,
     formData.selectedTableIds,
-    handleChange,
-    tableSettings.assignmentMode,
-    tableSettings.isInstalled
+    handleChange
   ]);
-  const handleGuestChange = (e) => {
-    parseInt(e.target.value, 10) || 1;
-    handleChange(e);
-    setFormData((prev) => ({
-      ...prev,
-      selectedTableNumbers: [],
-      selectedTableIds: []
-    }));
+  const handleGuestChange = (event) => {
+    const newGuestCount = parseInt(event.target.value, 10) || 1;
+    setGuests(newGuestCount);
+    handleChange(event);
+    resetFormDataFields(["time", "selectedTableNumbers", "selectedTableIds"]);
   };
+  React9.useEffect(() => {
+    resetFormDataFields([
+      "date",
+      "time",
+      "selectedTableNumbers",
+      "selectedTableIds"
+    ]);
+  }, [formData.reservationMode, resetFormDataFields]);
+  const handleTopLevelSelection = (mode) => {
+    if (mode === "met_limieten") {
+      handleChange({
+        target: { name: "reservationMode", value: "met_limieten" }
+      });
+    } else if (mode === "onbeperkt_parent") {
+      if (!["zonder_regels", "vrije_keuze"].includes(formData.reservationMode)) {
+        handleChange({
+          target: { name: "reservationMode", value: "zonder_regels" }
+        });
+      }
+    }
+  };
+  const handleSubSelection = (mode) => {
+    handleChange({ target: { name: "reservationMode", value: mode } });
+  };
+  const currentMode = formData.reservationMode;
+  const isFinalMode = ["met_limieten", "zonder_regels", "vrije_keuze"].includes(
+    currentMode
+  );
+  const tableSettings = restaurantData?.["table-settings"] || {};
+  const showTableSelector = isFinalMode && formData.date && formData.time && formData.guests > 0 && tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && availableTables.length > 0;
+  const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
+  const seatOptions = ["Terras", "Restaurant"];
   const handleSeatPick = (seat) => {
     setFormData((prev) => ({ ...prev, zitplaats: seat }));
   };
-  const showTableSelector = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic" && availableTables.length > 0 && formData.date && formData.time && formData.guests > 0;
-  return /* @__PURE__ */ React4__default.default.createElement("div", { className: "reservation-step-one-placeholder" }, /* @__PURE__ */ React4__default.default.createElement("h3", null, "Reservation"), /* @__PURE__ */ React4__default.default.createElement("div", null, /* @__PURE__ */ React4__default.default.createElement("label", null, "Guests:", /* @__PURE__ */ React4__default.default.createElement(
-    "input",
+  if (timeblocksError) {
+    return /* @__PURE__ */ React9__default.default.createElement("div", null, t.errors.openingHoursNotSet, " ", /* @__PURE__ */ React9__default.default.createElement(
+      "a",
+      {
+        href: "https://happychef.cloud/#/openinghours/dinner",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { color: "var(--color-blue)", textDecoration: "underline" }
+      },
+      t.errors.clickHereToSet
+    ));
+  }
+  return /* @__PURE__ */ React9__default.default.createElement("form", { className: "account-manage-form", noValidate: true }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group reservation-mode" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-modes-container" }, /* @__PURE__ */ React9__default.default.createElement(
+    "button",
     {
-      type: "number",
-      min: "1",
-      name: "guests",
-      value: formData.guests || 1,
-      onChange: handleGuestChange
+      type: "button",
+      className: `reservation-mode-button ${currentMode === "met_limieten" ? "active" : ""}`,
+      onClick: () => handleTopLevelSelection("met_limieten"),
+      "aria-pressed": currentMode === "met_limieten"
+    },
+    t.modes.withLimits
+  ), /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `reservation-mode-button ${["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(
+        currentMode
+      ) ? "active" : ""}`,
+      onClick: () => handleTopLevelSelection("onbeperkt_parent"),
+      "aria-pressed": [
+        "onbeperkt_parent",
+        "zonder_regels",
+        "vrije_keuze"
+      ].includes(currentMode)
+    },
+    t.modes.unlimited
+  )), ["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(
+    currentMode
+  ) && /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-modes-container sub-modes" }, /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `reservation-mode-button ${currentMode === "zonder_regels" ? "active" : ""}`,
+      onClick: () => handleSubSelection("zonder_regels"),
+      "aria-pressed": currentMode === "zonder_regels"
+    },
+    t.modes.openingHours
+  ), /* @__PURE__ */ React9__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `reservation-mode-button ${currentMode === "vrije_keuze" ? "active" : ""}`,
+      onClick: () => handleSubSelection("vrije_keuze"),
+      "aria-pressed": currentMode === "vrije_keuze"
+    },
+    t.modes.free
+  ))), ["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(
+    currentMode
+  ) && /* @__PURE__ */ React9__default.default.createElement("div", { className: "unlimited-mode-warning" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "warning-text" }, t.warnings?.unlimitedMode || (lang === "nl" ? "Let op: Bij onbeperkte boekingen wordt geen rekening gehouden met de maximale capaciteit van het restaurant. De maximale zitplaatslimiet kan worden overschreden." : "Warning: Unlimited bookings do not take into account the restaurant's maximum capacity. The maximum seating limit may be exceeded."))), /* @__PURE__ */ React9__default.default.createElement(
+    ValueSelector_default,
+    {
+      setGuests,
+      value: formData.guests || guests2,
+      onChange: handleGuestChange,
+      error: errors.guests
     }
-  )), errors.guests && /* @__PURE__ */ React4__default.default.createElement("span", { className: "error" }, errors.guests)), /* @__PURE__ */ React4__default.default.createElement("div", null, /* @__PURE__ */ React4__default.default.createElement("label", null, "Date:", /* @__PURE__ */ React4__default.default.createElement(
-    "input",
+  ), isFinalMode && formData.guests > 0 && /* @__PURE__ */ React9__default.default.createElement(
+    DateSelector_default,
     {
-      type: "date",
-      name: "date",
-      value: formData.date || "",
-      onChange: handleChange
+      guests: formData.guests,
+      formData,
+      handleChange,
+      resetFormDataFields,
+      restaurantData,
+      reservations,
+      startDate,
+      onWeekChange: handleWeekChange,
+      reservationMode: currentMode
     }
-  )), errors.date && /* @__PURE__ */ React4__default.default.createElement("span", { className: "error" }, errors.date)), /* @__PURE__ */ React4__default.default.createElement("div", null, /* @__PURE__ */ React4__default.default.createElement("label", null, "Time:", /* @__PURE__ */ React4__default.default.createElement(
-    "input",
+  ), isFinalMode && formData.date && /* @__PURE__ */ React9__default.default.createElement(
+    TimeSelector_default,
     {
-      type: "time",
-      name: "time",
-      value: formData.time || "",
-      onChange: handleChange
+      guests: formData.guests,
+      formData,
+      handleChange,
+      field: { id: "time", label: t.fields.time },
+      selectedDate: formData.date,
+      setCurrentExpandedField: () => {
+      },
+      restaurantData,
+      reservations,
+      reservationMode: currentMode
     }
-  )), errors.time && /* @__PURE__ */ React4__default.default.createElement("span", { className: "error" }, errors.time)), seatSelectionEnabled && /* @__PURE__ */ React4__default.default.createElement("div", { className: "seat-selection" }, seatOptions.map((seat) => /* @__PURE__ */ React4__default.default.createElement(
+  ), seatSelectionEnabled && /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-row", style: { marginTop: 12 } }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-mode-buttons" }, seatOptions.map((opt) => /* @__PURE__ */ React9__default.default.createElement(
     "button",
     {
-      key: seat,
+      key: opt,
       type: "button",
-      className: formData.zitplaats === seat ? "active" : "",
-      onClick: () => handleSeatPick(seat)
+      className: `reservation-mode-button ${formData.zitplaats === opt ? "active" : ""}`,
+      onClick: () => handleSeatPick(opt),
+      "aria-pressed": formData.zitplaats === opt
     },
-    seat
-  ))), isFetchingTables && /* @__PURE__ */ React4__default.default.createElement("p", null, "Calculating table availability..."), showTableSelector && /* @__PURE__ */ React4__default.default.createElement("div", { className: "available-tables" }, /* @__PURE__ */ React4__default.default.createElement("h4", null, "Available Tables (", availableTables.length, ")"), /* @__PURE__ */ React4__default.default.createElement("ul", null, availableTables.map((table) => /* @__PURE__ */ React4__default.default.createElement("li", { key: table.tableId }, "Table ", table.tableNumber, " - Capacity: ", table.capacity)))));
+    opt
+  ))), errors.zitplaats && /* @__PURE__ */ React9__default.default.createElement("small", { className: "error" }, errors.zitplaats)), showTableSelector && /* @__PURE__ */ React9__default.default.createElement(
+    TableSelector_default,
+    {
+      availableTables,
+      isFetching: isFetchingTables,
+      formData,
+      setFormData,
+      handleChange
+    }
+  ));
 };
 var ReservationStepOne_default = ReservationStepOne;
 
@@ -4301,7 +5520,7 @@ var getSection = (translationsObj, sectionKey, fallbackLang = "nl") => {
 var magicAnimation_default = { v: "5.12.1", fr: 30, ip: 0, op: 530, w: 1024, h: 900, nm: "gr1", ddd: 0, assets: [], layers: [{ ddd: 0, ind: 1, ty: 4, nm: "Layer 6", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 25, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 145, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 265, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 385, s: [9] }, { t: 505, s: [0] }], ix: 10 }, p: { a: 0, k: [1206.514, -59.851, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 25, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 145, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 265, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 385, s: [134.764, 134.764, 100] }, { t: 505, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 150, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 0, k: { i: [[446.031, 78.565], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], o: [[-474.322, -83.548], [0, 0], [0, 0], [0.57, 0.727], [0, 0], [-8.99, -11.449]], v: [[-95.525, 259.75], [-429.671, -292.588], [-219.085, -449.194], [448.196, 448.091], [449.016, 449.194], [448.196, 448.091]], c: true }, ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0.129411771894, 0.149019613862, 0.313725501299, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1535, st: 25, ct: 1, bm: 0 }, { ddd: 0, ind: 2, ty: 4, nm: "Layer 5", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 20, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 140, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 260, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 380, s: [9] }, { t: 500, s: [0] }], ix: 10 }, p: { a: 0, k: [1073.85, -30.391, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 20, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 140, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 260, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 380, s: [134.764, 134.764, 100] }, { t: 500, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 150, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 0, k: { i: [[424.081, 79.754], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], o: [[-450.977, -84.811], [0, 0], [0, 0], [0.55, 0.7], [0, 0], [-8.65, -11.031]], v: [[-50.221, 245.909], [-467.951, -214.723], [-174.945, -432.62], [467.71, 431.558], [468.5, 432.62], [467.71, 431.558]], c: true }, ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156875134, 0.843137264252, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1530, st: 20, ct: 1, bm: 0 }, { ddd: 0, ind: 3, ty: 4, nm: "Layer 4", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 15, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 135, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 255, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 375, s: [9] }, { t: 495, s: [0] }], ix: 10 }, p: { a: 0, k: [988.859, 75.079, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 15, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 135, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 255, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 375, s: [134.764, 134.764, 100] }, { t: 495, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 100, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.833, y: 1 }, o: { x: 0.333, y: 0 }, t: 75, s: [{ i: [[432.399, 124.912], [0, 0], [0, 0], [123.76, -96.677]], o: [[-432.397, -124.911], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-78.678, 155.686], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 195, s: [{ i: [[432.399, 124.912], [0, 0], [0, 0], [123.76, -96.677]], o: [[-432.397, -124.911], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-97.842, 203.742], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 315, s: [{ i: [[253.734, 244.526], [0, 0], [0, 0], [123.76, -96.677]], o: [[-324.079, -312.318], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-129.581, 213.076], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.167, y: 0 }, t: 435, s: [{ i: [[226.573, 11.739], [0, 0], [0, 0], [123.76, -96.677]], o: [[-147.242, -7.629], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-215.336, 122.406], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }, { t: 529, s: [{ i: [[432.399, 124.912], [0, 0], [0, 0], [123.76, -96.677]], o: [[-432.397, -124.911], [0, 0], [0, 0], [-123.77, 96.676]], v: [[-78.678, 155.686], [-500.894, -232.49], [-167.127, -480.7], [487.581, 460.594]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0.929411768913, 1, 0.482352942228, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1525, st: 15, ct: 1, bm: 0 }, { ddd: 0, ind: 4, ty: 4, nm: "Layer 3", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 10, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 130, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 250, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 370, s: [9] }, { t: 490, s: [0] }], ix: 10 }, p: { a: 0, k: [894.117, 84.677, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 10, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 130, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 250, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 370, s: [134.764, 134.764, 100] }, { t: 490, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 40, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.667, y: 1 }, o: { x: 0.167, y: 0 }, t: 67, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.333, y: 0 }, t: 190, s: [{ i: [[303.862, 85.416], [0, 0], [0, 0], [92.214, -68.58]], o: [[-353.863, -99.472], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-114.955, 184.127], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 310, s: [{ i: [[66.949, 140.982], [0, 0], [0, 0], [92.213, -68.58]], o: [[-157.679, -332.04], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-182.308, 153.536], [-647.392, -141.284], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 430, s: [{ i: [[160.75, 51.563], [0, 0], [0, 0], [92.213, -68.58]], o: [[-350.011, -112.272], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-133.05, 149.658], [-420.434, -232.638], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { t: 524, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "st", c: { a: 0, k: [0.129411771894, 0.149019613862, 0.313725501299, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 8, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1520, st: 10, ct: 1, bm: 0 }, { ddd: 0, ind: 5, ty: 4, nm: "Layer 2", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 5, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 125, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 245, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 365, s: [9] }, { t: 485, s: [0] }], ix: 10 }, p: { a: 0, k: [894.117, 83.978, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 5, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 125, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 245, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 365, s: [134.764, 134.764, 100] }, { t: 485, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.667, y: 1 }, o: { x: 0.167, y: 0 }, t: 62, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.333, y: 0 }, t: 185, s: [{ i: [[303.862, 85.416], [0, 0], [0, 0], [92.214, -68.58]], o: [[-353.863, -99.472], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-114.955, 184.127], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 305, s: [{ i: [[66.949, 140.982], [0, 0], [0, 0], [92.213, -68.58]], o: [[-157.679, -332.04], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-182.308, 153.536], [-647.392, -141.284], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { i: { x: 0.833, y: 1 }, o: { x: 0.167, y: 0 }, t: 425, s: [{ i: [[160.75, 51.563], [0, 0], [0, 0], [92.213, -68.58]], o: [[-350.011, -112.272], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-133.05, 149.658], [-420.434, -232.638], [-176.178, -428.251], [423.29, 416.898]], c: true }] }, { t: 519, s: [{ i: [[361.666, 65.659], [0, 0], [0, 0], [92.214, -68.58]], o: [[-361.667, -65.659], [0, 0], [0, 0], [-92.219, 68.579]], v: [[-99.227, 158.019], [-431.16, -238.63], [-176.178, -428.251], [423.289, 416.898]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0.956862747669, 0.980392158031, 0.976470589638, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1515, st: 5, ct: 1, bm: 0 }, { ddd: 0, ind: 6, ty: 4, nm: "Layer 1", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 1, k: [{ i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 0, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 120, s: [-9] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 240, s: [0] }, { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 360, s: [9] }, { t: 480, s: [0] }], ix: 10 }, p: { a: 0, k: [895.851, 111.19, 0], ix: 2, l: 2 }, a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, s: { a: 1, k: [{ i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 0, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 120, s: [134.764, 134.764, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 240, s: [100, 100, 100] }, { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 360, s: [134.764, 134.764, 100] }, { t: 480, s: [100, 100, 100] }], ix: 6, l: 2 } }, ao: 0, ef: [{ ty: 29, nm: "Gaussian Blur", np: 5, mn: "ADBE Gaussian Blur 2", ix: 1, en: 1, ef: [{ ty: 0, nm: "Blurriness", mn: "ADBE Gaussian Blur 2-0001", ix: 1, v: { a: 0, k: 200, ix: 1 } }, { ty: 7, nm: "Blur Dimensions", mn: "ADBE Gaussian Blur 2-0002", ix: 2, v: { a: 0, k: 1, ix: 2 } }, { ty: 7, nm: "Repeat Edge Pixels", mn: "ADBE Gaussian Blur 2-0003", ix: 3, v: { a: 0, k: 0, ix: 3 } }] }], shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 1, k: [{ i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 57, s: [{ i: [[261.24, 94.803], [0, 0], [0, 0], [280.19, -208.366]], o: [[-261.24, -94.803], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-130.27, 227.181], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 180, s: [{ i: [[240.029, 117.135], [0, 0], [0, 0], [280.191, -208.366]], o: [[-249.757, -121.882], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-256.037, 109.609], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 300, s: [{ i: [[153.185, 80.344], [0, 0], [0, 0], [280.191, -208.366]], o: [[-246.114, -129.083], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-99.854, 269.938], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { i: { x: 0.667, y: 1 }, o: { x: 0.333, y: 0 }, t: 420, s: [{ i: [[172.303, 15.256], [0, 0], [0, 0], [280.191, -208.366]], o: [[-418.35, -37.043], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-1.548, 216.055], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }, { t: 514, s: [{ i: [[261.24, 94.803], [0, 0], [0, 0], [280.19, -208.366]], o: [[-261.24, -94.803], [0, 0], [0, 0], [-280.189, 208.367]], v: [[-130.27, 227.181], [-489.015, -224.108], [-180.898, -453.243], [434.739, 374.6]], c: true }] }], ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156875134, 0.843137264252, 1], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Group 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }, { ty: "gr", it: [{ ty: "rc", d: 1, s: { a: 0, k: [1200, 900], ix: 2 }, p: { a: 0, k: [0, 0], ix: 3 }, r: { a: 0, k: 0, ix: 4 }, nm: "Rectangle Path 1", mn: "ADBE Vector Shape - Rect", hd: false }, { ty: "st", c: { a: 0, k: [0.494117647059, 0.298039215686, 0.619607843137, 1], ix: 3 }, o: { a: 0, k: 100, ix: 4 }, w: { a: 0, k: 0, ix: 5 }, lc: 1, lj: 1, ml: 4, bm: 0, nm: "Stroke 1", mn: "ADBE Vector Graphic - Stroke", hd: false }, { ty: "fl", c: { a: 0, k: [0, 0.792156862745, 0.843137254902, 1], ix: 4 }, o: { a: 0, k: 0, ix: 5 }, r: 1, bm: 0, nm: "Fill 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [0, 0], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [178.543, 174.429], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Rectangle 1", np: 3, cix: 2, bm: 0, ix: 2, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 1510, st: 0, ct: 1, bm: 0 }], markers: [], props: {} };
 
 // src/components/FormField/translations.json
-var translations_default = {
+var translations_default2 = {
   nl: {
     formField: {
       selectPlaceholder: "Selecteer een optie",
@@ -4352,14 +5571,14 @@ var FormField = ({
   onRightIconClick: onRightIconClick2,
   tooltipContent
 }) => {
-  const t = getSection(translations_default, "formField");
+  const t = getSection(translations_default2, "formField");
   const selectPlaceholderText = selectPlaceholder || t.selectPlaceholder;
-  const [showTooltip, setShowTooltip] = React4.useState(false);
-  const tooltipRef = React4.useRef(null);
-  const timerRef = React4.useRef(null);
+  const [showTooltip, setShowTooltip] = React9.useState(false);
+  const tooltipRef = React9.useRef(null);
+  const timerRef = React9.useRef(null);
   const RightIconComponent = rightIcon2;
   const Icon = icon;
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     const handleClickOutside = (e) => {
       if (tooltipRef.current && !tooltipRef.current.contains(e.target)) {
         if (timerRef.current) clearTimeout(timerRef.current);
@@ -4379,19 +5598,19 @@ var FormField = ({
   };
   const renderControl = () => {
     if (type === "select") {
-      return /* @__PURE__ */ React4__default.default.createElement("select", { ...baseControlProps }, /* @__PURE__ */ React4__default.default.createElement("option", { value: "" }, selectPlaceholderText), options.map((opt) => /* @__PURE__ */ React4__default.default.createElement("option", { key: opt.value, value: opt.value }, opt.label)));
+      return /* @__PURE__ */ React9__default.default.createElement("select", { ...baseControlProps }, /* @__PURE__ */ React9__default.default.createElement("option", { value: "" }, selectPlaceholderText), options.map((opt) => /* @__PURE__ */ React9__default.default.createElement("option", { key: opt.value, value: opt.value }, opt.label)));
     }
     if (type === "textarea")
-      return /* @__PURE__ */ React4__default.default.createElement("textarea", { ...baseControlProps, placeholder });
-    return /* @__PURE__ */ React4__default.default.createElement("input", { type, ...baseControlProps, placeholder });
+      return /* @__PURE__ */ React9__default.default.createElement("textarea", { ...baseControlProps, placeholder });
+    return /* @__PURE__ */ React9__default.default.createElement("input", { type, ...baseControlProps, placeholder });
   };
-  return /* @__PURE__ */ React4__default.default.createElement(
+  return /* @__PURE__ */ React9__default.default.createElement(
     "div",
     {
       className: `form-group ${halfWidth ? "half-width" : ""}`,
       style: { position: "relative" }
     },
-    /* @__PURE__ */ React4__default.default.createElement("div", { className: "input-container" }, Icon && /* @__PURE__ */ React4__default.default.createElement(Icon, { className: "input-icon" }), renderControl(), RightIconComponent && /* @__PURE__ */ React4__default.default.createElement(
+    /* @__PURE__ */ React9__default.default.createElement("div", { className: "input-container" }, Icon && /* @__PURE__ */ React9__default.default.createElement(Icon, { className: "input-icon" }), renderControl(), RightIconComponent && /* @__PURE__ */ React9__default.default.createElement(
       "div",
       {
         className: "magic-wand-container",
@@ -4411,14 +5630,14 @@ var FormField = ({
           cursor: "pointer"
         }
       },
-      /* @__PURE__ */ React4__default.default.createElement(
+      /* @__PURE__ */ React9__default.default.createElement(
         RightIconComponent,
         {
           className: "magic-wand-icon",
           style: { color: "#B567C2" }
         }
       ),
-      showTooltip && tooltipContent && /* @__PURE__ */ React4__default.default.createElement(
+      showTooltip && tooltipContent && /* @__PURE__ */ React9__default.default.createElement(
         "div",
         {
           ref: tooltipRef,
@@ -4438,7 +5657,7 @@ var FormField = ({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ React4__default.default.createElement(
+        /* @__PURE__ */ React9__default.default.createElement(
           "div",
           {
             className: "lottie-container",
@@ -4453,7 +5672,7 @@ var FormField = ({
               zIndex: 1
             }
           },
-          /* @__PURE__ */ React4__default.default.createElement(
+          /* @__PURE__ */ React9__default.default.createElement(
             Lottie__default.default,
             {
               animationData: magicAnimation_default,
@@ -4462,7 +5681,7 @@ var FormField = ({
             }
           )
         ),
-        /* @__PURE__ */ React4__default.default.createElement("div", { style: { position: "relative", zIndex: 2, padding: "12px 20px" } }, /* @__PURE__ */ React4__default.default.createElement(
+        /* @__PURE__ */ React9__default.default.createElement("div", { style: { position: "relative", zIndex: 2, padding: "12px 20px" } }, /* @__PURE__ */ React9__default.default.createElement(
           "div",
           {
             style: {
@@ -4472,7 +5691,7 @@ var FormField = ({
             }
           },
           tooltipContent
-        ), /* @__PURE__ */ React4__default.default.createElement(
+        ), /* @__PURE__ */ React9__default.default.createElement(
           "div",
           {
             style: {
@@ -4483,7 +5702,7 @@ var FormField = ({
             }
           },
           t.tooltip?.confirm
-        ), /* @__PURE__ */ React4__default.default.createElement(
+        ), /* @__PURE__ */ React9__default.default.createElement(
           "div",
           {
             style: {
@@ -4497,71 +5716,17 @@ var FormField = ({
         ))
       )
     )),
-    error && /* @__PURE__ */ React4__default.default.createElement("p", { className: "form-error" }, error)
+    error && /* @__PURE__ */ React9__default.default.createElement("p", { className: "form-error" }, error)
   );
 };
 var FormField_default = FormField;
 
 // src/components/ReservationStepTwo/ReservationStepTwo.js
-var import_moment = __toESM(require_moment());
+var import_moment3 = __toESM(require_moment());
 __toESM(require_nl());
-var useApi = () => {
-  const getJwtToken = React4.useCallback(() => {
-    return localStorage.getItem("accessToken");
-  }, []);
-  const get = React4.useCallback(
-    (endpoint, config = {}) => {
-      const { params, ...axiosConfig } = config;
-      const token = getJwtToken();
-      return axios__default.default.get(endpoint, {
-        ...axiosConfig,
-        params,
-        headers: {
-          ...axiosConfig.headers,
-          ...token ? { Authorization: `Bearer ${token}` } : {}
-        }
-      }).then((response) => response.data).catch((error) => {
-        console.error("Error fetching data:", error);
-        throw error;
-      });
-    },
-    [getJwtToken]
-  );
-  const mutate = React4.useCallback(
-    (method, endpoint, data = null, config = {}) => {
-      const token = getJwtToken();
-      return axios__default.default({
-        method,
-        url: endpoint,
-        data,
-        ...config,
-        headers: {
-          ...config.headers,
-          ...token ? { Authorization: `Bearer ${token}` } : {}
-        }
-      }).then((response) => response.data).catch((error) => {
-        console.error(`Error with ${method} request:`, error);
-        throw error;
-      });
-    },
-    [getJwtToken]
-  );
-  const apiMethods = React4.useMemo(
-    () => ({
-      get,
-      post: (endpoint, data, config) => mutate("POST", endpoint, data, config),
-      put: (endpoint, data, config) => mutate("PUT", endpoint, data, config),
-      patch: (endpoint, data, config) => mutate("PATCH", endpoint, data, config),
-      delete: (endpoint, config) => mutate("DELETE", endpoint, null, config)
-    }),
-    [get, mutate]
-  );
-  return apiMethods;
-};
-var useApi_default = useApi;
 
 // src/components/ReservationStepTwo/translations.json
-var translations_default2 = {
+var translations_default3 = {
   nl: {
     reservationStepTwoFiltering: {
       labels: {
@@ -4696,25 +5861,25 @@ var ReservationStepTwo = ({
   menuData
 }) => {
   const lang = getPreferredLanguage();
-  const t = getSection(translations_default2, "reservationStepTwoFiltering");
-  const [availableMenus, setAvailableMenus] = React4.useState([]);
-  const [hasAutofilled, setHasAutofilled] = React4.useState(false);
-  const [pendingAutofill, setPendingAutofill] = React4.useState(null);
+  const t = getSection(translations_default3, "reservationStepTwoFiltering");
+  const [availableMenus, setAvailableMenus] = React9.useState([]);
+  const [hasAutofilled, setHasAutofilled] = React9.useState(false);
+  const [pendingAutofill, setPendingAutofill] = React9.useState(null);
   const api = useApi_default();
-  React4.useEffect(() => {
-    import_moment.default.locale(lang);
+  React9.useEffect(() => {
+    import_moment3.default.locale(lang);
     if (!formData.date || !formData.time || !menuData.length) return setAvailableMenus([]);
-    const sel = (0, import_moment.default)(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
+    const sel = (0, import_moment3.default)(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
     const filtered = menuData.filter((menu) => {
       const inDate = sel.isBetween(
-        (0, import_moment.default)(menu.startDate, "YYYY-MM-DD"),
-        (0, import_moment.default)(menu.endDate, "YYYY-MM-DD"),
+        (0, import_moment3.default)(menu.startDate, "YYYY-MM-DD"),
+        (0, import_moment3.default)(menu.endDate, "YYYY-MM-DD"),
         "day",
         "[]"
       );
-      const inTime = (0, import_moment.default)(formData.time, "HH:mm").isBetween(
-        (0, import_moment.default)(menu.startHour, "HH:mm"),
-        (0, import_moment.default)(menu.endHour, "HH:mm"),
+      const inTime = (0, import_moment3.default)(formData.time, "HH:mm").isBetween(
+        (0, import_moment3.default)(menu.startHour, "HH:mm"),
+        (0, import_moment3.default)(menu.endHour, "HH:mm"),
         "minute",
         "[]"
       );
@@ -4747,10 +5912,10 @@ var ReservationStepTwo = ({
       console.error("Autofill error");
     }
   };
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     tryAutofill();
   }, [formData.email, formData.phone]);
-  const magicProps = React4.useMemo(() => {
+  const magicProps = React9.useMemo(() => {
     if (!pendingAutofill)
       return { email: {}, phone: {} };
     const emailActive = pendingAutofill.sources.includes("email") && (formData.email || "").trim().toLowerCase() === pendingAutofill.email.trim().toLowerCase();
@@ -4762,15 +5927,15 @@ var ReservationStepTwo = ({
     return {
       email: emailActive ? {
         ...common,
-        tooltipContent: /* @__PURE__ */ React4__default.default.createElement("div", null, /* @__PURE__ */ React4__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React4__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React4__default.default.createElement("div", null, pendingAutofill.phone))
+        tooltipContent: /* @__PURE__ */ React9__default.default.createElement("div", null, /* @__PURE__ */ React9__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.phone))
       } : {},
       phone: phoneActive ? {
         ...common,
-        tooltipContent: /* @__PURE__ */ React4__default.default.createElement("div", null, /* @__PURE__ */ React4__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React4__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React4__default.default.createElement("div", null, pendingAutofill.email))
+        tooltipContent: /* @__PURE__ */ React9__default.default.createElement("div", null, /* @__PURE__ */ React9__default.default.createElement("div", { style: { textAlign: "center", fontWeight: "bold" } }, t.magic?.title), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.firstName, " ", pendingAutofill.lastName), /* @__PURE__ */ React9__default.default.createElement("div", null, pendingAutofill.email))
       } : {}
     };
   }, [pendingAutofill, formData.email, formData.phone, t.magic?.title]);
-  return /* @__PURE__ */ React4__default.default.createElement("div", { className: "reservation-step-two" }, /* @__PURE__ */ React4__default.default.createElement("div", { className: "account-manage-form" }, availableMenus.length > 0 && /* @__PURE__ */ React4__default.default.createElement(
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-step-two" }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "account-manage-form" }, availableMenus.length > 0 && /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: t.labels?.menu || "Menu",
@@ -4781,7 +5946,7 @@ var ReservationStepTwo = ({
       onChange: handleChange,
       error: errors.menu
     }
-  ), /* @__PURE__ */ React4__default.default.createElement("div", { className: "name-fields" }, /* @__PURE__ */ React4__default.default.createElement(
+  ), /* @__PURE__ */ React9__default.default.createElement("div", { className: "name-fields" }, /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: t.labels?.firstName || "Voornaam",
@@ -4792,7 +5957,7 @@ var ReservationStepTwo = ({
       error: errors.firstName,
       icon: fa.FaUser
     }
-  ), /* @__PURE__ */ React4__default.default.createElement(
+  ), /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: t.labels?.lastName || "Achternaam",
@@ -4803,7 +5968,7 @@ var ReservationStepTwo = ({
       error: errors.lastName,
       icon: fa.FaUser
     }
-  )), /* @__PURE__ */ React4__default.default.createElement(
+  )), /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: t.labels?.email || "Email",
@@ -4817,7 +5982,7 @@ var ReservationStepTwo = ({
       icon: fa.FaEnvelope,
       ...magicProps.email
     }
-  ), /* @__PURE__ */ React4__default.default.createElement(
+  ), /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: t.labels?.phone || "Telefoon",
@@ -4831,7 +5996,7 @@ var ReservationStepTwo = ({
       icon: fa.FaPhone,
       ...magicProps.phone
     }
-  ), /* @__PURE__ */ React4__default.default.createElement(
+  ), /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: t.labels?.extraInfo || "Extra info",
@@ -4848,7 +6013,7 @@ var ReservationStepTwo = ({
 var ReservationStepTwo_default = ReservationStepTwo;
 
 // src/components/ReservationSummary/translations.json
-var translations_default3 = {
+var translations_default4 = {
   nl: {
     reservationStepTwoFiltering: {
       labels: {
@@ -4979,13 +6144,13 @@ var ReservationSummary = ({
   formData,
   onNewReservation
 }) => {
-  const t = getSection(translations_default3, "reservationSummary");
-  return /* @__PURE__ */ React4__default.default.createElement("div", { className: "reservation-summary" }, /* @__PURE__ */ React4__default.default.createElement("ul", { className: "reservation-details" }, /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.title)), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.guests, ":"), " ", formData.guests), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.date, ":"), " ", formData.date), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.time, ":"), " ", formData.time), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.firstName, ":"), " ", formData.firstName), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.lastName, ":"), " ", formData.lastName), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.email, ":"), " ", formData.email), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.phone, ":"), " ", formData.phone), formData.menu && /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.menu, ":"), " ", formData.menu), formData.personeel && /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.staff, ":"), " ", formData.personeel), formData.giftcard && /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.giftcard, ":"), " ", formData.giftcard), formData.extraInfo && /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.extraInfo, ":"), " ", formData.extraInfo), formData.zitplaats && /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("strong", null, t.seatPlace, ":"), " ", formData.zitplaats)), /* @__PURE__ */ React4__default.default.createElement("button", { className: "button-style-3", onClick: onNewReservation }, t.newReservationButton));
+  const t = getSection(translations_default4, "reservationSummary");
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-summary" }, /* @__PURE__ */ React9__default.default.createElement("ul", { className: "reservation-details" }, /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.title)), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.guests, ":"), " ", formData.guests), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.date, ":"), " ", formData.date), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.time, ":"), " ", formData.time), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.firstName, ":"), " ", formData.firstName), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.lastName, ":"), " ", formData.lastName), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.email, ":"), " ", formData.email), /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.phone, ":"), " ", formData.phone), formData.menu && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.menu, ":"), " ", formData.menu), formData.personeel && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.staff, ":"), " ", formData.personeel), formData.giftcard && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.giftcard, ":"), " ", formData.giftcard), formData.extraInfo && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.extraInfo, ":"), " ", formData.extraInfo), formData.zitplaats && /* @__PURE__ */ React9__default.default.createElement("li", null, /* @__PURE__ */ React9__default.default.createElement("strong", null, t.seatPlace, ":"), " ", formData.zitplaats)), /* @__PURE__ */ React9__default.default.createElement("button", { className: "button-style-3", onClick: onNewReservation }, t.newReservationButton));
 };
 var ReservationSummary_default = ReservationSummary;
 
 // src/components/GiftcardSelection/translations.json
-var translations_default4 = {
+var translations_default5 = {
   nl: {
     zitplaatsSelection: {
       labels: { seating: "Zitplaats" },
@@ -5028,9 +6193,9 @@ var GiftcardSelection = ({
   handleChange,
   resetFormDataFields
 }) => {
-  const t = getSection(translations_default4, "giftcardSelection");
-  const [availableGiftcards, setAvailableGiftcards] = React4.useState([]);
-  React4.useEffect(() => {
+  const t = getSection(translations_default5, "giftcardSelection");
+  const [availableGiftcards, setAvailableGiftcards] = React9.useState([]);
+  React9.useEffect(() => {
     if (!restaurantData) return;
     const periods = ["breakfast", "lunch", "dinner"];
     const cards = /* @__PURE__ */ new Set();
@@ -5050,7 +6215,7 @@ var GiftcardSelection = ({
     handleChange({ target: { name: "giftcard", value: e.target.value } });
     resetFormDataFields(["date", "time"]);
   };
-  return /* @__PURE__ */ React4__default.default.createElement("div", { className: "giftcard-selection" }, /* @__PURE__ */ React4__default.default.createElement(
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "giftcard-selection" }, /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: t.labels?.giftcard || "Giftcard",
@@ -5066,7 +6231,7 @@ var GiftcardSelection = ({
 var GiftcardSelection_default = GiftcardSelection;
 
 // src/components/ZitplaatsSelection/translations.json
-var translations_default5 = {
+var translations_default6 = {
   nl: {
     zitplaatsSelection: {
       labels: { seating: "Zitplaats" },
@@ -5109,9 +6274,9 @@ var ZitplaatsSelection = ({
   handleChange,
   resetFormDataFields
 }) => {
-  const [availableZitplaatsen, setAvailableZitplaatsen] = React4.useState([]);
-  const t = getSection(translations_default5, "zitplaatsSelection");
-  React4.useEffect(() => {
+  const [availableZitplaatsen, setAvailableZitplaatsen] = React9.useState([]);
+  const t = getSection(translations_default6, "zitplaatsSelection");
+  React9.useEffect(() => {
     if (!restaurantData?.floors || !Array.isArray(restaurantData.floors)) return;
     const set = /* @__PURE__ */ new Set();
     restaurantData.floors.forEach(
@@ -5127,7 +6292,7 @@ var ZitplaatsSelection = ({
   const tableSettings = restaurantData?.["table-settings"] || {};
   const isTableAssignmentEnabled = tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
   if (!isTableAssignmentEnabled || availableZitplaatsen.length === 0) return null;
-  return /* @__PURE__ */ React4__default.default.createElement("div", { className: "zitplaats-selection" }, /* @__PURE__ */ React4__default.default.createElement("label", { htmlFor: "zitplaats", className: "form-label" }, t.labels?.seating || "Zitplaats"), /* @__PURE__ */ React4__default.default.createElement("div", { className: "input-container select-field" }, /* @__PURE__ */ React4__default.default.createElement(
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: "zitplaats-selection" }, /* @__PURE__ */ React9__default.default.createElement("label", { htmlFor: "zitplaats", className: "form-label" }, t.labels?.seating || "Zitplaats"), /* @__PURE__ */ React9__default.default.createElement("div", { className: "input-container select-field" }, /* @__PURE__ */ React9__default.default.createElement(
     "select",
     {
       id: "zitplaats",
@@ -5135,8 +6300,8 @@ var ZitplaatsSelection = ({
       value: formData.zitplaats || "",
       onChange: handleZitplaatsChange
     },
-    /* @__PURE__ */ React4__default.default.createElement("option", { value: "" }, t.options?.noPreference || "Geen voorkeur"),
-    availableZitplaatsen.map((zitplaats) => /* @__PURE__ */ React4__default.default.createElement(
+    /* @__PURE__ */ React9__default.default.createElement("option", { value: "" }, t.options?.noPreference || "Geen voorkeur"),
+    availableZitplaatsen.map((zitplaats) => /* @__PURE__ */ React9__default.default.createElement(
       "option",
       {
         key: zitplaats,
@@ -5189,20 +6354,20 @@ var ReservationSidebar = ({
   onNewReservation,
   apiBaseDomain
 }) => {
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     if (apiBaseDomain && !window.baseDomain) {
       window.baseDomain = apiBaseDomain;
     }
   }, [apiBaseDomain]);
   const api = useApi_default();
-  const [timeblocks, setTimeblocks] = React4.useState([]);
-  const [loadingTimeblocks, setLoadingTimeblocks] = React4.useState(false);
-  const [timeblocksError, setTimeblocksError] = React4.useState(null);
-  const [menuData, setMenuData] = React4.useState([]);
-  const [restaurantData, setRestaurantData] = React4.useState({});
-  const [availablePersoneel, setAvailablePersoneel] = React4.useState([]);
+  const [timeblocks, setTimeblocks] = React9.useState([]);
+  const [loadingTimeblocks, setLoadingTimeblocks] = React9.useState(false);
+  const [timeblocksError, setTimeblocksError] = React9.useState(null);
+  const [menuData, setMenuData] = React9.useState([]);
+  const [restaurantData, setRestaurantData] = React9.useState({});
+  const [availablePersoneel, setAvailablePersoneel] = React9.useState([]);
   const t = getSection(translationsReservationSidebar_default, "reservationSidebar");
-  const resetFormDataFields = React4.useCallback(
+  const resetFormDataFields = React9.useCallback(
     (fieldsToReset) => {
       setFormData((prev) => {
         const next = { ...prev };
@@ -5214,7 +6379,7 @@ var ReservationSidebar = ({
     },
     [setFormData]
   );
-  React4.useEffect(() => {
+  React9.useEffect(() => {
     if (!isOpen) return;
     setLoadingTimeblocks(true);
     const fetchData = async () => {
@@ -5245,7 +6410,7 @@ var ReservationSidebar = ({
     };
     fetchData();
   }, [isOpen, api]);
-  const handleNewReservationClick = React4.useCallback(() => {
+  const handleNewReservationClick = React9.useCallback(() => {
     setFormData({
       guests,
       date: "",
@@ -5266,21 +6431,21 @@ var ReservationSidebar = ({
     onNewReservation();
   }, [onNewReservation, setFormData]);
   const seatSelectionEnabled = !!restaurantData?.["general-settings"]?.seatSelectionEnabled;
-  return /* @__PURE__ */ React4__default.default.createElement("div", { className: `reservation-sidebar-component ${isOpen ? "open" : ""}` }, /* @__PURE__ */ React4__default.default.createElement("div", { className: "reservation-sidebar-content" }, /* @__PURE__ */ React4__default.default.createElement("h2", { className: "admin-title" }, "Admin Reservatie"), /* @__PURE__ */ React4__default.default.createElement(
+  return /* @__PURE__ */ React9__default.default.createElement("div", { className: `reservation-sidebar-component ${isOpen ? "open" : ""}` }, /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-sidebar-content" }, /* @__PURE__ */ React9__default.default.createElement("h2", { className: "admin-title" }, "Admin Reservatie"), /* @__PURE__ */ React9__default.default.createElement(
     "button",
     {
       className: "close-sidebar-button",
       onClick: onClose,
       "aria-label": "Sluiten"
     },
-    /* @__PURE__ */ React4__default.default.createElement(fa.FaTimes, { size: 20, color: "#000" })
-  ), reservationSubmitted ? /* @__PURE__ */ React4__default.default.createElement(
+    /* @__PURE__ */ React9__default.default.createElement(fa.FaTimes, { size: 20, color: "#000" })
+  ), reservationSubmitted ? /* @__PURE__ */ React9__default.default.createElement(
     ReservationSummary_default,
     {
       formData,
       onNewReservation: handleNewReservationClick
     }
-  ) : /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, restaurantData && Object.keys(restaurantData).length > 0 && /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-giftcard" }, /* @__PURE__ */ React4__default.default.createElement(
+  ) : /* @__PURE__ */ React9__default.default.createElement(React9__default.default.Fragment, null, restaurantData && Object.keys(restaurantData).length > 0 && /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-giftcard" }, /* @__PURE__ */ React9__default.default.createElement(
     GiftcardSelection_default,
     {
       restaurantData,
@@ -5288,7 +6453,7 @@ var ReservationSidebar = ({
       handleChange,
       resetFormDataFields
     }
-  )), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-zitplaats" }, /* @__PURE__ */ React4__default.default.createElement(
+  )), restaurantData && Object.keys(restaurantData).length > 0 && seatSelectionEnabled && /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-zitplaats" }, /* @__PURE__ */ React9__default.default.createElement(
     ZitplaatsSelection_default,
     {
       restaurantData,
@@ -5296,7 +6461,7 @@ var ReservationSidebar = ({
       handleChange,
       resetFormDataFields
     }
-  )), availablePersoneel.length > 0 && /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-personeel" }, /* @__PURE__ */ React4__default.default.createElement(
+  )), availablePersoneel.length > 0 && /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-personeel" }, /* @__PURE__ */ React9__default.default.createElement(
     FormField_default,
     {
       label: "",
@@ -5311,7 +6476,7 @@ var ReservationSidebar = ({
       error: errors.personeel,
       selectPlaceholder: "Toewijzen aan persoon"
     }
-  )), /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-one" }, /* @__PURE__ */ React4__default.default.createElement(
+  )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-one" }, /* @__PURE__ */ React9__default.default.createElement(
     ReservationStepOne_default,
     {
       formData,
@@ -5323,7 +6488,7 @@ var ReservationSidebar = ({
       timeblocksError,
       restaurantData
     }
-  )), /* @__PURE__ */ React4__default.default.createElement("div", { className: "sidebar-section-two" }, /* @__PURE__ */ React4__default.default.createElement(
+  )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "sidebar-section-two" }, /* @__PURE__ */ React9__default.default.createElement(
     ReservationStepTwo_default,
     {
       formData,
@@ -5333,7 +6498,7 @@ var ReservationSidebar = ({
       isSubmitting,
       menuData
     }
-  )), /* @__PURE__ */ React4__default.default.createElement("div", { className: "reservation-footer" }, /* @__PURE__ */ React4__default.default.createElement(
+  )), /* @__PURE__ */ React9__default.default.createElement("div", { className: "reservation-footer" }, /* @__PURE__ */ React9__default.default.createElement(
     "button",
     {
       type: "button",