@pisell/private-materials 6.3.15 → 6.4.2

package/lib/components/checkout/components/ScrollableList/index.js

@@ -0,0 +1,233 @@
+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/components/checkout/components/ScrollableList/index.tsx
+var ScrollableList_exports = {};
+__export(ScrollableList_exports, {
+  default: () => ScrollableList_default
+});
+module.exports = __toCommonJS(ScrollableList_exports);
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+var import_icon = require("@pisell/icon");
+var ScrollableList = ({
+  children,
+  height = "100%",
+  maxHeight,
+  gradientHeight = 40,
+  gradientColor = "rgba(255, 255, 255, 0.9)",
+  containerStyle = {},
+  contentStyle = {},
+  gradientStyle = {},
+  showScrollbar = false,
+  onScroll,
+  onScrollableChange,
+  columnCount = 1,
+  columnGap = 16,
+  rowGap = 16,
+  minColumnWidth = 200
+}) => {
+  const containerRef = (0, import_react.useRef)(null);
+  const contentRef = (0, import_react.useRef)(null);
+  const [isScrollable, setIsScrollable] = (0, import_react.useState)(false);
+  const [showBottomGradient, setShowBottomGradient] = (0, import_react.useState)(false);
+  const getColumnClassName = () => {
+    if (columnCount === "auto") {
+      return "scrollable-list-auto-column";
+    }
+    switch (columnCount) {
+      case 1:
+        return "scrollable-list-single-column";
+      case 2:
+        return "scrollable-list-two-column";
+      case 3:
+        return "scrollable-list-three-column";
+      case 4:
+        return "scrollable-list-four-column";
+      case 5:
+        return "scrollable-list-five-column";
+      case 6:
+        return "scrollable-list-six-column";
+      default:
+        return "scrollable-list-single-column";
+    }
+  };
+  const getGridStyle = () => {
+    const style = {};
+    style.gap = `${rowGap}px ${columnGap}px`;
+    if (columnCount === "auto") {
+      style.gridTemplateColumns = `repeat(auto-fit, minmax(${minColumnWidth}px, 1fr))`;
+    }
+    return style;
+  };
+  const checkScrollable = () => {
+    if (containerRef.current && contentRef.current) {
+      const containerHeight = containerRef.current.clientHeight;
+      const contentHeight = contentRef.current.scrollHeight;
+      const scrollTop = containerRef.current.scrollTop;
+      if (containerHeight < 50) {
+        return;
+      }
+      const maxScrollTop = contentHeight - containerHeight;
+      const needsScroll = contentHeight > containerHeight + 10;
+      setIsScrollable(needsScroll);
+      if (needsScroll) {
+        setShowBottomGradient(scrollTop < maxScrollTop - 5);
+      } else {
+        setShowBottomGradient(false);
+      }
+      onScrollableChange == null ? void 0 : onScrollableChange(needsScroll);
+    }
+  };
+  const handleScroll = (event) => {
+    checkScrollable();
+    if (onScroll && event instanceof Event && event.target) {
+      const reactEvent = {
+        ...event,
+        currentTarget: event.target,
+        target: event.target
+      };
+      onScroll(reactEvent);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    const timeoutIds = [];
+    timeoutIds.push(setTimeout(() => {
+      checkScrollable();
+    }, 100));
+    timeoutIds.push(setTimeout(() => {
+      checkScrollable();
+    }, 300));
+    timeoutIds.push(setTimeout(() => {
+      checkScrollable();
+    }, 500));
+    const resizeObserver = new ResizeObserver(() => {
+      setTimeout(() => {
+        checkScrollable();
+      }, 100);
+    });
+    const container = containerRef.current;
+    if (container) {
+      resizeObserver.observe(container);
+      container.addEventListener("scroll", handleScroll);
+    }
+    if (contentRef.current) {
+      resizeObserver.observe(contentRef.current);
+    }
+    return () => {
+      timeoutIds.forEach((id) => clearTimeout(id));
+      resizeObserver.disconnect();
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [children]);
+  const scrollToBottom = () => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  };
+  const bottomGradientStyle = {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: gradientHeight,
+    background: "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #A78BE1 100%)",
+    zIndex: 10,
+    opacity: showBottomGradient ? 1 : 0,
+    display: showBottomGradient ? "flex" : "none",
+    transition: "opacity 0.3s ease",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer",
+    ...gradientStyle
+  };
+  const finalContainerStyle = {
+    position: "relative",
+    // 在flex布局中，需要设置明确的高度限制
+    height: (containerStyle == null ? void 0 : containerStyle.flex) ? "100%" : height,
+    maxHeight,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    ...containerStyle
+  };
+  const finalContentStyle = {
+    height: "100%",
+    overflowY: "auto",
+    // 始终启用滚动，让浏览器处理
+    overflowX: "hidden",
+    scrollbarWidth: showScrollbar ? "auto" : "none",
+    msOverflowStyle: showScrollbar ? "auto" : "none",
+    ...contentStyle,
+    ...showScrollbar ? {} : {
+      "&::WebkitScrollbar": {
+        display: "none"
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: finalContainerStyle }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: finalContentStyle,
+      className: showScrollbar ? "" : "scrollable-list-hide-scrollbar"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: contentRef,
+        className: `scrollable-list-multi-column-container ${getColumnClassName()}`,
+        style: getGridStyle()
+      },
+      children
+    )
+  ), isScrollable && /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      style: {
+        ...bottomGradientStyle,
+        border: "none",
+        background: "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #A78BE1 100%)",
+        ...gradientStyle
+      },
+      onClick: scrollToBottom,
+      onMouseDown: (e) => e.preventDefault(),
+      "aria-label": "滚动到底部"
+    },
+    showBottomGradient && /* @__PURE__ */ import_react.default.createElement(import_icon.ChevronDownDouble, { style: {
+      fontSize: 36,
+      color: "#5D3F9F"
+    } })
+  ));
+};
+var ScrollableList_default = ScrollableList;

package/lib/components/checkout/components/ScrollableList/index.less

@@ -0,0 +1,93 @@
+.scrollable-list {
+  /* 隐藏滚动条的样式 */
+  &-hide-scrollbar {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 和 Edge */
+    scroll-behavior: smooth; /* 平滑滚动 */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari 和 Opera */
+    }
+  }
+
+  /* 渐变动画 */
+  &-gradient-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  &-gradient-fade-out {
+    animation: fadeOut 0.3s ease-in-out;
+  }
+
+  /* 多列布局样式 */
+  &-multi-column-container {
+    display: grid;
+    gap: 16px; /* 默认间距 */
+
+    /* 单列布局 */
+    &.scrollable-list-single-column {
+      grid-template-columns: 1fr;
+    }
+
+    /* 两列布局 */
+    &.scrollable-list-two-column {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    /* 三列布局 */
+    &.scrollable-list-three-column {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    /* 四列布局 */
+    &.scrollable-list-four-column {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    /* 五列布局 */
+    &.scrollable-list-five-column {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    /* 六列布局 */
+    &.scrollable-list-six-column {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    /* 自适应列布局 */
+    &.scrollable-list-auto-column {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* 响应式布局支持 */
+@media (max-width: 768px) {
+  .scrollable-list-multi-column-container:not(.scrollable-list-single-column) {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .scrollable-list-multi-column-container:not(.scrollable-list-single-column) {
+    grid-template-columns: 1fr;
+  }
+}

package/lib/components/checkout/components/ScrollableList/types.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode, CSSProperties, UIEvent } from 'react';
+export interface ScrollableListProps {
+    /** 列表项数据 */
+    children: ReactNode;
+    /** 容器高度 */
+    height?: number | string;
+    /** 最大高度 */
+    maxHeight?: number | string;
+    /** 渐变高度 */
+    gradientHeight?: number;
+    /** 渐变颜色 */
+    gradientColor?: string;
+    /** 列表容器样式 */
+    containerStyle?: CSSProperties;
+    /** 列表内容样式 */
+    contentStyle?: CSSProperties;
+    /** 自定义渐变样式 */
+    gradientStyle?: CSSProperties;
+    /** 是否显示滚动条 */
+    showScrollbar?: boolean;
+    /** 滚动事件回调 */
+    onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    /** 是否需要滚动状态改变回调 */
+    onScrollableChange?: (isScrollable: boolean) => void;
+    /** 列数设置，1为单列，大于1为多列，'auto'为自适应列数 */
+    columnCount?: number | 'auto';
+    /** 列间距，默认为16px */
+    columnGap?: number | string;
+    /** 行间距，默认为16px */
+    rowGap?: number | string;
+    /** 每列最小宽度（当columnCount为'auto'时生效） */
+    minColumnWidth?: number | string;
+}
+export interface ScrollState {
+    /** 是否需要滚动 */
+    isScrollable: boolean;
+    /** 是否显示顶部渐变 */
+    showTopGradient: boolean;
+    /** 是否显示底部渐变 */
+    showBottomGradient: boolean;
+    /** 当前滚动位置 */
+    scrollTop: number;
+    /** 可滚动的最大距离 */
+    maxScrollTop: number;
+}
+export interface GradientConfig {
+    /** 渐变高度 */
+    height: number;
+    /** 渐变颜色 */
+    color: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+}

package/lib/components/checkout/components/ScrollableList/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/checkout/components/ScrollableList/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/checkout/components/SearchAndClientModule/index.d.ts

@@ -0,0 +1,14 @@
+import './index.less';
+export interface IScanResult {
+    status: 'success' | 'failed';
+    scanType: string;
+    scanCode: string;
+    result: any;
+}
+interface IProps {
+    disabledSwitch?: boolean;
+    onSearch: (keyword: string) => void | Promise<any>;
+    onClientChange: () => void;
+}
+declare const SearchAndClientModule: (props: IProps) => JSX.Element;
+export default SearchAndClientModule;

package/lib/components/checkout/components/SearchAndClientModule/index.js

@@ -0,0 +1,215 @@
+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/components/checkout/components/SearchAndClientModule/index.tsx
+var SearchAndClientModule_exports = {};
+__export(SearchAndClientModule_exports, {
+  default: () => SearchAndClientModule_default
+});
+module.exports = __toCommonJS(SearchAndClientModule_exports);
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_components = require("../../../../pro/comprehensiveSearch/components");
+var import_cartClientCard = __toESM(require("../../../booking/info2/cartClientCard"));
+var import_pisellos = require("../../../ticketBooking/hooks/pisellos");
+var import_useToast = __toESM(require("../../../../hooks/useToast"));
+var import_index = require("./index.less");
+var SearchAndClientModule = (props) => {
+  const { disabledSwitch, onSearch, onClientChange } = props;
+  const [value, setValue] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const clientCardRef = (0, import_react.useRef)(null);
+  const bookingTicket = (0, import_pisellos.useBookingTicket)();
+  const handleSearch = (0, import_ahooks.useDebounceFn)(
+    async (keyword) => {
+      var _a, _b, _c, _d, _e;
+      if (!!keyword) {
+        setLoading(true);
+        try {
+          const res = await (onSearch == null ? void 0 : onSearch(keyword));
+          if (!(res == null ? void 0 : res.data) || Array.isArray(res.data) && res.data.length === 0) {
+            (_a = Toast == null ? void 0 : Toast.info) == null ? void 0 : _a.call(
+              Toast,
+              import_utils.locales.getText("pisell2.checkout.wallet-pass-module.no-result")
+            );
+            return;
+          }
+          if ("type" in res && res.type == "walletCode") {
+            if (disabledSwitch) {
+              (_b = Toast == null ? void 0 : Toast.info) == null ? void 0 : _b.call(
+                Toast,
+                import_utils.locales.getText(
+                  "pisell2.checkout.client-card.tip.partially-paid"
+                )
+              );
+              return;
+            }
+            const { customer, ...rest } = res.data;
+            if (!customer) {
+              (_c = Toast == null ? void 0 : Toast.info) == null ? void 0 : _c.call(
+                Toast,
+                import_utils.locales.getText("pisell2.checkout.wallet-pass-module.no-result")
+              );
+              return;
+            }
+            let _customer = {
+              ...customer,
+              latest_wallet_detail: rest
+            };
+            (_e = (_d = clientCardRef.current) == null ? void 0 : _d.handleSetClient) == null ? void 0 : _e.call(_d, _customer, {
+              sameClientTip: import_utils.locales.getText(
+                "pisell2.checkout.client-card.tip.same-client"
+              )
+            });
+          }
+          setValue("");
+        } catch (error) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    },
+    { wait: 300, leading: true }
+  );
+  const uniqueId = () => {
+    const timestamp = Date.now();
+    return timestamp.toString().slice(-4);
+  };
+  (0, import_react.useEffect)(() => {
+    const actions = bookingTicket == null ? void 0 : bookingTicket.scanUniversalListener(
+      (data) => {
+        console.log("handle scan universal resp", data);
+        if (data.status === "failed") {
+          Toast.fail(import_utils.locales.getText("pisell2.text.scan-global-failed"));
+          return;
+        }
+        if (data.scanCode) {
+          setValue(data.scanCode);
+          setTimeout(() => {
+            handleSearch.run(data.scanCode);
+          });
+        }
+      },
+      `wallet_scan_${uniqueId()}`
+    );
+    return () => {
+      var _a;
+      return (_a = actions == null ? void 0 : actions.remove) == null ? void 0 : _a.call(actions);
+    };
+  }, [bookingTicket, handleSearch]);
+  const Toast = (0, import_useToast.default)();
+  const dropdownProps = (0, import_react.useMemo)(() => {
+    const icon = /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Iconfont,
+      {
+        type: "pisell2-switch-horizontal-01",
+        style: { fontSize: 24, color: "#7F56DA" }
+      }
+    );
+    let _props = {
+      buttonProps: {
+        icon
+      }
+    };
+    if (disabledSwitch === true) {
+      _props = {
+        open: false,
+        buttonProps: {
+          icon,
+          onClick: () => {
+            var _a;
+            (_a = Toast == null ? void 0 : Toast.info) == null ? void 0 : _a.call(
+              Toast,
+              import_utils.locales.getText("pisell2.checkout.client-card.tip.partially-paid")
+            );
+          },
+          style: { cursor: "not-allowed" }
+        }
+      };
+    }
+    return _props;
+  }, [Toast, disabledSwitch]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 8,
+        marginBottom: 8
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.SearchSection,
+      {
+        value,
+        onChange: setValue,
+        loading,
+        style: { flex: 1 },
+        placeholder: import_utils.locales.getText(
+          "pisell2.checkout.search-section.placeholder"
+        ),
+        searchButtonProps: {
+          placement: "inside",
+          style: {
+            height: 40,
+            padding: 8,
+            minWidth: 55
+          }
+        },
+        cameraButtonProps: {
+          icon: ["pisell2-camera-01", "pisell2-a-qr-code-02"]
+        },
+        onSearch: () => handleSearch.run(value)
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_cartClientCard.default,
+      {
+        ref: clientCardRef,
+        onClientChange: (client) => {
+          onClientChange == null ? void 0 : onClientChange();
+        },
+        clientCardProps: {
+          style: {
+            width: 240,
+            minHeight: 60,
+            height: 60,
+            borderColor: "#7F56DA"
+          },
+          avatar: {
+            size: "md"
+          },
+          dropdown: dropdownProps
+        }
+      }
+    )
+  );
+};
+var SearchAndClientModule_default = SearchAndClientModule;

package/lib/components/checkout/components/SearchAndClientModule/index.less

@@ -0,0 +1,18 @@
+.payment-modal-wrapper {
+  .comprehensive-search__search-input-wrapper {
+    padding: 4px 8px;
+    height: 60px;
+    border: 1px solid #475467;
+
+    .comprehensive-search__search-camera-wrapper {
+      width: unset;
+      height: unset;
+      .comprehensive-search__search-camera-divider {
+        height: 30px;
+      }
+      > span {
+        font-size: 30px;
+      }
+    }
+  }
+}

package/lib/components/checkout/components/SendPaymentLinkModal/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import './index.less';
+interface SendPaymentLinkModalProps {
+    balanceAmount?: string;
+    customerEmail?: string;
+    customerName?: string;
+    onClose?: () => void;
+    sendPaymentLink: (data: any) => void;
+    customerId?: number;
+}
+declare function SendPaymentLinkModal({ balanceAmount, customerEmail, customerName, onClose, sendPaymentLink, customerId, }: SendPaymentLinkModalProps): JSX.Element;
+export default SendPaymentLinkModal;