@pisell/private-materials 6.11.125 → 6.11.127

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))
+  ));
+};

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

@@ -0,0 +1,154 @@
+import './index.less';
+export interface BookingChangeModalCourt {
+    id: string;
+    name: string;
+    formId?: string | number;
+    form_id?: string | number;
+    relationId?: string | number;
+    relation_id?: string | number;
+    relationType?: string;
+    relation_type?: string;
+    resourceId?: string | number;
+    resource_id?: string | number;
+    capacity?: number;
+    likeStatus?: string;
+    like_status?: string;
+    formName?: string;
+    form_name?: string;
+    resourceName?: string;
+    resource_name?: string;
+    metadata?: Record<string, unknown>;
+    raw?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface BookingChangeModalCustomer {
+    name: string;
+    phone?: string;
+    email?: string;
+}
+export interface BookingChangeModalItem {
+    id: string;
+    courtId: string;
+    date: string;
+    startHour: number;
+    endHour: number;
+    name?: string;
+    kind?: string;
+    phone?: string;
+    relation_id?: string | number;
+    relation_type?: string;
+    like_status?: string;
+    is_all?: number;
+    schedule_id?: string | number;
+    sub_type?: string;
+    number?: number;
+    metadata?: Record<string, unknown>;
+    resources?: Array<Record<string, unknown>>;
+    raw?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface BookingChangeModalDraft {
+    targetCourtId: string;
+    targetDate: string;
+    targetHour: number;
+}
+export interface BookingChangeModalDetailData {
+    customer?: BookingChangeModalCustomer | null;
+    headerSummary?: {
+        customerName?: string;
+        resourceLabel?: string;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+export interface BookingChangeModalOpenOptions extends BookingChangeModalDraft {
+    item: BookingChangeModalItem;
+    courts?: BookingChangeModalCourt[];
+    visibleCourts?: BookingChangeModalCourt[];
+    bookings?: BookingChangeModalItem[];
+    hourSlots?: number[];
+    firstTimelineHour?: number;
+    endTimelineExclusive?: number;
+    selectedCustomer?: BookingChangeModalCustomer | null;
+    getBookingDetailData?: (item: BookingChangeModalItem, courts: BookingChangeModalCourt[]) => BookingChangeModalDetailData;
+    formatHourLabel?: (hour: number) => string;
+    isBusinessHour?: (hour: number) => boolean;
+    hasConflict?: (bookings: BookingChangeModalItem[], targetCourtId: string, targetDate: string, startHour: number, endHour: number, excludeBookingId?: string) => boolean;
+    onCustomerChange?: (context: {
+        item: BookingChangeModalItem;
+        customer: BookingChangeModalCustomer;
+        draft: BookingChangeModalDraft;
+        options: BookingChangeModalOpenOptions;
+    }) => Promise<BookingChangeModalCustomer | null | void> | BookingChangeModalCustomer | null | void;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    closeOnBackdrop?: boolean;
+    zIndex?: number;
+    theme?: 'light' | 'dark';
+    submitErrorMessage?: string;
+    onSubmit?: (context: BookingChangeModalSubmitContext) => Promise<unknown> | unknown;
+}
+export interface BookingChangeModalResult {
+    item: BookingChangeModalItem;
+    original: BookingChangeModalDraft;
+    draft: BookingChangeModalDraft;
+    customer: BookingChangeModalCustomer;
+    duration: number;
+    nextEndHour: number;
+    changed: boolean;
+    submitPayload: BookingChangeModalSubmitPayload;
+    submitResult?: unknown;
+}
+export interface BookingChangeModalSubmitPayload {
+    id: string | number;
+    relation_id: string | number;
+    like_status: string;
+    relation_type: string;
+    is_all: number;
+    schedule_id: string | number;
+    sub_type: string;
+    select_date: string;
+    number: number;
+    metadata: Record<string, unknown>;
+    resources: Array<{
+        form_id: string | number;
+        relation_type: string;
+        relation_id: string | number;
+        capacity: number;
+        like_status: string;
+        metadata: Record<string, unknown>;
+    }>;
+    start_date: string;
+    start_time: string;
+    end_date: string;
+    end_time: string;
+    duration: number;
+}
+export interface BookingChangeModalSubmitContext {
+    item: BookingChangeModalItem;
+    original: BookingChangeModalDraft;
+    draft: BookingChangeModalDraft;
+    customer: BookingChangeModalCustomer;
+    duration: number;
+    nextEndHour: number;
+    changed: boolean;
+    submitPayload: BookingChangeModalSubmitPayload;
+    options: BookingChangeModalOpenOptions;
+}
+export interface BookingChangeModalCloseReason {
+    type: 'cancel' | 'backdrop' | 'escape' | 'programmatic-close' | 'replaced';
+    message?: string;
+}
+/**
+ * Open the booking change modal as a Promise-based singleton.
+ */
+declare function open(options: BookingChangeModalOpenOptions): Promise<BookingChangeModalResult>;
+declare function close(reason?: BookingChangeModalCloseReason): void;
+declare const bookingChangeModal: {
+    open: typeof open;
+    close: typeof close;
+};
+export { open as openBookingChangeModal, close as closeBookingChangeModal };
+export default bookingChangeModal;