@pisell/private-materials 3.0.13 → 3.0.14-2.gray

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

@@ -19,6 +19,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/booking/components/footer/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
+  formatProductBundle: () => formatProductBundle,
+  formatProductOption: () => formatProductOption,
   formatValues: () => formatValues
 });
 module.exports = __toCommonJS(utils_exports);
@@ -42,28 +44,87 @@ var formatCustomer = (data) => {
     country_calling_code: (_l = (_k = data.client) == null ? void 0 : _k.value) == null ? void 0 : _l.country_calling_code
   };
 };
+var formatProductOption = (option) => {
+  if (!option) {
+    return [];
+  }
+  return option.map((d) => {
+    return {
+      "num": d.num,
+      "option_group_item_id": d.product_option_item_id,
+      "option_group_id": d.option_group_id
+    };
+  });
+};
+var formatProductBundle = (bundle) => {
+  if (!bundle) {
+    return;
+  }
+  return bundle.map((d) => {
+    return {
+      "bundle_group_id": d.group_id,
+      "bundle_id": d.id,
+      "bundle_product_id": d._bundle_product_id,
+      "bundle_variant_id": d.bundle_variant_id,
+      "num": d.num,
+      "extension_id": d.extension_id,
+      "extension_type": d.extension_type,
+      "option": formatProductOption(d.option)
+    };
+  });
+};
+var getSubType = (item) => {
+  var _a;
+  const _type = (_a = item.duration) == null ? void 0 : _a.type;
+  if (_type && _type !== "days") {
+    return _type;
+  }
+  return "minutes";
+};
+var formatRelationDetails = (list) => {
+  return (list || []).map((item) => {
+    return {
+      num: item.product_quantity,
+      price: item.payment_price || 0,
+      product_id: item.product_id,
+      is_charge_tax: item.is_charge_tax,
+      order_detail_id: item.order_detail_id
+    };
+  });
+};
 var formatBookings = (data) => {
   const list = data.service.value;
+  const eventOtherParams = data.eventOtherParams;
   let bookings = [];
   bookings = list.map((item) => {
-    let start_date = item._extend.startDate.format("YYYY-MM-DD");
+    var _a, _b;
+    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");
     let start_time = item._extend.startDate.format("HH:mm");
-    let end_date = item._extend.endDate.format("YYYY-MM-DD");
-    let end_time = item._extend.endDate.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;
     return {
       "product": {
         "num": item._extend.quantity,
-        "price": item.price,
+        "price": item._extend.price,
         "product_id": item.id,
-        "discount_amount": Number(item.price) - Number(item._extend.price),
+        "discount_amount": discount_amount,
         "product_discount_reason": item._extend.discount_reason || "",
         "is_charge_tax": item.is_charge_tax,
         "note": "",
         "discountway": item._extend.discountway || "num",
         "discount_per": item._extend.discount_per,
         "discount_type": item._extend.discount_type || "discount",
-        "order_detail_id": item._extend.order_detail_id || 0
+        "order_detail_id": item._extend.order_detail_id || 0,
+        "product_bundle": formatProductBundle((_b = (_a = item._extend) == null ? void 0 : _a.other) == null ? void 0 : _b.bundle),
+        "bundle_edit": item._extend.bundle_edit
       },
+      "relation_products": formatRelationDetails(item._extend.relation_details),
       "id": item.booking_id || 0,
       "relation_id": item._extend.relation_id,
       "like_status": item._extend.like_status || "common",
@@ -71,35 +132,39 @@ var formatBookings = (data) => {
       "is_all": false,
       "schedule_id": item._extend.schedule_id,
       "end_time": end_time,
-      "sub_type": "days",
+      "sub_type": getSubType(item),
       "select_date": start_date,
       "start_time": start_time,
       "end_date": end_date,
       "start_date": start_date,
       "duration": import_utils.flexibleObj.getValue(item._extend.duration),
-      "number": item._extend.number || 1
+      "number": item._extend.number || 1,
+      ...eventOtherParams || {}
     };
   });
   return bookings;
 };
-var formatHolder = (data, values) => {
+var formatHolder = (state, values) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const form_id = ((_d = (_c = (_b = (_a = data == null ? void 0 : data.bookingConfig) == null ? void 0 : _a.config) == null ? void 0 : _b.basic) == null ? void 0 : _c.appointment_subject) == null ? void 0 : _d.form_id) || 0;
-  const petValue = ((_e = data.pet.value) == null ? void 0 : _e[form_id]) || [];
+  const form_id = ((_d = (_c = (_b = (_a = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a.config) == null ? void 0 : _b.basic) == null ? void 0 : _c.appointment_subject) == null ? void 0 : _d.form_id) || 0;
+  const petValue = ((_e = state.pet.value) == null ? void 0 : _e[form_id]) || [];
   let obj = {
     customer_id: values.customer_id,
     form_id,
     form_record: petValue.map((d) => d.form_record_id)
   };
-  if (!petValue.length && ((_h = (_g = (_f = data.pet) == null ? void 0 : _f.originValue) == null ? void 0 : _g.form_record) == null ? void 0 : _h.length)) {
-    obj.form_record = data.pet.originValue.form_record;
+  if (!petValue.length && ((_h = (_g = (_f = state.pet) == null ? void 0 : _f.originValue) == null ? void 0 : _g.form_record) == null ? void 0 : _h.length)) {
+    obj.form_record = state.pet.originValue.form_record;
+  }
+  if (state.isFranchisee) {
+    obj.is_source_shop = 1;
   }
   return obj;
 };
 var formatValues = (state) => {
   var _a;
   let values = {
-    type: "appointment_booking",
+    type: state.renderType === "eventBooking" ? "event_booking_v2" : "appointment_booking",
     platform: "shop",
     sales_channel: "my_pisel",
     bookings: [],
@@ -128,5 +193,7 @@ var formatValues = (state) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  formatProductBundle,
+  formatProductOption,
   formatValues
 });

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

@@ -49,6 +49,7 @@
   position: sticky;
   bottom: 0;
   left: 0;
+  z-index: 2;
   display: block;
   // display: flex;
   width: 100%;

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,25 @@
+import React from 'react';
+import './index.less';
+declare type DepositItemProps = {
+    status: 'paid' | 'unpaid' | 'partially_paid';
+    onEdit: React.MouseEventHandler<HTMLSpanElement>;
+    customer: any;
+    totalAmountStr: string;
+    totalAmount: number;
+    orderId: number;
+    orderNumber: number;
+    handleGoOrderDetail: () => void;
+    generatePaymentLink: (orderId: number) => void;
+    sendEmail: (orderId: number) => void;
+    depositAmount: number;
+    depositUnPaidAmount: number;
+    depositPaidAmount: number;
+    depositOriginPaidAmount: number;
+    amountSymbol: string;
+    createdTime: string;
+    isPaid: boolean;
+    isBookingCancelled: boolean;
+    hideOrderDetail?: boolean;
+};
+declare const DepositItem: (props: DepositItemProps) => React.JSX.Element;
+export default DepositItem;

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

@@ -0,0 +1,127 @@
+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",
+  partially_paid: "#CEEAB0"
+};
+var statusBgColor = {
+  unpaid: "#EFF8FF",
+  paid: "#ECFDF3",
+  partially_paid: "#F5FBEE"
+};
+var DepositItem = (props) => {
+  const {
+    status,
+    customer,
+    totalAmountStr,
+    onEdit,
+    orderId,
+    orderNumber,
+    handleGoOrderDetail,
+    generatePaymentLink,
+    depositAmount,
+    amountSymbol,
+    createdTime,
+    isPaid,
+    isBookingCancelled,
+    sendEmail,
+    hideOrderDetail,
+    depositPaidAmount,
+    depositUnPaidAmount,
+    depositOriginPaidAmount
+  } = 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"),
+    partially_paid: import_utils.locales.getText(
+      "pisell2.text.deposit-item-status-partially-paid"
+    )
+  };
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  const items = [
+    {
+      key: "send",
+      label: /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.send-mail"))
+    },
+    {
+      key: "1",
+      disabled: isPaid || isBookingCancelled,
+      label: /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.copy-to-clipboard"))
+    }
+  ];
+  const onClick = ({ key }) => {
+    if (key === "1") {
+      generatePaymentLink == null ? void 0 : generatePaymentLink(orderId);
+    } else if (key === "send") {
+      sendEmail == null ? void 0 : sendEmail(orderId);
+    }
+  };
+  const handlingFee = (Number(depositPaidAmount) || 0) - (Number(depositOriginPaidAmount) || 0);
+  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 || status === "partially_paid" || 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)), ["partially_paid"].includes(status) && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total-deposit" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.deposit-deposit-paid"), " ", handlingFee > 0 && /* @__PURE__ */ import_react.default.createElement("span", null, "(", import_utils.locales.getText(
+    "pisell2.text.deposit-deposit-paid-including-surcharge"
+  ), " ", (0, import_utils.formatAmount)(handlingFee, 2, amountSymbol), ")")), /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_utils.formatAmount)(depositPaidAmount, 2, amountSymbol))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total-deposit" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.deposit-deposit-paid-due"), " "), /* @__PURE__ */ import_react.default.createElement("div", null, (0, import_utils.formatAmount)(depositUnPaidAmount, 2, amountSymbol)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-action" }, !hideOrderDetail && /* @__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,112 @@
+.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.1),
+    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;
+    align-items: center;
+    .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% */
+      height: 32px;
+    }
+    .pisell-lowcode__deposit-item-header-right {
+      flex: 1;
+      text-align: right;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      font-weight: 600;
+      .pisell-lowcode__deposit-item-header-right-line1 {
+        color: var(--Warning-600, #dc6803);
+        font-size: 14px;
+        line-height: 20px; /* 142.857% */
+      }
+      .pisell-lowcode__deposit-item-header-right-line2 {
+        color: var(--Gray-900, #101828);
+        font-size: 14px;
+        line-height: 20px; /* 142.857% */
+      }
+      .pisell-lowcode__deposit-item-header-right-amount {
+        color: var(--Warning-600, #dc6803);
+        font-size: 20px;
+        font-style: normal;
+        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: 8px;
+    .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-total-deposit {
+      display: flex;
+      justify-content: space-between;
+
+      color: var(--Gray-500, #667085);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+    }
+    .pisell-lowcode__deposit-item-footer-action {
+      display: flex;
+      gap: 20px;
+      margin-top: 12px;
+    }
+  }
+}

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;