@pisell/private-materials 3.0.73 → 3.0.75

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

@@ -0,0 +1,553 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/booking/info/service/addTimeModal/index.tsx
+var addTimeModal_exports = {};
+__export(addTimeModal_exports, {
+  default: () => addTimeModal_default
+});
+module.exports = __toCommonJS(addTimeModal_exports);
+var import_react = __toESM(require("react"));
+var import_drawer = __toESM(require("../../../components/drawer"));
+var import_model = require("../../model");
+var import_antd = require("antd");
+var import_index = require("./index.less");
+var import_utils = require("@pisell/utils");
+var import_ahooks = require("ahooks");
+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"));
+var numberList = (0, import_utils.createArray)(100, (d, i) => {
+  let item = {
+    label: i + 1,
+    value: i + 1
+  };
+  return item;
+});
+var AddTimeModal = () => {
+  var _a, _b, _c, _d, _e;
+  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 [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 { interaction } = (_a = context.appHelper) == null ? void 0 : _a.utils;
+  const statusMap = {
+    available: {
+      label: import_utils.locales.getText("page.booking.text.available"),
+      color: "#079455"
+    },
+    fully_booked: {
+      label: import_utils.locales.getText("page.booking.text.fully-booked"),
+      color: "#DC6803"
+    },
+    unavailable: {
+      label: import_utils.locales.getText("page.booking.text.unavailable"),
+      color: "#98A2B3"
+    }
+  };
+  const updateServices = (0, import_ahooks.useDebounceFn)(
+    () => {
+      createNewServices();
+    },
+    { wait: 200 }
+  );
+  const transaction_habit_selection = (0, import_react.useMemo)(() => {
+    var _a2, _b2, _c2;
+    return ((_c2 = (_b2 = (_a2 = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a2.config) == null ? void 0 : _b2.information_tab) == null ? void 0 : _c2.transaction_habit_selection) || {
+      type: "service_now_pay_later",
+      button_rows: 1
+    };
+  }, [(_c = (_b = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _b.config) == null ? void 0 : _c.information_tab]);
+  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);
+  }, [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) || [];
+    let item = list.find(
+      (d) => {
+        var _a3, _b2;
+        return d.form_record_id == ((_b2 = (_a3 = state.service.cacheItem) == null ? void 0 : _a3._extend) == null ? void 0 : _b2.relation_id);
+      }
+    );
+    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) {
+      return { status: statusMap.unavailable };
+    }
+    try {
+      let _extend = { ...state.service.cacheItem._extend };
+      _extend.endDate = _extend.endDate.add(time, "minutes");
+      _extend.start_date = _extend.startDate;
+      _extend.end_date = _extend.endDate;
+      _extend.end_time = _extend.endDate.format("HH:mm");
+      _extend.start_time = _extend.startDate.format("HH:mm");
+      _extend.duration = import_utils3.flexibleObj.add(_extend.duration, time);
+      if ((0, import_utils3.isNowTime)(_extend.start_time)) {
+        _extend.start_time = (0, import_utils3.getNowTime)();
+      }
+      const startText = _extend.startDate.format("hh:mm A");
+      let endText = _extend.endDate.format("hh:mm A");
+      if (_extend.endDate.isAfter(_extend.startDate, "day")) {
+        endText = import_utils.locales.getText("pisell1.text.tomorrow") + endText;
+      }
+      let timeItem = currentResource == null ? void 0 : currentResource.times.find(
+        (_time) => _time.item_id === _extend.relation_id
+      );
+      const res = (0, import_utils3.getResourceTimeIsUsable)(timeItem, {
+        ...state.service.cacheItem,
+        _extend: {
+          ...state.service.cacheItem._extend,
+          ..._extend
+        }
+      });
+      if (!((_b2 = res._extend) == null ? void 0 : _b2.isUsable)) {
+        return {
+          // maxEndTime:
+          status: statusMap.unavailable,
+          message: `${currentResource.room_name || currentResource.name} ${import_utils.locales.getText("pisell2.text.status.service-error-2")}`
+        };
+      }
+    } catch (err) {
+    }
+    return { status: statusMap.available };
+  };
+  const _getAddTimeProducts = async () => {
+    var _a2, _b2, _c2, _d2;
+    const data = await (0, import_serve.getAddTimeProducts)(
+      {
+        skip: 1,
+        num: 500,
+        open_quotation: 1,
+        schedule_date: state.date.value.format("YYYY-MM-DD"),
+        customer_id: (0, import_utils3.isWalkIn)((_b2 = (_a2 = state.client) == null ? void 0 : _a2.value) == null ? void 0 : _b2.id) ? void 0 : (_d2 = (_c2 = state.client) == null ? void 0 : _c2.value) == null ? void 0 : _d2.id,
+        extension_type: ["product_add_time"]
+      },
+      {
+        useCache: true
+      }
+    );
+    return (data == null ? void 0 : data.list) || [];
+  };
+  const getTimeProducts = async () => {
+    setLoading("list");
+    const newList = await _getAddTimeProducts();
+    let list = newList.map((d) => {
+      let isUsable = (0, import_utils2.isUsableProduct)(d.add_time, state.service.cacheItem);
+      return {
+        ...d,
+        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 && d.times.length).sort((a, b) => b.sort - a.sort);
+    setRenderList(list);
+    if (list.length) {
+      setDefaultProduct(list);
+    }
+    setLoading("");
+    setIsEdit(true);
+  };
+  const setDefaultProduct = (list) => {
+    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) {
+      getTimeProducts();
+      originServices.current = state.service;
+    } else {
+      updateServices.run();
+    }
+  }, [state.service.addTimeModal]);
+  const onSelectItem = (pItem, item) => {
+    setRecordKey(import_utils2.addTimeRowKey.create(pItem.id, item.value));
+    setIsEdit(true);
+    updateServices.run();
+  };
+  const newService = (0, import_react.useMemo)(() => {
+    if (!currentProduct || !state.service.cacheItem) {
+      return null;
+    }
+    const relation_product = {
+      product_add_schedule_time: currentTime,
+      num: number,
+      price: currentTimeItem.price || 0,
+      product_id: currentProduct.id,
+      discount_amount: 0,
+      product_discount_reason: "",
+      is_charge_tax: currentProduct.is_charge_tax,
+      discountway: "num",
+      discount_type: "discount"
+    };
+    let _extend = { ...state.service.cacheItem._extend };
+    let relation_products = [relation_product];
+    _extend.endDate = _extend.endDate.add(
+      relation_product.product_add_schedule_time,
+      "minutes"
+    );
+    const start_date = _extend.startDate.format("YYYY-MM-DD");
+    const end_date = _extend.endDate.format("YYYY-MM-DD");
+    const end_time = _extend.endDate.format("HH:mm");
+    let start_time = _extend.startDate.format("HH:mm");
+    let duration = import_utils3.flexibleObj.add(
+      _extend.duration,
+      relation_product.product_add_schedule_time
+    );
+    if ((0, import_utils3.isNowTime)(_extend.start_time)) {
+      start_time = (0, import_utils3.getNowTime)();
+    }
+    _extend.relation_details = (_extend.relation_details || []).concat(
+      relation_products
+    );
+    _extend.duration = duration;
+    _extend.start_time = start_time;
+    _extend.end_time = end_time;
+    _extend.start_date = start_date;
+    _extend.end_date = end_date;
+    let data = {
+      id: _extend.id,
+      relation_id: _extend.relation_id,
+      like_status: _extend.like_status,
+      relation_type: _extend.relation_type,
+      is_all: _extend.is_all,
+      schedule_id: _extend.schedule_id,
+      end_time,
+      sub_type: _extend.sub_type,
+      select_date: start_date,
+      start_time,
+      end_date,
+      start_date,
+      duration,
+      number: _extend.number || 1,
+      relation_products,
+      _extend
+    };
+    return data;
+  }, [
+    currentTime,
+    state.service.cacheItem,
+    currentProduct,
+    number,
+    currentTimeItem
+  ]);
+  const resetService = () => {
+    var _a2, _b2;
+    let _val = ((_a2 = originServices.current) == null ? void 0 : _a2.value) || [];
+    let _edit = (_b2 = originServices.current) == null ? void 0 : _b2.edit;
+    originServices.current = null;
+    dispatch({
+      type: "setService",
+      payload: {
+        value: _val,
+        edit: _edit
+      }
+    });
+  };
+  const createNewServices = () => {
+    var _a2;
+    let _list = ((_a2 = state.service) == null ? void 0 : _a2.value) || [];
+    if (!originServices.current) {
+      return;
+    }
+    if (state.service.addTimeModal) {
+      _list = _list.map((d) => {
+        let _item = {
+          ...d
+        };
+        if (_item._extend.id === (newService == null ? void 0 : newService.id)) {
+          _item = {
+            ..._item,
+            ...newService || {},
+            _extend: newService == null ? void 0 : newService._extend
+          };
+        }
+        return _item;
+      });
+      dispatch({
+        type: "setService",
+        payload: {
+          value: _list,
+          edit: true
+        }
+      });
+    } else {
+      resetService();
+    }
+  };
+  const goCheckout = async () => {
+    var _a2, _b2;
+    if (state.isTerminal) {
+      return (_b2 = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.postMessageToApp) == null ? void 0 : _b2.call(_a2, {
+        module: "booking",
+        key: "booking_checkout",
+        data: {
+          order_id: state.bookingId
+        }
+      });
+    }
+    state.action({
+      type: "pisell1.handlePayment",
+      data: {
+        orderId: state.bookingId
+      },
+      callback: () => {
+        state == null ? void 0 : state.callback();
+      }
+    });
+  };
+  const handleCheckout = async () => {
+    if (isEdit) {
+      await handleSave("checkout");
+    }
+    goCheckout();
+  };
+  const handleSave = async (loadingType = "save") => {
+    if (currentTime === null) {
+      return;
+    }
+    setLoading(loadingType);
+    await (0, import_serve.saveAddTimeProduct)({
+      orderId: state.bookingId,
+      params: {
+        ...newService,
+        _extend: void 0
+      }
+    });
+    setLoading("");
+    import_antd.message.success(import_utils.locales.getText("page.booking.text.add-time-success"));
+    onCancel();
+    if (loadingType === "checkout") {
+      return;
+    }
+    state == null ? void 0 : state.action("init");
+  };
+  (0, import_react.useEffect)(() => {
+    if (!state.modalOpen) {
+      onCancel();
+    }
+  }, [state.modalOpen]);
+  const onCancel = () => {
+    setIsEdit(false);
+    setRecordKey("");
+    resetService();
+    setTimeout(() => {
+      dispatch({
+        type: "setService",
+        payload: {
+          addTimeModal: false
+        }
+      });
+    }, 50);
+  };
+  const updateTime = (0, import_react.useMemo)(() => {
+    if (!newService) {
+      return "";
+    }
+    let startTime = newService.start_time;
+    let endTime = newService.end_time;
+    let hours = (0, import_utils3.getDiscountTime)(import_utils3.flexibleObj.getValue(newService.duration));
+    if (newService.start_date !== newService.end_date) {
+      const locale = state.locale;
+      const format = locale === "en" || locale === "en-US" ? "HH:mm DD/MM" : "MM-DD HH:mm";
+      startTime = (0, import_utils.formatDate)(
+        `${newService.start_date} ${newService.start_time}`,
+        format
+      );
+      endTime = (0, import_utils.formatDate)(
+        `${newService.end_date} ${newService.end_time}`,
+        format
+      );
+    }
+    return `${import_utils.locales.getText(
+      "page.booking.text.update-time"
+    )}: ${startTime} ~ ${endTime} (${hours})`;
+  }, [newService, state.locale]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_drawer.default,
+    {
+      open: state.service.addTimeModal,
+      title: import_utils.locales.getText("page.booking.text.add-time"),
+      rootClassName: "booking-server-wrap",
+      onClose: onCancel,
+      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,
+        {
+          message: currentTimeItem.status.message,
+          type: "warning",
+          showIcon: true,
+          style: { marginBottom: 12 }
+        }
+      ) : null, newService ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-summary-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-summary" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-summary-time" }, updateTime), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-summary-total" }, import_utils.locales.getText("pisell1.text.subtotal"), ":", " ", (0, import_utils.formatAmount)(
+        (currentTimeItem.price || 0) * number,
+        2,
+        state.amountSymbol
+      ))), ((_e = currentProduct == null ? void 0 : currentProduct.add_time) == null ? void 0 : _e.calculate_type) === "select_quantity" && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-add-time-quantity-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__booking-add-time-quantity" }, import_utils.locales.getText("page.booking.text.quantity")), " ", /* @__PURE__ */ import_react.default.createElement(
+        import_browserSelect.default,
+        {
+          value: number,
+          onChange: (e) => {
+            setNumber(Number(e.target.value));
+            updateServices.run();
+          },
+          className: "pisell-lowcode__booking-add-time-quantity-select",
+          options: numberList
+        }
+      ))) : null), /* @__PURE__ */ import_react.default.createElement(
+        import_footer.default,
+        {
+          state,
+          dispatch,
+          source: "addTime",
+          buttons: [
+            /* @__PURE__ */ import_react.default.createElement(
+              import_antd.Button,
+              {
+                className: "pisell-lowcode__booking-footer-buttons-item",
+                type: transaction_habit_selection.type === "service_now_pay_later" ? "default" : "primary",
+                disabled: loading === "list" || !isEdit || !currentTime,
+                onClick: handleCheckout,
+                loading: loading === "checkout"
+              },
+              import_utils.locales.getText("pisell2.text.checkout")
+            ),
+            /* @__PURE__ */ import_react.default.createElement(
+              import_antd.Button,
+              {
+                className: "pisell-lowcode__booking-footer-buttons-item",
+                type: transaction_habit_selection.type === "service_now_pay_later" ? "primary" : "default",
+                disabled: loading === "list" || !isEdit || !currentTime,
+                loading: loading === "save",
+                onClick: () => {
+                  handleSave("save");
+                }
+              },
+              import_utils.locales.getText("pisell2.text.save")
+            )
+          ]
+        }
+      ))
+    },
+    /* @__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: (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);
+            }
+          },
+          /* @__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: "" }))
+  );
+};
+var addTimeModal_default = AddTimeModal;

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

@@ -0,0 +1,138 @@
+.pisell-lowcode__booking-add-time-header {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.pisell-lowcode__booking-add-time-body {
+  padding: 10px 32px 30px;
+  display: flex;
+  flex-direction: column;
+  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-child-card {
+      flex: 0 0 calc(50% - 5px);
+      border-radius: 10px;
+
+      background: #FFF;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 20px;
+      cursor: pointer;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        cursor: pointer;
+        border-radius: 10px;
+        border: 1px solid var(--Gray-true-300, #D6D6D6);
+      }
+
+      &.pisell-lowcode__booking-add-time-child-card-active {
+        &::before {
+          border-color: #7f56d9;
+          border-width: 2px;
+        }
+      }
+
+      .pisell-lowcode__booking-add-time-child-card-left {
+
+        .pisell-lowcode__booking-add-time-child-card-left-time {
+          color: var(--Gray-900, #101828);
+          font-size: 20px;
+          font-style: normal;
+          font-weight: 500;
+        }
+
+        .pisell-lowcode__booking-add-time-child-card-left-price {
+          color: var(--Gray-500, #667085);
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+        }
+      }
+
+      .pisell-lowcode__booking-add-time-child-card-right {}
+    }
+  }
+
+  .pisell-lowcode__booking-add-time-footer {
+    width: 100%;
+  }
+}
+
+.pisell-lowcode__booking-add-time-total-wrap {
+  border-bottom: 1px solid var(--Gray-true-300, #f9fafb);
+  margin: -10px -32px 10px;
+  padding: 10px 32px 0;
+  background-color: #f3f4f6;
+
+  .pisell-lowcode__booking-add-time-summary-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: none;
+    margin: 0;
+    padding: 0 0 10px 0;
+
+    .pisell-lowcode__booking-add-time-summary {
+      padding-right: 20px;
+
+      .pisell-lowcode__booking-add-time-summary-time {}
+
+      .pisell-lowcode__booking-add-time-summary-total {}
+    }
+
+    .pisell-lowcode__booking-add-time-quantity-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+
+      .pisell-lowcode__booking-add-time-quantity {
+        margin-right: 14px;
+        color: var(--Gray-500, #667085);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      .pisell-lowcode__booking-add-time-quantity-select {
+        min-width: 75px;
+        border-radius: 30px;
+        height: 44px;
+        padding: 0 16px;
+        background-color: var(--Gray-true-200, #E5E5E5);
+      }
+    }
+  }
+}

package/lib/components/booking/info/service/addTimeModal/serve.d.ts

@@ -0,0 +1,5 @@
+export declare const getAddTimeProducts: (params: any, config: any) => Promise<any>;
+export declare const saveAddTimeProduct: ({ orderId, params }: {
+    orderId: number | string;
+    params: any;
+}) => Promise<any>;