@pisell/private-materials 3.0.79 → 3.0.80

package/lib/components/booking/info/clientVariant/vertical/SelectDrawer.js

@@ -0,0 +1,344 @@
+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/info/clientVariant/vertical/SelectDrawer.tsx
+var SelectDrawer_exports = {};
+__export(SelectDrawer_exports, {
+  default: () => SelectDrawer_default
+});
+module.exports = __toCommonJS(SelectDrawer_exports);
+var import_react = __toESM(require("react"));
+var import_drawer = __toESM(require("../../../components/drawer"));
+var import_antd = require("antd");
+var import_SearchLg = __toESM(require("@pisell/icon/es/SearchLg"));
+var import_utils = require("@pisell/utils");
+var import_Plus = __toESM(require("@pisell/icon/es/Plus"));
+var import_User01 = __toESM(require("@pisell/icon/es/User01"));
+var import_utils2 = require("../../../utils");
+var import_classnames = __toESM(require("classnames"));
+var import_SelectDrawer = require("./SelectDrawer.less");
+var import_format = require("../../../forms/format");
+var import_utils3 = require("../../utils");
+var import_PlusCircle = __toESM(require("@pisell/icon/es/PlusCircle"));
+var ActionItem = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "vertical-client-select-drawer-item-wrap",
+      onClick: props.onClick
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "vertical-client-item-icon-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_Plus.default, { style: { fontSize: 28, color: "#7F56D9" } })),
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "vertical-client-item-title" }, props.title)
+  );
+};
+var Item = ({
+  cover,
+  onClick,
+  title,
+  desc,
+  coverSize,
+  checked
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("vertical-client-select-drawer-item-wrap", {
+        ["checked"]: checked
+      }),
+      onClick
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Avatar,
+      {
+        className: "pisell-lowcode__booking-client-list-item-avatar",
+        src: import_utils.image.ali(cover, 100) || void 0,
+        size: coverSize || 56,
+        icon: /* @__PURE__ */ import_react.default.createElement(import_User01.default, { className: "pisell-lowcode__booking-client-list-item-avatar-icon" })
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info-name" }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info-desc" }, (desc || []).map((d) => /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, d))))
+  );
+};
+var defaultArr = [];
+var SelectDrawer = (props, ref) => {
+  const {
+    autoFocus,
+    onClose,
+    handleSelectClient,
+    handleCreateItem,
+    childrenValue,
+    handleSelectPet,
+    formData,
+    searchChange,
+    options,
+    loading,
+    holder,
+    client,
+    loadMore,
+    showPet,
+    handleAddPet,
+    modalOpen
+  } = props;
+  const form = (formData == null ? void 0 : formData[0]) || {};
+  const valList = (childrenValue == null ? void 0 : childrenValue[form.id]) || defaultArr;
+  const [_value, setValue] = (0, import_react.useState)(valList);
+  const clientRef = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    setValue(valList);
+  }, [valList]);
+  const searchRef = (0, import_react.useRef)();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [search, setSearch] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (!modalOpen) {
+      setOpen(false);
+    }
+  }, [modalOpen]);
+  const closeDrawer = () => {
+    setOpen(false);
+    setSearch("");
+    onClose == null ? void 0 : onClose();
+  };
+  const handleOpenModal = () => {
+    setOpen(true);
+    if (autoFocus) {
+      setTimeout(() => {
+        var _a, _b;
+        (_b = (_a = searchRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      }, 400);
+    }
+  };
+  (0, import_react.useImperativeHandle)(ref, () => {
+    return {
+      open: handleOpenModal
+      // setValue: set_value,
+    };
+  });
+  (0, import_react.useEffect)(() => {
+    if (!open) {
+      clientRef.current = null;
+    }
+  }, [open]);
+  const getNickname = (0, import_react.useCallback)(
+    (item) => {
+      if ((0, import_utils2.isWalkIn)(item == null ? void 0 : item.id)) {
+        return import_utils.locales.getText("pisell2.text.select-a-customer");
+      }
+      return item.name || (item.display_name || "").trim() || (item.nickname || "").trim() || "";
+    },
+    [import_utils.locales.localeMap]
+  );
+  const handleAddClient = () => {
+    handleCreateItem();
+  };
+  const handleChildrenValueChange = (value, item) => {
+    if (mode === "single") {
+      if (!(client == null ? void 0 : client.id) || client.id === 1) {
+        handleSelectClient([item]);
+      }
+      handleSelectPet({
+        [form.id]: (0, import_format.formatAddFormValues)({
+          clientId: item == null ? void 0 : item.id,
+          value: [value],
+          data_range: holder.data_range
+        })
+      });
+      setTimeout(() => {
+        closeDrawer();
+      });
+    } else {
+      const index = _value.findIndex(
+        (item2) => item2.id === value.id || item2.form_record_id === value.id
+      );
+      if (!clientRef.current) {
+        clientRef.current = item;
+      }
+      if (index >= 0) {
+        const newList = [..._value];
+        newList.splice(index, 1);
+        setValue(
+          (0, import_format.formatAddFormValues)({
+            clientId: item == null ? void 0 : item.id,
+            value: newList,
+            data_range: holder.data_range
+          })
+        );
+      } else {
+        setValue(
+          (0, import_format.formatAddFormValues)({
+            clientId: item == null ? void 0 : item.id,
+            value: [..._value, value],
+            data_range: holder.data_range
+          })
+        );
+      }
+    }
+  };
+  const mode = (0, import_react.useMemo)(() => {
+    if (["form"].includes(holder == null ? void 0 : holder.type)) {
+      return "single";
+    }
+    if (["table"].includes(holder == null ? void 0 : holder.type)) {
+      return "multiple";
+    }
+    return holder == null ? void 0 : holder.type;
+  }, [holder == null ? void 0 : holder.type]);
+  const handleOk = () => {
+    var _a;
+    if (!(client == null ? void 0 : client.id)) {
+      handleSelectClient([clientRef.current]);
+    }
+    handleSelectPet({
+      [(_a = holder == null ? void 0 : holder.form) == null ? void 0 : _a.id]: _value
+    });
+    closeDrawer();
+  };
+  const handleClientClick = (item) => {
+    handleSelectClient([item]);
+    if (mode === "multiple") {
+      const isHasChildren = _value.some(
+        (val) => item.form_record.some(
+          (f) => f.id || f.form_record_id === val.id || val.form_record_id
+        )
+      );
+      handleSelectPet({
+        [form.id]: (0, import_utils3.uniqueByField)(
+          [
+            ..._value,
+            ...isHasChildren ? [] : (0, import_format.formatAddFormValues)({
+              clientId: item.id,
+              data_range: holder.data_range,
+              value: item.form_record
+            })
+          ],
+          "id"
+        )
+      });
+    }
+    closeDrawer();
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_drawer.default,
+    {
+      title: import_utils.locales.getText("pisell2.text.select-customer"),
+      open,
+      onClose: closeDrawer,
+      header: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input,
+        {
+          ref: searchRef,
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_SearchLg.default, null),
+          style: { margin: "16px 0", height: 44 },
+          placeholder: import_utils.locales.getText("pisell2.text.search"),
+          value: search,
+          allowClear: true,
+          onChange: (e) => {
+            setSearch(e.target.value);
+            if (searchChange) {
+              searchChange(e.target.value);
+            }
+          }
+        }
+      )),
+      width: 300,
+      getContainer: false,
+      destroyOnClose: true,
+      push: { distance: 180 },
+      footer: mode === "multiple" && /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { block: true, type: "primary", onClick: handleOk }, import_utils.locales.getText("pisell2.text.apply")))
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: loading }, /* @__PURE__ */ import_react.default.createElement("div", { className: "vertical-client-select-drawer-content-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "vertical-client-select-drawer-top" }, /* @__PURE__ */ import_react.default.createElement(
+      ActionItem,
+      {
+        title: import_utils.locales.getText("pisell2.text.create-new-customer"),
+        onClick: handleAddClient
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      ActionItem,
+      {
+        title: "Walk-In",
+        onClick: () => {
+          handleSelectClient([]);
+          closeDrawer();
+        }
+      }
+    )), !!options.length ? options.map((item) => {
+      var _a;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "vertical-client-select-drawer-content-item",
+          key: item.id
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          Item,
+          {
+            onClick: () => handleClientClick(item),
+            cover: item.cover,
+            title: getNickname(item),
+            desc: [item.email, item.phone],
+            checked: item.id === client.id
+          }
+        ),
+        showPet && /* @__PURE__ */ import_react.default.createElement("div", { className: "vertical-client-select-drawer-content-item-children" }, ((item == null ? void 0 : item.form_record) || []).map((f) => {
+          const checked = _value.some(
+            (item2) => item2.id === f.id || item2.form_record_id === f.id
+          );
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              onClick: () => {
+                handleChildrenValueChange(f, item);
+              },
+              id: `${f.id}`,
+              key: f.id,
+              className: (0, import_classnames.default)(
+                "vertical-client-select-drawer-content-item-children-item",
+                {
+                  ["checked"]: checked
+                }
+              )
+            },
+            mode === "multiple" && /* @__PURE__ */ import_react.default.createElement(import_antd.Checkbox, { checked }),
+            /* @__PURE__ */ import_react.default.createElement(Item, { coverSize: 48, title: f.main_field })
+          );
+        }), /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "pisell-lowcode__custom-select-create",
+            onClick: () => {
+              handleAddPet == null ? void 0 : handleAddPet(item);
+            },
+            style: { padding: 16 }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_PlusCircle.default, { className: "pisell-lowcode__custom-select-create-icon" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode__custom-select-create-txt" }, `${import_utils.locales.getText("pisell2.text.create-new")} ${((_a = holder.form) == null ? void 0 : _a.title) || "-"}`))
+        ), /* @__PURE__ */ import_react.default.createElement("div", null))
+      );
+    }) : /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE }), /* @__PURE__ */ import_react.default.createElement("div", null, loadMore)))
+  );
+};
+var SelectDrawer_default = (0, import_react.forwardRef)(SelectDrawer);

package/lib/components/booking/info/clientVariant/vertical/SelectDrawer.less

@@ -0,0 +1,66 @@
+.vertical-client-select-drawer-content-wrap {
+  padding:0 12px 12px;
+}
+.vertical-client-select-drawer-top {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0 0 12px;
+  border-bottom: 1px solid var(--Gray-200, #eaecf0);
+}
+
+.vertical-client-select-drawer-item-wrap {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  cursor: pointer;
+  border-radius: 8px;
+  &:checked {
+    background: var(--Gray-true-50, #fafafa);
+  }
+  &:hover {
+    background: var(--Gray-true-50, #fafafa);
+  }
+  .vertical-client-item-icon-wrap {
+    display: flex;
+    width: 56px;
+    height: 56px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 50px;
+    background: var(--Primary-100, #f4ebff);
+  }
+  .vertical-client-item-title {
+    color: var(--Text-Text_1, #1B1B1B);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px; /* 137.5% */
+  }
+}
+.vertical-client-select-drawer-content-item {
+  border-bottom: 1px solid var(--Gray-200, #eaecf0);
+  //margin-bottom: 24px;
+  padding: 24px 0;
+}
+.vertical-client-select-drawer-content-item-children {
+  margin-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  .vertical-client-select-drawer-content-item-children-item {
+    display: flex;
+    border-radius: 8px;
+    padding: 0 12px;
+    cursor: pointer;
+    &.checked {
+      background: var(--Gray-true-50, #fafafa);
+    }
+    &:hover {
+      background: var(--Gray-true-50, #fafafa);
+    }
+  }
+}

package/lib/components/booking/info/clientVariant/vertical/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./index.less";
+interface VerticalClientProps {
+    globalState: any;
+    setGlobalState: any;
+}
+declare const VerticalClient: (props: VerticalClientProps) => React.JSX.Element;
+export default VerticalClient;

package/lib/components/booking/info/clientVariant/vertical/index.js

@@ -0,0 +1,230 @@
+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/info/clientVariant/vertical/index.tsx
+var vertical_exports = {};
+__export(vertical_exports, {
+  default: () => vertical_default
+});
+module.exports = __toCommonJS(vertical_exports);
+var import_react = __toESM(require("react"));
+var import_User01 = __toESM(require("@pisell/icon/es/User01"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_icons = require("@ant-design/icons");
+var import_useClientFn = __toESM(require("../hooks/useClientFn"));
+var import_SelectDrawer = __toESM(require("./SelectDrawer"));
+var import_pet = __toESM(require("../../pet"));
+var import_index = require("./index.less");
+var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
+var VerticalClient = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+  const { globalState, setGlobalState } = props;
+  const modalRef = (0, import_react.useRef)();
+  const state = globalState;
+  const stateRef = (0, import_react.useRef)(state);
+  const context = (0, import_useEngineContext.default)();
+  stateRef.current = state;
+  const {
+    isWalkIn,
+    setClient,
+    handleSelectClient,
+    menuChange,
+    handleViewClient,
+    menus,
+    handleCreateItem,
+    getClients,
+    params,
+    searchChange,
+    loading,
+    loadMore,
+    handleOpenClientModal
+  } = (0, import_useClientFn.default)({
+    state,
+    setGlobalState,
+    modalRef
+  });
+  const renderList = (0, import_react.useMemo)(() => {
+    let _list = [...state.client.clients];
+    return _list;
+  }, [state.client.clients]);
+  const handleClose = () => {
+    setTimeout(() => {
+      setClient({
+        showModal: false
+      });
+    });
+  };
+  const petDispatch = ({ type, payload }) => {
+    if (type === "setPet") {
+      setGlobalState({
+        pet: {
+          ...stateRef.current.pet,
+          ...payload
+        }
+      });
+    }
+  };
+  const boardConfig = (0, import_react.useMemo)(() => {
+    var _a2, _b2, _c2;
+    return ((_c2 = (_b2 = (_a2 = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a2.config) == null ? void 0 : _b2.basic) == null ? void 0 : _c2.appointment_subject) || {};
+  }, [(_b = (_a = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a.config) == null ? void 0 : _b.basic]);
+  (0, import_react.useEffect)(() => {
+    var _a2, _b2, _c2, _d2;
+    if (((_d2 = (_c2 = (_b2 = (_a2 = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _a2.config) == null ? void 0 : _b2.basic) == null ? void 0 : _c2.appointment_customer) == null ? void 0 : _d2.type) === "customer" && (state == null ? void 0 : state.modalOpen) && !(state == null ? void 0 : state.bookingId)) {
+      handleOpenClientModal();
+    }
+  }, [
+    (_f = (_e = (_d = (_c = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _c.config) == null ? void 0 : _d.basic) == null ? void 0 : _e.appointment_customer) == null ? void 0 : _f.type,
+    state == null ? void 0 : state.modalOpen
+  ]);
+  const handleSelectPet = (val) => {
+    setGlobalState({
+      pet: {
+        ...state.pet,
+        edit: true,
+        value: val
+      }
+    });
+  };
+  const handleOpenModal = () => {
+    handleOpenClientModal();
+  };
+  const handleAddPet = (_client) => {
+    var _a2;
+    let _data = {
+      formDataConfig: { ...((_a2 = state.pet.formData) == null ? void 0 : _a2[0]) || {} }
+    };
+    _data.customerId = _client.id;
+    state.action({
+      type: "pisell1.goCustomFormAddData",
+      data: _data,
+      callback: (res) => {
+        const newClients = stateRef.current.client.clients.map((item) => {
+          if (item.id === _client.id) {
+            const newFormRecordObj = res.reduce((p, c) => {
+              return {
+                ...p,
+                [c.key]: c.value
+              };
+            }, {});
+            return {
+              ...item,
+              form_record: [...item.form_record, {
+                ...newFormRecordObj,
+                id: newFormRecordObj.form_record_id,
+                data: newFormRecordObj
+              }]
+            };
+          }
+          return item;
+        });
+        setClient({
+          clients: newClients
+        });
+      }
+    });
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-vertical-client-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-lowcode__booking-vertical-client",
+      onClick: () => {
+        if (!isWalkIn || (state == null ? void 0 : state.disableEventBookingEdit)) {
+          return;
+        }
+        handleOpenClientModal();
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Avatar,
+      {
+        className: "pisell-lowcode__booking-client-avatar",
+        src: import_utils.image.ali((_g = state.client.value) == null ? void 0 : _g.cover, 100),
+        size: 64,
+        icon: /* @__PURE__ */ import_react.default.createElement(import_User01.default, { className: "pisell-lowcode__booking-client-list-item-avatar-icon" })
+      }
+    ),
+    isWalkIn ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-info-desc" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-title" }, import_utils.locales.getText("pisell2.text.add-client")), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, import_utils.locales.getText("pisell2.text.leave-empty-for-walk-in"))) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-title" }, (_h = state.client.value) == null ? void 0 : _h.name), ((_i = state.client.value) == null ? void 0 : _i.email) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_j = state.client.value) == null ? void 0 : _j.email) : null, ((_k = state.client.value) == null ? void 0 : _k.phone) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_l = state.client.value) == null ? void 0 : _l.phone) : null),
+    !isWalkIn && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-client-action-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Dropdown,
+      {
+        menu: {
+          items: menus,
+          onClick: menuChange
+        },
+        placement: "bottomRight"
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, import_utils.locales.getText("pisell2.text.actions"), /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null)))
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          handleViewClient();
+        }
+      },
+      import_utils.locales.getText("pisell2.text.view-profile")
+    ))
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__booking-vertical-pet" }, !(state == null ? void 0 : state.disabledEdit) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, boardConfig.type === "form" ? /* @__PURE__ */ import_react.default.createElement(
+    import_pet.default,
+    {
+      clientChangeNotSetPet: true,
+      state,
+      dispatch: petDispatch,
+      hideTitle: !((_n = (_m = state.pet) == null ? void 0 : _m.value) == null ? void 0 : _n.length),
+      handleOpenModal,
+      addButtonProps: {
+        onClick: handleOpenClientModal,
+        style: (isShowSub) => isShowSub ? {} : { display: "none" }
+      }
+    }
+  ) : null) : null), /* @__PURE__ */ import_react.default.createElement(
+    import_SelectDrawer.default,
+    {
+      modalOpen: state.modalOpen,
+      loading,
+      autoFocus: !((_q = (_p = (_o = context == null ? void 0 : context.appHelper) == null ? void 0 : _o.utils) == null ? void 0 : _p.isTerminal) == null ? void 0 : _q.call(_p)),
+      ref: modalRef,
+      onClose: handleClose,
+      handleSelectClient,
+      handleCreateItem,
+      childrenValue: state.pet.value,
+      handleSelectPet,
+      formData: state.pet.formData,
+      searchChange,
+      options: renderList,
+      holder: (_r = state == null ? void 0 : state.bookingConfig) == null ? void 0 : _r.holder,
+      client: (_s = state == null ? void 0 : state.client) == null ? void 0 : _s.value,
+      loadMore,
+      showPet: (boardConfig == null ? void 0 : boardConfig.type) === "form",
+      handleAddPet
+    }
+  ));
+};
+var vertical_default = VerticalClient;