@pisell/private-materials 3.0.27 → 3.0.29

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;

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

@@ -0,0 +1,131 @@
+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/EditDepositModal/index.tsx
+var EditDepositModal_exports = {};
+__export(EditDepositModal_exports, {
+  default: () => EditDepositModal_default
+});
+module.exports = __toCommonJS(EditDepositModal_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_index = require("./index.less");
+var import_utils = require("@pisell/utils");
+var EditDepositModal = (props, ref) => {
+  const { onChange, amountSymbol, totalAmount } = props;
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [depositMode, setDepositMode] = (0, import_react.useState)("1");
+  const [amount, setAmount] = (0, import_react.useState)(null);
+  const inputNumberRef = (0, import_react.useRef)(null);
+  const options = [
+    { label: "固定金额", value: "1" }
+    // { label: "订单百分比", value: "2" },
+  ];
+  const onAmountChange = (value) => {
+    setAmount(value);
+  };
+  const amountProps = (0, import_react.useMemo)(() => {
+    if (depositMode === "1") {
+      return {
+        prefix: amountSymbol
+      };
+    }
+    return {
+      min: 0,
+      max: 100,
+      addonAfter: "%"
+    };
+  }, [depositMode]);
+  const handleOk = () => {
+    if (amount === 0) {
+      return import_antd.message.error(import_utils.locales.getText("pisell2.text.deposit-amount-message"));
+    }
+    if (!amount) {
+      return import_antd.message.error(import_utils.locales.getText("pisell2.text.deposit-amount-message3"));
+    }
+    if (amount > totalAmount) {
+      return import_antd.message.error(import_utils.locales.getText("pisell2.text.deposit-amount-message2"));
+    }
+    onChange(amount);
+    setOpen(false);
+  };
+  const handleOpenChange = (val) => {
+    setOpen(val);
+  };
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      setTimeout(() => {
+        var _a;
+        (_a = inputNumberRef.current) == null ? void 0 : _a.focus();
+      });
+    }
+  }, [open]);
+  (0, import_react.useImperativeHandle)(ref, () => {
+    return {
+      handleOpen: (amount2) => {
+        if (amount2) {
+          setAmount(amount2);
+        }
+        handleOpenChange(true);
+      },
+      handleClose: () => handleOpenChange(false)
+    };
+  });
+  const onCancel = () => {
+    handleOpenChange(false);
+    setAmount(null);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Modal,
+    {
+      open,
+      width: 400,
+      cancelButtonProps: { block: true, size: "large" },
+      okButtonProps: { block: true, size: "large" },
+      className: "pisell-lowcode__edit-deposit-modal",
+      title: import_utils.locales.getText("pisell2.text.deposit-deposit-amount"),
+      onCancel,
+      onOk: handleOk,
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__edit-deposit-modal-field-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__edit-deposit-modal-field" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__edit-deposit-modal-field-label" }, import_utils.locales.getText("pisell2.text.deposit-amount")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.InputNumber,
+      {
+        ref: inputNumberRef,
+        style: { width: "100%" },
+        onChange: onAmountChange,
+        value: amount,
+        size: "large",
+        min: 0,
+        precision: 2,
+        ...amountProps
+      }
+    ))))
+  );
+};
+var EditDepositModal_default = (0, import_react.forwardRef)(EditDepositModal);

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

@@ -0,0 +1,24 @@
+.pisell-lowcode__edit-deposit-modal {
+  .pisell-lowcode-modal-footer {
+    display: flex;
+    gap: 12px;
+  }
+  .pisell-lowcode__edit-deposit-modal-field-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 32px;
+  }
+  .pisell-lowcode__edit-deposit-modal-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    .pisell-lowcode__edit-deposit-modal-field-label {
+      color: var(--Gray-700, #344054);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Deposit: (props: any) => React.JSX.Element;
+export default Deposit;