@pisell/private-materials 6.6.8 → 6.6.9

package/dist/es/components/booking/info/clientVariant/hooks/useClientFn.js

@@ -0,0 +1,267 @@
+import { isWalkIn } from "../../../utils.js";
+import { walkInData } from "../../model.js";
+import { getFranchiseeCustomerInfo, getFranchiseeCustomerList } from "../../client/serve.js";
+import useIsLowSpeedNetwork_default from "./useIsLowSpeedNetwork.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "antd";
+import { locales } from "@pisell/utils";
+
+//#region src/components/booking/info/clientVariant/hooks/useClientFn.tsx
+let isLoadClient = false;
+const useClientFn = (_params) => {
+	const { state, setGlobalState, modalRef, onRemoveClient } = _params;
+	const [loadLoading, setLoadLoading] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [franchiseeLoading, setFranchiseeLoading] = useState(0);
+	useIsLowSpeedNetwork_default();
+	const [params, setParams] = useState({
+		skip: 1,
+		num: 5,
+		total: 0,
+		search: "",
+		with: ["formRecord"],
+		relation_form_id: state?.bookingConfig?.config?.basic?.appointment_subject?.form_id
+	});
+	const paramsRef = useRef(params);
+	paramsRef.current = params;
+	useEffect(() => {
+		setParams((v) => ({
+			...v,
+			relation_form_id: state?.bookingConfig?.config?.basic?.appointment_subject?.form_id
+		}));
+	}, [state?.bookingConfig?.config?.basic?.appointment_subject]);
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	const isWalkIn$1 = useMemo(() => {
+		return isWalkIn(state.client.value?.id);
+	}, [state.client.value?.id]);
+	const getClients = async ({ customer_id, customer_ids, ...resetParams }, returnResult) => {
+		let _setLoading;
+		if (resetParams.skip === 1) if (resetParams.search) _setLoading = setLoading;
+		else _setLoading = isLoadClient || state?.client?.clients?.length ? () => {} : setLoading;
+		else _setLoading = setLoadLoading;
+		_setLoading(true);
+		const data = await (state.isFranchisee ? getFranchiseeCustomerList : state.apis.getClients)({
+			...resetParams,
+			...resetParams.search ? { num: 10 } : {},
+			...state.isFranchisee ? { franchisee_customer_ids: customer_ids } : { customer_ids },
+			...!state.isFranchisee && !returnResult ? { _config: { abort: true } } : {}
+		});
+		const list = (data?.list || []).map((d) => {
+			return {
+				...d,
+				name: getNickname(d),
+				id: d.franchisee_customer_id || d.id,
+				form_record: d.form_record?.map((item) => ({
+					...item,
+					...item.data,
+					form_record_id: item.id
+				})) || []
+			};
+		});
+		if (returnResult) return list;
+		let _payload = { clients: list };
+		if (!isWalkIn(customer_id)) {
+			const customerItem = list.find((d) => d.id === customer_id);
+			if (customerItem) {
+				_payload.value = customerItem;
+				_payload.edit = true;
+			}
+		}
+		let totalList = [...state.client.clients];
+		if (resetParams.skip === 1) totalList = list;
+		else list.forEach((item) => {
+			const index = totalList.findIndex((old) => old.id === item.id);
+			if (index > -1) totalList[index] = item;
+			else totalList.push(item);
+		});
+		_payload.clients = totalList;
+		setParams({
+			...params,
+			...resetParams,
+			total: data?.count || 0
+		});
+		setGlobalState({ client: {
+			...stateRef.current.client,
+			..._payload
+		} });
+		isLoadClient = true;
+		setLoading(false);
+		setLoadLoading(false);
+		return {};
+	};
+	const handleOpenClientModal = (val) => {
+		if (state.disabledEdit) return;
+		setClient({ showModal: true });
+		getClients({
+			...paramsRef.current,
+			search: val || "",
+			skip: 1
+		});
+		modalRef.current?.open();
+	};
+	const handleViewClient = () => {
+		state.action({
+			type: "pisell1.handleOpenCustomerModal",
+			data: { id: state.client.value.id },
+			callback: (data) => {
+				if (state.disabledEdit) return;
+				if (data === "createBooking") {
+					window?.shopApi?.booking?.refreshBookingData?.();
+					return;
+				}
+				if (data) handleSelectClient([data]);
+				getClients({
+					...state.client.clientsParams,
+					search: "",
+					customer_id: data?.id,
+					skip: 1
+				});
+			}
+		});
+	};
+	const menus = useMemo(() => {
+		let list = [{
+			key: "remove",
+			label: locales.getText("pisell2.text.remove-customer")
+		}];
+		if (state.disabledEdit) list = list.filter((d) => d.key === "view");
+		return list;
+	}, [state.disabledEdit]);
+	const handleRemoveClient = () => {
+		if (state.disabledEdit) return;
+		handleSelectClient([walkInData]);
+		onRemoveClient?.();
+	};
+	const menuChange = (e) => {
+		e.domEvent.stopPropagation();
+		({
+			view: handleViewClient,
+			change: handleOpenClientModal,
+			remove: handleRemoveClient
+		})[e.key]();
+	};
+	const setClient = (client) => {
+		setGlobalState({ client: {
+			...stateRef.current.client,
+			...client
+		} });
+	};
+	/**
+	* @title: 置换客户id到子店铺
+	* @description:
+	* @param {number} id
+	* @return {*}
+	* @Author: zhiwei.Wang
+	* @Date: 2024-05-29 17:26
+	*/
+	const _getFranchiseeCustomerInfo = async (customer) => {
+		try {
+			setFranchiseeLoading(customer.id);
+			const res = await getFranchiseeCustomerInfo({ franchisor_customer_id: customer.id });
+			setFranchiseeLoading(0);
+			return {
+				...customer,
+				id: res.franchisee_customer_id
+			};
+		} catch (err) {
+			setFranchiseeLoading(0);
+		}
+	};
+	const getNickname = useCallback((item) => {
+		if (isWalkIn(item?.id)) return locales.getText("pisell2.text.select-a-customer");
+		const firstLastName = item.first_name || item.last_name ? `${item.first_name} ${item.last_name}` : "";
+		return item.name || (item.display_name || "").trim() || (item.nickname || "").trim() || firstLastName.trim() || "";
+	}, [locales.localeMap]);
+	useEffect(() => {
+		if (state.action) state.action({
+			type: "pisell1.registerPlugin",
+			data: { pluginList: ["CustomerDetailPlugin"] }
+		});
+	}, []);
+	const handleSelectClient = async (value) => {
+		let _value = value?.[value.length - 1] || walkInData;
+		if (_value.loading) return;
+		if (state.isFranchisee && _value.franchisee_customer_id === 0) {
+			try {
+				_value = await _getFranchiseeCustomerInfo(_value);
+			} catch (err) {}
+			if (!_value) return;
+		}
+		setClient({
+			value: {
+				..._value,
+				name: getNickname(_value)
+			},
+			edit: true
+		});
+		return new Promise((resolve) => {
+			resolve(0);
+		});
+	};
+	const handleCreateItem = (cb) => {
+		state.action({
+			type: "pisell1.handleOpenAddCustomerModal",
+			data: {
+				showReceiveAddress: false,
+				showAcceptsMarketing: false
+			},
+			callback: (customer_id, params$1) => {
+				cb?.();
+				setClient({ clients: [...params$1?.[0]?.customer ? [{
+					...params$1?.[0]?.customer,
+					id: customer_id,
+					form_record: []
+				}] : [], ...state.client?.clients || []] });
+			}
+		});
+	};
+	const searchChange = (search) => {
+		getClients({
+			...paramsRef.current,
+			skip: 1,
+			search
+		});
+	};
+	return {
+		setClient,
+		isWalkIn: isWalkIn$1,
+		handleSelectClient,
+		menuChange,
+		handleViewClient,
+		menus,
+		handleCreateItem,
+		getClients,
+		params,
+		searchChange,
+		loading,
+		loadMore: useMemo(() => {
+			return state.client.clients.length < params.total || 0 ? /* @__PURE__ */ React.createElement("div", {
+				className: "",
+				style: {
+					textAlign: "center",
+					padding: "16px 0"
+				}
+			}, /* @__PURE__ */ React.createElement(Button, {
+				loading: loadLoading,
+				onClick: () => {
+					getClients({
+						...params,
+						skip: params.skip + 1
+					});
+				}
+			}, locales.getText("pisell2.text.load-more"))) : null;
+		}, [
+			loadLoading,
+			params,
+			state.client.clients.length
+		]),
+		handleOpenClientModal,
+		getNickname,
+		franchiseeLoading
+	};
+};
+var useClientFn_default = useClientFn;
+
+//#endregion
+export { useClientFn_default as default };

package/dist/es/components/booking/info/clientVariant/hooks/useIsLowSpeedNetwork.js

@@ -0,0 +1,20 @@
+import { useMemo, useRef } from "react";
+import { useNetwork } from "ahooks";
+
+//#region src/components/booking/info/clientVariant/hooks/useIsLowSpeedNetwork.ts
+const useIsLowSpeedNetwork = () => {
+	const networkState = useNetwork();
+	const isLowSpeedNetwork = useRef(false);
+	isLowSpeedNetwork.current = useMemo(() => {
+		return [
+			"slow-2g",
+			"2g",
+			"3g"
+		].includes(networkState?.effectiveType || "") || (networkState?.downlink || 20) <= 1 || (networkState?.rtt || 0) > 500;
+	}, [networkState]);
+	return isLowSpeedNetwork;
+};
+var useIsLowSpeedNetwork_default = useIsLowSpeedNetwork;
+
+//#endregion
+export { useIsLowSpeedNetwork_default as default };

package/dist/es/components/booking/info/clientVariant/index.d.ts

@@ -0,0 +1 @@
+import { VerticalClient } from "./vertical/index.js";

package/dist/es/components/booking/info/clientVariant/utils.js

@@ -0,0 +1,11 @@
+import { locales } from "@pisell/utils";
+
+//#region src/components/booking/info/clientVariant/utils.ts
+const getWaiverTitle = (waiverForm) => {
+	return (waiverForm || []).map((item) => {
+		return `${item.form_title || ""}:${item.is_filled ? locales.getText("pisell2.text.filled") : locales.getText("pisell2.text.not-filled")}`;
+	}).join(";");
+};
+
+//#endregion
+export { getWaiverTitle };

package/dist/es/components/booking/info/clientVariant/vertical/SelectDrawer.js

@@ -0,0 +1,244 @@
+import { isWalkIn } from "../../../utils.js";
+import { uniqueByField } from "../../utils.js";
+import drawer_default from "../../../components/drawer/index.js";
+import { getWaiverTitle } from "../utils.js";
+import { formatAddFormValues, sortFormValues } from "../../../forms/format.js";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Avatar, Button, Checkbox, Empty, Input, Spin } from "antd";
+import { image, locales } from "@pisell/utils";
+import PlusCircle from "@pisell/icon/es/PlusCircle";
+import User01 from "@pisell/icon/es/User01";
+import SearchLg from "@pisell/icon/es/SearchLg";
+import classNames from "classnames";
+import Plus from "@pisell/icon/es/Plus";
+import "./SelectDrawer.less";
+
+//#region src/components/booking/info/clientVariant/vertical/SelectDrawer.tsx
+const ActionItem = (props) => {
+	return /* @__PURE__ */ React.createElement("div", {
+		className: "vertical-client-select-drawer-item-wrap",
+		onClick: props.onClick
+	}, /* @__PURE__ */ React.createElement("span", { className: "vertical-client-item-icon-wrap" }, /* @__PURE__ */ React.createElement(Plus, { style: {
+		fontSize: 28,
+		color: "#7F56D9"
+	} })), /* @__PURE__ */ React.createElement("span", { className: "vertical-client-item-title" }, props.title));
+};
+const Item = ({ cover, onClick, title, desc, coverSize, checked, style, loading, waiverForm }) => {
+	const waiverTitle = useMemo(() => {
+		return getWaiverTitle(waiverForm);
+	}, [waiverForm]);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames("vertical-client-select-drawer-item-wrap", { ["checked"]: checked }),
+		onClick,
+		style
+	}, /* @__PURE__ */ React.createElement(Avatar, {
+		className: "pisell-lowcode__booking-client-list-item-avatar",
+		src: image.ali(cover, 100) || void 0,
+		size: coverSize || 56,
+		icon: /* @__PURE__ */ React.createElement(User01, { className: "pisell-lowcode__booking-client-list-item-avatar-icon" })
+	}), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info-name" }, title), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-list-item-info-desc" }, (desc || []).map((d) => /* @__PURE__ */ React.createElement("div", {
+		className: "",
+		title: d
+	}, d))), /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-lowcode__booking-client-list-item-info-desc-waiver",
+		title: waiverTitle
+	}, (waiverForm || []).map((item) => {
+		return /* @__PURE__ */ React.createElement("span", null, item.form_title, ":", item.is_filled ? /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-client-list-item-info-desc-filled" }, locales.getText("pisell2.text.filled")) : /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-client-list-item-info-desc-not-filled" }, locales.getText("pisell2.text.not-filled")), "; ");
+	}))), /* @__PURE__ */ React.createElement(Spin, { spinning: !!loading }));
+};
+const defaultArr = [];
+const SelectDrawer = (props, ref) => {
+	const { autoFocus, onClose, handleSelectClient, handleCreateItem, childrenValue, handleSelectPet, formData, searchChange, options, loading, holder, client, loadMore, showPet, handleAddPet, modalOpen, franchiseeLoading, showHeader, showWalkIn } = props;
+	const form = formData?.[0] || {};
+	const valList = childrenValue?.[form.id] || defaultArr;
+	const [_value, setValue] = useState(valList);
+	const clientRef = useRef();
+	const searchRef = useRef();
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	useEffect(() => {
+		setValue(valList.map((item) => ({
+			...item,
+			id: item.id || item.form_record_id
+		})));
+	}, [valList, open]);
+	useEffect(() => {
+		if (!modalOpen) setOpen(false);
+	}, [modalOpen]);
+	const closeDrawer = () => {
+		setOpen(false);
+		setSearch("");
+		onClose?.();
+	};
+	const handleOpenModal = () => {
+		setOpen(true);
+		if (autoFocus) setTimeout(() => {
+			searchRef.current?.focus?.();
+		}, 400);
+	};
+	useImperativeHandle(ref, () => {
+		return {
+			open: handleOpenModal,
+			close: () => {
+				setOpen(false);
+			},
+			setSearch: (val) => {
+				setSearch(val);
+			}
+		};
+	});
+	useEffect(() => {
+		if (!open) clientRef.current = null;
+	}, [open]);
+	const getNickname = useCallback((item) => {
+		if (isWalkIn(item?.id)) return locales.getText("pisell2.text.select-a-customer");
+		const firstLastName = item.first_name || item.last_name ? `${item.first_name} ${item.last_name}` : "";
+		return item.name || (item.display_name || "").trim() || (item.nickname || "").trim() || firstLastName.trim() || "";
+	}, [locales.localeMap]);
+	const handleAddClient = () => {
+		handleCreateItem(() => {
+			setSearch("");
+		});
+	};
+	const handleChildrenValueChange = async (value, item) => {
+		let clientId = client.id;
+		if (!client?.id || client.id === 1) clientId = clientRef.current?.id || item.id;
+		if (mode === "single") {
+			if (!client?.id || client.id === 1) await handleSelectClient([item]);
+			handleSelectPet({ [form.id]: formatAddFormValues({
+				clientId,
+				value: [value],
+				data_range: holder.data_range
+			}) });
+			setTimeout(() => {
+				closeDrawer();
+			});
+		} else {
+			const index = _value.findIndex((item$1) => item$1.id === value.id || item$1.form_record_id === value.id);
+			if (!clientRef.current) clientRef.current = item;
+			if (index >= 0) {
+				const newList = [..._value];
+				newList.splice(index, 1);
+				setValue(formatAddFormValues({
+					clientId,
+					value: newList,
+					data_range: holder.data_range
+				}));
+			} else setValue(formatAddFormValues({
+				clientId,
+				value: [..._value, value],
+				data_range: holder.data_range
+			}));
+		}
+	};
+	const mode = useMemo(() => {
+		if (["form"].includes(holder?.type)) return "single";
+		if (["table"].includes(holder?.type)) return "multiple";
+		return holder?.type;
+	}, [holder?.type]);
+	const handleOk = async () => {
+		if (!client?.id || client?.id === 1) await handleSelectClient([clientRef.current]);
+		handleSelectPet({ [holder?.form?.id]: _value });
+		closeDrawer();
+	};
+	const handleClientClick = async (item) => {
+		await 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]: uniqueByField([...sortFormValues(_value, item.id), ...isHasChildren ? [] : formatAddFormValues({
+				clientId: item.id,
+				data_range: holder.data_range,
+				value: item.form_record?.map((f) => ({
+					...f,
+					customer: item
+				}))
+			})], "id") });
+		}
+		closeDrawer();
+	};
+	return /* @__PURE__ */ React.createElement(drawer_default, {
+		showGoBack: showHeader,
+		title: showHeader && locales.getText("pisell2.text.select-customer"),
+		open,
+		onClose: closeDrawer,
+		header: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Input, {
+			ref: searchRef,
+			prefix: /* @__PURE__ */ React.createElement(SearchLg, null),
+			style: {
+				margin: "16px 0",
+				height: 44
+			},
+			placeholder: locales.getText("pisell2.text.search"),
+			value: search,
+			allowClear: true,
+			onChange: (e) => {
+				setSearch(e.target.value);
+				if (searchChange) searchChange(e.target.value);
+			}
+		})),
+		width: 300,
+		titleNoWrap: true,
+		getContainer: false,
+		destroyOnClose: true,
+		push: { distance: 180 },
+		footer: mode === "multiple" && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, {
+			block: true,
+			type: "primary",
+			onClick: handleOk,
+			loading: !!franchiseeLoading
+		}, locales.getText("pisell2.text.apply")))
+	}, /* @__PURE__ */ React.createElement("div", { className: "vertical-client-select-drawer-content-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "vertical-client-select-drawer-top" }, /* @__PURE__ */ React.createElement(ActionItem, {
+		title: locales.getText("pisell2.text.create-new-customer"),
+		onClick: handleAddClient
+	}), showWalkIn ? /* @__PURE__ */ React.createElement(ActionItem, {
+		title: "Walk-In",
+		onClick: () => {
+			handleSelectClient([]);
+			closeDrawer();
+		}
+	}) : null), /* @__PURE__ */ React.createElement(Spin, {
+		spinning: !!loading,
+		delay: 500
+	}, !!options.length ? options.map((item) => {
+		return /* @__PURE__ */ React.createElement("div", {
+			className: "vertical-client-select-drawer-content-item",
+			key: item.id
+		}, /* @__PURE__ */ React.createElement(Item, {
+			onClick: () => handleClientClick(item),
+			cover: item.cover,
+			title: getNickname(item),
+			desc: [item.email, item.phone],
+			checked: item.id === client.id,
+			style: showPet ? { marginBottom: 6 } : {},
+			loading: franchiseeLoading === item.id,
+			waiverForm: item.waiver_form
+		}), showPet && /* @__PURE__ */ React.createElement("div", { className: "vertical-client-select-drawer-content-item-children" }, (item?.form_record || []).map((f) => {
+			const checked = _value.some((item$1) => item$1.id === f.id || item$1.form_record_id === f.id);
+			return /* @__PURE__ */ React.createElement("div", {
+				onClick: () => {
+					handleChildrenValueChange({
+						...f,
+						customer: item
+					}, item);
+				},
+				id: `${f.id}`,
+				key: f.id,
+				className: classNames("vertical-client-select-drawer-content-item-children-item", { ["checked"]: checked })
+			}, mode === "multiple" && /* @__PURE__ */ React.createElement(Checkbox, { checked }), /* @__PURE__ */ React.createElement(Item, {
+				coverSize: 48,
+				title: f.main_field,
+				loading: false
+			}));
+		}), /* @__PURE__ */ React.createElement("div", {
+			className: "pisell-lowcode__custom-select-create",
+			onClick: () => {
+				handleAddPet?.(item);
+			},
+			style: { padding: 16 }
+		}, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PlusCircle, { className: "pisell-lowcode__custom-select-create-icon" }), /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__custom-select-create-txt" }, `${locales.getText("pisell2.text.create-new")} ${holder.form?.title || "-"}`))), /* @__PURE__ */ React.createElement("div", null)));
+	}) : /* @__PURE__ */ React.createElement(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE }), /* @__PURE__ */ React.createElement("div", null, loadMore))));
+};
+var SelectDrawer_default = forwardRef(SelectDrawer);
+
+//#endregion
+export { SelectDrawer_default as default };

package/dist/es/components/booking/info/clientVariant/vertical/SelectDrawer.less

@@ -0,0 +1,103 @@
+.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;
+  overflow: hidden;
+  &:hover {
+    background: var(--Gray-true-50, #fafafa);
+  }
+  &.checked {
+    background: var(--Gray-true-50, #EAECF0);
+  }
+  .pisell-lowcode__booking-client-list-item-avatar {
+    flex-shrink: 0;
+  }
+  .pisell-lowcode__booking-client-list-item-info {
+    overflow: hidden;
+  }
+  .pisell-lowcode__booking-client-list-item-info-desc-waiver {
+    color: var(--Gray-400, #98A2B3);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 20px;
+    white-space: nowrap;
+  }
+  .pisell-lowcode__booking-client-list-item-info-desc-filled {
+    color: var(--Success-600, #079455);
+  }
+  .pisell-lowcode__booking-client-list-item-info-desc-not-filled {
+    color: var(--Error-600, #D92D20);
+  }
+  .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: 12px 0;
+  border: none;
+}
+.vertical-client-select-drawer-content-item-children {
+  margin-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border-bottom: 1px solid var(--Gray-200, #eaecf0);
+  .pisell-lowcode__custom-select-create {
+    border: none;
+  }
+  .vertical-client-select-drawer-content-item-children-item {
+    display: flex;
+    border-radius: 8px;
+    padding: 0 12px;
+    cursor: pointer;
+    &:hover {
+      background: var(--Gray-true-50, #fafafa);
+    }
+    &.checked {
+      background: var(--Gray-true-50, #EAECF0);
+    }
+    .vertical-client-select-drawer-item-wrap {
+      &:hover {
+        background-color: transparent;
+      }
+      &.checked {
+        background-color: transparent;
+      }
+    }
+  }
+}

package/dist/es/components/booking/info/clientVariant/vertical/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./index.less";
+
+//#region src/components/booking/info/clientVariant/vertical/index.d.ts
+interface VerticalClientProps {
+  globalState: any;
+  setGlobalState: any;
+}
+declare const VerticalClient: React.ForwardRefExoticComponent<VerticalClientProps & React.RefAttributes<unknown>>;
+//#endregion
+export { VerticalClient };