@pisell/materials 1.8.55 → 1.8.56

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

@@ -15,5 +15,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0;
+
+    .resource-icon {
+      margin-right: 2px;
+    }
   }
 }

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

@@ -12,6 +12,7 @@ import Promotion from "../cartSkuCard/components/Promotion/index.js";
 import Gift from "../cartSkuCard/components/Gift/index.js";
 import LineItemTimeRange from "./components/TimeRange/index.js";
 import LineItemResources from "./components/Resources/index.js";
+import LineItemHolders from "./components/Holders/index.js";
 import React, { useMemo } from "react";
 import { locales } from "@pisell/utils";
 import { Button, Divider, Dropdown } from "antd";
@@ -27,6 +28,7 @@ const _excluded = [
 	"rightActions",
 	"escapeDom",
 	"isShowImage",
+	"isFormSubject",
 	"isShowDelete",
 	"isShowNote",
 	"isShowAmountFooter",
@@ -36,6 +38,7 @@ const _excluded = [
 	"statusLoading",
 	"statusDisabled",
 	"isShowRelatedProduct",
+	"holderOptions",
 	"onBookingStatusChange",
 	"onAction",
 	"onDelete",
@@ -77,8 +80,8 @@ const getResourceName = (booking, translationOriginal) => {
 	}).filter(Boolean).join(", ");
 };
 const BookingLineItem = (props) => {
-	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$promotion;
-	const { dataSource, type, cartSkuType, relatedProductDataSource, rightActions = [], escapeDom, isShowImage, isShowDelete, isShowNote, isShowAmountFooter, disabledClick, disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = _objectWithoutProperties(props, _excluded);
+	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _ref, _ref2, _dataSource$promotion;
+	const { dataSource, type, cartSkuType, relatedProductDataSource, rightActions = [], escapeDom, isShowImage, isFormSubject, isShowDelete, isShowNote, isShowAmountFooter, disabledClick, disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = _objectWithoutProperties(props, _excluded);
 	const context = useEngineContext();
 	const translationOriginal = context.appHelper.utils.translationOriginal;
 	const locale = ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get("umi_locale")) || "en-US";
@@ -101,6 +104,8 @@ const BookingLineItem = (props) => {
 		}
 	};
 	const bookingRightActions = isShowDelete ? [deleteAction, ...rightActions] : rightActions;
+	const 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 : [];
+	const resolvedIsFormSubject = isFormSubject !== null && isFormSubject !== void 0 ? isFormSubject : dataSource === null || dataSource === void 0 ? void 0 : dataSource.isFormSubject;
 	const bookingTitle = String((dataSource === null || dataSource === void 0 ? void 0 : dataSource.booking_id) || "");
 	formatBookingTime(dataSource, locale);
 	getResourceName(dataSource, translationOriginal);
@@ -149,7 +154,11 @@ const BookingLineItem = (props) => {
 			e.stopPropagation();
 			onDelete === null || onDelete === void 0 || onDelete(dataSource);
 		}
-	}, /* @__PURE__ */ React.createElement(IconFont, { type: "pisell2-trash-01" })) : null))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__booking-detail` }, /* @__PURE__ */ React.createElement(LineItemTimeRange, { dataSource }), /* @__PURE__ */ React.createElement(LineItemResources, { dataSource })), isShowRelatedProduct && relatedProductDataSource ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { style: { margin: 0 } }), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product-card` }, /* @__PURE__ */ React.createElement(BasicInfo, {
+	}, /* @__PURE__ */ React.createElement(IconFont, { type: "pisell2-trash-01" })) : null))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__booking-detail` }, /* @__PURE__ */ React.createElement(LineItemTimeRange, { dataSource }), /* @__PURE__ */ React.createElement(LineItemResources, { dataSource }), resolvedIsFormSubject ? /* @__PURE__ */ React.createElement(LineItemHolders, {
+		dataSource,
+		holderOptions: resolvedHolderOptions,
+		isFormSubject: resolvedIsFormSubject
+	}) : null), isShowRelatedProduct && relatedProductDataSource ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { style: { margin: 0 } }), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__related-product-card` }, /* @__PURE__ */ React.createElement(BasicInfo, {
 		isShowImage,
 		dataSource: relatedProductDataSource,
 		type: cartSkuType,

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

@@ -0,0 +1,51 @@
+import IconFont from "../../../../iconfont/index.js";
+import React, { useMemo } from "react";
+import { locales } from "@pisell/utils";
+import "./index.less";
+//#region src/components/productCard/lineItem/components/Holders/index.tsx
+const PREFIX = "pisell-line-item";
+const holderIconMap = {
+	form: "pisell2-file-05",
+	minors: "pisell2-user-check-01",
+	waiver: "pisell2-file-lock-03"
+};
+const isEmptyHolderId = (value) => {
+	if (Array.isArray(value)) return value.length === 0;
+	return value === void 0 || value === null || value === "";
+};
+const normalizeHolderIds = (value) => {
+	if (isEmptyHolderId(value)) return [];
+	return Array.isArray(value) ? value : [value];
+};
+const 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;
+};
+const pickHolderMaxCount = (dataSource, holderIds) => {
+	var _ref3, _ref4, _ref5, _ref6, _ref7, _dataSource$holderMax, _dataSource$_extend3, _dataSource$_extend4, _dataSource$_extend5;
+	const 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;
+};
+const LineItemHolders = (props) => {
+	const { dataSource = {}, holderOptions = [], isFormSubject } = props;
+	const holderIds = useMemo(() => normalizeHolderIds(pickHolderId(dataSource)), [dataSource]);
+	const holderMaxCount = pickHolderMaxCount(dataSource, holderIds);
+	const showUnassigned = Boolean(isFormSubject || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.isFormSubject));
+	const holderIcon = holderIconMap[(dataSource === null || dataSource === void 0 ? void 0 : dataSource.holderType) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.holder_type) || "minors"] || holderIconMap.minors;
+	if (!holderIds.length) {
+		if (!showUnassigned) return null;
+		return /* @__PURE__ */ React.createElement("div", { className: `${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"))));
+	}
+	const renderHolder = (id, index) => {
+		var _holder$label;
+		const holder = holderOptions.find((item) => String(item.id) === String(id));
+		const 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: `${id}-${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: `${PREFIX}__holders` }, holderIds.map((id, index) => renderHolder(id, index)));
+};
+//#endregion
+export { LineItemHolders as default };

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.js

@@ -26,6 +26,7 @@ const _excluded = [
 	"statusLoading",
 	"statusDisabled",
 	"isShowRelatedProduct",
+	"holderOptions",
 	"onBookingStatusChange",
 	"onAction",
 	"onDelete",
@@ -126,7 +127,7 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol) =
 };
 const LineItem = (props) => {
 	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$_extend2;
-	const { dataSource = defaultValue.dataSource, itemType, type = "a9", rightActions = [], escapeDom, isShowImage = defaultValue.isShowImage, isShowDelete = defaultValue.isShowDelete, isShowNote = defaultValue.isShowNote, isShowAmountFooter = defaultValue.isShowAmountFooter, disabledClick = defaultValue.disabledClick, disabledEdit = defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = _objectWithoutProperties(props, _excluded);
+	const { dataSource = defaultValue.dataSource, itemType, type = "a9", rightActions = [], escapeDom, isShowImage = defaultValue.isShowImage, isShowDelete = defaultValue.isShowDelete, isShowNote = defaultValue.isShowNote, isShowAmountFooter = defaultValue.isShowAmountFooter, disabledClick = defaultValue.disabledClick, disabledEdit = defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = _objectWithoutProperties(props, _excluded);
 	const context = useEngineContext();
 	const translationOriginal = context.appHelper.utils.translationOriginal;
 	const symbol = context.appHelper.utils.getSymbolic();
@@ -183,6 +184,7 @@ const LineItem = (props) => {
 		statusLoading,
 		statusDisabled,
 		isShowRelatedProduct,
+		holderOptions,
 		onBookingStatusChange,
 		onAction,
 		onDelete,

package/es/components/productCard/types.d.ts

@@ -66,6 +66,7 @@ type productType = {
  */
 type ProductCardTypes = {
   dataSource: productType;
+  isFormSubject?: boolean;
   isShowImage?: boolean;
   isShowOriginalPrice?: boolean;
   isShowHolder?: boolean;

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

@@ -15,5 +15,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0;
+
+    .resource-icon {
+      margin-right: 2px;
+    }
   }
 }

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

@@ -13,6 +13,7 @@ const require_index$7 = require("../cartSkuCard/components/Promotion/index.js");
 const require_index$8 = require("../cartSkuCard/components/Gift/index.js");
 const require_index$9 = require("./components/TimeRange/index.js");
 const require_index$10 = require("./components/Resources/index.js");
+const require_index$11 = require("./components/Holders/index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
@@ -31,6 +32,7 @@ const _excluded = [
 	"rightActions",
 	"escapeDom",
 	"isShowImage",
+	"isFormSubject",
 	"isShowDelete",
 	"isShowNote",
 	"isShowAmountFooter",
@@ -40,6 +42,7 @@ const _excluded = [
 	"statusLoading",
 	"statusDisabled",
 	"isShowRelatedProduct",
+	"holderOptions",
 	"onBookingStatusChange",
 	"onAction",
 	"onDelete",
@@ -81,8 +84,8 @@ const getResourceName = (booking, translationOriginal) => {
 	}).filter(Boolean).join(", ");
 };
 const BookingLineItem = (props) => {
-	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$promotion;
-	const { dataSource, type, cartSkuType, relatedProductDataSource, rightActions = [], escapeDom, isShowImage, isShowDelete, isShowNote, isShowAmountFooter, disabledClick, disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _ref, _ref2, _dataSource$promotion;
+	const { dataSource, type, cartSkuType, relatedProductDataSource, rightActions = [], escapeDom, isShowImage, isFormSubject, isShowDelete, isShowNote, isShowAmountFooter, disabledClick, disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
 	const context = require_useEngineContext.default();
 	const translationOriginal = context.appHelper.utils.translationOriginal;
 	const locale = ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get("umi_locale")) || "en-US";
@@ -105,6 +108,8 @@ const BookingLineItem = (props) => {
 		}
 	};
 	const bookingRightActions = isShowDelete ? [deleteAction, ...rightActions] : rightActions;
+	const 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 : [];
+	const resolvedIsFormSubject = isFormSubject !== null && isFormSubject !== void 0 ? isFormSubject : dataSource === null || dataSource === void 0 ? void 0 : dataSource.isFormSubject;
 	const bookingTitle = String((dataSource === null || dataSource === void 0 ? void 0 : dataSource.booking_id) || "");
 	formatBookingTime(dataSource, locale);
 	getResourceName(dataSource, translationOriginal);
@@ -153,7 +158,11 @@ const BookingLineItem = (props) => {
 			e.stopPropagation();
 			onDelete === null || onDelete === void 0 || onDelete(dataSource);
 		}
-	}, /* @__PURE__ */ react.default.createElement(require_index.default, { type: "pisell2-trash-01" })) : null))), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__booking-detail` }, /* @__PURE__ */ react.default.createElement(require_index$9.default, { dataSource }), /* @__PURE__ */ react.default.createElement(require_index$10.default, { dataSource })), isShowRelatedProduct && relatedProductDataSource ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(antd.Divider, { style: { margin: 0 } }), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product-card` }, /* @__PURE__ */ react.default.createElement(require_index$2.default, {
+	}, /* @__PURE__ */ react.default.createElement(require_index.default, { type: "pisell2-trash-01" })) : null))), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__booking-detail` }, /* @__PURE__ */ react.default.createElement(require_index$9.default, { dataSource }), /* @__PURE__ */ react.default.createElement(require_index$10.default, { dataSource }), resolvedIsFormSubject ? /* @__PURE__ */ react.default.createElement(require_index$11.default, {
+		dataSource,
+		holderOptions: resolvedHolderOptions,
+		isFormSubject: resolvedIsFormSubject
+	}) : null), isShowRelatedProduct && relatedProductDataSource ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(antd.Divider, { style: { margin: 0 } }), /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product` }, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__related-product-card` }, /* @__PURE__ */ react.default.createElement(require_index$2.default, {
 		isShowImage,
 		dataSource: relatedProductDataSource,
 		type: cartSkuType,

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

@@ -0,0 +1,53 @@
+const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../../../iconfont/index.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _pisell_utils = require("@pisell/utils");
+require("./index.less");
+//#region src/components/productCard/lineItem/components/Holders/index.tsx
+const PREFIX = "pisell-line-item";
+const holderIconMap = {
+	form: "pisell2-file-05",
+	minors: "pisell2-user-check-01",
+	waiver: "pisell2-file-lock-03"
+};
+const isEmptyHolderId = (value) => {
+	if (Array.isArray(value)) return value.length === 0;
+	return value === void 0 || value === null || value === "";
+};
+const normalizeHolderIds = (value) => {
+	if (isEmptyHolderId(value)) return [];
+	return Array.isArray(value) ? value : [value];
+};
+const 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;
+};
+const pickHolderMaxCount = (dataSource, holderIds) => {
+	var _ref3, _ref4, _ref5, _ref6, _ref7, _dataSource$holderMax, _dataSource$_extend3, _dataSource$_extend4, _dataSource$_extend5;
+	const 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;
+};
+const LineItemHolders = (props) => {
+	const { dataSource = {}, holderOptions = [], isFormSubject } = props;
+	const holderIds = (0, react.useMemo)(() => normalizeHolderIds(pickHolderId(dataSource)), [dataSource]);
+	const holderMaxCount = pickHolderMaxCount(dataSource, holderIds);
+	const showUnassigned = Boolean(isFormSubject || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.isFormSubject));
+	const holderIcon = holderIconMap[(dataSource === null || dataSource === void 0 ? void 0 : dataSource.holderType) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.holder_type) || "minors"] || holderIconMap.minors;
+	if (!holderIds.length) {
+		if (!showUnassigned) return null;
+		return /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__holders` }, /* @__PURE__ */ react.default.createElement("div", { className: "holder-item unassigned" }, holderMaxCount > 1 ? /* @__PURE__ */ react.default.createElement("span", null, holderMaxCount, "/", holderMaxCount, " ") : null, /* @__PURE__ */ react.default.createElement("span", { className: "holder-label" }, _pisell_utils.locales.getText("pisell2.cart.sku-card.unassigned"))));
+	}
+	const renderHolder = (id, index) => {
+		var _holder$label;
+		const holder = holderOptions.find((item) => String(item.id) === String(id));
+		const label = (_holder$label = holder === null || holder === void 0 ? void 0 : holder.label) !== null && _holder$label !== void 0 ? _holder$label : String(id);
+		return /* @__PURE__ */ react.default.createElement("div", {
+			className: "holder-item",
+			key: `${id}-${index}`
+		}, /* @__PURE__ */ react.default.createElement("span", { className: "holder-icon" }, /* @__PURE__ */ react.default.createElement(require_index.default, { type: holderIcon })), /* @__PURE__ */ react.default.createElement("span", { className: "holder-label" }, label));
+	};
+	return /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}__holders` }, holderIds.map((id, index) => renderHolder(id, index)));
+};
+//#endregion
+exports.default = LineItemHolders;

package/lib/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/lib/components/productCard/lineItem/index.js

@@ -28,6 +28,7 @@ const _excluded = [
 	"statusLoading",
 	"statusDisabled",
 	"isShowRelatedProduct",
+	"holderOptions",
 	"onBookingStatusChange",
 	"onAction",
 	"onDelete",
@@ -128,7 +129,7 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol) =
 };
 const LineItem = (props) => {
 	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$_extend2;
-	const { dataSource = require_status.defaultValue.dataSource, itemType, type = "a9", rightActions = [], escapeDom, isShowImage = require_status.defaultValue.isShowImage, isShowDelete = require_status.defaultValue.isShowDelete, isShowNote = require_status.defaultValue.isShowNote, isShowAmountFooter = require_status.defaultValue.isShowAmountFooter, disabledClick = require_status.defaultValue.disabledClick, disabledEdit = require_status.defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	const { dataSource = require_status.defaultValue.dataSource, itemType, type = "a9", rightActions = [], escapeDom, isShowImage = require_status.defaultValue.isShowImage, isShowDelete = require_status.defaultValue.isShowDelete, isShowNote = require_status.defaultValue.isShowNote, isShowAmountFooter = require_status.defaultValue.isShowAmountFooter, disabledClick = require_status.defaultValue.disabledClick, disabledEdit = require_status.defaultValue.disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAction, onDelete, onNote, onCard, onPromotion, onGift } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
 	const context = require_useEngineContext.default();
 	const translationOriginal = context.appHelper.utils.translationOriginal;
 	const symbol = context.appHelper.utils.getSymbolic();
@@ -185,6 +186,7 @@ const LineItem = (props) => {
 		statusLoading,
 		statusDisabled,
 		isShowRelatedProduct,
+		holderOptions,
 		onBookingStatusChange,
 		onAction,
 		onDelete,

package/lib/components/productCard/types.d.ts

@@ -66,6 +66,7 @@ type productType = {
  */
 type ProductCardTypes = {
   dataSource: productType;
+  isFormSubject?: boolean;
   isShowImage?: boolean;
   isShowOriginalPrice?: boolean;
   isShowHolder?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.8.55",
+  "version": "1.8.56",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -98,9 +98,9 @@
     "swiper": "^8.4.7",
     "antd-mobile": "^5.38.1",
     "vod-js-sdk-v6": "^1.4.11",
-    "@pisell/date-picker": "3.0.8",
+    "@pisell/icon": "0.0.11",
     "@pisell/utils": "3.0.2",
-    "@pisell/icon": "0.0.11"
+    "@pisell/date-picker": "3.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0",