@pisell/private-materials 3.0.28 → 3.0.30

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

@@ -13,7 +13,24 @@ declare class Request {
     };
 }
 export declare const request: Request;
+/**
+ * @title: 格式化持续时长用于展示
+ * @description:
+ * @param {number} service_times
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 14:00
+ */
 export declare const getDiscountTime: (service_times: number) => string;
+/**
+ * @title: 时间切片
+ * @description:
+ * @param {any} config
+ * @param {string} locale
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 13:59
+ */
 export declare const sliceDayIntoFiveMinutes: (config: any, locale: string) => {
     timeSlices: {
         label: string;
@@ -24,6 +41,26 @@ export declare const sliceDayIntoFiveMinutes: (config: any, locale: string) => {
         value: number;
     }[];
 };
+export declare const getNowTime: () => string;
+export declare const isNowTime: (time: string) => boolean;
+/**
+ * @title: 获取服务的开始时间, 如果是now 转换为当前的时间
+ * @description:
+ * @param {string} start_time
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 14:03
+ */
+export declare const getServeStartTime: (start_time: string) => string;
+/**
+ * @title: 格式化服务的 开始时间-结束时间-时长, 用于展示
+ * @description:
+ * @param {any} item
+ * @param {any} currentDate
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 14:04
+ */
 export declare const getServiceTime: (item: any, currentDate: any) => string;
 export declare const findNextSlice: ({ timeSlices, index, date }: {
     timeSlices: any[];

package/es/components/booking/utils.js

@@ -35,6 +35,15 @@ var Request = /*#__PURE__*/function () {
   return Request;
 }();
 export var request = new Request();
+
+/**
+ * @title: 格式化持续时长用于展示
+ * @description: 
+ * @param {number} service_times
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 14:00
+ */
 export var getDiscountTime = function getDiscountTime(service_times) {
   if (!service_times) {
     return "";
@@ -52,6 +61,16 @@ export var getDiscountTime = function getDiscountTime(service_times) {
     return str;
   }
 };
+
+/**
+ * @title: 时间切片
+ * @description: 
+ * @param {any} config
+ * @param {string} locale
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 13:59
+ */
 export var sliceDayIntoFiveMinutes = function sliceDayIntoFiveMinutes(config, locale) {
   var _locale = locale;
   var dayjsLocale = _locale === 'en-US' || _locale === 'en' ? 'en' : 'zh-cn';
@@ -92,8 +111,41 @@ export var sliceDayIntoFiveMinutes = function sliceDayIntoFiveMinutes(config, lo
     durationSlicesBasedOnTime: durationSlicesBasedOnTime
   };
 };
+
+//  获取当前时间
+export var getNowTime = function getNowTime() {
+  return dayjs().format("HH:mm");
+};
+export var isNowTime = function isNowTime(time) {
+  return time === 'now';
+};
+
+/**
+ * @title: 获取服务的开始时间, 如果是now 转换为当前的时间
+ * @description: 
+ * @param {string} start_time
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 14:03
+ */
+export var getServeStartTime = function getServeStartTime(start_time) {
+  if (isNowTime(start_time)) {
+    return getNowTime();
+  }
+  return start_time;
+};
+
+/**
+ * @title: 格式化服务的 开始时间-结束时间-时长, 用于展示
+ * @description: 
+ * @param {any} item
+ * @param {any} currentDate
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-04-26 14:04
+ */
 export var getServiceTime = function getServiceTime(item, currentDate) {
-  var startDate = dayjs(currentDate.format('YYYY-MM-DD') + ' ' + item._extend.start_time);
+  var startDate = dayjs(currentDate.format('YYYY-MM-DD') + ' ' + getServeStartTime(item._extend.start_time));
   var startTime = startDate.format("HH:mm");
   var endTime = startDate.add(flexibleObj.getValue(item._extend.duration), "minute").format("HH:mm");
   var duration = getDiscountTime(flexibleObj.getValue(item._extend.duration));
@@ -110,8 +162,11 @@ export var findNextSlice = function findNextSlice(_ref) {
 
   // 遍历时间切片数组，找到最接近的下一个切片时间
   for (var i = 0; i < timeSlices.length; i++) {
-    if (timeSlices[i].value >= currentTimeValue) {
-      return timeSlices[i].value;
+    // 排除掉当前时间
+    if (timeSlices[i].value !== 'now') {
+      if (timeSlices[i].value >= currentTimeValue) {
+        return timeSlices[i].value;
+      }
     }
   }
 
@@ -177,7 +232,7 @@ var formatTimes = function formatTimes(resourceItem, cacheItem) {
   // 可用的time列表
   var usableTimes = [];
   var _resourceItem = _objectSpread({}, resourceItem);
-  var startDate = dayjs(cacheItem._extend.start_date.format("YYYY-MM-DD") + ' ' + cacheItem._extend.start_time);
+  var startDate = dayjs(cacheItem._extend.start_date.format("YYYY-MM-DD") + ' ' + getServeStartTime(cacheItem._extend.start_time));
   var isFlexible = flexibleObj.isFlexible(cacheItem._extend.duration);
   // 循环times  区分可用和不可用的 并打上标记
   _resourceItem.times = _resourceItem.times.map(function (d) {
@@ -359,7 +414,7 @@ export var getEndDate = function getEndDate(startDate, duration, endDate) {
 // export const get
 
 export var getServiceTimes = function getServiceTimes(service) {
-  var startDate = dayjs(dayjs(service._extend.start_date).format("YYYY-MM-DD ") + service._extend.start_time);
+  var startDate = dayjs(dayjs(service._extend.start_date).format("YYYY-MM-DD ") + getServeStartTime(service._extend.start_time));
   var endDate = startDate.add(flexibleObj.getValue(service._extend.duration), "minute");
   return {
     startDate: startDate,
@@ -411,7 +466,6 @@ export var getErrorList = function getErrorList(resource, cacheItem) {
       }
     }
   }
-  console.log(cacheItem, "cacheItem");
   return list;
 };
 
@@ -493,7 +547,8 @@ export var getServerItemExtend = function getServerItemExtend(state, cacheItem,
     }
   } else {
     // 没有上一个商品  资源为 0
-    _extend.resource = 0;
+    // _extend.resource = 0;
+
     var findNextSliceProps = {
       timeSlices: timeObj.timeSlices,
       index: 0,
@@ -514,7 +569,15 @@ export var getServerItemExtend = function getServerItemExtend(state, cacheItem,
         _extend.resource = Number(resourceId);
       }
     }
-    _extend.start_time = findNextSlice(findNextSliceProps);
+    console.log("_extend", findNextSliceProps);
+
+    // 只有选择了带 HH:mm的日期才选中, 否则使用当前日期
+    if (findNextSliceProps.date && findNextSliceProps.date !== '00:00') {
+      _extend.start_time = findNextSlice(findNextSliceProps);
+    } else {
+      // 没有预设日期, 则使用当前 https://www.yuque.com/feg4xm/manual/tzvrnt05ifihkndg
+      _extend.start_time = 'now';
+    }
   }
   _extend = _objectSpread(_objectSpread({}, _extend), cacheItem._extend);
   return _extend;

package/es/index.d.ts

@@ -12,3 +12,4 @@ export { default as BookingStartTime } from './components/booking/materiels/star
 export { default as BookingDuration } from './components/booking/materiels/duration';
 export { default as BookingContacts } from './components/booking/materiels/contacts';
 export { default as ProductExtension } from './components/productExtension';
+export { default as BookingDeposit } from './components/booking/deposit';

package/es/index.js

@@ -15,4 +15,5 @@ export { default as BookingResources } from "./components/booking/materiels/reso
 export { default as BookingStartTime } from "./components/booking/materiels/startTime";
 export { default as BookingDuration } from "./components/booking/materiels/duration";
 export { default as BookingContacts } from "./components/booking/materiels/contacts";
-export { default as ProductExtension } from "./components/productExtension";
+export { default as ProductExtension } from "./components/productExtension";
+export { default as BookingDeposit } from "./components/booking/deposit";

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

@@ -66,7 +66,7 @@ var CollapsibleList = (props) => {
       arr = arr.slice(0, _maxLimit);
     }
     return arr;
-  }, [list.length, maxLimit]);
+  }, [list, maxLimit]);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {

package/lib/components/booking/components/footer/utils.js

@@ -82,7 +82,10 @@ var formatBookings = (data) => {
     const start_date = item._extend.startDate.format("YYYY-MM-DD");
     const end_date = item._extend.endDate.format("YYYY-MM-DD");
     const end_time = item._extend.endDate.format("HH:mm");
-    const start_time = item._extend.startDate.format("HH:mm");
+    let start_time = item._extend.startDate.format("HH:mm");
+    if ((0, import_utils.isNowTime)(item._extend.start_time)) {
+      start_time = (0, import_utils.getNowTime)();
+    }
     const total = Number(item._extend.total);
     const origin_total = Number(item._extend.origin_total);
     const discount_amount = origin_total - total;

package/lib/components/booking/deposit/ClientItem/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "./index.less";
+declare type ClientItemProps = {
+    data: {
+        cover: string;
+        name: string;
+        display_name: string;
+        nickname: string;
+        email: string;
+        phone: string;
+    };
+    coverSize?: number;
+    style?: React.CSSProperties;
+    className?: string;
+    walkInName?: string;
+};
+declare const ClientItem: (props: ClientItemProps) => React.JSX.Element;
+export default ClientItem;

package/lib/components/booking/deposit/ClientItem/index.js

@@ -0,0 +1,71 @@
+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/deposit/ClientItem/index.tsx
+var ClientItem_exports = {};
+__export(ClientItem_exports, {
+  default: () => ClientItem_default
+});
+module.exports = __toCommonJS(ClientItem_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_classnames = __toESM(require("classnames"));
+var import_User01 = __toESM(require("@pisell/icon/src/User01"));
+var import_utils2 = require("../../utils");
+var import_index = require("./index.less");
+var ClientItem = (props) => {
+  const { data, coverSize = 48, style, className, walkInName } = props;
+  const getNickname = (0, import_react.useCallback)(
+    (item) => {
+      if ((0, import_utils2.isWalkIn)(item == null ? void 0 : item.id)) {
+        return walkInName || import_utils.locales.getText("pisell2.text.select-a-customer");
+      }
+      return item.name || (item.display_name || "").trim() || (item.nickname || "").trim() || "";
+    },
+    [import_utils.locales.localeMap]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style,
+      className: (0, import_classnames.default)("pisell-lowcode__client-item", className)
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Avatar,
+      {
+        className: "pisell-lowcode__client-item-avatar",
+        src: import_utils.image.ali(data == null ? void 0 : data.cover, 100) || void 0,
+        size: coverSize,
+        icon: /* @__PURE__ */ import_react.default.createElement(import_User01.default, { className: "pisell-lowcode__client-item-avatar-icon" })
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__client-item-info" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__client-item-info-name" }, getNickname(data)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__client-item-info-desc" }, (data == null ? void 0 : data.email) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, data == null ? void 0 : data.email) : null, (data == null ? void 0 : data.phone) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, data == null ? void 0 : data.phone) : null))
+  );
+};
+var ClientItem_default = ClientItem;

package/lib/components/booking/deposit/ClientItem/index.less

@@ -0,0 +1,37 @@
+.pisell-lowcode__client-item {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  position: relative;
+  align-items: center;
+  padding: 0 20px;
+  .pisell-lowcode__client-item-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gray-100, #F2F4F7);
+    .pisell-lowcode__client-item-avatar-icon {
+      font-size: 24px;
+      color: #475467;
+    }
+  }
+  .pisell-lowcode__client-item-info {
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    .pisell-lowcode__client-item-info-name {
+      color: var(--text-text-1, #1B1B1B);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 22px;
+    }
+    .pisell-lowcode__client-item-info-desc {
+      color: var(--text-text-2, #777);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+}

package/lib/components/booking/deposit/DepositItem/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "./index.less";
+declare type DepositItemProps = {
+    status: "paid" | "unpaid";
+    onEdit: React.MouseEventHandler<HTMLSpanElement>;
+    customer: any;
+    totalAmountStr: string;
+    totalAmount: number;
+    orderId: number;
+    orderNumber: number;
+    handleGoOrderDetail: () => void;
+    generatePaymentLink: (orderId: number) => void;
+    depositAmount: number;
+    amountSymbol: string;
+    createdTime: string;
+    isPaid: boolean;
+    isBookingCancelled: boolean;
+};
+declare const DepositItem: (props: DepositItemProps) => React.JSX.Element;
+export default DepositItem;

package/lib/components/booking/deposit/DepositItem/index.js

@@ -0,0 +1,112 @@
+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/deposit/DepositItem/index.tsx
+var DepositItem_exports = {};
+__export(DepositItem_exports, {
+  default: () => DepositItem_default
+});
+module.exports = __toCommonJS(DepositItem_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_utils = require("@pisell/utils");
+var import_ClientItem = __toESM(require("../ClientItem"));
+var import_Edit05 = __toESM(require("@pisell/icon/src/Edit05"));
+var import_index = require("./index.less");
+var statusTagColor = {
+  unpaid: "#B2DDFF",
+  paid: "#ABEFC6"
+};
+var statusBgColor = {
+  unpaid: "#EFF8FF",
+  paid: "#ECFDF3"
+};
+var DepositItem = (props) => {
+  const {
+    status,
+    customer,
+    totalAmountStr,
+    onEdit,
+    orderId,
+    orderNumber,
+    handleGoOrderDetail,
+    generatePaymentLink,
+    depositAmount,
+    amountSymbol,
+    createdTime,
+    isPaid,
+    isBookingCancelled
+  } = props;
+  const statusText = {
+    unpaid: import_utils.locales.getText("pisell2.text.deposit-item-status-unpaid"),
+    paid: import_utils.locales.getText("pisell2.text.deposit-item-status-paid")
+  };
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  const items = [
+    {
+      key: "1",
+      disabled: isPaid || isBookingCancelled,
+      label: /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.deposit-generate-payment-link"))
+    }
+    // {
+    //   key: "2",
+    //   label: <div>发送邮件</div>,
+    // },
+  ];
+  const onClick = ({ key }) => {
+    if (key === "1") {
+      generatePaymentLink == null ? void 0 : generatePaymentLink(orderId);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-lowcode__deposit-item-header",
+      style: { backgroundColor: statusBgColor[status] }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-lowcode__deposit-status",
+        style: { backgroundColor: statusTagColor[status] }
+      },
+      statusText[status]
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-header-right" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__deposit-item-header-right-amount" }, (0, import_utils.formatAmount)(depositAmount, 2, amountSymbol)), !(isPaid || isBookingCancelled) && /* @__PURE__ */ import_react.default.createElement(
+      import_Edit05.default,
+      {
+        className: "pisell-lowcode__deposit-item-header-right-edit",
+        onClick: onEdit
+      }
+    ))
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-content-line1" }, import_utils.locales.getText("pisell2.text.deposit-order-no"), " ", orderNumber), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-content-line2" }, createdTime), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_ClientItem.default, { data: customer, coverSize: 40, walkInName: "Walk-In" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.deposit-order-total")), /* @__PURE__ */ import_react.default.createElement("div", null, totalAmountStr)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-action" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { block: true, size: "large", onClick: handleGoOrderDetail }, import_utils.locales.getText("pisell2.text.deposit-order-detail")), /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items, onClick }, placement: "bottom" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { block: true, type: "primary", size: "large" }, import_utils.locales.getText("pisell2.text.deposit-collect-deposit"), " ", /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null))))));
+};
+var DepositItem_default = DepositItem;

package/lib/components/booking/deposit/DepositItem/index.less

@@ -0,0 +1,88 @@
+.pisell-lowcode__deposit-item {
+  border-radius: 12px;
+  border: 1px solid var(--Gray-300, #D0D5DD);
+  background: var(--Base-White, #FFF);
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  overflow: hidden;
+  .pisell-lowcode__deposit-item-header {
+    background: var(--Blue-50, #EFF8FF);
+    display: flex;
+    padding: 20px;
+    .pisell-lowcode__deposit-status {
+      display: flex;
+      padding: 6px 16px;
+      align-items: center;
+      border-radius: 16px;
+      color: var(--Base-Black, #000);
+      text-align: center;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+    }
+    .pisell-lowcode__deposit-item-header-right {
+      flex: 1;
+      text-align: right;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      .pisell-lowcode__deposit-item-header-right-amount {
+        color: var(--Warning-600, #DC6803);
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 30px; /* 150% */
+        margin-right: 8px;
+      }
+      .pisell-lowcode__deposit-item-header-right-edit{
+        font-size: 24px;
+        color: #1570EF;
+        cursor: pointer;
+      }
+    }
+  }
+  .pisell-lowcode__deposit-item-content {
+    border-top: 1px solid #EAECF0;
+    border-bottom: 1px solid #EAECF0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+    padding: 32px 0;
+    .pisell-lowcode__deposit-item-content-line1 {
+      color: var(--Gray-600, #475467);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+    }
+    .pisell-lowcode__deposit-item-content-line2 {
+      color: #000;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px; /* 150% */
+    }
+  }
+  .pisell-lowcode__deposit-item-footer {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    .pisell-lowcode__deposit-item-footer-total {
+      display: flex;
+      justify-content: space-between;
+
+      color: var(--Gray-900, #101828);
+      text-align: right;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px; /* 150% */
+    }
+    .pisell-lowcode__deposit-item-footer-action {
+      display: flex;
+      gap: 20px;
+    }
+  }
+}

package/lib/components/booking/deposit/EditDepositModal/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./index.less";
+declare type EditDepositModalProps = {
+    amountSymbol: string;
+    onChange: (amount: number) => void;
+    totalAmount: number;
+};
+declare const _default: React.ForwardRefExoticComponent<EditDepositModalProps & React.RefAttributes<unknown>>;
+export default _default;