@pisell/private-materials 3.0.74 → 3.0.76

package/es/components/booking/info/service/addTimeModal/utils.js

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import dayjs from "dayjs";
-import { getDiscountTime } from "../../../utils";
+import { getDiscountTime, getEndDate } from "../../../utils";
 import { locales } from '@pisell/utils';
 import { intersectionBy } from 'lodash';
 var getIsAddH = function getIsAddH(pre, current) {
@@ -19,59 +19,121 @@ var getIsAddH = function getIsAddH(pre, current) {
   }
   return getDiscountTime(currentH * 60);
 };
-export var getAddTimeSplits = function getAddTimeSplits(config, price) {
+
+/**
+ * @title: 根据商品生成加时列表
+ * @description: 
+ * @param {any} config
+ * @param {number} price
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-07-01 09:34
+ */
+export var getAddTimeSplits = function getAddTimeSplits(product, cacheItem, currentResourceTimeEndDate) {
+  var _product$add_time = product.add_time,
+    add_time = _product$add_time === void 0 ? {
+      calculate_type: "select_quantity",
+      // 最大时长
+      max_add_time: 30,
+      // 最小时长
+      min_add_time: 30,
+      // 关联产品
+      relation_product: {
+        type: "product_all",
+        products: []
+      },
+      // 单位切片
+      unit_duration: 30
+    } : _product$add_time,
+    _product$price = product.price,
+    price = _product$price === void 0 ? 0 : _product$price;
+
+  // 灵活时长
+  if (add_time.additional_time_options === 'unlimited') {
+    // 1. 当前服务的时长和结束时间
+    // 2. 当前资源的结束时间
+    // 3. 当前店铺的结束时间
+    var maxEndDate = getEndDate(cacheItem._extend.startDate, 'flexible', currentResourceTimeEndDate);
+    var _value = maxEndDate.diff(cacheItem._extend.endDate, 'minute');
+    // 店铺营业时间大于当前服务的结束时间, 则取店铺营业时间, 否则就不可选
+    if (_value > 0) {
+      return [{
+        label: locales.getText('page.booking.text.unlimited'),
+        value: _value,
+        price: price
+      }];
+    } else {
+      // 如果当前服务已经选择到了最大时间, 则不可选
+      return [];
+    }
+  }
+
+  // 开始时间
   var startTime = dayjs().startOf("day");
-  var endTime = startTime.add(config.max_add_time, "minute");
-  var timeSlice = (config === null || config === void 0 ? void 0 : config.unit_duration) || 5; // 切片时间间隔（分钟）
+
+  // 最大加时时间
+  var endTime = startTime.add(add_time.max_add_time, "minute");
+  var timeSlice = (add_time === null || add_time === void 0 ? void 0 : add_time.unit_duration) || 5; // 切片时间间隔（分钟）
 
   var arr = [];
   var currentTime = startTime;
   var lastDuration = 0;
   while (currentTime.isBefore(endTime)) {
     var nextTime = currentTime;
+
+    // 从最小加时时间开始计算
     if (lastDuration === 0) {
-      nextTime = nextTime.add(config.min_add_time, "minute");
+      nextTime = nextTime.add(add_time.min_add_time, "minute");
     } else {
       nextTime = currentTime.add(timeSlice, "minute");
     }
+
+    // 根据切片生成新的时间
     var durationValue = nextTime.diff(startTime, "minute");
 
-    // 添加小时标记
-    var isAddH = getIsAddH(lastDuration, durationValue);
-    console.log('isAddH', isAddH);
-    if (isAddH) {
-      arr.push({
-        label: isAddH,
-        value: 0,
-        readonly: true
-      });
-    }
+    // 根据时间 生成label
+    var durationLabel = "".concat(durationValue, " ").concat(locales.getText('pisell2.text.min'));
+
+    // 大于60分钟的格式化成小时
     if (durationValue >= 60) {
-      var durationLabel = getDiscountTime(durationValue);
-      arr.push({
-        label: durationLabel,
-        value: durationValue,
-        price: durationValue / timeSlice * price
-      });
-    } else {
-      var _durationLabel = "".concat(durationValue, " ").concat(locales.getText('pisell2.text.min'));
-      arr.push({
-        label: _durationLabel,
-        value: durationValue,
-        price: durationValue / timeSlice * price
-      });
+      durationLabel = getDiscountTime(durationValue);
     }
+    arr.push({
+      label: durationLabel,
+      value: durationValue,
+      price: durationValue / timeSlice * price
+    });
     lastDuration = durationValue;
     currentTime = nextTime;
   }
   return arr;
 };
-export var isUsableProduct = function isUsableProduct(relationProduct, currentItem) {
+
+/**
+ * @title: 判断当前商品是否可用
+ * @description: 
+ * @param {any} relationProduct
+ * @param {any} currentItem
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-07-01 09:33
+ */
+export var isUsableProduct = function isUsableProduct(addTime, currentItem) {
+  var _addTime$relation_pro;
   // 商品类型
-  var type = relationProduct.type;
+  var type = (_addTime$relation_pro = addTime.relation_product) === null || _addTime$relation_pro === void 0 ? void 0 : _addTime$relation_pro.type;
+  var relationProduct = addTime.relation_product || [];
   if (!currentItem) {
     return false;
   }
+  if (addTime.additional_time_options === 'unlimited') {
+    var maxEndDate = getEndDate(currentItem._extend.startDate, 'flexible', '');
+    // 当前服务的结束时间大于店铺的营业时间, 过滤
+    if (currentItem._extend.endDate.isAfter(maxEndDate)) {
+      return false;
+    }
+  }
+
   // 全部商品
   if (type === "product_all") {
     return true;
@@ -93,4 +155,20 @@ export var isUsableProduct = function isUsableProduct(relationProduct, currentIt
       });
     }
   }
+};
+export var addTimeRowKey = {
+  // 创建, 增加前缀
+  create: function create(product_id, time) {
+    return "".concat(product_id, "_").concat(time);
+  },
+  // 格式化, 去除前缀
+  getValue: function getValue(str) {
+    var arr = str.split("_");
+    var id = arr[0] || 0;
+    var time = arr[1] || 0;
+    return {
+      product_id: Number(id),
+      time: time === 'flexible' ? time : Number(arr[1] || 0)
+    };
+  }
 };

package/es/components/booking/locales.d.ts

@@ -154,6 +154,7 @@ declare const _default: {
         'page.booking.text.unavailable': string;
         'page.booking.text.available': string;
         'page.booking.text.fully-booked': string;
+        'page.booking.text.unlimited': string;
         'pisell2.text.terminal-edit-message': string;
     };
     'zh-CN': {
@@ -312,6 +313,7 @@ declare const _default: {
         'page.booking.text.unavailable': string;
         'page.booking.text.available': string;
         'page.booking.text.fully-booked': string;
+        'page.booking.text.unlimited': string;
     };
     'zh-HK': {
         'pisell2.text.refunded-amount': string;
@@ -469,6 +471,7 @@ declare const _default: {
         'page.booking.text.unavailable': string;
         'page.booking.text.available': string;
         'page.booking.text.fully-booked': string;
+        'page.booking.text.unlimited': string;
     };
 };
 export default _default;

package/es/components/booking/locales.js

@@ -169,6 +169,7 @@ export default {
     'page.booking.text.unavailable': 'Unavailable',
     'page.booking.text.available': 'Available',
     'page.booking.text.fully-booked': 'Fully booked',
+    'page.booking.text.unlimited': 'Unlimited',
     'pisell2.text.terminal-edit-message': "This operation cannot be performed. To proceed, please use the Pisell Terminal."
   },
   'zh-CN': {
@@ -346,7 +347,8 @@ export default {
     'page.booking.text.add-time-success': '加时成功',
     'page.booking.text.unavailable': '不可用',
     'page.booking.text.available': '可用',
-    'page.booking.text.fully-booked': '已约满'
+    'page.booking.text.fully-booked': '已约满',
+    'page.booking.text.unlimited': '无限制'
   },
   'zh-HK': {
     'pisell2.text.refunded-amount': '已退金額',
@@ -523,6 +525,7 @@ export default {
     'page.booking.text.add-time-success': '加時成功!',
     'page.booking.text.unavailable': '不可用',
     'page.booking.text.available': '可用',
-    'page.booking.text.fully-booked': '已約滿'
+    'page.booking.text.fully-booked': '已約滿',
+    'page.booking.text.unlimited': '無限制'
   }
 };

package/lib/components/booking/components/drawer/index.d.ts

@@ -4,6 +4,7 @@ import "./index.less";
 export interface PisellDrawerProps extends DrawerProps {
     header?: React.ReactNode;
     titleNoWrap?: boolean;
+    hideScrollBar?: boolean;
 }
 /**
  * @title: 自定义抽屉

package/lib/components/booking/components/drawer/index.js

@@ -38,6 +38,7 @@ var import_ArrowLeft = __toESM(require("@pisell/icon/es/ArrowLeft"));
 var import_index = require("./index.less");
 var import_classnames = __toESM(require("classnames"));
 var Drawer = (props) => {
+  const { hideScrollBar = true } = props;
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Drawer,
     {
@@ -45,6 +46,9 @@ var Drawer = (props) => {
       closable: false,
       zIndex: 999,
       ...props,
+      className: (0, import_classnames.default)("pisell-lowcode__booking-drawer", props.className, {
+        "pisell-lowcode__booking-drawer-hide-scrollbar": hideScrollBar
+      }),
       title: false,
       bodyStyle: { padding: 0 },
       push: false,

package/lib/components/booking/components/drawer/index.less

@@ -28,12 +28,19 @@
   }
 }
 
-.pisell-lowcode-drawer-body {
-  &::-webkit-scrollbar {
-    display: block;
+
+.pisell-lowcode__booking-drawer-hide-scrollbar {
+  &.pisell-lowcode-drawer-body {
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
   }
 }
 
+
+
 .pisell-lowcode__booking-drawer-title-no-wrap {
   display: inline;
 }

package/lib/components/booking/info/service/actions/index.js

@@ -59,7 +59,7 @@ var Actions = ({ currentService }) => {
   };
   const addTimeProducts = (0, import_react.useMemo)(() => {
     return (state.addTimeProducts || []).some(
-      (item) => (0, import_utils2.isUsableProduct)(item.add_time.relation_product, currentService)
+      (item) => (0, import_utils2.isUsableProduct)(item.add_time, currentService)
     );
   }, [state.addTimeProducts, currentService]);
   const showAddTimeButton = (0, import_react.useMemo)(() => {

package/lib/components/booking/info/service/addService/index.js

@@ -47,7 +47,19 @@ var import_utils2 = require("./utils");
 var import_utils3 = require("../../../utils");
 var import_utils4 = require("@pisell/utils");
 var import_ahooks = require("ahooks");
-var shopList = [2886, 4422, 5538, 6930, 6814, 6813, 6812, 6087, 6303, 6080];
+var shopList = [
+  2886,
+  4422,
+  5538,
+  6930,
+  6814,
+  6813,
+  6812,
+  6087,
+  6303,
+  6080,
+  6978
+];
 var Info = () => {
   var _a, _b, _c, _d;
   const [search, setSearch] = (0, import_react.useState)("");

package/lib/components/booking/info/service/addTimeModal/index.js

@@ -43,6 +43,7 @@ var import_footer = __toESM(require("../../../components/footer"));
 var import_serve = require("./serve");
 var import_utils2 = require("./utils");
 var import_classnames = __toESM(require("classnames"));
+var import_dayjs = __toESM(require("dayjs"));
 var import_browserSelect = __toESM(require("../../../components/browserSelect"));
 var import_utils3 = require("../../../utils");
 var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
@@ -58,13 +59,12 @@ var AddTimeModal = () => {
   const { state, dispatch } = (0, import_react.useContext)(import_model.Context);
   const [isEdit, setIsEdit] = (0, import_react.useState)(false);
   const [loading, setLoading] = (0, import_react.useState)("");
-  const [currentProductId, setCurrentProductId] = (0, import_react.useState)(null);
-  const [currentTime, setCurrentTime] = (0, import_react.useState)(null);
+  const [recordKey, setRecordKey] = (0, import_react.useState)("");
   const [number, setNumber] = (0, import_react.useState)(1);
   const originServices = (0, import_react.useRef)([]);
   const [renderList, setRenderList] = (0, import_react.useState)([]);
   const context = (0, import_useEngineContext.default)();
-  const { isTerminal, interaction, store } = (_a = context.appHelper) == null ? void 0 : _a.utils;
+  const { interaction } = (_a = context.appHelper) == null ? void 0 : _a.utils;
   const statusMap = {
     available: {
       label: import_utils.locales.getText("page.booking.text.available"),
@@ -92,17 +92,22 @@ var AddTimeModal = () => {
       button_rows: 1
     };
   }, [(_c = (_b = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _b.config) == null ? void 0 : _c.information_tab]);
-  const addTimeProducts = (0, import_react.useMemo)(() => {
-    return (renderList || []).map((d) => {
-      return {
-        label: d.title,
-        value: d.id
-      };
-    });
-  }, [renderList, state.service.cacheItem]);
+  const currentProductId = (0, import_react.useMemo)(() => {
+    return import_utils2.addTimeRowKey.getValue(recordKey).product_id;
+  }, [recordKey]);
+  const currentTime = (0, import_react.useMemo)(() => {
+    let _time = import_utils2.addTimeRowKey.getValue(recordKey).time || "";
+    return _time;
+  }, [recordKey]);
   const currentProduct = (0, import_react.useMemo)(() => {
-    return (renderList || []).find((d) => d.id === currentProductId);
+    return (renderList || []).find((d) => d.id == currentProductId);
   }, [renderList, currentProductId]);
+  const currentTimeItem = (0, import_react.useMemo)(() => {
+    var _a2;
+    return ((_a2 = currentProduct == null ? void 0 : currentProduct.times) == null ? void 0 : _a2.find((d) => d.value == currentTime)) || {
+      price: 0
+    };
+  }, [currentTime, currentProduct]);
   const currentResource = (0, import_react.useMemo)(() => {
     var _a2;
     const list = ((_a2 = state.service) == null ? void 0 : _a2.resourcesOrigin) || [];
@@ -114,6 +119,24 @@ var AddTimeModal = () => {
     );
     return item;
   }, [state.service.cacheItem, state.service.resourcesOrigin]);
+  const currentResourceTimeEndDate = (0, import_react.useMemo)(() => {
+    var _a2;
+    try {
+      if (!currentResource || !((_a2 = state.service.cacheItem) == null ? void 0 : _a2._extend)) {
+        return "";
+      }
+      let timeItem = currentResource == null ? void 0 : currentResource.times.find(
+        (_time) => _time.item_id === state.service.cacheItem._extend.relation_id
+      );
+      const timeEndDate = (0, import_dayjs.default)(
+        timeItem.end_date + " " + timeItem.end_time
+      ).add(1, "second");
+      return timeEndDate;
+    } catch (err) {
+      console.log("err", err);
+    }
+    return "";
+  }, [state.service.cacheItem, currentResource]);
   const getTimeUsableStatus = (time) => {
     var _a2, _b2;
     if (!((_a2 = state.service.cacheItem) == null ? void 0 : _a2._extend) || !currentResource) {
@@ -147,53 +170,15 @@ var AddTimeModal = () => {
       });
       if (!((_b2 = res._extend) == null ? void 0 : _b2.isUsable)) {
         return {
+          // maxEndTime:
           status: statusMap.unavailable,
-          message: import_utils.locales.getText("pisell1.text.resource-error-message-2")(
-            currentResource.room_name || currentResource.name,
-            startText,
-            endText
-          )
+          message: `${currentResource.room_name || currentResource.name} ${import_utils.locales.getText("pisell2.text.status.service-error-2")}`
         };
       }
     } catch (err) {
     }
     return { status: statusMap.available };
   };
-  const times = (0, import_react.useMemo)(() => {
-    let config = (currentProduct == null ? void 0 : currentProduct.add_time) || {
-      calculate_type: "select_quantity",
-      // 最大时长
-      max_add_time: 30,
-      // 最小时长
-      min_add_time: 30,
-      // 关联产品
-      relation_product: { type: "product_all", products: [] },
-      // 单位切片
-      unit_duration: 30
-    };
-    return (0, import_utils2.getAddTimeSplits)(config, (currentProduct == null ? void 0 : currentProduct.price) || 0).map((d) => {
-      return {
-        ...d,
-        status: getTimeUsableStatus(d.value)
-      };
-    });
-  }, [currentProduct]);
-  (0, import_react.useEffect)(() => {
-    if (state.service.addTimeModal && state.service.cacheItem && currentProduct && times.length) {
-      if (!currentTime) {
-        setCurrentTime(times[0].value);
-        setNumber(1);
-        setIsEdit(true);
-        updateServices.run();
-      }
-    }
-  }, [
-    times,
-    currentTime,
-    state.service.addTimeModal,
-    state.service.cacheItem,
-    currentProduct
-  ]);
   const _getAddTimeProducts = async () => {
     var _a2, _b2, _c2, _d2;
     const data = await (0, import_serve.getAddTimeProducts)(
@@ -215,23 +200,37 @@ var AddTimeModal = () => {
     setLoading("list");
     const newList = await _getAddTimeProducts();
     let list = newList.map((d) => {
-      let isUsable = (0, import_utils2.isUsableProduct)(
-        d.add_time.relation_product,
-        state.service.cacheItem
-      );
+      let isUsable = (0, import_utils2.isUsableProduct)(d.add_time, state.service.cacheItem);
       return {
         ...d,
-        usable: isUsable
+        usable: isUsable,
+        // 可用的商品生成加时列表
+        times: isUsable ? (0, import_utils2.getAddTimeSplits)(
+          d,
+          state.service.cacheItem,
+          currentResourceTimeEndDate
+        ).map((time) => {
+          return {
+            ...time,
+            status: getTimeUsableStatus(time.value)
+          };
+        }) : void 0
       };
-    }).filter((d) => d.usable).sort((a, b) => b.sort - a.sort);
+    }).filter((d) => d.usable && d.times.length).sort((a, b) => b.sort - a.sort);
     setRenderList(list);
     if (list.length) {
       setDefaultProduct(list);
     }
     setLoading("");
+    setIsEdit(true);
   };
   const setDefaultProduct = (list) => {
-    setCurrentProductId(list[0].id);
+    try {
+      let productId = list[0].id;
+      let time = list[0].times[0].value;
+      setRecordKey(import_utils2.addTimeRowKey.create(productId, time));
+    } catch (err) {
+    }
   };
   (0, import_ahooks.useUpdateEffect)(() => {
     if (state.service.addTimeModal) {
@@ -241,16 +240,13 @@ var AddTimeModal = () => {
       updateServices.run();
     }
   }, [state.service.addTimeModal]);
-  const onSelectItem = (item) => {
-    setCurrentTime(item == null ? void 0 : item.value);
+  const onSelectItem = (pItem, item) => {
+    setRecordKey(import_utils2.addTimeRowKey.create(pItem.id, item.value));
     setIsEdit(true);
     updateServices.run();
   };
-  const currentTimeItem = (0, import_react.useMemo)(() => {
-    return times.find((d) => d.value === currentTime) || { price: 0 };
-  }, [currentTime, times]);
   const newService = (0, import_react.useMemo)(() => {
-    if (!currentProduct || !currentProduct || !state.service.cacheItem) {
+    if (!currentProduct || !state.service.cacheItem) {
       return null;
     }
     const relation_product = {
@@ -406,10 +402,6 @@ var AddTimeModal = () => {
     }
     state == null ? void 0 : state.action("init");
   };
-  const productChange = (e) => {
-    setCurrentProductId(e);
-    setCurrentTime(null);
-  };
   (0, import_react.useEffect)(() => {
     if (!state.modalOpen) {
       onCancel();
@@ -417,8 +409,7 @@ var AddTimeModal = () => {
   }, [state.modalOpen]);
   const onCancel = () => {
     setIsEdit(false);
-    setCurrentProductId(null);
-    setCurrentTime(null);
+    setRecordKey("");
     resetService();
     setTimeout(() => {
       dispatch({
@@ -429,7 +420,6 @@ var AddTimeModal = () => {
       });
     }, 50);
   };
-  console.log("newService.duration", currentTimeItem);
   const updateTime = (0, import_react.useMemo)(() => {
     if (!newService) {
       return "";
@@ -460,18 +450,9 @@ var AddTimeModal = () => {
       title: import_utils.locales.getText("page.booking.text.add-time"),
       rootClassName: "booking-server-wrap",
       onClose: onCancel,
-      header: addTimeProducts.length > 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-header" }, /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Select,
-        {
-          options: addTimeProducts,
-          style: { width: "100%" },
-          size: "large",
-          loading: loading === "list",
-          value: currentProductId,
-          onChange: productChange
-        }
-      )),
       footerStyle: { padding: "10px 32px 20px" },
+      hideScrollBar: false,
+      bodyStyle: { position: "relative" },
       footer: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-total-wrap" }, currentTimeItem && ((_d = currentTimeItem == null ? void 0 : currentTimeItem.status) == null ? void 0 : _d.message) ? /* @__PURE__ */ import_react.default.createElement(
         import_antd.Alert,
         {
@@ -530,36 +511,42 @@ var AddTimeModal = () => {
         }
       ))
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-body" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { loading: loading === "list", active: true, round: true }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-list" }, times.map((child, index) => {
-      var _a2, _b2, _c2, _d2;
-      if (child.readonly) {
-        return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-hours" }, child.label);
-      }
-      return /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(
-            "pisell-lowcode__booking-add-time-child-card",
-            {
-              "pisell-lowcode__booking-add-time-child-card-active": currentTime === child.value
-            }
-          ),
-          onClick: () => {
-            onSelectItem(child);
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left-time" }, child.label), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left-price" }, (0, import_utils.formatAmount)(child.price, 2, state.amountSymbol))),
-        /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-body" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { loading: loading === "list", active: true, round: true }, /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, renderList.map((d) => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-hours" }, d.title), d.times ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-list" }, d.times.map((child) => {
+        var _a2, _b2, _c2, _d2;
+        return /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
-            className: "pisell-lowcode__booking-add-time-child-card-right",
-            style: {
-              color: (_b2 = (_a2 = child.status) == null ? void 0 : _a2.status) == null ? void 0 : _b2.color
+            className: (0, import_classnames.default)(
+              "pisell-lowcode__booking-add-time-child-card",
+              {
+                "pisell-lowcode__booking-add-time-child-card-active": recordKey === import_utils2.addTimeRowKey.create(d.id, child.value)
+              }
+            ),
+            onClick: () => {
+              if (!child.value) {
+                return;
+              }
+              onSelectItem(d, child);
             }
           },
-          (_d2 = (_c2 = child.status) == null ? void 0 : _c2.status) == null ? void 0 : _d2.label
-        )
-      );
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left-time" }, child.label), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left-price" }, (0, import_utils.formatAmount)(
+            child.price,
+            2,
+            state.amountSymbol
+          ))),
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: "pisell-lowcode__booking-add-time-child-card-right",
+              style: {
+                color: (_b2 = (_a2 = child.status) == null ? void 0 : _a2.status) == null ? void 0 : _b2.color
+              }
+            },
+            (_d2 = (_c2 = child.status) == null ? void 0 : _c2.status) == null ? void 0 : _d2.label
+          )
+        );
+      })) : null);
     }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "" }))
   );
 };

package/lib/components/booking/info/service/addTimeModal/index.less

@@ -10,22 +10,27 @@
   width: 100%;
   height: 100%;
 
+  .pisell-lowcode__booking-add-time-hours {
+    padding: 6px;
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    background: var(--Gray-50, #F9FAFB);
+    margin: 10px 0;
+    flex: 0 0 100%;
+    position: sticky;
+    top: 95px;
+    z-index: 1;
+  }
+
   .pisell-lowcode__booking-add-time-child-card-list {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 
-    .pisell-lowcode__booking-add-time-hours {
-      padding: 6px;
-      color: var(--Gray-900, #101828);
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      background: var(--Gray-50, #F9FAFB);
-      margin: 10px 0;
-      flex: 0 0 100%;
-    }
+
 
     .pisell-lowcode__booking-add-time-child-card {
       flex: 0 0 calc(50% - 5px);