@pisell/private-materials 6.6.10 → 6.6.12

package/dist/es/components/booking/components/tabPane/index.less

@@ -1,62 +0,0 @@
-.pisell-lowcode__booking-tab-pane-wrap {
-  height: 100vh;
-  // padding: 0 32px;
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-}
-
-.pisell-lowcode__booking-tab-pane-title {
-  width: 100%;
-  display: flex;
-  padding: 24px 32px;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-  color: var(--base-black, #000);
-  background-color: #fff;
-  z-index: 2;
-
-  font-size: 30px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 38px;
-}
-
-.pisell-lowcode__booking-tab-pane-body {
-  width: 100%;
-  flex: 1;
-  overflow: auto;
-  padding: 0 32px;
-
-  .pisell-lowcode__booking-tab-pane-label {
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  .pisell-lowcode__booking-tab-pane-input {
-    margin-top: 8px;
-  }
-
-  .pisell-lowcode__booking-tab-pane-desc {
-    margin-top: 8px;
-  }
-}
-
-.pisell-lowcode__booking-tab-pane-footer {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  display: block;
-  // display: flex;
-  width: 100%;
-  padding: 20px 32px;
-  // flex-direction: column;
-  // align-items: flex-start;
-  // gap: 16px;
-  border-top: 1px solid #E7E8E9;
-  background: var(--base-white, #FFF);
-}

package/dist/es/components/booking/components/voucher/index.js

@@ -1,211 +0,0 @@
-import useEngineContext_default from "../../../../hooks/useEngineContext.js";
-import { useIsBooking4Shop } from "../../hooks/useIsBooking4Shop.js";
-import { getServiceAddons } from "./utils.js";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "antd";
-import { locales } from "@pisell/utils";
-import classNames from "classnames";
-import { useDebounceEffect, useDebounceFn, useMemoizedFn } from "ahooks";
-import { PisellGoodPassCard, PisellInput, PisellToast } from "@pisell/materials";
-import ChevronDown from "@pisell/icon/es/ChevronDown";
-import "./index.less";
-
-//#region src/components/booking/components/voucher/index.tsx
-const ShopDiscountHooks = {
-	onInited: "shopDiscount:onInited",
-	onDestroy: "shopDiscount:onDestroy",
-	onLoadDiscountList: "shopDiscount:onLoadDiscountList",
-	onCustomerChange: "shopDiscount:onCustomerChange",
-	onScanCustomerChange: "shopDiscount:onScanCustomerChange",
-	onDiscountListChange: "shopDiscount:onDiscountListChange",
-	onRulesListChange: "shopDiscount:onRulesListChange",
-	onLoadPrepareCalcResult: "shopDiscount:onLoadPrepareCalcResult"
-};
-const VoucherCard = (props) => {
-	const context = useEngineContext_default();
-	const { state, dispatch, source } = props;
-	const [showDetail, setShowDetail] = useState(false);
-	const { pisellos } = context.appHelper?.utils;
-	const [code, setCode] = useState("");
-	const [discountList, setDisCountList] = useState([]);
-	const serviceValueRef = useRef(state.service.value);
-	const addonsValueRef = useRef(state.addons.value);
-	const isBooking4Shop = useIsBooking4Shop(state);
-	const shopDiscount = pisellos.getModule("shopDiscount");
-	state.service;
-	useDebounceEffect(() => {
-		if (isBooking4Shop) shopDiscount.setCustomer(state.client.value);
-	}, [state.client.value?.id, isBooking4Shop], { wait: 200 });
-	useEffect(() => {
-		if (isBooking4Shop) shopDiscount.setProductList([...state.service.value, ...state.addons.value]);
-	}, [
-		state.service.value,
-		state.addons.value,
-		isBooking4Shop
-	]);
-	const serviceMemo = useMemo(() => {
-		return (state.service.value || [])?.map((value) => {
-			return {
-				booking_id: value.booking_id,
-				id: value.id,
-				price: value.price,
-				total: value?._extend?.total,
-				discount_list: value.discount_list,
-				origin_total: value?._extend?.origin_total
-			};
-		});
-	}, [state.service.value]);
-	const addonsMemo = useMemo(() => {
-		return (state.addons.value || [])?.map((value) => {
-			return {
-				booking_id: value.booking_id,
-				id: value.id,
-				_id: value._id,
-				price: value.price,
-				total: value?._extend?.total,
-				discount_list: value.discount_list,
-				_key: value._key,
-				num: value?._extend?.quantity
-			};
-		});
-	}, [state.addons.value]);
-	const disabled = useMemo(() => {
-		if (["paid", "partially_paid"].includes(state.bookingDetail?.payment_status) && [...addonsMemo, ...serviceMemo].every((item) => item.booking_id)) return true;
-		return false;
-	}, [
-		state,
-		addonsMemo,
-		serviceMemo
-	]);
-	const { run } = useDebounceFn(() => {
-		if (serviceValueRef.current === state.service.value && addonsValueRef.current === state.addons.value || !state.service?.value?.length) return;
-		if (isBooking4Shop) {
-			const val = shopDiscount.calcDiscount([...state.service.value, ...state.addons.value]);
-			console.log("input: ", state.service.value);
-			console.log("output: ", val);
-			productListToValue(val.productList);
-		}
-	}, { wait: 500 });
-	useEffect(() => {
-		run();
-	}, [
-		JSON.stringify(serviceMemo),
-		JSON.stringify(addonsMemo),
-		isBooking4Shop
-	]);
-	const fn = useMemoizedFn((result) => {
-		if (!result?.productList || result?.productList?.some((item) => !item)) return;
-		productListToValue(result.productList);
-	});
-	useEffect(() => {
-		if (!isBooking4Shop) return;
-		const onScanCustomerChange = (customer) => {
-			dispatch({
-				type: "setClient",
-				payload: { value: customer }
-			});
-		};
-		const onDiscountListChange = (discount) => {
-			setDisCountList(discount);
-		};
-		pisellos.effects.on(ShopDiscountHooks.onScanCustomerChange, onScanCustomerChange);
-		pisellos.effects.on(ShopDiscountHooks.onLoadPrepareCalcResult, fn);
-		pisellos.effects.on(ShopDiscountHooks.onDiscountListChange, onDiscountListChange);
-		return () => {
-			shopDiscount.clear();
-			pisellos.effects.off(ShopDiscountHooks.onCustomerChange, onScanCustomerChange);
-			pisellos.effects.off(ShopDiscountHooks.onLoadPrepareCalcResult, fn);
-			pisellos.effects.off(ShopDiscountHooks.onDiscountListChange, onDiscountListChange);
-		};
-	}, [
-		state.bookingId,
-		isBooking4Shop,
-		fn
-	]);
-	const productListToValue = useMemoizedFn((list, edit) => {
-		const { serviceList, addonsList } = getServiceAddons(list);
-		serviceValueRef.current = serviceList;
-		addonsValueRef.current = addonsList;
-		let other = {};
-		if (edit) other = { edit: true };
-		dispatch({
-			type: "setService",
-			payload: {
-				value: serviceList,
-				...other
-			}
-		});
-		dispatch({
-			type: "setAddons",
-			payload: {
-				value: addonsList,
-				...other
-			}
-		});
-	});
-	const onScanCode = async () => {
-		const customerId = state.client.value?.id;
-		const val = await shopDiscount.scanCode(code, customerId);
-		console.log(val);
-		if (val?.isAvailable) {
-			productListToValue(val.productList, true);
-			setCode("");
-		} else PisellToast({ content: val.type === "server" ? locales.getText("pisell2.text.goodpass.code-invalid") : locales.getText("pisell2.text.goodpass.code-invalid-cart") });
-	};
-	const availableData = useMemo(() => {
-		if (!isBooking4Shop) return [];
-		const shopDiscount$1 = pisellos.getModule("shopDiscount");
-		return discountList.filter((item) => !!item.isAvailable).map((discount) => {
-			return {
-				...discount,
-				isDisabled: discount.isDisabled || discount.isDisabledForProductUsed || disabled,
-				savedAmount: shopDiscount$1.calcDiscountApplicableProductTotalPrice(discount)
-			};
-		});
-	}, [
-		discountList,
-		isBooking4Shop,
-		disabled
-	]);
-	if (!isBooking4Shop) return null;
-	const mixedSort = (val) => {
-		return [...val].sort((a, b) => {
-			return Number(b?.isSelected) - Number(a?.isSelected);
-		});
-	};
-	return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-footer-voucher-container" }, /* @__PURE__ */ React.createElement("div", { className: "voucher-title" }, /* @__PURE__ */ React.createElement("span", { className: "voucher-title-left" }, locales.getText("pisell2.text.goodpass")), /* @__PURE__ */ React.createElement("span", {
-		className: "voucher-title-right",
-		onClick: () => {
-			console.log("showDetail: ", showDetail);
-			setShowDetail(!showDetail);
-		}
-	}, locales.getText("pisell2.text.details"), " ", /* @__PURE__ */ React.createElement(ChevronDown, { className: classNames("voucher-right-icon", { show: showDetail }) }))), /* @__PURE__ */ React.createElement("div", { className: classNames("voucher-detail", { show: showDetail }) }, availableData?.length > 0 ? /* @__PURE__ */ React.createElement(PisellGoodPassCard, {
-		style: { width: "100%" },
-		mixedSort,
-		dataSource: state.service?.value?.length ? availableData : [],
-		onChange: (val) => {
-			const detail = pisellos.getModule("shopDiscount").setDiscountSelected({
-				discountId: val.id,
-				isSelected: val.isSelected
-			});
-			console.log("setDiscountSelected:", detail);
-			productListToValue(detail.productList, true);
-		}
-	}) : null, /* @__PURE__ */ React.createElement("div", { className: "voucher-code-input-wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "voucher-code-input" }, /* @__PURE__ */ React.createElement("div", { style: { whiteSpace: "nowrap" } }, locales.getText("pisell2.text.goodpass.code"), ":"), /* @__PURE__ */ React.createElement(PisellInput, {
-		value: code,
-		onChange: (e) => {
-			setCode(e.target?.value);
-		},
-		size: "small",
-		allowClear: true,
-		placeholder: locales.getText("pisell2.text.goodpass.enter-code")
-	})), /* @__PURE__ */ React.createElement(Button, {
-		size: "small",
-		onClick: onScanCode,
-		disabled: !code
-	}, locales.getText("pisell2.text.apply")))));
-};
-var voucher_default = VoucherCard;
-
-//#endregion
-export { voucher_default as default };

package/dist/es/components/booking/components/voucher/index.less

@@ -1,87 +0,0 @@
-.pisell-lowcode__booking-footer-voucher-container {
-  margin-bottom: 8px;
-  .voucher-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10px;
-
-    .voucher-title-left {
-      color: var(--base-black, #000);
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 28px;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .voucher-title-right {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      color: #7f56d9;
-      cursor: pointer;
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 500;
-    }
-
-    .voucher-right-icon {
-      font-size: 20px;
-      width: 24px;
-      height: 24px;
-      color: #7f56d9;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &.show {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .voucher-detail {
-    width: 100%;
-    transition: 0.2s;
-    max-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    &.show {
-      max-height: unset;
-    }
-  }
-
-  .voucher-code-input-wrapper {
-    margin-top: 6px;
-    display: flex;
-    width: 100%;
-    height: 42px;
-    padding: 8px;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-    border-radius: 8px;
-    border: 1px solid var(--Gray-300, #d0d5dd);
-    background: #fff;
-  }
-
-  .voucher-code-input {
-    display: flex;
-    align-items: center;
-    > div {
-      color: var(--Gray-500, #667085);
-      text-align: center;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 20px;
-      margin-right: 8px;
-    }
-  }
-}

package/dist/es/components/booking/components/voucher/utils.js

@@ -1,16 +0,0 @@
-//#region src/components/booking/components/voucher/utils.ts
-const getServiceAddons = (list) => {
-	const serviceList = [];
-	const addonsList = [];
-	list.forEach((item) => {
-		if (item.isAddons) addonsList.push(item);
-		else serviceList.push(item);
-	});
-	return {
-		serviceList,
-		addonsList
-	};
-};
-
-//#endregion
-export { getServiceAddons };

package/dist/es/components/booking/dashboard/index.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-
-//#region src/components/booking/dashboard/index.d.ts
-interface BookingDashboardProps extends React.HTMLAttributes<HTMLDivElement> {
-  backgroundColors?: string[];
-  labelColor?: string;
-  valueColor?: string;
-  otherParams?: Record<string, any>;
-  refreshKey?: string;
-  onDataChange?: (data: {
-    groupsOnSiteNow: string | number;
-    peopleOnSiteNow: string | number;
-    totalVisitorsToday: string | number;
-    ongoing: string | number;
-    upcoming: string | number;
-    overdue: string | number;
-    completed: string | number;
-    departed: string | number;
-  }, dataList: string[]) => void;
-}
-declare const BookingDashboard: (props: BookingDashboardProps) => JSX.Element;
-//#endregion
-export { BookingDashboard };

package/dist/es/components/booking/dashboard/index.js

@@ -1,204 +0,0 @@
-import { getLocale } from "../../../utils/locales.js";
-import locales_default from "../locales.js";
-import { request } from "../utils.js";
-import useEngineContext_default from "../../../hooks/useEngineContext.js";
-import { getBookingList } from "./serve.js";
-import dayjs from "dayjs";
-import React, { useEffect, useState } from "react";
-import { isArr, locales } from "@pisell/utils";
-import { PisellStatisticList } from "@pisell/materials";
-
-//#region src/components/booking/dashboard/index.tsx
-let translationOriginal = (text) => "";
-const formatCapacityToChildrenData = (data) => {
-	const map = {};
-	data.forEach((item) => {
-		const name = translationOriginal(item.name) || "default";
-		if (!map[name]) map[name] = {
-			label: !item.id ? locales.getText("pisell2.booking.dashboard.default") : translationOriginal(item.name) || "",
-			value: 0
-		};
-		map[name].value = (map[name].value || 0) + (item.value || 0);
-	});
-	return Object.values(map).filter((item) => !!item.value).sort((a, b) => b.label.localeCompare(a.label));
-};
-locales.init(locales_default, getLocale());
-const BookingDashboard = (props) => {
-	const { otherParams = {}, backgroundColors, labelColor, valueColor, refreshKey, onDataChange, ...others } = props;
-	const context = useEngineContext_default();
-	request.setRequest(context.appHelper.utils.request);
-	translationOriginal = context.appHelper.utils.translationOriginal;
-	const [data, setData] = useState([
-		{
-			label: locales.getText("pisell2.booking.dashboard.groups-on-site-now"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.groups-on-site-now-tip")
-		},
-		{
-			label: locales.getText("pisell2.booking.dashboard.people-on-site-now"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.people-on-site-now-tip")
-		},
-		{
-			label: locales.getText("pisell2.booking.dashboard.total-visitors-today"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.total-visitors-today-tip")
-		},
-		{
-			label: locales.getText("pisell2.booking.dashboard.ongoing-visitors"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.ongoing-visitors-tip")
-		},
-		{
-			label: locales.getText("pisell2.booking.dashboard.upcoming-visitors"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.upcoming-visitors-tip")
-		},
-		{
-			label: locales.getText("pisell2.booking.dashboard.overdue-visitors"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.overdue-visitors-tip")
-		},
-		{
-			label: locales.getText("pisell2.booking.dashboard.completed-visitors"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.completed-visitors-tip")
-		},
-		{
-			label: locales.getText("pisell2.booking.dashboard.departed-visitors"),
-			value: "-",
-			tip: locales.getText("pisell2.booking.dashboard.departed-visitors-tip")
-		}
-	]);
-	const [bookingData, setBookingData] = useState([]);
-	const getData = async () => {
-		setBookingData((await getBookingList({
-			...otherParams,
-			item_type: "appointment_booking",
-			parent_id: 0,
-			with: ["children"],
-			child_booking: 0,
-			skip: 1,
-			num: 1e3
-		})).list);
-	};
-	const calcBookingDataCount = (data$1) => {
-		let groupsOnSiteNow = "-";
-		let peopleOnSiteNow = "-";
-		let totalVisitorsToday = 0;
-		let totalVisitorsTodayChildren = [];
-		let ongoing = 0;
-		let ongoingChildren = [];
-		let upcoming = 0;
-		let upcomingChildren = [];
-		let overdue = "-";
-		let completed = 0;
-		let completedChildren = [];
-		let departed = "-";
-		data$1.forEach((item) => {
-			if (isArr(item.children)) item.children.forEach((child) => {
-				const start = dayjs(`${child.start_date} ${child.start_time}`);
-				const end = dayjs(`${child.end_date} ${child.end_time}`);
-				totalVisitorsToday += child.number;
-				totalVisitorsTodayChildren.push(...child.metadata?.capacity || []);
-				if (start < dayjs() && end > dayjs()) {
-					ongoing += child.number || 1;
-					ongoingChildren.push(...child.metadata?.capacity || []);
-				}
-				if (dayjs() < start) {
-					upcoming += child.number || 1;
-					upcomingChildren.push(...child.metadata?.capacity || []);
-				}
-				if (dayjs() > end) {
-					completed += child.number || 1;
-					completedChildren.push(...child.metadata?.capacity || []);
-				}
-			});
-		});
-		onDataChange?.({
-			groupsOnSiteNow,
-			peopleOnSiteNow,
-			totalVisitorsToday,
-			ongoing,
-			upcoming,
-			overdue,
-			completed,
-			departed
-		}, data$1);
-		setData([
-			{
-				label: locales.getText("pisell2.booking.dashboard.groups-on-site-now"),
-				tip: locales.getText("pisell2.booking.dashboard.groups-on-site-now-tip"),
-				value: `${groupsOnSiteNow}`
-			},
-			{
-				label: locales.getText("pisell2.booking.dashboard.people-on-site-now"),
-				tip: locales.getText("pisell2.booking.dashboard.people-on-site-now-tip"),
-				value: `${peopleOnSiteNow}`
-			},
-			{
-				label: locales.getText("pisell2.booking.dashboard.total-visitors-today"),
-				tip: locales.getText("pisell2.booking.dashboard.total-visitors-today-tip"),
-				value: `${totalVisitorsToday}`,
-				children: formatCapacityToChildrenData(totalVisitorsTodayChildren)
-			},
-			{
-				label: locales.getText("pisell2.booking.dashboard.ongoing-visitors"),
-				tip: locales.getText("pisell2.booking.dashboard.ongoing-visitors-tip"),
-				value: `${ongoing}`,
-				children: formatCapacityToChildrenData(ongoingChildren)
-			},
-			{
-				label: locales.getText("pisell2.booking.dashboard.upcoming-visitors"),
-				tip: locales.getText("pisell2.booking.dashboard.upcoming-visitors-tip"),
-				value: `${upcoming}`,
-				children: formatCapacityToChildrenData(upcomingChildren)
-			},
-			{
-				label: locales.getText("pisell2.booking.dashboard.overdue-visitors"),
-				tip: locales.getText("pisell2.booking.dashboard.overdue-visitors-tip"),
-				value: `${overdue}`
-			},
-			{
-				label: locales.getText("pisell2.booking.dashboard.completed-visitors"),
-				tip: locales.getText("pisell2.booking.dashboard.completed-visitors-tip"),
-				value: `${completed}`,
-				children: formatCapacityToChildrenData(completedChildren)
-			},
-			{
-				label: locales.getText("pisell2.booking.dashboard.departed-visitors"),
-				tip: locales.getText("pisell2.booking.dashboard.departed-visitors-tip"),
-				value: `${departed}`
-			}
-		]);
-	};
-	useEffect(() => {
-		calcBookingDataCount(bookingData);
-		const timer = setInterval(() => {
-			calcBookingDataCount(bookingData);
-		}, 60 * 1e3);
-		return () => {
-			clearInterval(timer);
-		};
-	}, [bookingData]);
-	useEffect(() => {
-		getData();
-		const timer = setInterval(() => {
-			getData();
-		}, 600 * 1e3);
-		return () => {
-			clearInterval(timer);
-		};
-	}, [JSON.stringify(otherParams), refreshKey]);
-	return /* @__PURE__ */ React.createElement(PisellStatisticList, {
-		...others,
-		data,
-		backgroundColors,
-		labelColor,
-		valueColor
-	});
-};
-var dashboard_default = BookingDashboard;
-
-//#endregion
-export { dashboard_default as default };

package/dist/es/components/booking/dashboard/serve.js

@@ -1,10 +0,0 @@
-import { request } from "../utils.js";
-
-//#region src/components/booking/dashboard/serve.ts
-const getBookingList = async (params) => {
-	let { data } = await request.getRequest().get(`/shop/schedule/booking`, params);
-	return data;
-};
-
-//#endregion
-export { getBookingList };

package/dist/es/components/booking/deposit/ClientItem/index.js

@@ -1,29 +0,0 @@
-import { isWalkIn } from "../../utils.js";
-import React, { useCallback } from "react";
-import { Avatar } from "antd";
-import { image, locales } from "@pisell/utils";
-import classNames from "classnames";
-import User01 from "@pisell/icon/src/User01";
-import "./index.less";
-
-//#region src/components/booking/deposit/ClientItem/index.tsx
-const ClientItem = (props) => {
-	const { data, coverSize = 48, style, className, walkInName } = props;
-	const getNickname = useCallback((item) => {
-		if (isWalkIn(item?.id)) return walkInName || locales.getText("pisell2.text.select-a-customer");
-		return item.name || (item.display_name || "").trim() || (item.nickname || "").trim() || "";
-	}, [locales.localeMap]);
-	return /* @__PURE__ */ React.createElement("div", {
-		style,
-		className: classNames("pisell-lowcode__client-item", className)
-	}, /* @__PURE__ */ React.createElement(Avatar, {
-		className: "pisell-lowcode__client-item-avatar",
-		src: image.ali(data?.cover, 100) || void 0,
-		size: coverSize,
-		icon: /* @__PURE__ */ React.createElement(User01, { className: "pisell-lowcode__client-item-avatar-icon" })
-	}), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__client-item-info" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__client-item-info-name" }, getNickname(data)), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__client-item-info-desc" }, data?.email ? /* @__PURE__ */ React.createElement("div", { className: "" }, data?.email) : null, data?.phone ? /* @__PURE__ */ React.createElement("div", { className: "" }, data?.phone) : null)));
-};
-var ClientItem_default = ClientItem;
-
-//#endregion
-export { ClientItem_default as default };

package/dist/es/components/booking/deposit/ClientItem/index.less

@@ -1,37 +0,0 @@
-.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;
-    }
-  }
-}