@happychef/reservation-sidebar 2.1.1 → 2.1.3

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");
@@ -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
@@ -5814,19 +5807,19 @@ var ReservationStepTwo = ({
   const [pendingAutofill, setPendingAutofill] = React9.useState(null);
   const api = useApi_default();
   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",
         "[]"
       );

package/dist/index.mjs

@@ -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");
@@ -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
@@ -5805,19 +5798,19 @@ var ReservationStepTwo = ({
   const [pendingAutofill, setPendingAutofill] = useState(null);
   const api = useApi_default();
   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",
         "[]"
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happychef/reservation-sidebar",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "A compound component for managing restaurant reservations - JavaScript version with independent styles",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -38,7 +38,7 @@
     "framer-motion": "^12.23.24",
     "lottie-react": "^2.4.1",
     "luxon": "^3.7.2",
-    "moment-timezone": "^0.5.46",
+    "moment-timezone": "^0.5.48",
     "react-icons": "^5.3.0"
   },
   "devDependencies": {