@pisell/private-materials 6.6.7 → 6.6.9

package/dist/es/components/pisellSelectCustomerModal/RightPanel/Add/index.less

@@ -0,0 +1,35 @@
+.select-customer-right-panel-add-client {
+  width: 100%;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+
+  .select-customer-right-panel-add-client__footer {
+    position: sticky;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    display: flex;
+    gap: 16px;
+  }
+}
+
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}

package/dist/es/components/pisellSelectCustomerModal/RightPanel/List/index.js

@@ -0,0 +1,52 @@
+import CustomerCard_default from "../../CustomerCard/index.js";
+import React, { useMemo } from "react";
+import { Button, Skeleton } from "antd";
+import { locales } from "@pisell/utils";
+import PlusCircle from "@pisell/icon/es/PlusCircle";
+import classNames from "classnames";
+import { PisellEmpty } from "@pisell/materials";
+import CheckCircle from "@pisell/icon/es/CheckCircle";
+import "./index.less";
+
+//#region src/components/pisellSelectCustomerModal/RightPanel/List/index.tsx
+const CustomerList = (props) => {
+	const { value, onChange, phone, customerOrigin, onLoadMore, loading, setPage } = props;
+	const list = useMemo(() => {
+		return customerOrigin?.list || [];
+	}, [customerOrigin, phone]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, list.length ? /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-list" }, list.map((item) => {
+		const active = item.id === value?.id;
+		return /* @__PURE__ */ React.createElement(CustomerCard_default, {
+			key: item.id,
+			className: classNames("select-customer-right-panel-item", { "select-customer-right-panel-item-active": active }),
+			customer: item,
+			showIcon: active,
+			customIcon: /* @__PURE__ */ React.createElement(CheckCircle, { style: {
+				fontSize: 28,
+				color: "#079455"
+			} }),
+			onClickItem: () => {
+				onChange(item);
+			}
+		});
+	}), customerOrigin.list.length < customerOrigin.count ? /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-load-more" }, /* @__PURE__ */ React.createElement(Button, {
+		onClick: onLoadMore,
+		loading
+	}, locales.getText("pisell2.text.load-more"))) : null) : !loading ? /* @__PURE__ */ React.createElement(PisellEmpty, {
+		description: locales.getText("pisell2.text.no-results-found"),
+		imageStyle: { height: "auto" },
+		extraDescription: /* @__PURE__ */ React.createElement("div", {
+			className: "select-customer-right-panel-add",
+			onClick: () => {
+				setPage("create");
+			}
+		}, /* @__PURE__ */ React.createElement(PlusCircle, { className: "select-customer-right-panel-header-icon" }), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.text.create-new-client")))
+	}) : /* @__PURE__ */ React.createElement(Skeleton, {
+		round: true,
+		active: true
+	}));
+};
+var List_default = CustomerList;
+
+//#endregion
+export { List_default as default };

package/dist/es/components/pisellSelectCustomerModal/RightPanel/List/index.less

@@ -0,0 +1,49 @@
+.select-customer-right-panel-list {
+  width: 100%;
+  flex: 1;
+  overflow-y: auto;
+
+  .select-customer-right-panel-item {
+    border: none;
+    position: relative;
+
+    // &::before {
+    //   content: '';
+    //   position: absolute;
+    //   bottom: 0;
+    //   left: 0;
+    //   width: 100%;
+    //   height: 100%;
+    //   background: transparent;
+    //   z-index: 1;
+    //   height: 1px;
+    //   background-color: #eaecf0;
+    // }
+
+    &.select-customer-right-panel-item-active,
+    &:hover {
+      background: var(--Gray-100, #F2F4F7);
+
+      // &::before {
+      // display: none;
+      // }
+    }
+  }
+}
+
+.select-customer-right-panel-load-more {
+  padding: 10px 0;
+  text-align: center;
+}
+
+.select-customer-right-panel-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #7f56d9;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  gap: 8px;
+}

package/dist/es/components/pisellSelectCustomerModal/RightPanel/index.js

@@ -0,0 +1,106 @@
+import useEngineContext_default from "../../../hooks/useEngineContext.js";
+import { request } from "../../../utils/index.js";
+import { getCustomerList } from "./serve.js";
+import List_default from "./List/index.js";
+import Add_default from "./Add/index.js";
+import React, { useEffect, useMemo, useState } from "react";
+import { locales } from "@pisell/utils";
+import PlusCircle from "@pisell/icon/es/PlusCircle";
+import classNames from "classnames";
+import { useRequest } from "ahooks";
+import ChevronLeft from "@pisell/icon/es/ChevronLeft";
+import "./index.less";
+
+//#region src/components/pisellSelectCustomerModal/RightPanel/index.tsx
+const defaultParams = {
+	skip: 1,
+	num: 10,
+	sort_by: "id",
+	search: ""
+};
+const RightPanel = (props) => {
+	const { value, onChange, phone } = props;
+	const [page, setPage] = useState("list");
+	const context = useEngineContext_default();
+	request.setRequest(context.appHelper.utils.request);
+	const [customerOrigin, setCustomerOrigin] = useState({
+		skip: 1,
+		count: 0,
+		list: []
+	});
+	const [params, setParams] = useState(defaultParams);
+	const _getCustomerList = useRequest(getCustomerList, {
+		manual: true,
+		onSuccess: (res, param) => {
+			const _params = param[0];
+			setParams(_params);
+			let list = [];
+			if (_params.skip === 1) list = res.list;
+			else list = customerOrigin.list.concat(res.list);
+			setCustomerOrigin({
+				...res,
+				list
+			});
+		}
+	});
+	useEffect(() => {
+		if (page !== "list") return;
+		_getCustomerList.run({
+			...defaultParams,
+			search: phone
+		});
+	}, [phone, page]);
+	const header = useMemo(() => {
+		if (page === "list") return /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-header" }, /* @__PURE__ */ React.createElement("span", null, phone ? locales.getText("pisell2.text.result-found") : locales.getText("pisell2.text.personnel-list")), /* @__PURE__ */ React.createElement("span", {
+			className: "select-customer-right-panel-header-create-btn",
+			onClick: () => {
+				setPage("create");
+			}
+		}, /* @__PURE__ */ React.createElement(PlusCircle, { className: "select-customer-right-panel-header-icon" }), locales.getText("pisell2.text.create")));
+		return /* @__PURE__ */ React.createElement("div", { className: classNames("select-customer-right-panel-header", { "select-customer-right-panel-header-create": page === "create" }) }, /* @__PURE__ */ React.createElement(ChevronLeft, {
+			className: "select-customer-right-panel-header-icon select-customer-right-panel-header-icon-back",
+			onClick: () => {
+				setPage("list");
+			}
+		}), locales.getText("pisell2.text.create-new-client"));
+	}, [phone, page]);
+	/**
+	* @title: 创建客户
+	* @description:
+	* @param {any} values
+	* @return {*}
+	* @Author: zhiwei.Wang
+	* @Date: 2024-11-02 09:31
+	*/
+	const addChange = (values) => {
+		setPage("list");
+		if (values?.is_checked) onChange?.(values);
+		setCustomerOrigin({
+			...customerOrigin,
+			count: customerOrigin.count + 1,
+			list: [values].concat(customerOrigin.list)
+		});
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel" }, /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-header" }, header), page === "list" ? /* @__PURE__ */ React.createElement(List_default, {
+		loading: _getCustomerList.loading,
+		phone,
+		customerOrigin,
+		value,
+		onChange,
+		onLoadMore: () => {
+			if (customerOrigin.list.length >= customerOrigin.count) return;
+			_getCustomerList.run({
+				...params,
+				skip: params.skip + 1
+			});
+		},
+		setPage
+	}) : null, page === "create" ? /* @__PURE__ */ React.createElement(Add_default, {
+		phone,
+		onChange: addChange
+	}) : null);
+};
+var RightPanel_default = RightPanel;
+
+//#endregion
+export { RightPanel_default as default };

package/dist/es/components/pisellSelectCustomerModal/RightPanel/index.less

@@ -0,0 +1,50 @@
+.select-customer-right-panel {
+  width: 348px;
+  height: 511px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .select-customer-right-panel-header {
+    color: var(--Gray-900, #101828);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 44px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .select-customer-right-panel-header-create {
+      justify-content: flex-start;
+    }
+
+    .select-customer-right-panel-header-create-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+
+    .select-customer-right-panel-header-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      cursor: pointer;
+      font-size: 24px;
+    }
+
+    .select-customer-right-panel-header-icon-back {
+      justify-content: flex-start;
+      width: 24px;
+    }
+  }
+}

package/dist/es/components/pisellSelectCustomerModal/RightPanel/serve.js

@@ -0,0 +1,19 @@
+import { request } from "../../../utils/index.js";
+
+//#region src/components/pisellSelectCustomerModal/RightPanel/serve.ts
+const getCustomerList = async (params) => {
+	let { data } = await request.getRequest().get(`/shop/customer/select-list`, params, {
+		abort: true,
+		fullResult: true
+	});
+	return data;
+};
+const addCustomer = async (params) => {
+	return (await request.getRequest().post(`/shop/customer`, params, {
+		abort: true,
+		fullResult: true
+	}))?.data;
+};
+
+//#endregion
+export { addCustomer, getCustomerList };

package/dist/es/components/pisellSelectCustomerModal/index.d.ts

@@ -0,0 +1,18 @@
+import { CustomerCardProps } from "./CustomerCard/index.js";
+import { PopoverProps } from "antd";
+import "./index.less";
+
+//#region src/components/pisellSelectCustomerModal/index.d.ts
+type CustomerDetail = any;
+interface PisellSelectCustomerModalProps {
+  value?: CustomerDetail;
+  onChange: (e: CustomerDetail) => void;
+  popoverProps: PopoverProps;
+  cardProps?: CustomerCardProps;
+  virtualKeyboardProps?: any;
+  keyboardProps?: any;
+  virtualKeyInputProps?: any;
+}
+declare const PisellSelectCustomerModal: (props: PisellSelectCustomerModalProps) => JSX.Element;
+//#endregion
+export { PisellSelectCustomerModal };

package/dist/es/components/pisellSelectCustomerModal/index.js

@@ -0,0 +1,196 @@
+import { getLocale } from "../../utils/locales.js";
+import useEngineContext_default from "../../hooks/useEngineContext.js";
+import CustomerCard_default from "./CustomerCard/index.js";
+import RightPanel_default from "./RightPanel/index.js";
+import locales_default from "./locales.js";
+import React, { useEffect, useMemo, useState } from "react";
+import { Popover } from "antd";
+import { locales } from "@pisell/utils";
+import { VirtualKeyboard } from "@pisell/materials";
+import "./index.less";
+
+//#region src/components/pisellSelectCustomerModal/index.tsx
+const items = [
+	{
+		value: 1,
+		label: "1",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 2,
+		label: "2",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 3,
+		label: "3",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 4,
+		label: "4",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 5,
+		label: "5",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 6,
+		label: "6",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 7,
+		label: "7",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 8,
+		label: "8",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: 9,
+		label: "9",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: "+",
+		label: "+",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: "0",
+		label: "0",
+		disabled: false,
+		type: "text"
+	},
+	{
+		value: "reset",
+		label: "Reset",
+		disabled: false,
+		type: "text"
+	}
+];
+const PisellSelectCustomerModal = (props) => {
+	const { onChange, value, popoverProps, virtualKeyboardProps, keyboardProps, virtualKeyInputProps, cardProps } = props;
+	const [open, setOpen] = useState(false);
+	const [_value, set_value] = useState();
+	const [phone, setPhone] = useState("");
+	useEngineContext_default();
+	locales.init(locales_default, getLocale());
+	useEffect(() => {
+		set_value(value);
+	}, [value]);
+	/**
+	* @title: 返回逻辑
+	* @description:
+	* @param {any} e
+	* @return {*}
+	* @Author: zhiwei.Wang
+	* @Date: 2024-11-02 09:30
+	*/
+	const _onChange = (e) => {
+		set_value(e);
+		onChange?.(e);
+		setOpen(false);
+	};
+	const onOpenChange = (e) => {
+		setOpen(e);
+	};
+	useEffect(() => {
+		if (open) document.body.classList.add("hide-scroll");
+		else setTimeout(() => {
+			document.body.classList.remove("hide-scroll");
+		}, 150);
+	}, [open]);
+	useEffect(() => {
+		document.body.id = "body";
+	}, []);
+	const adjustFontSize = useMemo(() => {
+		if (!phone) return 30;
+		const maxFontSize = 60;
+		const minFontSize = 10;
+		const defaultFontSize = maxFontSize;
+		const inputWidth = 248;
+		const span = document.createElement("span");
+		span.style.position = "absolute";
+		span.style.whiteSpace = "nowrap";
+		span.style.visibility = "hidden";
+		span.style.fontSize = `${defaultFontSize}px`;
+		span.textContent = phone;
+		document.body.appendChild(span);
+		let fontSize = maxFontSize;
+		while (span.offsetWidth > inputWidth && fontSize > minFontSize) {
+			fontSize -= .5;
+			span.style.fontSize = `${fontSize}px`;
+		}
+		document.body.removeChild(span);
+		return fontSize;
+	}, [phone]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover, {
+		content: /* @__PURE__ */ React.createElement(VirtualKeyboard, {
+			style: { zoom: .8 },
+			keyboardProps: {
+				keydown: false,
+				items,
+				onChange: (e) => {
+					if (e === "reset") {
+						setPhone("");
+						return;
+					}
+					setPhone(phone + String(e));
+				},
+				...keyboardProps
+			},
+			virtualKeyInputProps: {
+				value: phone,
+				onChange: (e) => {
+					setPhone(e.target.value);
+				},
+				placeholder: locales.getText("pisell2.text.search-customer-by-phone-number"),
+				style: {
+					textAlign: "left",
+					fontSize: adjustFontSize
+				},
+				className: "pisell-select-customer-modal-input",
+				...virtualKeyInputProps
+			},
+			rightPanel: /* @__PURE__ */ React.createElement(RightPanel_default, {
+				value: _value,
+				phone,
+				onChange: _onChange
+			}),
+			...virtualKeyboardProps
+		}),
+		open,
+		placement: "bottom",
+		arrow: false,
+		onOpenChange,
+		trigger: ["click"],
+		...popoverProps
+	}, /* @__PURE__ */ React.createElement(CustomerCard_default, {
+		onClickItem: () => {
+			setOpen(true);
+		},
+		customer: _value,
+		onRemove: _onChange,
+		...cardProps
+	})));
+};
+var pisellSelectCustomerModal_default = PisellSelectCustomerModal;
+
+//#endregion
+export { pisellSelectCustomerModal_default as default };

package/dist/es/components/pisellSelectCustomerModal/index.less

@@ -0,0 +1,22 @@
+body {
+  &.hide-scroll {
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-track {
+      display: none;
+    }
+  }
+}
+
+.pisell-select-customer-modal-input {
+  &::placeholder {
+    font-size: 30px;
+  }
+}

package/dist/es/components/pisellSelectCustomerModal/locales.js

@@ -0,0 +1,84 @@
+//#region src/components/pisellSelectCustomerModal/locales.ts
+var locales_default = {
+	"en": {
+		"pisell2.text.leave-empty-for-walk-in": "Leave empty for walk-in",
+		"pisell2.text.date-year-text": "YYYY",
+		"pisell2.text.date-month-text": "MM",
+		"pisell2.text.date-day-text": "DD",
+		"pisell2.text.gender": "Gender",
+		"pisell2.text.gender.male": "Male",
+		"pisell2.text.gender.female": "Female",
+		"pisell2.text.birthday": "Birthday",
+		"pisell2.text.phone": "Phone Number",
+		"pisell2.text.email": "Email",
+		"pisell2.text.lastname": "Last Name",
+		"pisell2.text.firstname": "First Name",
+		"pisell2.text.email-error-message": "Email format error",
+		"pisell2.text.notes": "Note",
+		"pisell2.text.save": "Save",
+		"pisell2.text.save-and-select": "Save and select",
+		"pisell2.text.no-results-found": "No results found.",
+		"pisell2.text.create-new-client": "Create new client",
+		"pisell2.text.result-found": "Result found",
+		"pisell2.text.personnel-list": "Personnel list",
+		"pisell2.text.load-more": "Load more",
+		"pisell2.text.add-client.confirm": "Fill in at least one name, phone number and email address",
+		"pisell2.text.search-customer-by-phone-number": "Search by phone number",
+		"pisell2.text.create": "Create"
+	},
+	"zh-CN": {
+		"pisell2.text.leave-empty-for-walk-in": "未选择表示 Walk-In",
+		"pisell2.text.date-year-text": "年",
+		"pisell2.text.date-month-text": "月",
+		"pisell2.text.date-day-text": "日",
+		"pisell2.text.gender": "性别",
+		"pisell2.text.gender.male": "男",
+		"pisell2.text.gender.female": "女",
+		"pisell2.text.birthday": "生日",
+		"pisell2.text.phone": "电话号码",
+		"pisell2.text.email": "电子邮箱",
+		"pisell2.text.lastname": "姓",
+		"pisell2.text.firstname": "名",
+		"pisell2.text.email-error-message": "电子邮件格式错误",
+		"pisell2.text.notes": "备注",
+		"pisell2.text.save": "保存",
+		"pisell2.text.save-and-select": "保存并选中",
+		"pisell2.text.no-results-found": "没有搜索到结果",
+		"pisell2.text.create-new-client": "创建新客户",
+		"pisell2.text.result-found": "搜索结果",
+		"pisell2.text.personnel-list": "客户列表",
+		"pisell2.text.add-client.confirm": "姓名,电话,邮箱至少填一个",
+		"pisell2.text.load-more": "加载更多",
+		"pisell2.text.search-customer-by-phone-number": "输入手机号搜索客户",
+		"pisell2.text.create": "创建"
+	},
+	"zh-HK": {
+		"pisell2.text.leave-empty-for-walk-in": "未選擇表示 Walk-In",
+		"pisell2.text.date-year-text": "年",
+		"pisell2.text.date-month-text": "月",
+		"pisell2.text.date-day-text": "日",
+		"pisell2.text.gender": "性别",
+		"pisell2.text.gender.male": "男",
+		"pisell2.text.gender.female": "女",
+		"pisell2.text.birthday": "生日",
+		"pisell2.text.phone": "電話號碼",
+		"pisell2.text.email": "電子郵箱",
+		"pisell2.text.lastname": "姓",
+		"pisell2.text.firstname": "名",
+		"pisell2.text.email-error-message": "電子郵件格式錯誤",
+		"pisell2.text.notes": "備註",
+		"pisell2.text.save": "保存",
+		"pisell2.text.save-and-select": "保存並選中",
+		"pisell2.text.no-results-found": "沒有搜索到客戶",
+		"pisell2.text.create-new-client": "創建新客戶",
+		"pisell2.text.result-found": "搜索結果",
+		"pisell2.text.personnel-list": "客戶列表",
+		"pisell2.text.add-client.confirm": "姓名，電話，郵箱至少填一個",
+		"pisell2.text.load-more": "加載更多",
+		"pisell2.text.search-customer-by-phone-number": "輸入手機號搜索客戶",
+		"pisell2.text.create": "創建"
+	}
+};
+
+//#endregion
+export { locales_default as default };

package/dist/es/components/productExtension/card/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.less";
+
+//#region src/components/productExtension/card/index.tsx
+const LmCard = (props) => {
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames("pisell_card", props.className, { ["pisell_card-hidden"]: props.hidden }),
+		style: props.style
+	}, props.header ? /* @__PURE__ */ React.createElement("div", { className: "pisell_card-header" }, /* @__PURE__ */ React.createElement("div", { className: classNames("pisell_card-title", props.headerClassName) }, props.header), props.extra) : null, /* @__PURE__ */ React.createElement("div", { className: classNames("pisell_card-content") }, props.children));
+};
+var card_default = LmCard;
+
+//#endregion
+export { card_default as default };

package/dist/es/components/productExtension/card/index.less

@@ -0,0 +1,34 @@
+.pisell_card {
+  width: 100%;
+  background: #ffffff;
+  opacity: 1;
+  border-radius: 12px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+  // overflow: hidden;
+
+  &.pisell_card-hidden {
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    padding: 0;
+    margin: 0
+  }
+
+  .pisell_card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    .pisell_card-title {
+      height: 28px;
+      font-size: 16px;
+      // font-weight: 650;
+      line-height: 28px;
+      color: #252a2d;
+      font-weight: bold;
+    }
+  }
+}