@pisell/private-materials 6.11.125 → 6.11.126

package/es/plus/pisellReservation/components/bookingChangeModal/index.less

@@ -0,0 +1,320 @@
+.pisell-booking-change-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.18s ease;
+
+  &.is-visible {
+    opacity: 1;
+  }
+
+  &.is-dark {
+    color: #ffffff;
+  }
+
+  &.is-light {
+    color: #0f172a;
+  }
+}
+
+.pisell-booking-change-modal__panel {
+  width: 100%;
+  max-width: 980px;
+  padding: 24px;
+  border: 1px solid #3f3f46;
+  border-radius: 24px;
+  background: #121217;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
+  transform: translateY(8px) scale(0.96);
+  transition: transform 0.18s ease, opacity 0.18s ease;
+  opacity: 0;
+}
+
+.pisell-booking-change-modal.is-visible .pisell-booking-change-modal__panel {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__panel {
+  border-color: #dbe2ea;
+  background: #ffffff;
+  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
+}
+
+.pisell-booking-change-modal__title {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.pisell-booking-change-modal__description {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #a1a1aa;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__description {
+  color: #64748b;
+}
+
+.pisell-booking-change-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.pisell-booking-change-modal__card {
+  padding: 20px;
+  border: 1px solid #3f3f46;
+  border-radius: 24px;
+  background: #171820;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__card {
+  border-color: #dbe2ea;
+  background: #f8fafc;
+}
+
+.pisell-booking-change-modal__customer {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.pisell-booking-change-modal__customer-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.pisell-booking-change-modal__section-label {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #71717a;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__section-label {
+  color: #64748b;
+}
+
+.pisell-booking-change-modal__customer-name {
+  margin-top: 12px;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.pisell-booking-change-modal__customer-meta {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #a1a1aa;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__customer-meta {
+  color: #64748b;
+}
+
+.pisell-booking-change-modal__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.pisell-booking-change-modal__field {
+  min-width: 0;
+}
+
+.pisell-booking-change-modal__field-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #a1a1aa;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__field-label {
+  color: #64748b;
+}
+
+.pisell-booking-change-modal__control {
+  width: 100%;
+  min-height: 56px;
+  padding: 16px;
+  border: 1px solid #3f3f46;
+  border-radius: 18px;
+  outline: none;
+  background: #171820;
+  color: #ffffff;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+
+  &:focus {
+    border-color: #8b5cf6;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__control {
+  border-color: #cbd5e1;
+  background: #ffffff;
+  color: #0f172a;
+}
+
+.pisell-booking-change-modal__compare-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.pisell-booking-change-modal__compare-card {
+  padding: 16px;
+  border-radius: 18px;
+  background: #101117;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__compare-card {
+  background: #ffffff;
+  box-shadow: inset 0 0 0 1px #e2e8f0;
+}
+
+.pisell-booking-change-modal__compare-card.is-highlighted {
+  border: 1px solid rgba(139, 92, 246, 0.35);
+  background: rgba(139, 92, 246, 0.1);
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__compare-card.is-highlighted {
+  border-color: #c4b5fd;
+  background: #f5f3ff;
+}
+
+.pisell-booking-change-modal__compare-title {
+  font-size: 12px;
+  line-height: 1.4;
+  color: #c4b5fd;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__compare-title {
+  color: #6d28d9;
+}
+
+.pisell-booking-change-modal__compare-value {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #d4d4d8;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__compare-value {
+  color: #334155;
+}
+
+.pisell-booking-change-modal__error {
+  margin-top: 16px;
+  padding: 12px 16px;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 16px;
+  background: rgba(239, 68, 68, 0.1);
+  color: #fecaca;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__error {
+  color: #b91c1c;
+  background: #fef2f2;
+}
+
+.pisell-booking-change-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.pisell-booking-change-modal__ghost-button,
+.pisell-booking-change-modal__primary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 12px 20px;
+  border-radius: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  transition: all 0.16s ease;
+}
+
+.pisell-booking-change-modal__ghost-button {
+  border: 1px solid #3f3f46;
+  background: rgba(255, 255, 255, 0.05);
+  color: #d4d4d8;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.pisell-booking-change-modal.is-light .pisell-booking-change-modal__ghost-button {
+  border-color: #cbd5e1;
+  background: #ffffff;
+  color: #334155;
+
+  &:hover:not(:disabled) {
+    background: #f8fafc;
+  }
+}
+
+.pisell-booking-change-modal__primary-button {
+  border: none;
+  background: #7c3aed;
+  color: #ffffff;
+
+  &:hover:not(:disabled) {
+    background: #8b5cf6;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: #3f3f46;
+    color: #a1a1aa;
+  }
+}
+
+@media (max-width: 768px) {
+  .pisell-booking-change-modal__panel {
+    padding: 20px;
+  }
+
+  .pisell-booking-change-modal__grid,
+  .pisell-booking-change-modal__compare-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .pisell-booking-change-modal__customer,
+  .pisell-booking-change-modal__footer {
+    flex-direction: column;
+  }
+
+  .pisell-booking-change-modal__ghost-button,
+  .pisell-booking-change-modal__primary-button {
+    width: 100%;
+  }
+}

package/lib/plus/pisellReservation/components/bookingChangeModal/demo.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

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

@@ -0,0 +1,388 @@
+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/demo.tsx
+var demo_exports = {};
+__export(demo_exports, {
+  default: () => demo_default
+});
+module.exports = __toCommonJS(demo_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index"));
+var courts = [
+  { id: "court-a", name: "Court A" },
+  { id: "court-b", name: "Court B" },
+  { id: "court-c", name: "Court C" }
+];
+var bookings = [
+  {
+    id: "booking-1",
+    courtId: "court-a",
+    date: "2026-04-17",
+    startHour: 10,
+    endHour: 12,
+    name: "Alice Johnson",
+    kind: "booking",
+    phone: "0412 111 222"
+  },
+  {
+    id: "booking-2",
+    courtId: "court-b",
+    date: "2026-04-17",
+    startHour: 13,
+    endHour: 15,
+    name: "Bob Martin",
+    kind: "booking",
+    phone: "0412 333 444"
+  },
+  {
+    id: "booking-3",
+    courtId: "court-c",
+    date: "2026-04-18",
+    startHour: 9,
+    endHour: 10.5,
+    name: "Cindy Brown",
+    kind: "booking",
+    phone: "0412 555 666"
+  },
+  {
+    id: "booking-4",
+    courtId: "court-a",
+    date: "2026-04-18",
+    startHour: 15,
+    endHour: 17,
+    name: "David Lee",
+    kind: "booking",
+    phone: "0412 777 888"
+  }
+];
+var hourSlots = Array.from({ length: 25 }, (_, index) => 8 + index * 0.5);
+function formatHourLabel(hour) {
+  const hours = Math.floor(hour);
+  const minutes = Math.round((hour - hours) * 60);
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
+function hasConflict(list, targetCourtId, targetDate, startHour, endHour, excludeBookingId) {
+  return list.some((booking) => {
+    if (booking.id === excludeBookingId) {
+      return false;
+    }
+    if (booking.courtId !== targetCourtId || booking.date !== targetDate) {
+      return false;
+    }
+    return !(endHour <= booking.startHour || startHour >= booking.endHour);
+  });
+}
+function getBookingDetailData(item) {
+  var _a;
+  const courtName = ((_a = courts.find((court) => court.id === item.courtId)) == null ? void 0 : _a.name) || "Court";
+  return {
+    customer: {
+      name: item.name || "Unknown customer",
+      phone: item.phone || "",
+      email: `${String(item.name || "guest").toLowerCase().replace(/\s+/g, ".")}@example.com`
+    },
+    headerSummary: {
+      customerName: item.name || "Unknown customer",
+      resourceLabel: courtName
+    }
+  };
+}
+function createCustomerChangeHandler(scenarioLabel) {
+  return async ({ customer }) => {
+    if (scenarioLabel === "No customer change") {
+      return null;
+    }
+    return {
+      name: `${customer.name} (${scenarioLabel})`,
+      phone: "0400 000 000",
+      email: `${scenarioLabel.toLowerCase().replace(/\s+/g, "-")}@example.com`
+    };
+  };
+}
+var demo_default = () => {
+  const [latestResult, setLatestResult] = (0, import_react.useState)(null);
+  const [latestReject, setLatestReject] = (0, import_react.useState)(null);
+  const [activeScenario, setActiveScenario] = (0, import_react.useState)("");
+  const currentItem = (0, import_react.useMemo)(() => bookings[0], []);
+  const scenarios = (0, import_react.useMemo)(
+    () => [
+      {
+        key: "default-dark",
+        title: "Default dark",
+        description: "最基础的打开方式，初始值与当前 booking 一致。",
+        buildOptions: (item) => ({
+          item,
+          targetCourtId: item.courtId,
+          targetDate: item.date,
+          targetHour: item.startHour,
+          theme: "dark",
+          onCustomerChange: createCustomerChangeHandler("Default dark")
+        })
+      },
+      {
+        key: "drag-target",
+        title: "Drag target preset",
+        description: "模拟从日历拖拽进入弹窗，打开时就已经带有新的 court 和 time。",
+        buildOptions: (item) => ({
+          item,
+          targetCourtId: "court-c",
+          targetDate: item.date,
+          targetHour: 16,
+          theme: "dark",
+          onCustomerChange: createCustomerChangeHandler("Drag target")
+        })
+      },
+      {
+        key: "cross-date",
+        title: "Change date",
+        description: "初始目标日期不是原日期，方便验证 Original / Drop target 对比。",
+        buildOptions: (item) => ({
+          item,
+          targetCourtId: "court-b",
+          targetDate: "2026-04-18",
+          targetHour: 11,
+          theme: "dark",
+          onCustomerChange: createCustomerChangeHandler("Change date")
+        })
+      },
+      {
+        key: "light-theme",
+        title: "Light theme",
+        description: "浅色主题展示，便于确认两套视觉是否都正常。",
+        buildOptions: (item) => ({
+          item,
+          targetCourtId: "court-b",
+          targetDate: item.date,
+          targetHour: 9,
+          theme: "light",
+          onCustomerChange: createCustomerChangeHandler("Light theme")
+        })
+      },
+      {
+        key: "conflict-case",
+        title: "Conflict state",
+        description: "目标时间与已有 booking 冲突，确认底部错误提示和 Confirm disabled。",
+        buildOptions: (item) => ({
+          item,
+          targetCourtId: "court-b",
+          targetDate: "2026-04-17",
+          targetHour: 13,
+          theme: "dark",
+          onCustomerChange: createCustomerChangeHandler("Conflict state")
+        })
+      },
+      {
+        key: "custom-copy",
+        title: "Custom copy",
+        description: "自定义标题、描述和按钮文案，验证配置项是否生效。",
+        buildOptions: (item) => ({
+          item,
+          targetCourtId: "court-c",
+          targetDate: "2026-04-18",
+          targetHour: 9.5,
+          theme: "dark",
+          title: "Move this booking",
+          description: "Review the destination before saving the booking update.",
+          confirmText: "Save change",
+          cancelText: "Dismiss",
+          onCustomerChange: createCustomerChangeHandler("Custom copy")
+        })
+      },
+      {
+        key: "no-customer-change",
+        title: "Without customer change",
+        description: "不传或无效切换客户时，顶部 Change 区域也能正常展示禁用态。",
+        buildOptions: (item) => ({
+          item,
+          targetCourtId: item.courtId,
+          targetDate: item.date,
+          targetHour: item.startHour,
+          theme: "dark"
+        })
+      }
+    ],
+    []
+  );
+  const openScenario = async (scenario) => {
+    setActiveScenario(scenario.title);
+    setLatestResult(null);
+    setLatestReject(null);
+    try {
+      const result = await import_index.default.open({
+        courts,
+        visibleCourts: courts,
+        bookings,
+        hourSlots,
+        firstTimelineHour: 8,
+        endTimelineExclusive: 20.5,
+        getBookingDetailData,
+        formatHourLabel,
+        isBusinessHour: (hour) => hour >= 8 && hour <= 20,
+        hasConflict,
+        ...scenario.buildOptions(currentItem)
+      });
+      setLatestResult(result);
+    } catch (error) {
+      setLatestReject(error);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 24, background: "#f8fafc" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8, fontSize: 18, fontWeight: 600 } }, "BookingChangeModal Demo"), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 20, color: "#64748b", fontSize: 14 } }, "下面每个按钮都会打开一个不同场景的弹窗，方便快速检查视觉和交互。"), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
+        gap: 12
+      }
+    },
+    scenarios.map((scenario) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: scenario.key,
+        style: {
+          padding: 16,
+          border: "1px solid #e2e8f0",
+          borderRadius: 12,
+          background: "#fff"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 15, fontWeight: 600, marginBottom: 8 } }, scenario.title),
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            minHeight: 40,
+            marginBottom: 12,
+            color: "#64748b",
+            fontSize: 13,
+            lineHeight: 1.5
+          }
+        },
+        scenario.description
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => openScenario(scenario),
+          style: {
+            width: "100%",
+            padding: "10px 16px",
+            border: "none",
+            borderRadius: 8,
+            background: "#7c3aed",
+            color: "#fff",
+            cursor: "pointer"
+          }
+        },
+        "Open ",
+        scenario.title
+      )
+    ))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 20,
+        padding: 16,
+        border: "1px solid #e5e7eb",
+        borderRadius: 12,
+        background: "#fafafa",
+        whiteSpace: "pre-wrap",
+        fontSize: 13,
+        lineHeight: 1.6
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8, fontWeight: 600 } }, "Current booking"),
+    /* @__PURE__ */ import_react.default.createElement("div", null, JSON.stringify(currentItem, null, 2))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 16,
+        padding: 16,
+        border: "1px solid #e5e7eb",
+        borderRadius: 12,
+        background: "#fff",
+        whiteSpace: "pre-wrap",
+        fontSize: 13,
+        lineHeight: 1.6
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8, fontWeight: 600 } }, "All bookings"),
+    /* @__PURE__ */ import_react.default.createElement("div", null, JSON.stringify(bookings, null, 2))
+  ), activeScenario && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 16,
+        padding: 12,
+        borderRadius: 12,
+        background: "#ede9fe",
+        color: "#5b21b6",
+        fontSize: 13,
+        fontWeight: 600
+      }
+    },
+    "Last opened scenario: ",
+    activeScenario
+  ), latestResult && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 16,
+        padding: 16,
+        border: "1px solid #d1fae5",
+        borderRadius: 12,
+        background: "#ecfdf5",
+        whiteSpace: "pre-wrap",
+        fontSize: 13,
+        lineHeight: 1.6
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8, fontWeight: 600 } }, "Resolved result"),
+    /* @__PURE__ */ import_react.default.createElement("div", null, JSON.stringify(latestResult, null, 2))
+  ), latestReject && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 16,
+        padding: 16,
+        border: "1px solid #fecaca",
+        borderRadius: 12,
+        background: "#fef2f2",
+        whiteSpace: "pre-wrap",
+        fontSize: 13,
+        lineHeight: 1.6
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8, fontWeight: 600 } }, "Rejected reason"),
+    /* @__PURE__ */ import_react.default.createElement("div", null, JSON.stringify(latestReject, null, 2))
+  ));
+};