@happychef/reservation-sidebar 2.1.4 → 2.1.6

package/dist/index.js

@@ -4414,7 +4414,7 @@ var translations_default = {
 // src/components/ReservationStepOne/Calendar.js
 moment2__default.default.locale("nl");
 var Calendar = ({
-  guests: guests2,
+  guests,
   selectedDate,
   onSelectDate,
   autoExpand,
@@ -4559,7 +4559,7 @@ var Calendar = ({
       if (reservationMode === "vrije_keuze") {
         isAvailable = date.isBetween(today, maxDate, null, "[]");
       } else {
-        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
+        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests;
         if (isTableAssignmentEnabled) {
           isAvailable = algorithm.isDateAvailableWithTableCheck(
             restaurantData,
@@ -4770,7 +4770,7 @@ var Calendar = ({
 };
 var Calendar_default = Calendar;
 var DateSelector = ({
-  guests: guests2,
+  guests,
   formData,
   handleChange,
   resetFormDataFields,
@@ -4790,7 +4790,7 @@ var DateSelector = ({
   return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group date-selector-container" }, /* @__PURE__ */ React9__default.default.createElement(
     Calendar_default,
     {
-      guests: guests2,
+      guests,
       selectedDate: formData.date || null,
       onSelectDate: handleDateSelect,
       autoExpand: false,
@@ -4809,7 +4809,7 @@ 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,
+  guests,
   formData,
   handleChange,
   field,
@@ -4832,7 +4832,7 @@ var TimeSelector = ({
     dinner: { start: "16:00", end: "23:00", label: t.shifts.dinner }
   };
   React9.useEffect(() => {
-    if (!selectedDate || !guests2) {
+    if (!selectedDate || !guests) {
       setAvailableTimes([]);
       return;
     }
@@ -4860,7 +4860,7 @@ var TimeSelector = ({
       }
     } else {
       if (restaurantData && reservations) {
-        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
+        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests;
         const tableSettings = restaurantData?.["table-settings"] || {};
         const shouldUseTableFiltering = reservationMode === "met_limieten" && tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
         const selectedGiftcard = reservationMode === "met_limieten" ? formData.giftcard : null;
@@ -4897,7 +4897,7 @@ var TimeSelector = ({
     }
   }, [
     selectedDate,
-    guests2,
+    guests,
     restaurantData,
     reservations,
     reservationMode,
@@ -5172,7 +5172,7 @@ var ReservationStepOne = ({
 }) => {
   const lang = localStorage.getItem("preferredLanguage") || "nl";
   const t = translations_default[lang].reservationStepOne;
-  const [guests2, setGuests] = React9.useState(formData.guests || 2);
+  const [guests, setGuests] = React9.useState(formData.guests || 2);
   const [startDate, setStartDate] = React9.useState(null);
   const [reservations, setReservations] = React9.useState([]);
   const [availableTables, setAvailableTables] = React9.useState([]);
@@ -5248,7 +5248,7 @@ var ReservationStepOne = ({
         needsUpdate = true;
       }
       if (!formData.guests || formData.guests === "") {
-        updates.guests = guests2;
+        updates.guests = guests;
         needsUpdate = true;
       }
       if (!Array.isArray(formData.selectedTableNumbers)) {
@@ -5266,7 +5266,7 @@ var ReservationStepOne = ({
       }
       initializationDone.current = true;
     }
-  }, [formData, guests2, handleChange]);
+  }, [formData, guests, handleChange]);
   React9.useEffect(() => {
     const tableSettings2 = restaurantData?.["table-settings"] || {};
     const isAutomaticAssignment = tableSettings2.isInstalled && tableSettings2.assignmentMode === "automatic";
@@ -5397,7 +5397,7 @@ var ReservationStepOne = ({
       "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, { value: formData.guests || guests2, onChange: handleGuestChange, error: errors.guests, setGuests }), isFinalMode && formData.guests > 0 && /* @__PURE__ */ React9__default.default.createElement(
+  ))), ["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, { value: formData.guests || guests, onChange: handleGuestChange, error: errors.guests, setGuests }), isFinalMode && formData.guests > 0 && /* @__PURE__ */ React9__default.default.createElement(
     DateSelector_default,
     {
       guests: formData.guests,
@@ -6366,7 +6366,7 @@ var ReservationSidebar = ({
   }, [isOpen, api]);
   const handleNewReservationClick = React9.useCallback(() => {
     setFormData({
-      guests,
+      guest: 2,
       date: "",
       time: "",
       firstName: "",
@@ -6378,8 +6378,8 @@ var ReservationSidebar = ({
       personeel: "",
       giftcard: "",
       zitplaats: "",
-      selectedTableNumbers,
-      selectedTableIds,
+      selectedTableNumbers: [],
+      selectedTableIds: [],
       reservationMode: "met_limieten"
     });
     onNewReservation();

package/dist/index.mjs

@@ -4405,7 +4405,7 @@ var translations_default = {
 // src/components/ReservationStepOne/Calendar.js
 moment2.locale("nl");
 var Calendar = ({
-  guests: guests2,
+  guests,
   selectedDate,
   onSelectDate,
   autoExpand,
@@ -4550,7 +4550,7 @@ var Calendar = ({
       if (reservationMode === "vrije_keuze") {
         isAvailable = date.isBetween(today, maxDate, null, "[]");
       } else {
-        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
+        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests;
         if (isTableAssignmentEnabled) {
           isAvailable = isDateAvailableWithTableCheck(
             restaurantData,
@@ -4761,7 +4761,7 @@ var Calendar = ({
 };
 var Calendar_default = Calendar;
 var DateSelector = ({
-  guests: guests2,
+  guests,
   formData,
   handleChange,
   resetFormDataFields,
@@ -4781,7 +4781,7 @@ var DateSelector = ({
   return /* @__PURE__ */ React9.createElement("div", { className: "form-group date-selector-container" }, /* @__PURE__ */ React9.createElement(
     Calendar_default,
     {
-      guests: guests2,
+      guests,
       selectedDate: formData.date || null,
       onSelectDate: handleDateSelect,
       autoExpand: false,
@@ -4800,7 +4800,7 @@ 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,
+  guests,
   formData,
   handleChange,
   field,
@@ -4823,7 +4823,7 @@ var TimeSelector = ({
     dinner: { start: "16:00", end: "23:00", label: t.shifts.dinner }
   };
   useEffect(() => {
-    if (!selectedDate || !guests2) {
+    if (!selectedDate || !guests) {
       setAvailableTimes([]);
       return;
     }
@@ -4851,7 +4851,7 @@ var TimeSelector = ({
       }
     } else {
       if (restaurantData && reservations) {
-        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests2;
+        const adjustedGuests = reservationMode !== "met_limieten" ? -1e4 : guests;
         const tableSettings = restaurantData?.["table-settings"] || {};
         const shouldUseTableFiltering = reservationMode === "met_limieten" && tableSettings.isInstalled === true && tableSettings.assignmentMode === "automatic";
         const selectedGiftcard = reservationMode === "met_limieten" ? formData.giftcard : null;
@@ -4888,7 +4888,7 @@ var TimeSelector = ({
     }
   }, [
     selectedDate,
-    guests2,
+    guests,
     restaurantData,
     reservations,
     reservationMode,
@@ -5163,7 +5163,7 @@ var ReservationStepOne = ({
 }) => {
   const lang = localStorage.getItem("preferredLanguage") || "nl";
   const t = translations_default[lang].reservationStepOne;
-  const [guests2, setGuests] = useState(formData.guests || 2);
+  const [guests, setGuests] = useState(formData.guests || 2);
   const [startDate, setStartDate] = useState(null);
   const [reservations, setReservations] = useState([]);
   const [availableTables, setAvailableTables] = useState([]);
@@ -5239,7 +5239,7 @@ var ReservationStepOne = ({
         needsUpdate = true;
       }
       if (!formData.guests || formData.guests === "") {
-        updates.guests = guests2;
+        updates.guests = guests;
         needsUpdate = true;
       }
       if (!Array.isArray(formData.selectedTableNumbers)) {
@@ -5257,7 +5257,7 @@ var ReservationStepOne = ({
       }
       initializationDone.current = true;
     }
-  }, [formData, guests2, handleChange]);
+  }, [formData, guests, handleChange]);
   useEffect(() => {
     const tableSettings2 = restaurantData?.["table-settings"] || {};
     const isAutomaticAssignment = tableSettings2.isInstalled && tableSettings2.assignmentMode === "automatic";
@@ -5388,7 +5388,7 @@ var ReservationStepOne = ({
       "aria-pressed": currentMode === "vrije_keuze"
     },
     t.modes.free
-  ))), ["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(currentMode) && /* @__PURE__ */ React9.createElement("div", { className: "unlimited-mode-warning" }, /* @__PURE__ */ React9.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.createElement(ValueSelector_default, { value: formData.guests || guests2, onChange: handleGuestChange, error: errors.guests, setGuests }), isFinalMode && formData.guests > 0 && /* @__PURE__ */ React9.createElement(
+  ))), ["onbeperkt_parent", "zonder_regels", "vrije_keuze"].includes(currentMode) && /* @__PURE__ */ React9.createElement("div", { className: "unlimited-mode-warning" }, /* @__PURE__ */ React9.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.createElement(ValueSelector_default, { value: formData.guests || guests, onChange: handleGuestChange, error: errors.guests, setGuests }), isFinalMode && formData.guests > 0 && /* @__PURE__ */ React9.createElement(
     DateSelector_default,
     {
       guests: formData.guests,
@@ -6357,7 +6357,7 @@ var ReservationSidebar = ({
   }, [isOpen, api]);
   const handleNewReservationClick = useCallback(() => {
     setFormData({
-      guests,
+      guest: 2,
       date: "",
       time: "",
       firstName: "",
@@ -6369,8 +6369,8 @@ var ReservationSidebar = ({
       personeel: "",
       giftcard: "",
       zitplaats: "",
-      selectedTableNumbers,
-      selectedTableIds,
+      selectedTableNumbers: [],
+      selectedTableIds: [],
       reservationMode: "met_limieten"
     });
     onNewReservation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happychef/reservation-sidebar",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "A compound component for managing restaurant reservations - JavaScript version with independent styles",
   "main": "dist/index.js",
   "module": "dist/index.mjs",