@pisell/materials 6.11.83 → 6.11.85

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { MenuProps, ButtonProps } from 'antd';
+export interface ButtonGroupListItemProps {
+    id?: string;
+    isMore?: boolean;
+    menuData?: MenuProps['items'];
+    buttonProps?: ButtonProps;
+}
+interface ButtonConfigProps {
+    [id: string]: ButtonGroupListItemProps;
+}
+export declare type ButtonGroupListProps = ButtonGroupListItemProps[][];
+interface ButtonGroupPreviewProps {
+    buttonConfig?: ButtonConfigProps;
+    buttonGroupList?: ButtonGroupListProps;
+    updateButtonProps?: ButtonGroupListItemProps;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonGroupPreviewProps & React.RefAttributes<any>>>;
+export default _default;

package/es/components/buttonGroupPreview/index.js

@@ -1,5 +1,8 @@
+var _excluded = ["children"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -23,7 +26,7 @@ var updateSourceData = function updateSourceData(_ref) {
   if (Object.keys(buttonConfig).length !== 0) {
     return buttonGroupList.map(function (subArray) {
       return subArray.map(function (item) {
-        if (buttonConfig.hasOwnProperty(item.id)) {
+        if (item.id && Object.prototype.hasOwnProperty.call(buttonConfig, item.id)) {
           return buttonConfig[item.id]; // 如果存在，则替换为新的对象
         }
         return item; // 保持其他对象不变
@@ -44,7 +47,7 @@ var ButtonGroupPreview = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }, [buttonGroupList, buttonConfig]);
   return /*#__PURE__*/React.createElement(Flex, {
-    wrap: true,
+    wrap: "wrap",
     vertical: true,
     style: {
       marginBottom: 10
@@ -61,11 +64,15 @@ var ButtonGroupPreview = /*#__PURE__*/forwardRef(function (props, ref) {
         menuData = _items$menuData === void 0 ? [] : _items$menuData,
         buttonProps = items.buttonProps;
       var btnProps = _objectSpread(_objectSpread({}, buttonProps), props.updateButtonProps);
+      var children = btnProps.children,
+        dropdownButtonProps = _objectWithoutProperties(btnProps, _excluded);
       return isMore ? /*#__PURE__*/React.createElement(Dropdown, {
         menu: {
           items: menuData
         }
-      }, /*#__PURE__*/React.createElement(Button, null, /*#__PURE__*/React.createElement(MoreOutlined, null))) : /*#__PURE__*/React.createElement(Button, _extends({
+      }, /*#__PURE__*/React.createElement(Button, _extends({
+        key: id
+      }, dropdownButtonProps), children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(MoreOutlined, null))) : /*#__PURE__*/React.createElement(Button, _extends({
         key: id
       }, btnProps));
     }));

package/es/components/productCard/cartSkuCard/components/BookingItem/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+interface BookingItemProps {
+    children?: React.ReactNode;
+    isShowRelatedProduct?: boolean;
+    isShowDelete?: boolean;
+    dataSource: any;
+}
+declare const BookingItem: (props: BookingItemProps) => JSX.Element;
+export default BookingItem;

package/es/components/productCard/cartSkuCard/components/BookingItem/index.js

@@ -0,0 +1,58 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import classNames from 'classnames';
+import { Divider } from 'antd';
+import TimeRange from "../timeRange";
+import Resources from "../resources";
+import "./index.less";
+var PREFIX = 'pisell-cart-sku-card-booking-item';
+var getSelectedResourceNames = function getSelectedResourceNames(dataSource) {
+  var _ref = dataSource || {},
+    multiResources = _ref.multiResources,
+    isMultipleResource = _ref.isMultipleResource;
+  if (!isMultipleResource || !(multiResources !== null && multiResources !== void 0 && multiResources.length)) return [];
+  return multiResources.flatMap(function (resourceGroup) {
+    var _ref2 = resourceGroup || {},
+      ids = _ref2.id,
+      _ref2$lists = _ref2.lists,
+      lists = _ref2$lists === void 0 ? [] : _ref2$lists;
+    if (!Array.isArray(ids)) return [];
+    return ids.map(function (id) {
+      var targetRes = lists.find(function (resource) {
+        return resource.id === id;
+      });
+      return (targetRes === null || targetRes === void 0 ? void 0 : targetRes.label) || null;
+    }).filter(Boolean);
+  }).filter(Boolean).filter(function (name, index, names) {
+    return names.indexOf(name) === index;
+  });
+};
+var BookingItem = function BookingItem(props) {
+  var children = props.children,
+    _props$isShowRelatedP = props.isShowRelatedProduct,
+    isShowRelatedProduct = _props$isShowRelatedP === void 0 ? true : _props$isShowRelatedP,
+    _props$isShowDelete = props.isShowDelete,
+    isShowDelete = _props$isShowDelete === void 0 ? false : _props$isShowDelete,
+    dataSource = props.dataSource;
+  // const resourceTitle = getSelectedResourceNames(dataSource).join(' · ');
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: PREFIX
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "__info"), _defineProperty({}, "".concat(PREFIX, "__info--with-delete"), isShowDelete))
+  }, /*#__PURE__*/React.createElement(TimeRange, {
+    dataSource: dataSource
+  }), /*#__PURE__*/React.createElement(Resources, {
+    dataSource: dataSource
+  })), isShowRelatedProduct && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      margin: 0
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__related-product")
+  }, children)));
+};
+export default BookingItem;

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

@@ -0,0 +1,32 @@
+.pisell-cart-sku-card-booking-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+
+    &--with-delete {
+      padding-right: 44px;
+    }
+  }
+
+  &__resource-title {
+    color: var(--Gray-900, #101828);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__related-product {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+}

package/es/components/productCard/cartSkuCard/components/basicInfo/index.js

@@ -7,6 +7,14 @@ import Weighing from "../weighing";
 import { PREFIX } from "../../index";
 import EditButton from "../../../components/Header/EditButton";
 import "./index.less";
+
+/** 每种重量单位对应的展示缩写。 */
+var UNIT_LABEL = {
+  KILOGRAMS: 'kg',
+  GRAMS: 'g',
+  POUNDS: 'lb',
+  OUNCES: 'oz'
+};
 var BasicInfo = function BasicInfo(props) {
   var _origin;
   var isShowImage = props.isShowImage,
@@ -59,8 +67,7 @@ var BasicInfo = function BasicInfo(props) {
       return null;
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, hasWeighingInfo ? /*#__PURE__*/React.createElement(Weighing, {
-      dataSource: weighingInfo,
-      symbol: symbol
+      dataSource: weighingInfo
     }) : null, hasSpecs ? /*#__PURE__*/React.createElement(Specs, {
       dataSource: dataSource,
       maxSpecsCount: maxSpecsCount,
@@ -69,7 +76,9 @@ var BasicInfo = function BasicInfo(props) {
   };
   var renderProductPrice = function renderProductPrice() {
     if (weighingInfo) {
-      return null;
+      var unit = weighingInfo.unit,
+        unit_price = weighingInfo.unit_price;
+      return "".concat(formatAmount(unit_price, 2, symbol), "/").concat(UNIT_LABEL[unit]);
     }
     return formatAmount(price, 2, symbol);
   };

package/es/components/productCard/cartSkuCard/components/timeRange/index.js

@@ -1,6 +1,5 @@
 import Iconfont from "../../../../iconfont";
 import React, { useEffect, useMemo } from 'react';
-import { Divider } from 'antd';
 import { getServiceTime } from "../../../utils";
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -45,11 +44,7 @@ var TimeRange = function TimeRange(props) {
       className: "time-str"
     }, dayjs(time).format(_format)));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-    style: {
-      margin: '0'
-    }
-  }), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__time-range")
   }, /*#__PURE__*/React.createElement(Iconfont, {
     className: "time-icon",

package/es/components/productCard/cartSkuCard/components/weighing/index.d.ts

@@ -1,20 +1,18 @@
 import './index.less';
 declare type WeightUnit = 'KILOGRAMS' | 'GRAMS' | 'POUNDS' | 'OUNCES';
 interface WeighingInfo {
-    weight?: string | number;
+    weight?: number;
     tare?: {
         id?: string;
         label?: string;
-        value?: string | number;
+        value?: number;
         unit?: WeightUnit;
     };
-    net_weight?: string | number;
-    unit_price?: string | number;
+    net_weight?: number;
     unit?: WeightUnit;
 }
 interface WeighingProps {
     dataSource?: WeighingInfo;
-    symbol?: string;
 }
 declare const Weighing: (props: WeighingProps) => JSX.Element | null;
 export default Weighing;

package/es/components/productCard/cartSkuCard/components/weighing/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatAmountWithOptions, locales } from '@pisell/utils';
+import { locales } from '@pisell/utils';
 import { PREFIX } from "../../index";
 import "./index.less";
 var UNIT_LABEL_MAP = {
@@ -14,37 +14,26 @@ var formatWeight = function formatWeight(value, unit) {
   var displayUnit = UNIT_LABEL_MAP[unit || 'KILOGRAMS'];
   return "".concat(displayValue.toFixed(3), " ").concat(displayUnit);
 };
-var formatUnitPrice = function formatUnitPrice(value) {
-  var symbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return formatAmountWithOptions(value !== null && value !== void 0 ? value : 0, symbol, {
-    precision: 2,
-    hideDecimalForWholeNumbers: false
-  });
-};
 var Weighing = function Weighing(props) {
-  var dataSource = props.dataSource,
-    symbol = props.symbol;
+  var dataSource = props.dataSource;
   if (!dataSource) {
     return null;
   }
   var weight = dataSource.weight,
     tare = dataSource.tare,
     net_weight = dataSource.net_weight,
-    unit_price = dataSource.unit_price,
     _dataSource$unit = dataSource.unit,
     unit = _dataSource$unit === void 0 ? 'KILOGRAMS' : _dataSource$unit;
-  var unitLabel = UNIT_LABEL_MAP[unit];
-  var tareLabel = locales.getText('pisell2.cart.sku-card.weighing.tare');
-  var netLabel = locales.getText('pisell2.cart.sku-card.weighing.net');
-  var unitPriceText = formatUnitPrice(unit_price, symbol);
+  var tareValue = Number((tare === null || tare === void 0 ? void 0 : tare.value) || 0);
+  var tareLabel = (tare === null || tare === void 0 ? void 0 : tare.label) || locales.getText('pisell2.cart.sku-card.weighing.tare');
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__weighing")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__weighing-row")
-  }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.cart.sku-card.weighing.gross'), ":"), /*#__PURE__*/React.createElement("span", null, formatWeight(weight, unit))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.cart.sku-card.weighing.gross'), ":"), /*#__PURE__*/React.createElement("span", null, formatWeight(weight, unit))), tareValue > 0 ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__weighing-row")
-  }, /*#__PURE__*/React.createElement("span", null, tareLabel, ":"), /*#__PURE__*/React.createElement("span", null, formatWeight(tare === null || tare === void 0 ? void 0 : tare.value, (tare === null || tare === void 0 ? void 0 : tare.unit) || unit))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, tareLabel, ":"), /*#__PURE__*/React.createElement("span", null, "-", formatWeight(tareValue, (tare === null || tare === void 0 ? void 0 : tare.unit) || unit))) : null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__weighing-row")
-  }, /*#__PURE__*/React.createElement("span", null, formatWeight(net_weight, unit), " ", netLabel, " @ ", unitPriceText, "/", unitLabel)));
+  }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.cart.sku-card.weighing.net'), ":"), /*#__PURE__*/React.createElement("span", null, formatWeight(net_weight, unit))));
 };
 export default Weighing;

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

@@ -1,9 +1,12 @@
 import './index.less';
 import { ProductCardTypes } from '../types';
-interface ISKUCardProps extends ProductCardTypes {
+interface ISKUCardProps extends Omit<ProductCardTypes, 'dataSource'> {
+    dataSource: any;
+    itemType?: 'booking' | 'product';
     type: 'a2' | 'a5' | 'a9';
     rightActions: any[];
     escapeDom?: string;
+    isShowRelatedProduct?: boolean;
 }
 export declare const PREFIX = "pisell-cart-sku-card";
 declare const CartSkuCard: (props: ISKUCardProps) => JSX.Element | null;

package/es/components/productCard/cartSkuCard/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["dataSource", "isShowImage", "isShowOriginalPrice", "isShowHolder", "isShowNote", "isShowDelete", "isShowAmountFooter", "isShowPackageNote", "isShowEditProduct", "disabledClick", "disabledEditClick", "onEditProduct", "onAction", "onDelete", "onNote", "onLike", "onCard", "onChangeResource", "onPromotion", "onGift", "onChangeHolder", "type", "rightActions", "escapeDom", "maxSpecsCount"];
+var _excluded = ["dataSource", "isShowImage", "isShowOriginalPrice", "isShowHolder", "isShowNote", "isShowDelete", "isShowAmountFooter", "isShowPackageNote", "isShowEditProduct", "disabledClick", "disabledEditClick", "onEditProduct", "onAction", "onDelete", "onNote", "onLike", "onCard", "onChangeResource", "onPromotion", "onGift", "onChangeHolder", "itemType", "type", "rightActions", "escapeDom", "maxSpecsCount", "isShowRelatedProduct"];
 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 AmountFooter from "./components/AmountFooter";
 import Items from "./components/MultiDay";
 import Promotion from "./components/Promotion";
 import Gift from "./components/Gift";
+import BookingItem from "./components/BookingItem";
 import "./index.less";
 import Iconfont from "../../iconfont";
 import useEngineContext from "../../../hooks/useEngineContext";
@@ -64,12 +65,16 @@ var CartSkuCard = function CartSkuCard(props) {
     onPromotion = props.onPromotion,
     onGift = props.onGift,
     onChangeHolder = props.onChangeHolder,
+    _props$itemType = props.itemType,
+    itemType = _props$itemType === void 0 ? 'product' : _props$itemType,
     type = props.type,
     _props$rightActions = props.rightActions,
     rightActions = _props$rightActions === void 0 ? [] : _props$rightActions,
     escapeDom = props.escapeDom,
     _props$maxSpecsCount = props.maxSpecsCount,
     maxSpecsCount = _props$maxSpecsCount === void 0 ? 1 : _props$maxSpecsCount,
+    _props$isShowRelatedP = props.isShowRelatedProduct,
+    isShowRelatedProduct = _props$isShowRelatedP === void 0 ? true : _props$isShowRelatedP,
     other = _objectWithoutProperties(props, _excluded);
   var useOpenNoteRef = useRef();
   var context = useEngineContext();
@@ -89,13 +94,15 @@ var CartSkuCard = function CartSkuCard(props) {
           cursor: 'pointer',
           padding: '10px 0px'
         }
-      }, /*#__PURE__*/React.createElement(Iconfont, {
-        type: "pisell2-trash-01",
+      }, /*#__PURE__*/React.createElement("span", {
         style: {
           fontSize: 20,
-          marginRight: 4
+          marginRight: 4,
+          lineHeight: 1
         }
-      }), /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement(Iconfont, {
+        type: "pisell2-trash-01"
+      })), /*#__PURE__*/React.createElement("span", {
         style: {
           fontSize: 12,
           fontWeight: 500
@@ -171,11 +178,11 @@ var CartSkuCard = function CartSkuCard(props) {
       isShowEditProduct: isShowEditProduct,
       disabledEditClick: disabledEditClick,
       onEditProduct: onEditProduct
-    }), /*#__PURE__*/React.createElement(TimeRange, {
+    }), itemType !== 'booking' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimeRange, {
       dataSource: dataSource
     }), /*#__PURE__*/React.createElement(Resources, {
       dataSource: dataSource
-    }), /*#__PURE__*/React.createElement(Packages, {
+    })) : null, /*#__PURE__*/React.createElement(Packages, {
       dataSource: dataSource,
       isShowImage: isShowImage
     }), /*#__PURE__*/React.createElement(Sales, {
@@ -251,6 +258,7 @@ var CartSkuCard = function CartSkuCard(props) {
     return renderA2();
   };
   if (dataSource !== null && dataSource !== void 0 && dataSource.isGift) return null;
+  var content = renderContent();
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-wrapper-container")
   }, /*#__PURE__*/React.createElement(SwipeAction, {
@@ -266,7 +274,11 @@ var CartSkuCard = function CartSkuCard(props) {
       e.stopPropagation();
       onCard === null || onCard === void 0 || onCard(dataSource);
     }
-  }, renderContent())), /*#__PURE__*/React.createElement(Gift, _extends({}, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.giftData) || {}, {
+  }, itemType === 'booking' ? /*#__PURE__*/React.createElement(BookingItem, {
+    dataSource: dataSource,
+    isShowRelatedProduct: isShowRelatedProduct,
+    isShowDelete: isShowDelete
+  }, content) : content)), /*#__PURE__*/React.createElement(Gift, _extends({}, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.giftData) || {}, {
     onClick: function onClick() {
       return onGift === null || onGift === void 0 ? void 0 : onGift(dataSource);
     }

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

@@ -22,6 +22,8 @@ import Promotion from "../cartSkuCard/components/Promotion";
 import Gift from "../cartSkuCard/components/Gift";
 import { SwipeAction } from "../cartSkuCard/components/swipeAction";
 import Action from "../components/Action";
+import TimeRange from "./components/TimeRange";
+import Resources from "./components/Resources";
 import Iconfont from "../../iconfont";
 import useEngineContext from "../../../hooks/useEngineContext";
 var PREFIX = 'pisell-line-item';
@@ -200,23 +202,11 @@ var BookingLineItem = function BookingLineItem(props) {
     type: "pisell2-trash-01"
   })) : null))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "__booking-detail")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "__booking-field")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "__booking-field-label")
-  }, /*#__PURE__*/React.createElement(Iconfont, {
-    type: "pisell2-marker-pin-01"
-  }), /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.line-item.resource'))), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "__booking-field-value")
-  }, resourceName)), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "__booking-field")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "__booking-field-label")
-  }, /*#__PURE__*/React.createElement(Iconfont, {
-    type: "pisell2-clock"
-  }), /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.line-item.time'))), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(PREFIX, "__booking-field-value")
-  }, bookingTime || '-'))), isShowRelatedProduct && relatedProductDataSource ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+  }, /*#__PURE__*/React.createElement(TimeRange, {
+    dataSource: dataSource
+  }), /*#__PURE__*/React.createElement(Resources, {
+    dataSource: dataSource
+  })), isShowRelatedProduct && relatedProductDataSource ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
     style: {
       margin: 0
     }

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

@@ -0,0 +1,6 @@
+import '../../../cartSkuCard/components/resources/index.less';
+interface LineItemResourcesProps {
+    dataSource?: any;
+}
+declare const LineItemResources: (props: LineItemResourcesProps) => JSX.Element | null;
+export default LineItemResources;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Tag } from 'antd';
+import "../../../cartSkuCard/components/resources/index.less";
+var PREFIX = 'pisell-cart-sku-card';
+var ResourceTag = Tag;
+var colors = ['magenta', 'volcano', 'orange', 'gold', 'green', 'cyan', 'blue', 'geekblue', 'purple'];
+function getColor(n) {
+  return colors[n * 31 % colors.length];
+}
+var getResourceLabel = function getResourceLabel(resource, fallbackLabel) {
+  var _resource$metadata, _resource$metadata2;
+  return (resource === null || resource === void 0 || (_resource$metadata = resource.metadata) === null || _resource$metadata === void 0 ? void 0 : _resource$metadata.resource_name) || (resource === null || resource === void 0 || (_resource$metadata2 = resource.metadata) === null || _resource$metadata2 === void 0 ? void 0 : _resource$metadata2.form_name) || fallbackLabel || '';
+};
+var LineItemResources = function LineItemResources(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? {} : _props$dataSource;
+  var resources = Array.isArray(dataSource === null || dataSource === void 0 ? void 0 : dataSource.resources) ? dataSource.resources : [];
+  var fallbackResourceLabel = resources.length === 1 ? dataSource === null || dataSource === void 0 ? void 0 : dataSource.relation_form_name : '';
+  var resourceLabels = Array.isArray(dataSource === null || dataSource === void 0 ? void 0 : dataSource.resources) ? resources.map(function (resource, index) {
+    return {
+      id: Number(resource === null || resource === void 0 ? void 0 : resource.form_id) || Number(resource === null || resource === void 0 ? void 0 : resource.relation_id) || index + 1,
+      label: getResourceLabel(resource, fallbackResourceLabel)
+    };
+  }) : [];
+  if (!resourceLabels.length && dataSource !== null && dataSource !== void 0 && dataSource.relation_form_name) {
+    resourceLabels.push({
+      id: 1,
+      label: dataSource.relation_form_name
+    });
+  }
+  if (!resourceLabels.length) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__resources")
+  }, resourceLabels.map(function (resource) {
+    return /*#__PURE__*/React.createElement(ResourceTag, {
+      key: "".concat(resource.id, "-").concat(resource.label),
+      color: getColor(resource.id),
+      className: "resource-tag"
+    }, resource.label);
+  }));
+};
+export default LineItemResources;

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

@@ -0,0 +1,11 @@
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import 'dayjs/locale/zh-tw';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/pt';
+import '../../../cartSkuCard/components/timeRange/index.less';
+interface LineItemTimeRangeProps {
+    dataSource?: any;
+}
+declare const LineItemTimeRange: (props: LineItemTimeRangeProps) => JSX.Element | null;
+export default LineItemTimeRange;

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

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import 'dayjs/locale/zh-tw';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/pt';
+import { locales } from '@pisell/utils';
+import Iconfont from "../../../../iconfont";
+import useEngineContext from "../../../../../hooks/useEngineContext";
+import "../../../cartSkuCard/components/timeRange/index.less";
+var localeTypes = {
+  'en-US': 'en',
+  'zh-CN': 'zh-cn',
+  'zh-HK': 'zh-tw',
+  ja: 'ja',
+  pt: 'pt'
+};
+var PREFIX = 'pisell-cart-sku-card';
+var formatMultiDayDate = function formatMultiDayDate(start, end, isEn) {
+  var format = isEn ? 'ddd, DD/MM/YYYY' : 'YYYY-MM-DD，ddd';
+  return "".concat(start.format(format), " ~ ").concat(end.format(format));
+};
+var formatBookingTime = function formatBookingTime(booking, locale) {
+  var start = dayjs(booking !== null && booking !== void 0 && booking.start_time ? "".concat((booking === null || booking === void 0 ? void 0 : booking.start_date) || '', " ").concat(booking.start_time) : booking === null || booking === void 0 ? void 0 : booking.start_date);
+  var end = dayjs(booking !== null && booking !== void 0 && booking.end_time ? "".concat((booking === null || booking === void 0 ? void 0 : booking.end_date) || '', " ").concat(booking.end_time) : booking === null || booking === void 0 ? void 0 : booking.end_date);
+  if (!start.isValid() || !end.isValid()) return '';
+  var isEn = locale === 'en-US' || locale === 'en';
+  var durationType = (booking === null || booking === void 0 ? void 0 : booking.sub_type) || (booking === null || booking === void 0 ? void 0 : booking.duration_type);
+  var startTime = (booking === null || booking === void 0 ? void 0 : booking.start_time) || start.format('HH:mm');
+  var endTime = (booking === null || booking === void 0 ? void 0 : booking.end_time) || end.format('HH:mm');
+  if (durationType === 'days' && !start.isSame(end, 'day')) {
+    var _duration = end.diff(start, 'day');
+    return "".concat(formatMultiDayDate(start, end, isEn), " (").concat(_duration).concat(locales.getText('pisell2.product.card.day')(_duration), ")");
+  }
+  var dateFormat = isEn ? 'DD/MM/YYYY' : 'YYYY-MM-DD';
+  var dateTime = start.isSame(end, 'day') ? isEn ? "".concat(startTime, " ~ ").concat(endTime, " ").concat(start.format(dateFormat)) : "".concat(start.format(dateFormat), " ").concat(startTime, " ~ ").concat(endTime) : isEn ? "".concat(startTime, " ").concat(start.format(dateFormat), " ~ ").concat(endTime, " ").concat(end.format(dateFormat)) : "".concat(start.format(dateFormat), " ").concat(startTime, " ~ ").concat(end.format(dateFormat), " ").concat(endTime);
+  if (!durationType) return dateTime;
+  if (durationType === 'minutes' || durationType === 'flexible') {
+    var _duration2 = end.diff(start, 'minute');
+    var hours = Math.floor(_duration2 / 60);
+    var minutes = _duration2 % 60;
+    return "".concat(dateTime, " (").concat(locales.getText('pisell2.product.card.hour.minute')(hours, minutes), ")");
+  }
+  var duration = end.diff(start, durationType);
+  return "".concat(dateTime, " (").concat(duration, ")");
+};
+var LineItemTimeRange = function LineItemTimeRange(props) {
+  var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4;
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? {} : _props$dataSource;
+  var context = useEngineContext();
+  var 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')) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.locale) || 'en-US';
+  var serviceTime = useMemo(function () {
+    dayjs.locale(localeTypes[locale]);
+    return formatBookingTime(dataSource, locale);
+  }, [dataSource, locale]);
+  if (!serviceTime) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__time-range")
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    className: "time-icon",
+    type: "pisell2-clock"
+  }), serviceTime);
+};
+export default LineItemTimeRange;

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

@@ -18,10 +18,10 @@
   &__delete-btn {
     width: 34px;
     height: 34px;
-    border: 1px solid rgba(255, 255, 255, 0.35);
+    border: 1px solid var(--Gray-300, #d0d5dd);
     border-radius: 8px;
-    background: rgba(255, 255, 255, 0.12);
-    color: #fff;
+    background: var(--Gray-100, #f2f4f7);
+    color: var(--Gray-500, #667085);
     cursor: pointer;
     padding: 0;
     display: inline-flex;
@@ -87,10 +87,10 @@
   }
 
   &__status {
-    border: 1px solid #0f1d40;
+    border: 1px solid rgba(16, 24, 40, 0.12);
     border-radius: 8px;
-    background: #0f1d40;
-    color: #fff;
+    background: rgba(255, 255, 255, 0.72);
+    color: #101828;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -103,13 +103,25 @@
     line-height: 20px;
     cursor: pointer;
     flex-shrink: 0;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
 
     .pisell-lowcodeicon-down,
     .anticon {
       font-size: 12px;
     }
 
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: rgba(16, 24, 40, 0.18);
+      background: rgba(255, 255, 255, 0.86);
+      color: #101828;
+    }
+
     &:disabled {
+      border-color: rgba(16, 24, 40, 0.12);
+      background: rgba(255, 255, 255, 0.72);
+      color: #101828;
       cursor: default;
     }
   }
@@ -130,11 +142,10 @@
   }
 
   &__booking-detail {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    gap: 12px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     padding: 8px;
-    background: #fff;
   }
 
   &__booking-field {