@pisell/private-materials 3.2.33 → 3.2.34

package/lib/components/appointmentBooking/components/Deposit/index.js

@@ -0,0 +1,61 @@
+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/appointmentBooking/components/Deposit/index.tsx
+var Deposit_exports = {};
+__export(Deposit_exports, {
+  default: () => Deposit_default
+});
+module.exports = __toCommonJS(Deposit_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_deposit = __toESM(require("../../deposit"));
+var import_context = require("../../context");
+var import_utils = require("@pisell/utils");
+var import_index = require("./index.less");
+var Deposit = () => {
+  const { setIsAgreeDepositPolicy, isAgreeDepositPolicy, summary } = (0, import_context.useAppointmentBookingContext)();
+  const { deposit } = summary;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "appointment-deposit-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "appointment-deposit-top" }, /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.appointment.deposit")), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellText.Amount,
+    {
+      value: deposit == null ? void 0 : deposit.total,
+      showCurrencySymbol: true,
+      className: "amount"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    import_deposit.default,
+    {
+      total: deposit == null ? void 0 : deposit.total,
+      protocols: deposit == null ? void 0 : deposit.protocols,
+      isAgreePolicy: isAgreeDepositPolicy,
+      onChange: (value) => setIsAgreeDepositPolicy(value)
+    }
+  ));
+};
+var Deposit_default = Deposit;

package/lib/components/appointmentBooking/components/Deposit/index.less

@@ -0,0 +1,16 @@
+.appointment-deposit-wrap {
+  .appointment-deposit-top {
+    color: var(--Text-Text_1, #1b1b1b);
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 14px;
+
+    .amount {
+      color: var(--Blue-600, #1570ef);
+    }
+  }
+}

package/lib/components/appointmentBooking/components/Form/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const Form: () => JSX.Element;
+export default Form;

package/lib/components/appointmentBooking/components/Form/index.js

@@ -0,0 +1,108 @@
+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/appointmentBooking/components/Form/index.tsx
+var Form_exports = {};
+__export(Form_exports, {
+  default: () => Form_default
+});
+module.exports = __toCommonJS(Form_exports);
+var import_react = __toESM(require("react"));
+var import_useComponents = __toESM(require("../../../../hooks/useComponents"));
+var import_utils = require("../../utils");
+var import_context = require("../../context");
+var import_PolicyModal = __toESM(require("../../deposit/components/PolicyModal"));
+var import_index = require("./index.less");
+var Form = () => {
+  const manualRef = (0, import_react.useRef)();
+  const [currentFormIndex, setCurrentFormIndex] = (0, import_react.useState)(0);
+  const [showAgreement, setShowAgreement] = (0, import_react.useState)(false);
+  const [agreementContent, setAgreementContent] = (0, import_react.useState)({});
+  const { carts, resources, appointmentBooking } = (0, import_context.useAppointmentBookingContext)();
+  const forms = (0, import_react.useMemo)(() => {
+    return (0, import_utils.formatForms)((0, import_utils.formatCarts)(carts, resources));
+  }, [carts, resources]);
+  const currentForm = (0, import_react.useMemo)(() => {
+    console.log(forms, "formatFormsformatForms");
+    return forms[currentFormIndex];
+  }, [forms, currentFormIndex]);
+  const [FormCard] = (0, import_useComponents.default)({
+    components: ["FormCard"]
+  });
+  const goToNextForm = () => {
+    var _a, _b, _c;
+    const nextIndex = currentFormIndex + 1;
+    if (nextIndex < forms.length) {
+      setCurrentFormIndex(nextIndex);
+      if (!((_a = forms == null ? void 0 : forms[nextIndex]) == null ? void 0 : _a.form_id) && ((_b = forms == null ? void 0 : forms[nextIndex]) == null ? void 0 : _b.policy_id)) {
+        setAgreementContent({ id: (_c = forms == null ? void 0 : forms[nextIndex]) == null ? void 0 : _c.policy_id });
+        setShowAgreement(true);
+      }
+    } else {
+      appointmentBooking.next();
+    }
+  };
+  const handleFormFinish = (status, values) => {
+    console.log(status, values, "handleFormFinish");
+    if (status === "success") {
+      if (currentForm == null ? void 0 : currentForm.policy_id) {
+        setAgreementContent({ id: currentForm.policy_id });
+        setShowAgreement(true);
+      } else {
+        goToNextForm();
+      }
+    }
+  };
+  const handleAgreementOk = () => {
+    setShowAgreement(false);
+    goToNextForm();
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (currentForm == null ? void 0 : currentForm.form_id) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "appointment-form-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+    FormCard,
+    {
+      id: currentForm == null ? void 0 : currentForm.form_id,
+      ref: manualRef,
+      isGetLastData: false,
+      setting: {},
+      formWrapStyle: { padding: "16px" },
+      isV2API: true,
+      isShowSkeleton: true,
+      onSubmit: (status, values) => {
+        handleFormFinish(status, values);
+      }
+    }
+  )) : null, showAgreement ? /* @__PURE__ */ import_react.default.createElement(
+    import_PolicyModal.default,
+    {
+      open: showAgreement,
+      onCancel: handleAgreementOk,
+      item: agreementContent
+    }
+  ) : null);
+};
+var Form_default = Form;

package/lib/components/appointmentBooking/components/Form/index.less

@@ -0,0 +1,3 @@
+.appointment-form-wrap {
+  padding-bottom: 16px;
+}

package/lib/components/appointmentBooking/components/Header/index.js

@@ -40,17 +40,17 @@ var import_hooks = require("../../hooks");
 var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
 var import_index = require("./index.less");
 var Header = () => {
-  var _a, _b;
+  var _a;
   const { currentStep, appointmentBooking, resources, setTimes } = (0, import_context.useAppointmentBookingContext)();
   const shopDiscount = (0, import_hooks.useShopDiscount)();
   const context = (0, import_useEngineContext.default)();
   const { checkSkipResourceStep } = (0, import_hooks.useIsSkipResourceStep)();
   const { getStepIndex } = (0, import_hooks.useAppointmentBookingStep)();
   const stepName = (0, import_react.useMemo)(() => {
-    var _a2, _b2, _c, _d, _e;
+    var _a2, _b, _c, _d, _e;
     const key = (_a2 = currentStep == null ? void 0 : currentStep.step) == null ? void 0 : _a2.key;
     if (key === "select-resource") {
-      const name = ((_d = (_c = (_b2 = resources == null ? void 0 : resources[0]) == null ? void 0 : _b2.resources) == null ? void 0 : _c[0]) == null ? void 0 : _d.title) || "";
+      const name = ((_d = (_c = (_b = resources == null ? void 0 : resources[0]) == null ? void 0 : _b.resources) == null ? void 0 : _c[0]) == null ? void 0 : _d.title) || "";
       return import_utils.locales.getText("pisell2.event.select.category")(name);
     }
     return (_e = currentStep == null ? void 0 : currentStep.step) == null ? void 0 : _e.description;
@@ -81,16 +81,19 @@ var Header = () => {
     appointmentBooking.back();
   };
   const handleClose = () => {
-    var _a2, _b2;
+    var _a2, _b;
     appointmentBooking.destroy();
     (_a2 = shopDiscount == null ? void 0 : shopDiscount.destroy) == null ? void 0 : _a2.call(shopDiscount);
     const utils = context.appHelper.utils || {};
-    (_b2 = utils == null ? void 0 : utils.history) == null ? void 0 : _b2.replace("/");
+    (_b = utils == null ? void 0 : utils.history) == null ? void 0 : _b.replace("/");
   };
+  console.log(currentStep, "wh98087");
   return /* @__PURE__ */ import_react.default.createElement(
     import_progressBar.default,
     {
-      title: (_b = currentStep == null ? void 0 : currentStep.step) == null ? void 0 : _b.title,
+      title: `${import_utils.locales.getText("pisell2.appointment.step")(
+        (currentStep == null ? void 0 : currentStep.index) + 1
+      )}`,
       description: stepName,
       showBack: (currentStep == null ? void 0 : currentStep.index) > 0,
       onBack: () => handleBack(),

package/lib/components/appointmentBooking/components/Resource/index.js

@@ -45,8 +45,10 @@ var Resource = () => {
   const [selectedResource, setSelectedResource] = (0, import_react.useState)(0);
   const { appointmentBooking, resources, carts, resourceOtherParams } = (0, import_context.useAppointmentBookingContext)();
   const { getResourceList, autoSelectAllProductResources } = (0, import_hooks.useAppointmentBookingResource)();
+  const { isDateSelectedFirst } = (0, import_hooks.useAppointmentBookingSetting)();
   (0, import_react.useEffect)(() => {
     const _resources = getResourceList();
+    if (isDateSelectedFirst) return;
     autoSelectAllProductResources();
     getResourceList();
   }, []);

package/lib/components/appointmentBooking/components/Services/index.js

@@ -50,19 +50,44 @@ var Services = () => {
   const { utils } = context.appHelper || {};
   const appointmentBooking = (0, import_hooks.useAppointmentBooking)();
   const { products, setProducts } = (0, import_context.useAppointmentBookingContext)();
-  (0, import_react.useEffect)(() => {
+  const { isDateSelectedFirst } = (0, import_hooks.useAppointmentBookingSetting)();
+  const getLists = async () => {
+    var _a;
+    if (isDateSelectedFirst) {
+      const dates = await appointmentBooking.getDateRange();
+      console.log(dates, "productList11");
+      if (!dates || !dates.length) return;
+      const productList2 = await appointmentBooking.loadProductByScheduleDate(
+        (_a = dates[0]) == null ? void 0 : _a.date
+      );
+      console.log(productList2, "productList11");
+      return productList2;
+    }
     const { productModuleParams } = appointmentBooking.otherParams || {};
-    appointmentBooking.loadProducts(productModuleParams).then((res) => {
-      setProducts(res || []);
-    }).catch(() => {
+    const productList = await appointmentBooking.loadProducts(
+      productModuleParams
+    );
+    return productList;
+  };
+  (0, import_react.useEffect)(() => {
+    try {
+      getLists().then((res) => {
+        console.log(res, "getLists");
+        setProducts(res || []);
+      });
+    } catch (error) {
       setProducts([]);
-    });
+    }
   }, []);
   const handleSelectProduct = (item) => {
+    console.log(item, "wwwss");
+    if (isDateSelectedFirst && !(item == null ? void 0 : item.duration)) {
+      appointmentBooking.openProductDetail(item.id);
+    }
     utils == null ? void 0 : utils.action({
       type: "pisell1.productDetail",
       data: {
-        detail: item
+        detail: { ...item, open_deposit: 1 }
       },
       callback: (data) => {
         var _a, _b;
@@ -79,8 +104,24 @@ var Services = () => {
           ...data,
           options: (data == null ? void 0 : data.option) || []
         };
+        console.log(data, "wh987986");
         delete product.option;
-        appointmentBooking.storeProduct(product);
+        if (isDateSelectedFirst) {
+          appointmentBooking.addProductToCart({
+            product: { ...product },
+            date: {
+              startTime: "2025-04-27 09:00",
+              endTime: "2025-04-27 11:00"
+            }
+          });
+          appointmentBooking.getAvailableDate({
+            startDate: "2025-04-27",
+            endDate: "2025-04-27"
+          });
+          appointmentBooking.closeProductDetail();
+        } else {
+          appointmentBooking.storeProduct(product);
+        }
       }
     });
   };

package/lib/components/appointmentBooking/context.d.ts

@@ -21,6 +21,9 @@ interface AppointmentBookingContextType {
     setResourceOtherParams: (val: any) => void;
     selectedTime: any;
     setSelectedTime: (val: any) => void;
+    isAgreeDepositPolicy: boolean;
+    setIsAgreeDepositPolicy: (val: boolean) => void;
+    [key: string]: any;
 }
 export declare const AppointmentBookingProvider: ({ children, }: {
     children: ReactNode;

package/lib/components/appointmentBooking/context.js

@@ -46,15 +46,19 @@ var AppointmentBookingProvider = ({
   const [summary, setSummary] = (0, import_react.useState)({});
   const [times, setTimes] = (0, import_react.useState)([]);
   const [resources, setResources] = (0, import_react.useState)([]);
-  const [currentStep, setCurrentStep] = (0, import_react.useState)(
-    appointmentBooking.getCurrentStep()
-  );
+  const [currentStep, setCurrentStep] = (0, import_react.useState)();
   const [isLastStep, setIsLastStep] = (0, import_react.useState)(false);
   const [carts, setCarts] = (0, import_react.useState)([]);
   const [resourceOtherParams, setResourceOtherParams] = (0, import_react.useState)({});
   const [selectedTime, setSelectedTime] = (0, import_react.useState)(null);
+  const [isAgreeDepositPolicy, setIsAgreeDepositPolicy] = (0, import_react.useState)(false);
+  const [currentResource, setCurrentResource] = (0, import_react.useState)(null);
   const { appHelper } = (0, import_useEngineContext.default)();
   const symbolic = (_a = appHelper == null ? void 0 : appHelper.utils) == null ? void 0 : _a.getSymbolic();
+  (0, import_react.useEffect)(() => {
+    const currentStep2 = appointmentBooking.getCurrentStep();
+    setCurrentStep(currentStep2);
+  }, []);
   console.log(3234234, times, resources);
   const value = {
     appointmentBooking,
@@ -77,7 +81,11 @@ var AppointmentBookingProvider = ({
     resourceOtherParams,
     setResourceOtherParams,
     selectedTime,
-    setSelectedTime
+    setSelectedTime,
+    isAgreeDepositPolicy,
+    setIsAgreeDepositPolicy,
+    currentResource,
+    setCurrentResource
   };
   return /* @__PURE__ */ import_react.default.createElement(AppointmentBookingContext.Provider, { value }, children);
 };

package/lib/components/appointmentBooking/deposit/components/PolicyModal/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const DepositModal: (props: any) => JSX.Element;
+export default DepositModal;

package/lib/components/appointmentBooking/deposit/components/PolicyModal/index.js

@@ -0,0 +1,95 @@
+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/appointmentBooking/deposit/components/PolicyModal/index.tsx
+var PolicyModal_exports = {};
+__export(PolicyModal_exports, {
+  default: () => PolicyModal_default
+});
+module.exports = __toCommonJS(PolicyModal_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_context = require("../../../context");
+var import_index = require("./index.less");
+var DepositModal = (props) => {
+  const { open, onCancel, item } = props;
+  const { appointmentBooking } = (0, import_context.useAppointmentBookingContext)();
+  const [policy, setPolicy] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const getPolicy = async (id) => {
+    setLoading(true);
+    try {
+      const { data } = await appointmentBooking.getProtocol(id);
+      setPolicy(data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (!open || !(item == null ? void 0 : item.id)) return setPolicy(null);
+    getPolicy(item == null ? void 0 : item.id);
+  }, [open]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      open,
+      platform: (0, import_utils.isMobile)() ? "h5" : "pc",
+      closable: true,
+      bodyStyle: { padding: "24px", minHeight: "250px" },
+      destroyOnClose: true,
+      title: (item == null ? void 0 : item.title) || "协议",
+      onCancel,
+      mobileModalHeight: "auto",
+      className: "policy-modal-wrap",
+      cancelVisible: false,
+      okText: import_utils.locales.getText("pisell2.appointment.deposit.close"),
+      onOk: onCancel
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { style: { minHeight: "250px" }, spinning: loading }, (policy == null ? void 0 : policy.content) ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "policy-content",
+        dangerouslySetInnerHTML: {
+          __html: policy == null ? void 0 : policy.content
+        }
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellEmpty,
+      {
+        description: import_utils.locales.getText(
+          "pisell2.appointment.booking.empty.data"
+        )
+      }
+    ))
+  );
+};
+var PolicyModal_default = DepositModal;

package/lib/components/appointmentBooking/deposit/components/PolicyModal/index.less

@@ -0,0 +1,9 @@
+.policy-modal-wrap {
+  .pisell-lowcode-modal-header {
+    border: none;
+  }
+
+  .ant-empty-image {
+    height: auto !important;
+  }
+}

package/lib/components/appointmentBooking/deposit/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const Deposit: (props: any) => JSX.Element;
+export default Deposit;

package/lib/components/appointmentBooking/deposit/index.js

@@ -0,0 +1,109 @@
+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/appointmentBooking/deposit/index.tsx
+var deposit_exports = {};
+__export(deposit_exports, {
+  default: () => deposit_default
+});
+module.exports = __toCommonJS(deposit_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_utils2 = require("../utils");
+var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
+var import_PolicyModal = __toESM(require("./components/PolicyModal"));
+var import_index = require("./index.less");
+var Deposit = (props) => {
+  var _a;
+  const {
+    protocols,
+    total,
+    title,
+    isAgreePolicy = true,
+    isShowTitle = true,
+    onChange
+  } = props;
+  const context = (0, import_useEngineContext.default)();
+  const utils = context.appHelper.utils || {};
+  const locale = ((_a = utils == null ? void 0 : utils.storage) == null ? void 0 : _a.get("umi_locale")) || "en-US";
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [policyItem, setPolicyItem] = (0, import_react.useState)();
+  const isEn = (0, import_react.useMemo)(() => {
+    return locale.includes("en");
+  }, [locale]);
+  const _policyText = (0, import_react.useCallback)(
+    (item, index) => {
+      if (!item || !(protocols == null ? void 0 : protocols.length)) return "";
+      return (0, import_utils2.getPunctuationMark)(index, protocols.length, isEn);
+    },
+    [protocols]
+  );
+  const handleAgreed = () => {
+    onChange && onChange(!isAgreePolicy);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "appointment-deposit-bottom" }, isShowTitle ? /* @__PURE__ */ import_react.default.createElement("span", { className: "title" }, title) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "tip" }, isEn ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellText.Amount,
+    {
+      value: total,
+      showCurrencySymbol: true,
+      className: "amount"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.appointment.deposit.amount.tip1"))) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.appointment.deposit.amount.tip1")), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellText.Amount,
+    {
+      value: total,
+      showCurrencySymbol: true,
+      className: "amount"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.appointment.deposit.amount.tip2")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "checkbox-wrap", onClick: () => handleAgreed() }, /* @__PURE__ */ import_react.default.createElement(import_antd.Checkbox, { checked: isAgreePolicy }), /* @__PURE__ */ import_react.default.createElement("div", { className: "policy-box" }, /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.appointment.deposit.agreed")), /* @__PURE__ */ import_react.default.createElement("div", { className: "policy-wrap" }, protocols == null ? void 0 : protocols.map((item, index) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        key: item == null ? void 0 : item.id,
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          setPolicyItem(item);
+          setVisible(true);
+        }
+      },
+      item == null ? void 0 : item.title,
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "symbol" }, _policyText(item, index))
+    );
+  }))))), /* @__PURE__ */ import_react.default.createElement(
+    import_PolicyModal.default,
+    {
+      open: visible,
+      onCancel: () => setVisible(false),
+      item: policyItem
+    }
+  ));
+};
+var deposit_default = Deposit;

package/lib/components/appointmentBooking/deposit/index.less

@@ -0,0 +1,53 @@
+.appointment-deposit-bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+
+  .title {
+    color: var(--Text-Text_1, #1b1b1b);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+  }
+
+  .tip {
+    color: var(--Base-Black, #000);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    .amount {
+      font-weight: 600;
+      margin-right: 2px;
+    }
+  }
+
+  .checkbox-wrap {
+    display: flex;
+    cursor: pointer;
+    width: 100%;
+    .policy-box {
+      padding-left: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      color: var(--Base-Black, #000);
+      flex: 1;
+    }
+
+    .policy-wrap {
+      color: var(--Blue-600, #1570ef);
+      display: inline;
+      word-break: break-word;
+      .symbol {
+        color: var(--Base-Black, #000);
+      }
+    }
+  }
+}