@pisell/materials 6.11.97 → 6.11.98

package/es/components/buttonGroupPreview/index.js

@@ -66,13 +66,14 @@ var ButtonGroupPreview = /*#__PURE__*/forwardRef(function (props, ref) {
       var btnProps = _objectSpread(_objectSpread({}, buttonProps), props.updateButtonProps);
       var children = btnProps.children,
         dropdownButtonProps = _objectWithoutProperties(btnProps, _excluded);
+      var moreButtonChildren = children !== null && children !== void 0 ? children : dropdownButtonProps.icon ? null : /*#__PURE__*/React.createElement(MoreOutlined, null);
       return isMore ? /*#__PURE__*/React.createElement(Dropdown, {
         menu: {
           items: menuData
         }
       }, /*#__PURE__*/React.createElement(Button, _extends({
         key: id
-      }, dropdownButtonProps), children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(MoreOutlined, null))) : /*#__PURE__*/React.createElement(Button, _extends({
+      }, dropdownButtonProps), moreButtonChildren)) : /*#__PURE__*/React.createElement(Button, _extends({
         key: id
       }, btnProps));
     }));

package/es/components/pisellFind/index.d.ts

@@ -1,10 +1,37 @@
 import React from 'react';
 import type { PisellLookupProps, PisellLookupRef } from '../pisellLookup';
+/**
+ * 原生扫码事件名，对齐宿主端约定。
+ */
+export declare const SCAN_RESULT_EVENT = "nativeScanResult";
+/**
+ * 扫码枪回传数据（对齐宿主 ScanResultPayload）
+ * - code: 条码标识（如条码格式 / 业务字段）
+ * - data: 扫描得到的字符串值（写入输入框的内容）
+ */
+export interface PisellFindScannerData {
+    code: string;
+    data: string;
+}
 /**
  * PisellFind Props
- * 继承 PisellLookup 的所有 Props
+ * 继承 PisellLookup 的所有 Props，并扩展扫码枪监听相关字段。
  */
-export declare type PisellFindProps = PisellLookupProps;
+export interface PisellFindProps extends PisellLookupProps {
+    /**
+     * 是否开启扫码枪监听
+     * 通过宿主 `app.pubsub.subscribe('nativeScanResult', ...)` 订阅；
+     * 切换 false 时会 unsubscribe，停止接收事件。
+     * @default false
+     */
+    enableScanner?: boolean;
+    /**
+     * 扫码枪回调
+     * 监听到扫码枪事件时触发，参数为原始 payload 对象（含 `data` 字段）。
+     * 注意：仅在 enableScanner 为 true 时才会触发。
+     */
+    onScannerData?: (data: PisellFindScannerData) => void;
+}
 /**
  * PisellFind Ref
  * 继承 PisellLookup 的所有 Ref 方法
@@ -19,22 +46,17 @@ export declare type PisellFindRef = PisellLookupRef;
  * - 默认不显示确认按钮（输入即搜索）
  * - 默认开启搜索历史
  * - 默认不展示结果区（结果在页面其他位置展示）
+ * - 通过 `enableScanner` 接入扫码枪：使用宿主 `app.pubsub.subscribe(SCAN_RESULT_EVENT, ...)`，
+ *   每次扫码直接覆盖输入框内容并触发 onSearch / onScannerData；切回 false 时自动 unsubscribe。
  *
  * @example
  * ```tsx
- * // 基础用法
- * <PisellFind
- *   onSearch={(keyword) => {
- *     const filtered = data.filter(item => item.name.includes(keyword));
- *     setFilteredData(filtered);
- *   }}
- * />
- *
- * // 切换为 Input 模式
  * <PisellFind
  *   triggerType="input"
+ *   enableScanner={isActive}
+ *   onScannerData={(payload) => console.log('scan:', payload.data)}
  *   onSearch={(keyword) => filterData(keyword)}
  * />
  * ```
  */
-export declare const PisellFind: React.ForwardRefExoticComponent<PisellLookupProps & React.RefAttributes<PisellLookupRef>>;
+export declare const PisellFind: React.ForwardRefExoticComponent<PisellFindProps & React.RefAttributes<PisellLookupRef>>;

package/es/components/pisellFind/index.js

@@ -1,15 +1,27 @@
-var _excluded = ["triggerType", "buttonText", "placeholder", "showConfirmButton", "showHistory", "historyKey"];
+var _excluded = ["triggerType", "buttonText", "placeholder", "showConfirmButton", "showHistory", "historyKey", "enableScanner", "onScannerData", "onSearch"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { locales as utilsLocales } from '@pisell/utils';
 import { PisellLookup } from "../pisellLookup";
+import useEngineContext from "../../hooks/useEngineContext";
 import { getText } from "../../locales";
 
+/**
+ * 原生扫码事件名，对齐宿主端约定。
+ */
+export var SCAN_RESULT_EVENT = 'nativeScanResult';
+
+/**
+ * 扫码枪回传数据（对齐宿主 ScanResultPayload）
+ * - code: 条码标识（如条码格式 / 业务字段）
+ * - data: 扫描得到的字符串值（写入输入框的内容）
+ */
+
 /**
  * PisellFind Props
- * 继承 PisellLookup 的所有 Props
+ * 继承 PisellLookup 的所有 Props，并扩展扫码枪监听相关字段。
  */
 
 /**
@@ -20,31 +32,27 @@ import { getText } from "../../locales";
 /**
  * PisellFind 组件
  * 基于 PisellLookup 的组件内查找优化版本
- * 
+ *
  * 核心特点：
  * - 默认使用 button 触发器
  * - 默认不显示确认按钮（输入即搜索）
  * - 默认开启搜索历史
  * - 默认不展示结果区（结果在页面其他位置展示）
- * 
+ * - 通过 `enableScanner` 接入扫码枪：使用宿主 `app.pubsub.subscribe(SCAN_RESULT_EVENT, ...)`，
+ *   每次扫码直接覆盖输入框内容并触发 onSearch / onScannerData；切回 false 时自动 unsubscribe。
+ *
  * @example
  * ```tsx
- * // 基础用法
- * <PisellFind
- *   onSearch={(keyword) => {
- *     const filtered = data.filter(item => item.name.includes(keyword));
- *     setFilteredData(filtered);
- *   }}
- * />
- * 
- * // 切换为 Input 模式
  * <PisellFind
  *   triggerType="input"
+ *   enableScanner={isActive}
+ *   onScannerData={(payload) => console.log('scan:', payload.data)}
  *   onSearch={(keyword) => filterData(keyword)}
  * />
  * ```
  */
 export var PisellFind = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _engineContext$appHel;
   var _props$triggerType = props.triggerType,
     triggerType = _props$triggerType === void 0 ? 'button' : _props$triggerType,
     _props$buttonText = props.buttonText,
@@ -65,17 +73,105 @@ export var PisellFind = /*#__PURE__*/forwardRef(function (props, ref) {
     showHistory = _props$showHistory === void 0 ? true : _props$showHistory,
     _props$historyKey = props.historyKey,
     historyKey = _props$historyKey === void 0 ? 'pisell_find_history' : _props$historyKey,
+    _props$enableScanner = props.enableScanner,
+    enableScanner = _props$enableScanner === void 0 ? false : _props$enableScanner,
+    onScannerData = props.onScannerData,
+    onSearch = props.onSearch,
     restProps = _objectWithoutProperties(props, _excluded);
+  var lookupRef = useRef(null);
+
+  /** 透传给监听回调的最新引用，避免回调闭包 stale */
+  var onScannerDataRef = useRef(onScannerData);
+  var onSearchRef = useRef(onSearch);
+  useEffect(function () {
+    onScannerDataRef.current = onScannerData;
+  }, [onScannerData]);
+  useEffect(function () {
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open() {
+        var _lookupRef$current;
+        return (_lookupRef$current = lookupRef.current) === null || _lookupRef$current === void 0 ? void 0 : _lookupRef$current.open();
+      },
+      close: function close() {
+        var _lookupRef$current2;
+        return (_lookupRef$current2 = lookupRef.current) === null || _lookupRef$current2 === void 0 ? void 0 : _lookupRef$current2.close();
+      },
+      getKeyword: function getKeyword() {
+        var _lookupRef$current$ge, _lookupRef$current3;
+        return (_lookupRef$current$ge = (_lookupRef$current3 = lookupRef.current) === null || _lookupRef$current3 === void 0 ? void 0 : _lookupRef$current3.getKeyword()) !== null && _lookupRef$current$ge !== void 0 ? _lookupRef$current$ge : '';
+      },
+      setKeyword: function setKeyword(v) {
+        var _lookupRef$current4;
+        return (_lookupRef$current4 = lookupRef.current) === null || _lookupRef$current4 === void 0 ? void 0 : _lookupRef$current4.setKeyword(v);
+      }
+    };
+  }, []);
+
+  /** 通过 useEngineContext 拿到宿主 app（含 pubsub.subscribe / unsubscribe） */
+  var engineContext = useEngineContext();
+  /**
+   * 用 ref 稳定 getApp 引用：低代码环境下 engineContext 每次渲染可能返回新引用，
+   * 若把 getApp 直接放进 effect 依赖会导致频繁 unsubscribe/subscribe（甚至漏掉扫码事件）。
+   * effect 依赖只保留 enableScanner，运行时通过 ref 拿最新的 getApp。
+   */
+  var getAppRef = useRef(undefined);
+  getAppRef.current = typeof (engineContext === null || engineContext === void 0 || (_engineContext$appHel = engineContext.appHelper) === null || _engineContext$appHel === void 0 || (_engineContext$appHel = _engineContext$appHel.utils) === null || _engineContext$appHel === void 0 ? void 0 : _engineContext$appHel.getApp) === 'function' ? engineContext.appHelper.utils.getApp : undefined;
+  useEffect(function () {
+    if (!enableScanner) return undefined;
+    var getApp = getAppRef.current;
+    if (typeof getApp !== 'function') return undefined;
+    var app = getApp();
+    var pubsub = app === null || app === void 0 ? void 0 : app.pubsub;
+    if (!pubsub || typeof pubsub.subscribe !== 'function') {
+      return undefined;
+    }
+
+    /**
+     * 监听回调：每次扫码直接覆盖输入框。
+     * ScanResultPayload: { code, data }，取 code 作为输入框值与搜索关键词。
+     * setKeyword 在受控模式下会触发外部 onChange；onSearch 需要显式触发以驱动后续搜索流程
+     * （受控模式下宿主一般只通过 onSearch 拿到新关键词，不会在 onChange 里再触发一次 onSearch，
+     *  因此这里不会产生重复请求。如需自定义合流，可绑定 onScannerData 自行处理）。
+     *
+     * 非法 payload（无 code 或 code 为空串）直接忽略，避免把输入框/搜索条件意外清空。
+     */
+    var onScan = function onScan(payload) {
+      var _lookupRef$current5, _onSearchRef$current, _onScannerDataRef$cur;
+      var data = payload === null || payload === void 0 ? void 0 : payload.data;
+      if (typeof data !== 'string' || data.length === 0) {
+        return;
+      }
+      (_lookupRef$current5 = lookupRef.current) === null || _lookupRef$current5 === void 0 || _lookupRef$current5.setKeyword(data);
+      (_onSearchRef$current = onSearchRef.current) === null || _onSearchRef$current === void 0 || _onSearchRef$current.call(onSearchRef, data);
+      (_onScannerDataRef$cur = onScannerDataRef.current) === null || _onScannerDataRef$cur === void 0 || _onScannerDataRef$cur.call(onScannerDataRef, payload);
+    };
+    try {
+      pubsub.subscribe(SCAN_RESULT_EVENT, onScan);
+    } catch (e) {
+      console.warn('[PisellFind] subscribe scanner failed:', e);
+      return undefined;
+    }
+    return function () {
+      try {
+        var _pubsub$unsubscribe;
+        (_pubsub$unsubscribe = pubsub.unsubscribe) === null || _pubsub$unsubscribe === void 0 || _pubsub$unsubscribe.call(pubsub, SCAN_RESULT_EVENT, onScan);
+      } catch (e) {
+        console.warn('[PisellFind] unsubscribe scanner failed:', e);
+      }
+    };
+  }, [enableScanner]);
   return /*#__PURE__*/React.createElement(PisellLookup, _extends({
-    ref: ref,
+    ref: lookupRef,
     triggerType: triggerType,
     buttonText: buttonText,
     placeholder: placeholder,
     showConfirmButton: showConfirmButton,
     showHistory: showHistory,
-    historyKey: historyKey
+    historyKey: historyKey,
+    onSearch: onSearch
   }, restProps));
 });
-
-// 显示名称
 PisellFind.displayName = 'PisellFind';

package/es/components/pisellRecordBoard/layouts/GridLayout/Grid.js

@@ -217,8 +217,10 @@ var RecordBoardGridView = function RecordBoardGridView(props) {
     }) : rawScrollX;
     if (scroll !== null && scroll !== void 0 && scroll.autoCalc && typeof ctx.scrollAreaHeight === 'number') {
       var wrapHeight = ctx.scrollAreaHeight;
-      // 40：表头等固定占高；uniformSummaryHeight：同值列总结区动态高度，无总结时为 0, 24是 uniformSummary padding
-      var reservedHeight = 40 + uniformSummaryHeight + 24;
+      // 40：表头固定高；uniformSummaryHeight：同值列总结区高度（ResizeObserver 量出，仅 content-box，不含 padding/border）；
+      // 25：仅在确实展示 uniformSummary 时补回 padding 12*2 + 1px border-bottom（见 Grid.less .pisell-record-board-uniform-summary）。
+      // 无总结时不应再多扣，否则 Table 不能撑满 scroll-body，会在 Table 与底部分页之间留白。
+      var reservedHeight = 40 + (uniformSummaryHeight > 0 ? uniformSummaryHeight + 25 : 0);
       return {
         x: scrollX !== null && scrollX !== void 0 ? scrollX : sumColumnWidths,
         y: Math.max(wrapHeight - reservedHeight, 100),

package/es/components/productCard/cartSkuCard/components/resources/index.less

@@ -15,6 +15,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0;
+
+    .resource-icon {
+      margin-right: 2px;
+    }
   }
 
   &--title {

package/es/components/productCard/lineItem/BookingLineItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ProductCardTypes } from '../types';
-import type { LineItemStatusOption, LineItemType } from './types';
+import type { LineItemHolderOption, LineItemStatusOption, LineItemType } from './types';
 interface BookingLineItemProps extends Omit<ProductCardTypes, 'dataSource'> {
     dataSource: any;
     type: LineItemType;
@@ -12,6 +12,7 @@ interface BookingLineItemProps extends Omit<ProductCardTypes, 'dataSource'> {
     statusLoading?: boolean;
     statusDisabled?: boolean;
     isShowRelatedProduct?: boolean;
+    holderOptions?: LineItemHolderOption[];
     onBookingStatusChange?: (status: string, item: any) => void;
 }
 declare const BookingLineItem: (props: BookingLineItemProps) => React.JSX.Element | null;

package/es/components/productCard/lineItem/BookingLineItem.js

@@ -1,4 +1,4 @@
-var _excluded = ["dataSource", "type", "cartSkuType", "relatedProductDataSource", "rightActions", "escapeDom", "isShowImage", "isShowDelete", "isShowNote", "isShowAmountFooter", "disabledClick", "disabledEdit", "statusOptions", "statusLoading", "statusDisabled", "isShowRelatedProduct", "onBookingStatusChange", "onAction", "onDelete", "onNote", "onCard", "onPromotion", "onGift"];
+var _excluded = ["dataSource", "type", "cartSkuType", "relatedProductDataSource", "rightActions", "escapeDom", "isShowImage", "isFormSubject", "isShowDelete", "isShowNote", "isShowAmountFooter", "disabledClick", "disabledEdit", "statusOptions", "statusLoading", "statusDisabled", "isShowRelatedProduct", "holderOptions", "onBookingStatusChange", "onAction", "onDelete", "onNote", "onCard", "onPromotion", "onGift"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -24,6 +24,7 @@ import { SwipeAction } from "../cartSkuCard/components/swipeAction";
 import Action from "../components/Action";
 import TimeRange from "./components/TimeRange";
 import Resources from "./components/Resources";
+import Holders from "./components/Holders";
 import Iconfont from "../../iconfont";
 import useEngineContext from "../../../hooks/useEngineContext";
 var PREFIX = 'pisell-line-item';
@@ -64,7 +65,7 @@ var getResourceName = function getResourceName(booking, translationOriginal) {
   }).filter(Boolean).join(', ');
 };
 var BookingLineItem = function BookingLineItem(props) {
-  var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$promotion;
+  var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _ref, _ref2, _dataSource$promotion;
   var dataSource = props.dataSource,
     type = props.type,
     cartSkuType = props.cartSkuType,
@@ -73,6 +74,7 @@ var BookingLineItem = function BookingLineItem(props) {
     rightActions = _props$rightActions === void 0 ? [] : _props$rightActions,
     escapeDom = props.escapeDom,
     isShowImage = props.isShowImage,
+    isFormSubject = props.isFormSubject,
     isShowDelete = props.isShowDelete,
     isShowNote = props.isShowNote,
     isShowAmountFooter = props.isShowAmountFooter,
@@ -86,6 +88,7 @@ var BookingLineItem = function BookingLineItem(props) {
     statusDisabled = _props$statusDisabled === void 0 ? false : _props$statusDisabled,
     _props$isShowRelatedP = props.isShowRelatedProduct,
     isShowRelatedProduct = _props$isShowRelatedP === void 0 ? true : _props$isShowRelatedP,
+    holderOptions = props.holderOptions,
     onBookingStatusChange = props.onBookingStatusChange,
     _onAction = props.onAction,
     onDelete = props.onDelete,
@@ -131,7 +134,9 @@ var BookingLineItem = function BookingLineItem(props) {
     }
   };
   var bookingRightActions = isShowDelete ? [deleteAction].concat(_toConsumableArray(rightActions)) : rightActions;
-  var bookingTitle = String((dataSource === null || dataSource === void 0 ? void 0 : dataSource.booking_id) || '-');
+  var resolvedHolderOptions = (_ref = (_ref2 = holderOptions !== null && holderOptions !== void 0 ? holderOptions : dataSource === null || dataSource === void 0 ? void 0 : dataSource.holderOptions) !== null && _ref2 !== void 0 ? _ref2 : dataSource === null || dataSource === void 0 ? void 0 : dataSource.holders) !== null && _ref !== void 0 ? _ref : [];
+  var resolvedIsFormSubject = isFormSubject !== null && isFormSubject !== void 0 ? isFormSubject : dataSource === null || dataSource === void 0 ? void 0 : dataSource.isFormSubject;
+  var bookingTitle = String((dataSource === null || dataSource === void 0 ? void 0 : dataSource.booking_id) || '');
   var bookingTime = formatBookingTime(dataSource, locale);
   var resourceName = getResourceName(dataSource, translationOriginal) || '-';
   var renderStatusButton = function renderStatusButton() {
@@ -184,8 +189,8 @@ var BookingLineItem = function BookingLineItem(props) {
   }, canChangeStatus ? /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
       items: statusMenuItems,
-      onClick: function onClick(_ref) {
-        var key = _ref.key;
+      onClick: function onClick(_ref3) {
+        var key = _ref3.key;
         return onBookingStatusChange === null || onBookingStatusChange === void 0 ? void 0 : onBookingStatusChange(String(key), dataSource);
       }
     },
@@ -206,7 +211,11 @@ var BookingLineItem = function BookingLineItem(props) {
     dataSource: dataSource
   }), /*#__PURE__*/React.createElement(TimeRange, {
     dataSource: dataSource
-  })), isShowRelatedProduct && relatedProductDataSource ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+  }), resolvedIsFormSubject ? /*#__PURE__*/React.createElement(Holders, {
+    dataSource: dataSource,
+    holderOptions: resolvedHolderOptions,
+    isFormSubject: resolvedIsFormSubject
+  }) : null), isShowRelatedProduct && relatedProductDataSource ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
     style: {
       margin: 0
     }

package/es/components/productCard/lineItem/components/Holders/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LineItemHolderOption } from '../../types';
+import './index.less';
+interface LineItemHoldersProps {
+    dataSource?: any;
+    holderOptions?: LineItemHolderOption[];
+    isFormSubject?: boolean;
+}
+declare const LineItemHolders: (props: LineItemHoldersProps) => React.JSX.Element | null;
+export default LineItemHolders;

package/es/components/productCard/lineItem/components/Holders/index.js

@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import { locales } from '@pisell/utils';
+import Iconfont from "../../../../iconfont";
+import "./index.less";
+var PREFIX = 'pisell-line-item';
+var holderIconMap = {
+  form: 'pisell2-file-05',
+  minors: 'pisell2-user-check-01',
+  waiver: 'pisell2-file-lock-03'
+};
+var isEmptyHolderId = function isEmptyHolderId(value) {
+  if (Array.isArray(value)) return value.length === 0;
+  return value === undefined || value === null || value === '';
+};
+var normalizeHolderIds = function normalizeHolderIds(value) {
+  if (isEmptyHolderId(value)) return [];
+  return Array.isArray(value) ? value : [value];
+};
+var pickHolderId = function pickHolderId(dataSource) {
+  var _ref, _ref2, _dataSource$holder_id, _dataSource$metadata, _dataSource$_extend, _dataSource$_extend2;
+  return (_ref = (_ref2 = (_dataSource$holder_id = dataSource === null || dataSource === void 0 ? void 0 : dataSource.holder_id) !== null && _dataSource$holder_id !== void 0 ? _dataSource$holder_id : dataSource === null || dataSource === void 0 || (_dataSource$metadata = dataSource.metadata) === null || _dataSource$metadata === void 0 ? void 0 : _dataSource$metadata.holder_id) !== null && _ref2 !== void 0 ? _ref2 : dataSource === null || dataSource === void 0 || (_dataSource$_extend = dataSource._extend) === null || _dataSource$_extend === void 0 || (_dataSource$_extend = _dataSource$_extend.product) === null || _dataSource$_extend === void 0 || (_dataSource$_extend = _dataSource$_extend.metadata) === null || _dataSource$_extend === void 0 ? void 0 : _dataSource$_extend.holder_id) !== null && _ref !== void 0 ? _ref : dataSource === null || dataSource === void 0 || (_dataSource$_extend2 = dataSource._extend) === null || _dataSource$_extend2 === void 0 || (_dataSource$_extend2 = _dataSource$_extend2.product) === null || _dataSource$_extend2 === void 0 || (_dataSource$_extend2 = _dataSource$_extend2._extend) === null || _dataSource$_extend2 === void 0 ? void 0 : _dataSource$_extend2.holder_id;
+};
+var pickHolderMaxCount = function pickHolderMaxCount(dataSource, holderIds) {
+  var _ref3, _ref4, _ref5, _ref6, _ref7, _dataSource$holderMax, _dataSource$_extend3, _dataSource$_extend4, _dataSource$_extend5;
+  var count = ((_ref3 = (_ref4 = (_ref5 = (_ref6 = (_ref7 = (_dataSource$holderMax = dataSource === null || dataSource === void 0 ? void 0 : dataSource.holderMaxCount) !== null && _dataSource$holderMax !== void 0 ? _dataSource$holderMax : dataSource === null || dataSource === void 0 ? void 0 : dataSource.holder_max_count) !== null && _ref7 !== void 0 ? _ref7 : dataSource === null || dataSource === void 0 ? void 0 : dataSource.number) !== null && _ref6 !== void 0 ? _ref6 : dataSource === null || dataSource === void 0 || (_dataSource$_extend3 = dataSource._extend) === null || _dataSource$_extend3 === void 0 || (_dataSource$_extend3 = _dataSource$_extend3.product) === null || _dataSource$_extend3 === void 0 ? void 0 : _dataSource$_extend3.num) !== null && _ref5 !== void 0 ? _ref5 : dataSource === null || dataSource === void 0 || (_dataSource$_extend4 = dataSource._extend) === null || _dataSource$_extend4 === void 0 || (_dataSource$_extend4 = _dataSource$_extend4.product) === null || _dataSource$_extend4 === void 0 ? void 0 : _dataSource$_extend4.product_quantity) !== null && _ref4 !== void 0 ? _ref4 : dataSource === null || dataSource === void 0 || (_dataSource$_extend5 = dataSource._extend) === null || _dataSource$_extend5 === void 0 || (_dataSource$_extend5 = _dataSource$_extend5.product) === null || _dataSource$_extend5 === void 0 || (_dataSource$_extend5 = _dataSource$_extend5._extend) === null || _dataSource$_extend5 === void 0 ? void 0 : _dataSource$_extend5.quantity) !== null && _ref3 !== void 0 ? _ref3 : holderIds.length) || 1;
+  return Number(count) || 1;
+};
+var LineItemHolders = function LineItemHolders(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? {} : _props$dataSource,
+    _props$holderOptions = props.holderOptions,
+    holderOptions = _props$holderOptions === void 0 ? [] : _props$holderOptions,
+    isFormSubject = props.isFormSubject;
+  var holderIds = useMemo(function () {
+    return normalizeHolderIds(pickHolderId(dataSource));
+  }, [dataSource]);
+  var holderMaxCount = pickHolderMaxCount(dataSource, holderIds);
+  var showUnassigned = Boolean(isFormSubject || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.isFormSubject));
+  var holderType = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.holderType) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.holder_type) || 'minors';
+  var holderIcon = holderIconMap[holderType] || holderIconMap.minors;
+  if (!holderIds.length) {
+    if (!showUnassigned) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "__holders")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "holder-item unassigned"
+    }, holderMaxCount > 1 ? /*#__PURE__*/React.createElement("span", null, holderMaxCount, "/", holderMaxCount, ' ') : null, /*#__PURE__*/React.createElement("span", {
+      className: "holder-label"
+    }, locales.getText('pisell2.cart.sku-card.unassigned'))));
+  }
+  var renderHolder = function renderHolder(id, index) {
+    var _holder$label;
+    var holder = holderOptions.find(function (item) {
+      return String(item.id) === String(id);
+    });
+    var label = (_holder$label = holder === null || holder === void 0 ? void 0 : holder.label) !== null && _holder$label !== void 0 ? _holder$label : String(id);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "holder-item",
+      key: "".concat(id, "-").concat(index)
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "holder-icon"
+    }, /*#__PURE__*/React.createElement(Iconfont, {
+      type: holderIcon
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "holder-label"
+    }, label));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__holders")
+  }, holderIds.map(function (id, index) {
+    return renderHolder(id, index);
+  }));
+};
+export default LineItemHolders;

package/es/components/productCard/lineItem/components/Holders/index.less

@@ -0,0 +1,39 @@
+.pisell-line-item__holders {
+  user-select: none;
+  display: flex;
+  gap: 16px;
+  overflow: hidden;
+
+  .holder-item {
+    min-width: 30px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+
+    .holder-icon {
+      margin-right: 2px;
+      color: #7f56da;
+      font-size: 16px;
+    }
+
+    .holder-label {
+      display: inline-block;
+      overflow: hidden;
+      color: #667085;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .unassigned {
+    color: red;
+
+    .holder-label {
+      color: red;
+    }
+  }
+}

package/es/components/productCard/lineItem/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ProductCardTypes } from '../types';
-import type { itemType, LineItemStatusOption, LineItemType } from './types';
+import type { itemType, LineItemHolderOption, LineItemStatusOption, LineItemType } from './types';
 import './index.less';
 export declare const PREFIX = "pisell-line-item";
-export type { itemType, LineItemStatusOption, LineItemType } from './types';
+export type { itemType, LineItemHolderOption, LineItemStatusOption, LineItemType, } from './types';
 declare type LocalizedText = string | Record<string, unknown> | null | undefined;
 export interface LineItemProps extends Omit<ProductCardTypes, 'dataSource'> {
     dataSource: any;
@@ -15,6 +15,7 @@ export interface LineItemProps extends Omit<ProductCardTypes, 'dataSource'> {
     statusLoading?: boolean;
     statusDisabled?: boolean;
     isShowRelatedProduct?: boolean;
+    holderOptions?: LineItemHolderOption[];
     onBookingStatusChange?: (status: string, item: any) => void;
 }
 export declare const convertProductToLineItemProduct: (product: any, translationOriginal: (text: LocalizedText) => string, symbol: string) => {
@@ -29,10 +30,10 @@ export declare const convertProductToLineItemProduct: (product: any, translation
     image: any;
     num: any;
     quantity: any;
-    price: any;
-    total: any;
-    origin_total: any;
-    original_total: any;
+    price: number;
+    total: number;
+    origin_total: number;
+    original_total: number;
     source_product_price: any;
     selling_price: any;
     payment_price: any;
@@ -45,6 +46,7 @@ export declare const convertProductToLineItemProduct: (product: any, translation
     product_option_string: string;
     discount_list: any;
     promotions: any;
+    discount_reason: any;
     isGift: boolean;
     giftData: any;
     _origin: any;
@@ -57,8 +59,8 @@ export declare const convertProductToLineItemProduct: (product: any, translation
             quantity: any;
         };
         note: any;
-        total: any;
-        origin_total: any;
+        total: number;
+        origin_total: number;
         payment_price: any;
     };
 };