@pisell/private-materials 6.5.27 → 6.6.1

package/lib/components/booking/info2/service/editService/Holder/index.js

@@ -0,0 +1,199 @@
+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/info2/service/editService/Holder/index.tsx
+var Holder_exports = {};
+__export(Holder_exports, {
+  default: () => Holder_default
+});
+module.exports = __toCommonJS(Holder_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_HolderList = __toESM(require("../../../../../../plus/selectHolder/components/HolderList"));
+var import_index = require("./index.less");
+var import_HolderItem = __toESM(require("../../../../../../plus/selectHolder/components/HolderItem"));
+var import_selectHolderModal = require("../../../../utils/selectHolderModal");
+var import_materials = require("@pisell/materials");
+var LinkButton = import_antd.Button;
+var normalizeValue = (val) => {
+  if (Array.isArray(val)) {
+    return val.filter(
+      (item) => item !== void 0 && item !== null
+    );
+  }
+  if (val === void 0 || val === null || val === "") return [];
+  return [val];
+};
+var Holder = ({
+  state,
+  cacheItem,
+  value,
+  onChange,
+  dispatch
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const holderConfig = ((_a = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a.holder) || {};
+  const title = ((_b = holderConfig == null ? void 0 : holderConfig.form) == null ? void 0 : _b.title) || (holderConfig == null ? void 0 : holderConfig.title) || import_utils.locales.getText("pisell2.text.holder");
+  const isRequired = ((_e = (_d = (_c = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _c.config) == null ? void 0 : _d.basic) == null ? void 0 : _e.subject_require) === "require";
+  const maxSelectedCount = ((_f = cacheItem == null ? void 0 : cacheItem._extend) == null ? void 0 : _f.quantity) || 1;
+  const selectType = maxSelectedCount > 1 ? "multiple" : "single";
+  const [selectedValues, setSelectedValues] = (0, import_react.useState)(
+    () => normalizeValue(value)
+  );
+  (0, import_react.useEffect)(() => {
+    const next = normalizeValue(value);
+    setSelectedValues(next);
+  }, [value]);
+  const holderOptions = (0, import_react.useMemo)(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+    const holdersFromState = Array.isArray((_a2 = state == null ? void 0 : state.pet) == null ? void 0 : _a2.holders) ? state.pet.holders : [];
+    const formId = ((_e2 = (_d2 = (_c2 = (_b2 = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _b2.config) == null ? void 0 : _c2.basic) == null ? void 0 : _d2.appointment_subject) == null ? void 0 : _e2.form_id) || 0;
+    const holdersFromValue = Array.isArray((_g2 = (_f2 = state == null ? void 0 : state.pet) == null ? void 0 : _f2.value) == null ? void 0 : _g2[formId]) ? (_i2 = (_h2 = state == null ? void 0 : state.pet) == null ? void 0 : _h2.value) == null ? void 0 : _i2[formId] : [];
+    const rawList = holdersFromState.length > 0 ? holdersFromState : holdersFromValue;
+    return rawList.map((item) => {
+      const id = (item == null ? void 0 : item.id) || (item == null ? void 0 : item.form_record_id) || (item == null ? void 0 : item.value);
+      if (id === void 0 || id === null) return null;
+      return {
+        label: (item == null ? void 0 : item.main_field) || (item == null ? void 0 : item.label) || (item == null ? void 0 : item.name) || import_utils.locales.getText("pisell-select-holder-please-select"),
+        value: id,
+        avatar: item == null ? void 0 : item.avatar,
+        subtitle: (item == null ? void 0 : item.subtitle) || (item == null ? void 0 : item.second_field) || (item == null ? void 0 : item.sub_field)
+      };
+    }).filter(Boolean);
+  }, [(_g = state == null ? void 0 : state.pet) == null ? void 0 : _g.holders, (_h = state == null ? void 0 : state.pet) == null ? void 0 : _h.value, (_i = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _i.config]);
+  const displayConfig = (0, import_react.useMemo)(
+    () => ({
+      direction: "vertical",
+      selectType,
+      showAvatar: true,
+      showTitle: true,
+      showSubtitle: Boolean(holderOptions.some((option) => option.subtitle))
+    }),
+    [holderOptions, selectType]
+  );
+  const selectedSummary = (0, import_react.useMemo)(() => {
+    if (!maxSelectedCount) return "";
+    const label = import_utils.locales.getText("pisell-select-holder-selected").replace(/[:：]\s*$/, "");
+    return `${selectedValues.length}/${maxSelectedCount} ${label}`;
+  }, [selectedValues.length, maxSelectedCount]);
+  const handleApply = (0, import_react.useCallback)(
+    (nextValues) => {
+      onChange == null ? void 0 : onChange(nextValues);
+    },
+    [onChange, selectType]
+  );
+  const handleEdit = (0, import_react.useCallback)(
+    async (event) => {
+      var _a2, _b2;
+      event == null ? void 0 : event.preventDefault();
+      const holderConfig2 = ((_a2 = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a2.holder) || {};
+      const currentMaxSelectedCount = (holderConfig2 == null ? void 0 : holderConfig2.maxSelectedCount) || ((_b2 = cacheItem == null ? void 0 : cacheItem._extend) == null ? void 0 : _b2.quantity) || 1;
+      const result = await (0, import_selectHolderModal.selectHolderModal)({
+        state,
+        dispatch,
+        initialValue: selectedValues.length > 0 ? selectedValues : void 0,
+        maxSelectedCount: currentMaxSelectedCount
+      });
+      if (result && result.length > 0) {
+        setSelectedValues(result);
+        handleApply(result);
+      }
+    },
+    [selectedValues, state, dispatch, handleApply]
+  );
+  const handleClear = (0, import_react.useCallback)(
+    (event) => {
+      event == null ? void 0 : event.preventDefault();
+      setSelectedValues([]);
+      handleApply([]);
+    },
+    [handleApply]
+  );
+  const clearDisabled = (0, import_react.useMemo)(() => {
+    return (selectedValues == null ? void 0 : selectedValues.length) === 0;
+  }, [selectedValues]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-holder-field" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-holder-field__header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-holder-field__title" }, isRequired && /* @__PURE__ */ import_react.default.createElement("span", { className: "booking-holder-field__required" }, "*"), /* @__PURE__ */ import_react.default.createElement("span", null, title), maxSelectedCount ? /* @__PURE__ */ import_react.default.createElement("span", { className: "booking-holder-field__count" }, selectedSummary) : null), /* @__PURE__ */ import_react.default.createElement("div", { className: "booking-holder-field__actions" }, /* @__PURE__ */ import_react.default.createElement(
+    LinkButton,
+    {
+      type: "link",
+      size: "small",
+      className: "booking-holder-field__action-button",
+      onClick: handleEdit
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-edit-05" }),
+    /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.text.edit"))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    LinkButton,
+    {
+      type: "link",
+      size: "small",
+      disabled: clearDisabled,
+      className: "booking-holder-field__action-button",
+      onClick: handleClear
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-delete_wght300_24px" }),
+    /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.booking.info.text.clear"))
+  ))), selectedValues.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_antd.Row, null, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Col,
+    {
+      span: 8,
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 8,
+      onClick: handleEdit
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_HolderItem.default,
+      {
+        item: {
+          label: import_utils.locales.getText("pisell2.booking.info.text.add-holder"),
+          value: null
+        },
+        isAddItem: true
+      }
+    )
+  )) : /* @__PURE__ */ import_react.default.createElement(
+    import_HolderList.default,
+    {
+      dataSource: selectedValues.map((item) => {
+        const option = holderOptions.find((opt) => opt.value === item);
+        return {
+          label: (option == null ? void 0 : option.label) || "",
+          value: item
+        };
+      }),
+      selectedValues,
+      displayConfig,
+      allowAdd: false,
+      onClick: () => handleEdit()
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement(import_selectHolderModal.SelectHolderModal, null));
+};
+var Holder_default = Holder;

package/lib/components/booking/info2/service/editService/Holder/index.less

@@ -0,0 +1,63 @@
+.booking-holder-field {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  &__required {
+    color: #ff4d4f;
+  }
+
+  &__count {
+    color: #667085;
+    font-size: 12px;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  &__action-button {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #7f56d9;
+    font-size: 12px;
+    line-height: 16px;
+    cursor: pointer;
+    span {
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+
+    &:hover {
+      color: #6941c6;
+    }
+
+    &:disabled,
+    &.booking-holder-field__action--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      color: #c2a9f1;
+    }
+  }
+}
+