@pisell/private-materials 6.3.91 → 6.3.92

package/lib/plus/clientCard/line/index.less

@@ -0,0 +1,142 @@
+// Line类型特有样式 - 行内布局
+.pisell-client-card--line {
+  padding: 8px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #ffffff;
+
+  // 内容容器 - 水平布局
+  .pisell-client-card__content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    min-width: 0; // 允许flex子元素收缩
+  }
+
+  // 插槽容器
+  .pisell-client-card__slot-left {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .pisell-client-card__slot-right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  // 头像样式
+   .pisell-client-card__avatar-wrapper {
+     position: relative;
+     flex-shrink: 0; // 头像不收缩
+   }
+   
+   .pisell-client-card__avatar {
+     border: 1px solid #e5e7eb;
+     
+     .ant-avatar-string {
+       font-weight: 600;
+       font-size: 12px;
+     }
+   }
+   
+   // 状态指示器
+   .pisell-client-card__status-indicator {
+     position: absolute;
+     top: -2px;
+     right: -2px;
+     width: 8px;
+     height: 8px;
+     border-radius: 50%;
+     border: 2px solid #ffffff;
+     background-color: #17B26A;
+   }
+
+  // 客户名称样式
+  .pisell-client-card__name--line {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1f2937;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  // 联系方式样式
+  .pisell-client-card__contact--line {
+    font-size: 13px;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  // 标签容器样式
+  .pisell-client-card__tags--line {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0; // 标签不收缩
+    align-items: center;
+    
+    .pisell-client-card__tag {
+      white-space: nowrap;
+    }
+  }
+
+  // 垂直布局样式
+  &.pisell-client-card--vertical {
+    .pisell-client-card__content {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 16px;
+    }
+
+    .pisell-client-card__name--line {
+      text-align: center;
+    }
+
+    .pisell-client-card__contact--line {
+      text-align: center;
+    }
+
+    .pisell-client-card__tags--line {
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+
+  // Line类型空状态样式
+  &.pisell-client-card--empty {
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    border-style: dashed;
+    border-color: #d9d9d9;
+    background: #fafafa;
+
+    &:hover {
+      border-color: #1890ff;
+      background: #f0f8ff;
+    }
+
+    .pisell-client-card__empty-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #374151;
+      margin: 0;
+    }
+
+    .pisell-client-card__empty-subtitle {
+      font-size: 12px;
+      color: #6b7280;
+      margin: 0;
+    }
+  }
+}

package/lib/plus/clientCard/locales.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    en: {
+        'pisell2.text.add-client': string;
+        'pisell2.text.change-client': string;
+        'pisell2.text.remove-client': string;
+    };
+    'zh-CN': {
+        'pisell2.text.add-client': string;
+        'pisell2.text.change-client': string;
+        'pisell2.text.remove-client': string;
+    };
+    'zh-HK': {
+        'pisell2.text.add-client': string;
+        'pisell2.text.change-client': string;
+        'pisell2.text.remove-client': string;
+    };
+};
+export default _default;

package/lib/plus/clientCard/locales.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/clientCard/locales.ts
+var locales_exports = {};
+__export(locales_exports, {
+  default: () => locales_default
+});
+module.exports = __toCommonJS(locales_exports);
+var locales_default = {
+  en: {
+    "pisell2.text.add-client": "Add Customer",
+    "pisell2.text.change-client": "Change Customer",
+    "pisell2.text.remove-client": " Remove Customer"
+  },
+  "zh-CN": {
+    "pisell2.text.add-client": "添加客户",
+    "pisell2.text.change-client": "更换客户",
+    "pisell2.text.remove-client": "移除客户"
+  },
+  "zh-HK": {
+    "pisell2.text.add-client": "新增客戶",
+    "pisell2.text.change-client": "更換客戶",
+    "pisell2.text.remove-client": "移除客戶"
+  }
+};

package/lib/plus/clientCard/types.d.ts

@@ -0,0 +1,135 @@
+import React, { ReactElement } from 'react';
+export interface ClientData {
+    id: number;
+    shop_id: number;
+    display_name?: string;
+    nickname?: string;
+    email?: string;
+    phone?: string;
+    country_calling_code?: string;
+    channel?: string;
+    created_at: string;
+    updated_at: string;
+    waiver_form?: any;
+    avatar?: string;
+    birthday?: string;
+    address?: string;
+    tags?: string[];
+    [key: string]: any;
+}
+export declare type CardType = 'b1' | 'b2' | 'b5' | 'b9';
+export declare type Direction = 'horizontal' | 'vertical';
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string;
+export declare type AvatarShape = 'circle' | 'square';
+export interface AvatarConfig {
+    icon?: string;
+    shape?: AvatarShape;
+    borderRadius?: number | string;
+    size?: AvatarSize;
+    useTextAvatar?: boolean;
+    children?: string;
+}
+export interface StatusConfig {
+    color?: string;
+}
+export interface NameStyle {
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    color?: string;
+    textDecoration?: string;
+}
+export interface TagItem {
+    children: string;
+    color: string;
+}
+export interface TagConfig {
+    placement?: 'separate' | 'inline';
+    flexWrap?: 'nowrap' | 'wrap';
+    gap?: number | string;
+}
+export interface ExtraField {
+    label?: string;
+    value?: string;
+    isShowLabel?: boolean;
+    isShowValue?: boolean;
+    icon?: string;
+    iconSize?: number;
+    iconColor?: string;
+}
+export interface Slots {
+    top?: React.ReactNode;
+    bottom?: React.ReactNode;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}
+export interface StyleConfig {
+    width?: number | string;
+    border?: 'solid' | 'unset';
+    borderWidth?: number | string;
+    borderColor?: string;
+    borderRadius?: number | string;
+    padding?: number | string;
+    [key: string]: any;
+}
+export interface FieldNames {
+    id?: string | ((data: any) => any);
+    name?: string | ((data: any) => any);
+    cover?: string | ((data: any) => any);
+    phone?: string | ((data: any) => any);
+    email?: string | ((data: any) => any);
+    birthday?: string | ((data: any) => any);
+    address?: string | ((data: any) => any);
+    tags?: string | ((data: any) => any);
+    [key: string]: string | ((data: any) => any) | undefined;
+}
+export interface DisplayConfig {
+    isShowAvatar?: boolean;
+    isShowName?: boolean;
+    isShowPhone?: boolean;
+    isShowEmail?: boolean;
+    isShowBirthday?: boolean;
+    isShowAddress?: boolean;
+    isShowTag?: boolean;
+    isShowStatus?: boolean;
+    isShowEmptyDescription?: boolean;
+}
+export interface ClientCardProps extends DisplayConfig {
+    type?: CardType;
+    direction?: Direction;
+    dataSource?: ClientData | any;
+    fieldNames?: FieldNames;
+    style?: StyleConfig;
+    horizontalGap?: number | string;
+    verticalGap?: number | string;
+    avatar?: AvatarConfig;
+    status?: StatusConfig;
+    dropdown?: {
+        open?: boolean;
+        buttonProps?: {
+            icon?: ReactElement;
+            onClick?: (e: Event) => void;
+            style?: React.CSSProperties;
+        };
+    };
+    defaultName?: string;
+    nameStyle?: NameStyle;
+    tags?: Array<TagItem | string>;
+    tag?: TagConfig;
+    extraFields?: ExtraField[];
+    slots?: Slots;
+    onAddClient?: () => void;
+    onChangeClient?: (data: ClientData) => void;
+    onRemoveClient?: (data: ClientData) => void;
+    onViewClient?: (data: ClientData) => void;
+}
+export interface ProcessedClientData {
+    id: any;
+    name: string;
+    cover?: string;
+    phone?: string;
+    email?: string;
+    birthday?: string;
+    address?: string;
+    tags?: string[];
+    [key: string]: any;
+}

package/lib/plus/clientCard/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/plus/clientCard/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/plus/clientCard/utils.d.ts

@@ -0,0 +1,8 @@
+interface FieldMapping<T = any, R = any> {
+    [key: string]: string | ((data: T) => R) | undefined;
+}
+export declare function getFieldValue<T, R = any>(data: T, fieldKey: string): R | undefined;
+export declare function getFieldValue<T, R = any>(data: T, fieldKey: string, mapping: FieldMapping<T, R>): R | undefined;
+export declare const getAvatarText: (name: string) => string;
+export declare const isWalkIn: (customer_id?: number | string) => boolean;
+export {};

package/lib/plus/clientCard/utils.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/clientCard/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  getAvatarText: () => getAvatarText,
+  getFieldValue: () => getFieldValue,
+  isWalkIn: () => isWalkIn
+});
+module.exports = __toCommonJS(utils_exports);
+var import_lodash = require("lodash");
+function getFieldValue(data, fieldKey, mapping) {
+  if (!fieldKey || typeof fieldKey !== "string") {
+    console.warn("getFieldValue: fieldKey must be a non-empty string");
+    return void 0;
+  }
+  if (!data || typeof data !== "object") {
+    console.warn("getFieldValue: data must be a valid object");
+    return void 0;
+  }
+  const fieldMapping = mapping || {};
+  const mappingRule = fieldMapping[fieldKey];
+  try {
+    if (typeof mappingRule === "function") {
+      return mappingRule(data);
+    }
+    if (typeof mappingRule === "string") {
+      return (0, import_lodash.get)(data, mappingRule);
+    }
+    return (0, import_lodash.get)(data, fieldKey);
+  } catch (error) {
+    console.error(
+      `getFieldValue: Error processing field '${fieldKey}':`,
+      error
+    );
+    return void 0;
+  }
+}
+var getAvatarText = (name) => {
+  if (!name) return "";
+  const words = name.trim().split(/\s+/);
+  const initials = words.slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+  return initials;
+};
+var isWalkIn = (customer_id) => {
+  if (customer_id === void 0) {
+    return true;
+  }
+  if (typeof customer_id === "string") {
+    return ["", "0", "1"].includes(customer_id);
+  }
+  return [0, 1].includes(customer_id);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getAvatarText,
+  getFieldValue,
+  isWalkIn
+});

package/lib/plus/clinetSearch/Add/BirthdayField/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DateSectionCom: ({ value, onChange, showTime, className, style, useSpace, format, itemStyle, }: any) => React.JSX.Element;
+export default DateSectionCom;

package/lib/plus/clinetSearch/Add/BirthdayField/index.js

@@ -0,0 +1,256 @@
+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/clinetSearch/Add/BirthdayField/index.tsx
+var BirthdayField_exports = {};
+__export(BirthdayField_exports, {
+  default: () => BirthdayField_default
+});
+module.exports = __toCommonJS(BirthdayField_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_debounce = __toESM(require("lodash/debounce"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_utils = require("@pisell/utils");
+var { Option } = import_antd.Select;
+var getSelectInput = (id) => {
+  const input = document.getElementById(id);
+  if (input) {
+    return input;
+  }
+};
+var setSelectInputType = ({
+  input,
+  type
+}) => {
+  if (input) {
+    input.type = type;
+  }
+};
+var DateSectionCom = ({
+  value,
+  onChange,
+  showTime,
+  className = "",
+  style = {},
+  useSpace = true,
+  format,
+  itemStyle = {
+    width: 100
+  }
+}) => {
+  const currentYear = (0, import_dayjs.default)().year();
+  const locale = import_utils.locales.locale;
+  const dayRef = (0, import_react.useRef)(null);
+  const monthRef = (0, import_react.useRef)(null);
+  const yearRef = (0, import_react.useRef)(null);
+  const [date, setDate] = (0, import_react.useState)({
+    year: value ? (0, import_dayjs.default)(value).year() : null,
+    month: value ? (0, import_dayjs.default)(value).month() + 1 : null,
+    day: value ? (0, import_dayjs.default)(value).date() : null
+  });
+  const [dayOptions, setDayOptions] = (0, import_react.useState)([]);
+  const [monthOptions, setMonthOptions] = (0, import_react.useState)([]);
+  const [yearOptions, setYearOptions] = (0, import_react.useState)([]);
+  const localeMap = {
+    year: import_utils.locales.getText("pisell2.text.date-year-text"),
+    month: import_utils.locales.getText("pisell2.text.date-month-text"),
+    day: import_utils.locales.getText("pisell2.text.date-day-text")
+  };
+  (0, import_react.useEffect)(() => {
+    setDate({
+      year: value ? (0, import_dayjs.default)(value).year() : null,
+      month: value ? (0, import_dayjs.default)(value).month() + 1 : null,
+      day: value ? (0, import_dayjs.default)(value).date() : null
+    });
+  }, [value]);
+  (0, import_react.useEffect)(() => {
+    setMonthOptions(renderOptions("month", 1, 12));
+    setYearOptions(renderOptions("year", currentYear - 100, currentYear + 50));
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setDayOptions(
+      renderOptions(
+        "day",
+        1,
+        date.month ? getDaysInMonth(date.year || currentYear, date.month) : 31
+      )
+    );
+  }, [date.month, date.year]);
+  const handleDateChange = (field, value2) => {
+    if (!value2) {
+      return;
+    }
+    let newDate = {
+      year: date.year,
+      month: date.month,
+      day: date.day,
+      [field]: value2
+    };
+    const foucsList = {
+      day: monthRef,
+      month: yearRef
+    };
+    if (field === "month" || field === "year") {
+      const daysInMonth = getDaysInMonth(
+        (newDate == null ? void 0 : newDate.year) || currentYear,
+        newDate == null ? void 0 : newDate.month
+      );
+      const newDay = (newDate == null ? void 0 : newDate.day) > daysInMonth ? daysInMonth : newDate.day;
+      newDate = {
+        ...newDate,
+        day: newDay
+      };
+    }
+    setDate(newDate);
+    if (foucsList[field]) {
+      foucsList[field].current.focus();
+    } else {
+      yearRef.current.blur();
+    }
+    const _format = format || "YYYY-MM-DD";
+    if (newDate.year && newDate.month && newDate.day) {
+      const _date = `${newDate.year}-${newDate.month.toString().padStart(2, "0")}-${newDate.day.toString().padStart(2, "0")}`;
+      onChange((0, import_dayjs.default)(_date).format(_format));
+    }
+  };
+  const getDaysInMonth = (year, month) => {
+    return (0, import_dayjs.default)(`${year}-${month}`, "YYYY-MM").daysInMonth();
+  };
+  const renderOptions = (field, start, end) => {
+    const options = [];
+    const _text = locale !== "en-US" && locale !== "en" ? localeMap[field] : "";
+    for (let i = start; i <= end; i++) {
+      options.push({
+        label: `${i}${_text}`,
+        value: i
+      });
+    }
+    return options;
+  };
+  const selectId = (0, import_react.useMemo)(() => {
+    return {
+      dayId: (0, import_utils.getUniqueId)("day"),
+      monthId: (0, import_utils.getUniqueId)("month"),
+      yearId: (0, import_utils.getUniqueId)("year")
+    };
+  }, []);
+  (0, import_react.useLayoutEffect)(() => {
+    setSelectInputType({
+      input: getSelectInput(selectId.dayId),
+      type: "number"
+    });
+    setSelectInputType({
+      input: getSelectInput(selectId.monthId),
+      type: "number"
+    });
+    setSelectInputType({
+      input: getSelectInput(selectId.yearId),
+      type: "number"
+    });
+  }, [selectId]);
+  const handleDateSearch = (0, import_react.useCallback)(
+    (0, import_debounce.default)((field, value2) => {
+      const dateOption = {
+        day: dayOptions,
+        month: monthOptions,
+        year: yearOptions
+      };
+      const _value = Number(value2);
+      const index = dateOption[field].findIndex((item) => {
+        return item.value === _value;
+      });
+      if (index !== -1) {
+        handleDateChange(field, _value);
+      } else {
+        handleDateChange(field, null);
+      }
+    }, 300),
+    [dayOptions, monthOptions, yearOptions, date]
+  );
+  const content = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Select,
+    {
+      id: selectId.dayId,
+      value: date.day,
+      placeholder: import_utils.locales.getText("pisell2.text.date-day-text"),
+      onChange: (value2) => handleDateChange("day", value2),
+      style: itemStyle,
+      showSearch: true,
+      onSearch: (value2) => {
+        handleDateSearch("day", value2);
+      },
+      ref: dayRef,
+      size: "large"
+    },
+    dayOptions.map((item) => {
+      return /* @__PURE__ */ import_react.default.createElement(Option, { key: item.value, value: item.value }, item.label);
+    })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Select,
+    {
+      id: selectId.monthId,
+      value: date.month,
+      placeholder: import_utils.locales.getText("pisell2.text.date-month-text"),
+      onChange: (value2) => handleDateChange("month", value2),
+      style: itemStyle,
+      showSearch: true,
+      onSearch: (value2) => {
+        handleDateSearch("month", value2);
+      },
+      ref: monthRef,
+      size: "large"
+    },
+    monthOptions.map((item) => {
+      return /* @__PURE__ */ import_react.default.createElement(Option, { key: item.value, value: item.value }, item.label);
+    })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Select,
+    {
+      id: selectId.yearId,
+      value: date.year,
+      placeholder: import_utils.locales.getText("pisell2.text.date-year-text"),
+      onChange: (value2) => handleDateChange("year", value2),
+      style: itemStyle,
+      showSearch: true,
+      onSearch: (value2) => {
+        handleDateSearch("year", value2);
+      },
+      ref: yearRef,
+      size: "large"
+    },
+    yearOptions.map((item) => {
+      return /* @__PURE__ */ import_react.default.createElement(Option, { key: item.value, value: item.value }, item.label);
+    })
+  ));
+  if (useSpace) {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: className || "", style: style || {} }, content);
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: className || "", style: style || {} }, content);
+};
+var BirthdayField_default = DateSectionCom;