@happychef/reservation-sidebar 2.1.2 → 2.1.4

package/dist/index.js

@@ -4769,9 +4769,6 @@ var Calendar = ({
   }))))))));
 };
 var Calendar_default = Calendar;
-
-// src/components/ReservationStepOne/DateSelector.js
-var import_moment = __toESM(require_moment());
 var DateSelector = ({
   guests: guests2,
   formData,
@@ -4784,12 +4781,12 @@ var DateSelector = ({
   reservationMode
 }) => {
   const handleDateSelect = (date) => {
-    const formatted = (0, import_moment.default)(date).format("YYYY-MM-DD");
+    const formatted = moment2__default.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");
+  const monthStartDate = startDate ? startDate.clone().startOf("month") : moment2__default.default().startOf("month");
   return /* @__PURE__ */ React9__default.default.createElement("div", { className: "form-group date-selector-container" }, /* @__PURE__ */ React9__default.default.createElement(
     Calendar_default,
     {
@@ -5108,9 +5105,6 @@ 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/index.js
-var import_moment2 = __toESM(require_moment());
 var useApi = () => {
   const getJwtToken = React9.useCallback(() => {
     return localStorage.getItem("accessToken");
@@ -5208,7 +5202,7 @@ var ReservationStepOne = ({
     [setFormData]
   );
   React9.useEffect(() => {
-    const today = (0, import_moment2.default)().tz("Europe/Amsterdam").startOf("day");
+    const today = moment2__default.default().tz("Europe/Amsterdam").startOf("day");
     let firstWeekStart = today.clone().startOf("isoWeek");
     while (isWeekInPast(firstWeekStart)) {
       firstWeekStart.add(1, "week");
@@ -5514,8 +5508,8 @@ var FormField = ({
   halfWidth,
   options = [],
   selectPlaceholder,
-  rightIcon: rightIcon2,
-  onRightIconClick: onRightIconClick2,
+  rightIcon,
+  onRightIconClick,
   tooltipContent
 }) => {
   const t = getSection(translations_default2, "formField");
@@ -5523,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) => {
@@ -5561,7 +5555,7 @@ var FormField = ({
       "div",
       {
         className: "magic-wand-container",
-        onClick: onRightIconClick2,
+        onClick: onRightIconClick,
         onMouseEnter: () => {
           if (timerRef.current) clearTimeout(timerRef.current);
           setShowTooltip(true);
@@ -5669,7 +5663,6 @@ var FormField = ({
 var FormField_default = FormField;
 
 // src/components/ReservationStepTwo/ReservationStepTwo.js
-var import_moment3 = __toESM(require_moment());
 __toESM(require_nl());
 
 // src/components/ReservationStepTwo/translations.json
@@ -5813,20 +5806,26 @@ 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(() => {
-    import_moment3.default.locale(lang);
+    moment2__default.default.locale(lang);
     if (!formData.date || !formData.time || !menuData.length) return setAvailableMenus([]);
-    const sel = (0, import_moment3.default)(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
+    const sel = moment2__default.default(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
     const filtered = menuData.filter((menu) => {
       const inDate = sel.isBetween(
-        (0, import_moment3.default)(menu.startDate, "YYYY-MM-DD"),
-        (0, import_moment3.default)(menu.endDate, "YYYY-MM-DD"),
+        moment2__default.default(menu.startDate, "YYYY-MM-DD"),
+        moment2__default.default(menu.endDate, "YYYY-MM-DD"),
         "day",
         "[]"
       );
-      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"),
+      const inTime = moment2__default.default(formData.time, "HH:mm").isBetween(
+        moment2__default.default(menu.startHour, "HH:mm"),
+        moment2__default.default(menu.endHour, "HH:mm"),
         "minute",
         "[]"
       );
@@ -5862,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,

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;
@@ -4760,9 +4760,6 @@ var Calendar = ({
   }))))))));
 };
 var Calendar_default = Calendar;
-
-// src/components/ReservationStepOne/DateSelector.js
-var import_moment = __toESM(require_moment());
 var DateSelector = ({
   guests: guests2,
   formData,
@@ -4775,12 +4772,12 @@ var DateSelector = ({
   reservationMode
 }) => {
   const handleDateSelect = (date) => {
-    const formatted = (0, import_moment.default)(date).format("YYYY-MM-DD");
+    const formatted = moment2(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");
+  const monthStartDate = startDate ? startDate.clone().startOf("month") : moment2().startOf("month");
   return /* @__PURE__ */ React9.createElement("div", { className: "form-group date-selector-container" }, /* @__PURE__ */ React9.createElement(
     Calendar_default,
     {
@@ -5099,9 +5096,6 @@ 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/index.js
-var import_moment2 = __toESM(require_moment());
 var useApi = () => {
   const getJwtToken = useCallback(() => {
     return localStorage.getItem("accessToken");
@@ -5199,7 +5193,7 @@ var ReservationStepOne = ({
     [setFormData]
   );
   useEffect(() => {
-    const today = (0, import_moment2.default)().tz("Europe/Amsterdam").startOf("day");
+    const today = moment2().tz("Europe/Amsterdam").startOf("day");
     let firstWeekStart = today.clone().startOf("isoWeek");
     while (isWeekInPast(firstWeekStart)) {
       firstWeekStart.add(1, "week");
@@ -5505,8 +5499,8 @@ var FormField = ({
   halfWidth,
   options = [],
   selectPlaceholder,
-  rightIcon: rightIcon2,
-  onRightIconClick: onRightIconClick2,
+  rightIcon,
+  onRightIconClick,
   tooltipContent
 }) => {
   const t = getSection(translations_default2, "formField");
@@ -5514,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) => {
@@ -5552,7 +5546,7 @@ var FormField = ({
       "div",
       {
         className: "magic-wand-container",
-        onClick: onRightIconClick2,
+        onClick: onRightIconClick,
         onMouseEnter: () => {
           if (timerRef.current) clearTimeout(timerRef.current);
           setShowTooltip(true);
@@ -5660,7 +5654,6 @@ var FormField = ({
 var FormField_default = FormField;
 
 // src/components/ReservationStepTwo/ReservationStepTwo.js
-var import_moment3 = __toESM(require_moment());
 __toESM(require_nl());
 
 // src/components/ReservationStepTwo/translations.json
@@ -5804,20 +5797,26 @@ 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(() => {
-    import_moment3.default.locale(lang);
+    moment2.locale(lang);
     if (!formData.date || !formData.time || !menuData.length) return setAvailableMenus([]);
-    const sel = (0, import_moment3.default)(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
+    const sel = moment2(`${formData.date} ${formData.time}`, "YYYY-MM-DD HH:mm");
     const filtered = menuData.filter((menu) => {
       const inDate = sel.isBetween(
-        (0, import_moment3.default)(menu.startDate, "YYYY-MM-DD"),
-        (0, import_moment3.default)(menu.endDate, "YYYY-MM-DD"),
+        moment2(menu.startDate, "YYYY-MM-DD"),
+        moment2(menu.endDate, "YYYY-MM-DD"),
         "day",
         "[]"
       );
-      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"),
+      const inTime = moment2(formData.time, "HH:mm").isBetween(
+        moment2(menu.startHour, "HH:mm"),
+        moment2(menu.endHour, "HH:mm"),
         "minute",
         "[]"
       );
@@ -5853,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,

package/package.json

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