@tipp/ui 1.5.9 → 1.5.11

package/dist/app/platform/reservation-card.cjs

@@ -63,7 +63,7 @@ __export(reservation_card_exports, {
 });
 module.exports = __toCommonJS(reservation_card_exports);
 var import_react29 = require("react");
-var import_date_fns2 = require("date-fns");
+var import_date_fns3 = require("date-fns");
 
 // src/atoms/alert-dialog.tsx
 var import_themes = require("@radix-ui/themes");
@@ -1020,6 +1020,7 @@ function DatePickerButton(props) {
 
 // src/molecules/time-select.tsx
 var import_react27 = require("react");
+var import_date_fns2 = require("date-fns");
 
 // src/utils/get-time-options.ts
 var getTimeOptions = () => {
@@ -1043,18 +1044,40 @@ var getTimeOption = (time) => {
 
 // src/molecules/time-select.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var getOptionValue = (date, timeValue) => {
+  if (date && timeValue) {
+    if ((0, import_date_fns2.format)(date, "yyyyMMdd") === (0, import_date_fns2.format)(timeValue, "yyyyMMdd")) {
+      return (0, import_date_fns2.format)(date, "HH:mm");
+    }
+  }
+};
 function TimeSelect(_a) {
   var _b = _a, {
-    value
+    value,
+    maxTime,
+    minTime,
+    time
   } = _b, rest = __objRest(_b, [
-    "value"
+    "value",
+    "maxTime",
+    "minTime",
+    "time"
   ]);
   const timeOptions = (0, import_react27.useMemo)(() => {
     return getTimeOptions();
   }, []);
+  const [minOption, maxOption] = (0, import_react27.useMemo)(() => {
+    return [getOptionValue(minTime, time), getOptionValue(maxTime, time)];
+  }, [maxTime, minTime, time]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Select.Root, __spreadProps(__spreadValues({ value }, rest), { children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes22.Flex, { direction: "column", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Select.Trigger, { placeholder: "-        ", style: { minWidth: "100px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Select.Content, { children: timeOptions.map((time) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Select.Item, { value: time, children: time }, time)) })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Select.Content, { children: timeOptions.map((option) => {
+      const visible = (!minOption || option >= minOption) && (!maxOption || option <= maxOption);
+      if (!visible) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Select.Item, { value: option, children: option }, option);
+    }) })
   ] }));
 }
 
@@ -1157,6 +1180,8 @@ function ReservationCard(props) {
     defaultTime,
     defaultType,
     error,
+    minTime,
+    maxTime,
     onClickReserve,
     onClickCancel,
     onClickCompleteSession
@@ -1191,7 +1216,7 @@ function ReservationCard(props) {
       const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};
       setEditValues((prev) => {
         return __spreadProps(__spreadValues({}, prev), {
-          date: (0, import_date_fns2.setMinutes)((0, import_date_fns2.setHours)(newDate, hour), minute)
+          date: (0, import_date_fns3.setMinutes)((0, import_date_fns3.setHours)(newDate, hour), minute)
         });
       });
     },
@@ -1209,12 +1234,36 @@ function ReservationCard(props) {
       const { hour, minute } = parseTimeOption(v);
       setEditValues((prev) => {
         return __spreadProps(__spreadValues({}, prev), {
-          date: (0, import_date_fns2.setMinutes)((0, import_date_fns2.setHours)(date || /* @__PURE__ */ new Date(), hour), minute)
+          date: (0, import_date_fns3.setMinutes)((0, import_date_fns3.setHours)(date || /* @__PURE__ */ new Date(), hour), minute)
         });
       });
     },
     [date]
   );
+  (0, import_react29.useEffect)(() => {
+    if (!minTime || !editValues.date)
+      return;
+    if (editValues.date < minTime) {
+      import_react_toastify2.toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+      setEditValues((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          date: minTime
+        });
+      });
+    }
+  }, [editValues, minTime]);
+  (0, import_react29.useEffect)(() => {
+    if (!maxTime || !editValues.date)
+      return;
+    if (editValues.date > maxTime) {
+      import_react_toastify2.toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+      setEditValues((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          date: maxTime
+        });
+      });
+    }
+  }, [editValues, maxTime]);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Card,
     {
@@ -1259,6 +1308,8 @@ function ReservationCard(props) {
                     DatePickerButton,
                     {
                       disabled: readonly,
+                      maxDate: maxTime,
+                      minDate: minTime,
                       onChange: onChangeDate,
                       placeholder: "\uC77C\uC790\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
                       selected: date,
@@ -1269,8 +1320,11 @@ function ReservationCard(props) {
                     TimeSelect,
                     {
                       disabled: readonly,
+                      maxTime,
+                      minTime,
                       onValueChange: onChangeTime,
                       size: "3",
+                      time: date,
                       value: time
                     }
                   )