@happychef/reservation-sidebar 2.1.3 → 2.1.5

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,
@@ -5508,8 +5508,8 @@ var FormField = ({
   halfWidth,
   options = [],
   selectPlaceholder,
-  rightIcon: rightIcon2,
-  onRightIconClick: onRightIconClick2,
+  rightIcon,
+  onRightIconClick,
   tooltipContent
 }) => {
   const t = getSection(translations_default2, "formField");
@@ -5517,7 +5517,7 @@ var FormField = ({
   const [showTooltip, setShowTooltip] = React9.useState(false);
   const tooltipRef = React9.useRef(null);
   const timerRef = React9.useRef(null);
-  const RightIconComponent = rightIcon2;
+  const RightIconComponent = rightIcon;
   const Icon = icon;
   React9.useEffect(() => {
     const handleClickOutside = (e) => {
@@ -5555,7 +5555,7 @@ var FormField = ({
       "div",
       {
         className: "magic-wand-container",
-        onClick: onRightIconClick2,
+        onClick: onRightIconClick,
         onMouseEnter: () => {
           if (timerRef.current) clearTimeout(timerRef.current);
           setShowTooltip(true);
@@ -5806,6 +5806,12 @@ var ReservationStepTwo = ({
   const [hasAutofilled, setHasAutofilled] = React9.useState(false);
   const [pendingAutofill, setPendingAutofill] = React9.useState(null);
   const api = useApi_default();
+  const rightIcon = fa.FaMagic;
+  const onRightIconClick = () => {
+    if (pendingAutofill) {
+      applyAutofill();
+    }
+  };
   React9.useEffect(() => {
     moment2__default.default.locale(lang);
     if (!formData.date || !formData.time || !menuData.length) return setAvailableMenus([]);
@@ -5855,15 +5861,23 @@ var ReservationStepTwo = ({
   React9.useEffect(() => {
     tryAutofill();
   }, [formData.email, formData.phone]);
+  const applyAutofill = () => {
+    if (!pendingAutofill) return;
+    setFormData((prev) => ({
+      ...prev,
+      firstName: pendingAutofill.firstName,
+      lastName: pendingAutofill.lastName,
+      email: pendingAutofill.email,
+      phone: pendingAutofill.phone
+    }));
+    setHasAutofilled(true);
+    setPendingAutofill(null);
+  };
   const magicProps = React9.useMemo(() => {
-    if (!pendingAutofill)
-      return { email: {}, phone: {} };
+    if (!pendingAutofill) return { email: {}, phone: {} };
     const emailActive = pendingAutofill.sources.includes("email") && (formData.email || "").trim().toLowerCase() === pendingAutofill.email.trim().toLowerCase();
     const phoneActive = pendingAutofill.sources.includes("phone") && (formData.phone || "").trim() === pendingAutofill.phone.trim();
-    const common = {
-      rightIcon,
-      onRightIconClick
-    };
+    const common = { rightIcon, onRightIconClick };
     return {
       email: emailActive ? {
         ...common,
@@ -6352,7 +6366,7 @@ var ReservationSidebar = ({
   }, [isOpen, api]);
   const handleNewReservationClick = React9.useCallback(() => {
     setFormData({
-      guests,
+      guest: 2,
       date: "",
       time: "",
       firstName: "",

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { getAvailableTablesForTime, getAvailableTimeblocks, getAvailableTimebloc
 import { DateTime } from 'luxon';
 import axios from 'axios';
 import Lottie from 'lottie-react';
-import { FaUser, FaEnvelope, FaPhone, FaInfoCircle, FaTimes } from 'react-icons/fa';
+import { FaMagic, FaUser, FaEnvelope, FaPhone, FaInfoCircle, FaTimes } from 'react-icons/fa';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -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,
@@ -5499,8 +5499,8 @@ var FormField = ({
   halfWidth,
   options = [],
   selectPlaceholder,
-  rightIcon: rightIcon2,
-  onRightIconClick: onRightIconClick2,
+  rightIcon,
+  onRightIconClick,
   tooltipContent
 }) => {
   const t = getSection(translations_default2, "formField");
@@ -5508,7 +5508,7 @@ var FormField = ({
   const [showTooltip, setShowTooltip] = useState(false);
   const tooltipRef = useRef(null);
   const timerRef = useRef(null);
-  const RightIconComponent = rightIcon2;
+  const RightIconComponent = rightIcon;
   const Icon = icon;
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -5546,7 +5546,7 @@ var FormField = ({
       "div",
       {
         className: "magic-wand-container",
-        onClick: onRightIconClick2,
+        onClick: onRightIconClick,
         onMouseEnter: () => {
           if (timerRef.current) clearTimeout(timerRef.current);
           setShowTooltip(true);
@@ -5797,6 +5797,12 @@ var ReservationStepTwo = ({
   const [hasAutofilled, setHasAutofilled] = useState(false);
   const [pendingAutofill, setPendingAutofill] = useState(null);
   const api = useApi_default();
+  const rightIcon = FaMagic;
+  const onRightIconClick = () => {
+    if (pendingAutofill) {
+      applyAutofill();
+    }
+  };
   useEffect(() => {
     moment2.locale(lang);
     if (!formData.date || !formData.time || !menuData.length) return setAvailableMenus([]);
@@ -5846,15 +5852,23 @@ var ReservationStepTwo = ({
   useEffect(() => {
     tryAutofill();
   }, [formData.email, formData.phone]);
+  const applyAutofill = () => {
+    if (!pendingAutofill) return;
+    setFormData((prev) => ({
+      ...prev,
+      firstName: pendingAutofill.firstName,
+      lastName: pendingAutofill.lastName,
+      email: pendingAutofill.email,
+      phone: pendingAutofill.phone
+    }));
+    setHasAutofilled(true);
+    setPendingAutofill(null);
+  };
   const magicProps = useMemo(() => {
-    if (!pendingAutofill)
-      return { email: {}, phone: {} };
+    if (!pendingAutofill) return { email: {}, phone: {} };
     const emailActive = pendingAutofill.sources.includes("email") && (formData.email || "").trim().toLowerCase() === pendingAutofill.email.trim().toLowerCase();
     const phoneActive = pendingAutofill.sources.includes("phone") && (formData.phone || "").trim() === pendingAutofill.phone.trim();
-    const common = {
-      rightIcon,
-      onRightIconClick
-    };
+    const common = { rightIcon, onRightIconClick };
     return {
       email: emailActive ? {
         ...common,
@@ -6343,7 +6357,7 @@ var ReservationSidebar = ({
   }, [isOpen, api]);
   const handleNewReservationClick = useCallback(() => {
     setFormData({
-      guests,
+      guest: 2,
       date: "",
       time: "",
       firstName: "",

package/package.json

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