@pisell/private-materials 6.11.125 → 6.11.126

package/lib/plus/pisellReservation/components/bookingChangeModal/index.js

@@ -0,0 +1,632 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/pisellReservation/components/bookingChangeModal/index.tsx
+var bookingChangeModal_exports = {};
+__export(bookingChangeModal_exports, {
+  closeBookingChangeModal: () => close,
+  default: () => bookingChangeModal_default,
+  openBookingChangeModal: () => open
+});
+module.exports = __toCommonJS(bookingChangeModal_exports);
+var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_index = require("./index.less");
+var CLOSE_ANIMATION_MS = 180;
+var activeInstance = null;
+function defaultFormatHourLabel(hour) {
+  const normalizedMinutes = Math.round(hour * 60);
+  const wholeHours = Math.floor(normalizedMinutes / 60);
+  const minutes = normalizedMinutes % 60;
+  return `${String(wholeHours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+function getHourStep(hourSlots) {
+  if (hourSlots.length < 2) {
+    return 1;
+  }
+  const sorted = [...hourSlots].sort((a, b) => a - b);
+  let minStep = Number.POSITIVE_INFINITY;
+  for (let index = 1; index < sorted.length; index += 1) {
+    const step = sorted[index] - sorted[index - 1];
+    if (step > 0 && step < minStep) {
+      minStep = step;
+    }
+  }
+  return Number.isFinite(minStep) ? minStep : 1;
+}
+function getFallbackHourSlots() {
+  return Array.from({ length: 24 }, (_, index) => index);
+}
+function getCourtName(courts, courtId) {
+  var _a;
+  if (!courtId) {
+    return "Court";
+  }
+  return ((_a = courts.find((court) => court.id === courtId)) == null ? void 0 : _a.name) || "Court";
+}
+function pickFirstDefined(...values) {
+  return values.find((value) => value !== void 0 && value !== null && value !== "");
+}
+function asNumber(value, fallback = 0) {
+  const next = Number(value);
+  return Number.isFinite(next) ? next : fallback;
+}
+function formatDateKey(date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function getNormalizedDateTime(dateKey, hour) {
+  const date = /* @__PURE__ */ new Date(`${dateKey}T00:00:00`);
+  if (Number.isNaN(date.getTime())) {
+    return {
+      date: dateKey,
+      time: defaultFormatHourLabel(hour)
+    };
+  }
+  const minutes = Math.round(hour * 60);
+  date.setMinutes(date.getMinutes() + minutes);
+  return {
+    date: formatDateKey(date),
+    time: `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(
+      2,
+      "0"
+    )}`
+  };
+}
+function buildSubmitPayload(args) {
+  var _a, _b, _c;
+  const { item, draft, duration, nextEndHour, targetCourt } = args;
+  const itemRaw = item.raw || {};
+  const itemMetadata = item.metadata || {};
+  const targetCourtMetadata = (targetCourt == null ? void 0 : targetCourt.metadata) || {};
+  const firstResource = Array.isArray(item.resources) && item.resources[0] || {};
+  const firstResourceMetadata = firstResource.metadata || {};
+  const start = getNormalizedDateTime(draft.targetDate, draft.targetHour);
+  const end = getNormalizedDateTime(draft.targetDate, nextEndHour);
+  const resourceRelationId = pickFirstDefined(
+    targetCourt == null ? void 0 : targetCourt.relation_id,
+    targetCourt == null ? void 0 : targetCourt.relationId,
+    targetCourt == null ? void 0 : targetCourt.resource_id,
+    targetCourt == null ? void 0 : targetCourt.resourceId,
+    targetCourt == null ? void 0 : targetCourt.id,
+    firstResource.relation_id,
+    item.courtId
+  ) || item.courtId;
+  return {
+    id: pickFirstDefined(item.id, itemRaw.id) || "",
+    relation_id: pickFirstDefined(item.relation_id, itemRaw.relation_id, 0) || 0,
+    like_status: pickFirstDefined(item.like_status, itemRaw.like_status, "common") || "common",
+    relation_type: pickFirstDefined(item.relation_type, itemRaw.relation_type, "") || "",
+    is_all: asNumber(pickFirstDefined(item.is_all, itemRaw.is_all, 0), 0),
+    schedule_id: pickFirstDefined(item.schedule_id, itemRaw.schedule_id, 0) || 0,
+    sub_type: pickFirstDefined(item.sub_type, itemRaw.sub_type, "minutes") || "minutes",
+    select_date: draft.targetDate,
+    number: Math.max(1, asNumber(pickFirstDefined(item.number, itemRaw.number, 1), 1)),
+    metadata: {
+      ...itemRaw.metadata,
+      ...itemMetadata,
+      slot_count: Math.max(
+        1,
+        asNumber(
+          pickFirstDefined(
+            itemMetadata.slot_count,
+            (_a = itemRaw.metadata) == null ? void 0 : _a.slot_count,
+            Math.ceil(Math.max(0, duration * 60) / 30)
+          ),
+          1
+        )
+      ),
+      resource_id: pickFirstDefined(
+        targetCourt == null ? void 0 : targetCourt.resource_id,
+        targetCourt == null ? void 0 : targetCourt.resourceId,
+        resourceRelationId,
+        item.courtId
+      ),
+      venue_booking: pickFirstDefined(
+        itemMetadata.venue_booking,
+        (_b = itemRaw.metadata) == null ? void 0 : _b.venue_booking,
+        true
+      ) ?? true,
+      unique_identification_number: pickFirstDefined(
+        itemMetadata.unique_identification_number,
+        (_c = itemRaw.metadata) == null ? void 0 : _c.unique_identification_number
+      )
+    },
+    resources: [
+      {
+        form_id: pickFirstDefined(
+          targetCourt == null ? void 0 : targetCourt.form_id,
+          targetCourt == null ? void 0 : targetCourt.formId,
+          firstResource.form_id,
+          0
+        ) || 0,
+        relation_type: pickFirstDefined(
+          targetCourt == null ? void 0 : targetCourt.relation_type,
+          targetCourt == null ? void 0 : targetCourt.relationType,
+          firstResource.relation_type,
+          "form"
+        ) || "form",
+        relation_id: resourceRelationId,
+        capacity: asNumber(pickFirstDefined(targetCourt == null ? void 0 : targetCourt.capacity, firstResource.capacity, 0), 0),
+        like_status: pickFirstDefined(
+          targetCourt == null ? void 0 : targetCourt.like_status,
+          targetCourt == null ? void 0 : targetCourt.likeStatus,
+          firstResource.like_status,
+          "common"
+        ) || "common",
+        metadata: {
+          ...firstResourceMetadata,
+          ...targetCourtMetadata,
+          form_name: pickFirstDefined(
+            targetCourt == null ? void 0 : targetCourt.form_name,
+            targetCourt == null ? void 0 : targetCourt.formName,
+            targetCourtMetadata.form_name,
+            firstResourceMetadata.form_name
+          ) || "",
+          resource_name: pickFirstDefined(
+            targetCourt == null ? void 0 : targetCourt.resource_name,
+            targetCourt == null ? void 0 : targetCourt.resourceName,
+            targetCourtMetadata.resource_name,
+            firstResourceMetadata.resource_name,
+            targetCourt == null ? void 0 : targetCourt.name
+          ) || (targetCourt == null ? void 0 : targetCourt.name) || ""
+        }
+      }
+    ],
+    start_date: start.date,
+    start_time: start.time,
+    end_date: end.date,
+    end_time: end.time,
+    duration: Math.max(0, Math.round(duration * 60))
+  };
+}
+function resolveDetail(options, courts) {
+  var _a;
+  try {
+    return ((_a = options.getBookingDetailData) == null ? void 0 : _a.call(options, options.item, courts)) || {};
+  } catch (error) {
+    return {};
+  }
+}
+function buildCustomer(options, detail, selectedCustomer) {
+  var _a, _b, _c, _d;
+  if (selectedCustomer) {
+    return selectedCustomer;
+  }
+  return {
+    name: ((_a = detail.customer) == null ? void 0 : _a.name) || ((_b = detail.headerSummary) == null ? void 0 : _b.customerName) || options.item.name || "Customer",
+    phone: ((_c = detail.customer) == null ? void 0 : _c.phone) || options.item.phone || "",
+    email: ((_d = detail.customer) == null ? void 0 : _d.email) || ""
+  };
+}
+function destroyActiveInstance() {
+  if (!activeInstance) {
+    return;
+  }
+  const { container } = activeInstance;
+  activeInstance = null;
+  import_react_dom.default.unmountComponentAtNode(container);
+  if (document.body.contains(container)) {
+    document.body.removeChild(container);
+  }
+}
+function closeActiveInstance(reason) {
+  if (!activeInstance) {
+    return;
+  }
+  const { reject } = activeInstance;
+  destroyActiveInstance();
+  reject(reason);
+}
+var BookingChangeModalRenderer = ({
+  options,
+  onResolve,
+  onReject
+}) => {
+  var _a, _b;
+  const {
+    item,
+    courts = [],
+    visibleCourts,
+    bookings = [],
+    selectedCustomer: initialCustomer = null,
+    title = "Booking information",
+    description = "Update customer, court, date and time for this booking.",
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    closeOnBackdrop = true,
+    zIndex = 1072,
+    theme = "dark"
+  } = options;
+  const panelRef = (0, import_react.useRef)(null);
+  const closedRef = (0, import_react.useRef)(false);
+  const timerRef = (0, import_react.useRef)(null);
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [customerLoading, setCustomerLoading] = (0, import_react.useState)(false);
+  const [submitLoading, setSubmitLoading] = (0, import_react.useState)(false);
+  const [submitError, setSubmitError] = (0, import_react.useState)("");
+  const [selectedCustomer, setSelectedCustomer] = (0, import_react.useState)(initialCustomer);
+  const [draft, setDraft] = (0, import_react.useState)({
+    targetCourtId: options.targetCourtId,
+    targetDate: options.targetDate,
+    targetHour: options.targetHour
+  });
+  const mergedCourts = (0, import_react.useMemo)(() => {
+    const source = (visibleCourts && visibleCourts.length > 0 ? visibleCourts : courts) || [];
+    if (source.length > 0) {
+      return source;
+    }
+    const fallbackIds = [item.courtId, draft.targetCourtId].filter(Boolean);
+    const uniqueIds = Array.from(new Set(fallbackIds));
+    return uniqueIds.map((courtId) => ({
+      id: courtId,
+      name: courtId
+    }));
+  }, [courts, draft.targetCourtId, item.courtId, visibleCourts]);
+  const allCourts = (0, import_react.useMemo)(() => {
+    if (courts.length > 0) {
+      return courts;
+    }
+    return mergedCourts;
+  }, [courts, mergedCourts]);
+  const targetCourt = (0, import_react.useMemo)(
+    () => allCourts.find((court) => court.id === draft.targetCourtId),
+    [allCourts, draft.targetCourtId]
+  );
+  const detail = (0, import_react.useMemo)(() => resolveDetail(options, allCourts), [allCourts, options]);
+  const currentCustomer = (0, import_react.useMemo)(
+    () => buildCustomer(options, detail, selectedCustomer),
+    [detail, options, selectedCustomer]
+  );
+  const hourSlots = (0, import_react.useMemo)(
+    () => options.hourSlots && options.hourSlots.length > 0 ? options.hourSlots : getFallbackHourSlots(),
+    [options.hourSlots]
+  );
+  const formatHourLabel = options.formatHourLabel || defaultFormatHourLabel;
+  const isBusinessHour = options.isBusinessHour || (() => true);
+  const availableHours = (0, import_react.useMemo)(() => {
+    const filtered = hourSlots.filter((hour) => isBusinessHour(hour));
+    return filtered.length > 0 ? filtered : hourSlots;
+  }, [hourSlots, isBusinessHour]);
+  const hourStep = (0, import_react.useMemo)(() => getHourStep(hourSlots), [hourSlots]);
+  const firstTimelineHour = options.firstTimelineHour ?? Math.min(...hourSlots) ?? 0;
+  const endTimelineExclusive = options.endTimelineExclusive ?? Math.max(...hourSlots) + hourStep;
+  const duration = item.endHour - item.startHour;
+  const nextStartHour = draft.targetHour;
+  const nextEndHour = nextStartHour + duration;
+  const originalDate = item.date;
+  const originalStart = formatHourLabel(item.startHour);
+  const originalEnd = formatHourLabel(item.endHour);
+  const originalCourtName = getCourtName(allCourts, item.courtId) || ((_a = detail.headerSummary) == null ? void 0 : _a.resourceLabel) || "Court";
+  const nextCourtName = getCourtName(allCourts, draft.targetCourtId) || ((_b = detail.headerSummary) == null ? void 0 : _b.resourceLabel) || "Court";
+  const changed = originalDate !== draft.targetDate || item.courtId !== draft.targetCourtId || item.startHour !== nextStartHour;
+  const isDragScenario = item.date !== options.targetDate || item.startHour !== options.targetHour || item.courtId !== options.targetCourtId;
+  const hasConflict = options.hasConflict || (() => {
+    return false;
+  });
+  const conflict = hasConflict(
+    bookings,
+    draft.targetCourtId,
+    draft.targetDate,
+    nextStartHour,
+    nextEndHour,
+    item.id
+  );
+  const isLight = theme === "light";
+  const finishClose = (type, payload) => {
+    if (closedRef.current) {
+      return;
+    }
+    closedRef.current = true;
+    setVisible(false);
+    timerRef.current = window.setTimeout(() => {
+      if (type === "resolve") {
+        onResolve(payload);
+      } else {
+        onReject(payload);
+      }
+    }, CLOSE_ANIMATION_MS);
+  };
+  const handleCancel = (reasonType) => {
+    if (submitLoading) {
+      return;
+    }
+    finishClose("reject", { type: reasonType });
+  };
+  (0, import_react.useEffect)(() => {
+    const rafId = window.requestAnimationFrame(() => {
+      setVisible(true);
+    });
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        handleCancel("escape");
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.cancelAnimationFrame(rafId);
+      window.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const handleCustomerChange = async () => {
+    if (!options.onCustomerChange || customerLoading) {
+      return;
+    }
+    setCustomerLoading(true);
+    try {
+      const result = await options.onCustomerChange({
+        item,
+        customer: currentCustomer,
+        draft,
+        options
+      });
+      if (result) {
+        setSelectedCustomer(result);
+      }
+    } finally {
+      setCustomerLoading(false);
+    }
+  };
+  const handleConfirm = async () => {
+    if (conflict || submitLoading) {
+      return;
+    }
+    setSubmitError("");
+    const resultBase = {
+      item,
+      original: {
+        targetCourtId: options.targetCourtId,
+        targetDate: options.targetDate,
+        targetHour: options.targetHour
+      },
+      draft,
+      customer: currentCustomer,
+      duration,
+      nextEndHour,
+      changed,
+      submitPayload: buildSubmitPayload({
+        item,
+        draft,
+        duration,
+        nextEndHour,
+        targetCourt
+      })
+    };
+    if (!options.onSubmit) {
+      finishClose("resolve", resultBase);
+      return;
+    }
+    setSubmitLoading(true);
+    try {
+      const submitResult = await options.onSubmit({
+        ...resultBase,
+        options
+      });
+      finishClose("resolve", {
+        ...resultBase,
+        submitResult
+      });
+    } catch (error) {
+      const message = (error == null ? void 0 : error.message) || options.submitErrorMessage || "Submit failed. Please try again.";
+      setSubmitError(message);
+    } finally {
+      setSubmitLoading(false);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: [
+        "pisell-booking-change-modal",
+        visible ? "is-visible" : "",
+        isLight ? "is-light" : "is-dark"
+      ].filter(Boolean).join(" "),
+      style: { zIndex },
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget && closeOnBackdrop) {
+          handleCancel("backdrop");
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: panelRef,
+        className: "pisell-booking-change-modal__panel",
+        onMouseDown: (event) => event.stopPropagation()
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__title" }, title),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__description" }, description),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__customer" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__customer-info" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__section-label" }, "Customer"), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__customer-name" }, currentCustomer.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__customer-meta" }, currentCustomer.phone || "No phone"), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__customer-meta" }, currentCustomer.email || "No email")), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: handleCustomerChange,
+          disabled: !options.onCustomerChange || customerLoading,
+          className: "pisell-booking-change-modal__ghost-button"
+        },
+        customerLoading ? "Loading..." : "Change"
+      ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__grid" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "pisell-booking-change-modal__field-label" }, "Court"), /* @__PURE__ */ import_react.default.createElement(
+        "select",
+        {
+          value: draft.targetCourtId,
+          onChange: (event) => setDraft((prev) => ({
+            ...prev,
+            targetCourtId: event.target.value
+          })),
+          className: "pisell-booking-change-modal__control"
+        },
+        mergedCourts.map((court) => /* @__PURE__ */ import_react.default.createElement("option", { key: court.id, value: court.id }, court.name))
+      )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "pisell-booking-change-modal__field-label" }, "New date"), /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          type: "date",
+          value: draft.targetDate,
+          onChange: (event) => setDraft((prev) => ({
+            ...prev,
+            targetDate: event.target.value
+          })),
+          className: "pisell-booking-change-modal__control"
+        }
+      ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__grid" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "pisell-booking-change-modal__field-label" }, "New start time"), /* @__PURE__ */ import_react.default.createElement(
+        "select",
+        {
+          value: nextStartHour,
+          onChange: (event) => setDraft((prev) => ({
+            ...prev,
+            targetHour: Number(event.target.value)
+          })),
+          className: "pisell-booking-change-modal__control"
+        },
+        availableHours.map((hour) => {
+          const disabled = hour + duration > endTimelineExclusive || hasConflict(
+            bookings,
+            draft.targetCourtId,
+            draft.targetDate,
+            hour,
+            hour + duration,
+            item.id
+          );
+          return /* @__PURE__ */ import_react.default.createElement("option", { key: hour, value: hour, disabled }, disabled ? `Unavailable ${formatHourLabel(hour)}` : formatHourLabel(hour));
+        })
+      )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__field" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "pisell-booking-change-modal__field-label" }, "New end time"), /* @__PURE__ */ import_react.default.createElement(
+        "select",
+        {
+          value: nextEndHour,
+          onChange: (event) => {
+            const targetEndHour = Number(event.target.value);
+            setDraft((prev) => ({
+              ...prev,
+              targetHour: targetEndHour - duration
+            }));
+          },
+          className: "pisell-booking-change-modal__control"
+        },
+        availableHours.map((hour) => {
+          const startHour = hour - duration;
+          const disabled = startHour < firstTimelineHour || hasConflict(
+            bookings,
+            draft.targetCourtId,
+            draft.targetDate,
+            startHour,
+            hour,
+            item.id
+          );
+          return /* @__PURE__ */ import_react.default.createElement("option", { key: `end-${hour}`, value: hour, disabled }, disabled ? `Unavailable ${formatHourLabel(hour)}` : formatHourLabel(hour));
+        })
+      ))), changed && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__section-label" }, "Previous booking info"), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-grid" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-title" }, "Original"), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-value" }, originalCourtName), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-value" }, originalDate), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-value" }, originalStart, " - ", originalEnd)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-card is-highlighted" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-title" }, isDragScenario ? "Drop target" : "Updated"), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-value" }, nextCourtName), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-value" }, draft.targetDate), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__compare-value" }, formatHourLabel(nextStartHour), " - ", formatHourLabel(nextEndHour)))))),
+      conflict && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__error" }, "The selected date, court, or time range is unavailable. Please choose an available option."),
+      !conflict && submitError && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__error" }, submitError),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-booking-change-modal__footer" }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleCancel("cancel"),
+          disabled: submitLoading,
+          className: "pisell-booking-change-modal__ghost-button"
+        },
+        cancelText
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          disabled: conflict || submitLoading,
+          onClick: handleConfirm,
+          className: "pisell-booking-change-modal__primary-button"
+        },
+        submitLoading ? "Submitting..." : confirmText
+      ))
+    )
+  );
+};
+function open(options) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject({
+      type: "programmatic-close",
+      message: "bookingChangeModal can only open in a browser environment."
+    });
+  }
+  if (activeInstance) {
+    closeActiveInstance({
+      type: "replaced",
+      message: "A new booking change modal replaced the current one."
+    });
+  }
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  return new Promise((resolve, reject) => {
+    activeInstance = {
+      container,
+      reject
+    };
+    const handleResolve = (result) => {
+      destroyActiveInstance();
+      resolve(result);
+    };
+    const handleReject = (reason) => {
+      destroyActiveInstance();
+      reject(reason);
+    };
+    import_react_dom.default.render(
+      /* @__PURE__ */ import_react.default.createElement(
+        BookingChangeModalRenderer,
+        {
+          options,
+          onResolve: handleResolve,
+          onReject: handleReject
+        }
+      ),
+      container
+    );
+  });
+}
+function close(reason) {
+  closeActiveInstance(
+    reason || {
+      type: "programmatic-close"
+    }
+  );
+}
+var bookingChangeModal = {
+  open,
+  close
+};
+var bookingChangeModal_default = bookingChangeModal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  closeBookingChangeModal,
+  openBookingChangeModal
+});