@pisell/private-materials 6.6.8 → 6.6.9

package/dist/es/components/booking/components/TabProduct/productItem/index.js

@@ -0,0 +1,36 @@
+import { getDiscountTime } from "../../../utils.js";
+import pisellPriceText_default from "../../../../productSelect/components/pisellPriceText/index.js";
+import React, { useMemo } from "react";
+import { image, locales } from "@pisell/utils";
+import Decimal from "decimal.js";
+import classNames from "classnames";
+import "./index.less";
+
+//#region src/components/booking/components/TabProduct/productItem/index.tsx
+const ProductItem = ({ item, onClick, amountSymbol, style, className }) => {
+	const { price, is_bundle, minimum_markup_price } = item;
+	let _price = price;
+	if (is_bundle) _price = new Decimal(price).plus(new Decimal(minimum_markup_price)).toFixed(2);
+	const stockText = useMemo(() => {
+		if (item.is_track === 0) return false;
+		return `${item.stock_quantity} ${locales.getText("pisell2.text.stock")}`;
+	}, [item.stock_quantity, item.is_track]);
+	return /* @__PURE__ */ React.createElement("div", {
+		style,
+		className: classNames("server-product", className),
+		onClick: () => {
+			onClick(item, "select");
+		}
+	}, item.cover ? /* @__PURE__ */ React.createElement("img", {
+		src: image.ali(item.cover, 100),
+		className: "server-product-cover",
+		loading: "lazy"
+	}) : null, /* @__PURE__ */ React.createElement("div", { className: "server-product-content" }, /* @__PURE__ */ React.createElement("span", { className: "server-product-title" }, item.title), /* @__PURE__ */ React.createElement("div", { className: "server-product-time" }, getDiscountTime(item.service_times)), stockText && /* @__PURE__ */ React.createElement("div", { className: "server-product-time" }, stockText), /* @__PURE__ */ React.createElement("div", { className: "server-product-price" }, /* @__PURE__ */ React.createElement(pisellPriceText_default, {
+		value: _price,
+		isMini: is_bundle
+	}))));
+};
+var productItem_default = ProductItem;
+
+//#endregion
+export { productItem_default as default };

package/dist/es/components/booking/components/TabProduct/productItem/index.less

@@ -0,0 +1,69 @@
+.server-product {
+  cursor: pointer;
+  padding: 16px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(100% - 40px);
+    height: 1px;
+    background: #F1F1F1;
+  }
+
+  &:last-child {
+    &::before {
+      display: none;
+    }
+  }
+
+  .server-product-cover {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+
+  .server-product-content {
+    flex: 1;
+
+    .server-product-title {
+      color: var(--text-text-1, #1B1B1B);
+
+
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .server-product-time {
+      overflow: hidden;
+      color: var(--text-text-2, #777);
+      text-overflow: ellipsis;
+
+
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+    }
+
+    .server-product-price {
+      color: var(--text-text-1, #1B1B1B);
+
+
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+
+}

package/dist/es/components/booking/components/TabProduct/selectProductItem/index.js

@@ -0,0 +1,49 @@
+import collapsibleList_default from "../../collapsibleList/index.js";
+import { renderBundles } from "../../collapsibleList/utils.js";
+import browserSelect_default from "../../browserSelect/index.js";
+import React from "react";
+import { createArray, formatAmount, image, locales } from "@pisell/utils";
+import classNames from "classnames";
+import "./index.less";
+
+//#region src/components/booking/components/TabProduct/selectProductItem/index.tsx
+const SelectProductItem = ({ item, onClick, onChangeQuantity, amountSymbol, style, className, disabled }) => {
+	const list = createArray(100, (d, i) => {
+		let item$1 = {
+			label: i,
+			value: i
+		};
+		if (i === 0) item$1.label = locales.getText("pisell2.text.remove");
+		return item$1;
+	});
+	return /* @__PURE__ */ React.createElement("div", {
+		style,
+		className: classNames("server-select-product", className),
+		onClick: () => {
+			onClick?.(item);
+		}
+	}, item.cover ? /* @__PURE__ */ React.createElement("img", {
+		src: image.ali(item.cover, 100),
+		className: "server-select-product-cover"
+	}) : /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", { className: "server-select-product-content" }, /* @__PURE__ */ React.createElement("div", { className: "server-select-product-title" }, item.title), /* @__PURE__ */ React.createElement("div", { className: "server-select-product-subtitle" }, item.subtitle || ""), (item._extend?.other?.bundle || []).length ? /* @__PURE__ */ React.createElement(collapsibleList_default, {
+		style: { width: "100%" },
+		list: item._extend?.other?.bundle || [],
+		renderItem: (item$1) => renderBundles(item$1, amountSymbol)
+	}) : null, /* @__PURE__ */ React.createElement("div", {
+		className: "server-select-product-quantity",
+		onClick: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}, /* @__PURE__ */ React.createElement(browserSelect_default, {
+		options: list,
+		value: item._extend.quantity,
+		onChange: onChangeQuantity,
+		style: { minWidth: 50 },
+		disabled
+	}), /* @__PURE__ */ React.createElement("div", { className: "server-select-product-total" }, item._extend.origin_total !== item._extend.total && /* @__PURE__ */ React.createElement("span", { className: "server-select-product-origin-total" }, formatAmount(item._extend.origin_total * item._extend.quantity, 2, amountSymbol)), formatAmount(item._extend.total * item._extend.quantity, 2, amountSymbol)))));
+};
+var selectProductItem_default = SelectProductItem;
+
+//#endregion
+export { selectProductItem_default as default };

package/dist/es/components/booking/components/TabProduct/selectProductItem/index.less

@@ -0,0 +1,88 @@
+.server-select-product {
+  cursor: pointer;
+  padding: 16px;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(100% - 40px);
+    height: 1px;
+    background: #F1F1F1;
+  }
+
+  &:last-child {
+    &::before {
+      display: none;
+    }
+  }
+
+  .server-select-product-cover {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+
+  .server-select-product-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 4px;
+    min-height: 80px;
+
+    .server-select-product-title {
+      color: var(--Base-Black, #000);
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 30px;
+    }
+
+    .server-select-product-subtitle {
+      color: var(--Gray-600, #475467);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+    }
+
+    .server-select-product-quantity {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--Gray-600, #475467);
+
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+
+
+      .server-select-product-total {
+        color: var(--Base-Black, #000);
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+      }
+      .server-select-product-origin-total {
+        text-decoration: line-through;
+        color: #4e4e4e;
+        margin-right: 12px;
+      }
+    }
+
+
+
+  }
+
+}

package/dist/es/components/booking/components/TabProduct/tabs/index.js

@@ -0,0 +1,147 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import classNames from "classnames";
+import ChevronRight from "@pisell/icon/es/ChevronRight";
+import { useDebounceFn } from "ahooks";
+import ChevronLeft from "@pisell/icon/es/ChevronLeft";
+import "./index.less";
+
+//#region src/components/booking/components/TabProduct/tabs/index.tsx
+const Tabs = ({ renderTab, rowKey, name = "tabs-", onChange, tab, className, options }, ref) => {
+	const [isShowButton, setIsShowButton] = useState(true);
+	useImperativeHandle(ref, () => {
+		return { scroll: (tab$1) => {
+			if (tab$1) {
+				const dom = document.querySelector(`#${name}${tab$1}`);
+				if (dom) setTabScroll(dom?.offsetLeft);
+			}
+		} };
+	});
+	/**
+	* @Title: 改变tab事件
+	* @Describe:
+	* @Author: Wzw
+	* @param {RowKey} _key
+	*/
+	const _onChange = (_key, _item, e) => {
+		if (onChange) onChange(_key, _item);
+		setTabScroll(e.target.offsetLeft);
+	};
+	useEffect(() => {
+		if (options?.length) calculateWidth();
+	}, [options]);
+	/**
+	* @title: 判断是否展示箭头
+	* @description:
+	* @return {*}
+	* @Author: chensheng.gu
+	* @Date: 2023-08-01 15:59
+	*/
+	const calculateWidth = () => {
+		const content$1 = document.querySelector("#pisell-tabs");
+		if (document.querySelector("#pisell-tabs-content")?.offsetWidth + 60 < content$1?.offsetWidth) setIsShowButton(false);
+	};
+	/**
+	* @title: 选项
+	* @description:
+	* @param {*} useMemo
+	* @return {*}
+	* @Author: zhiwei.Wang
+	* @Date: 2023-06-03 10:44
+	*/
+	const _options = useMemo(() => {
+		return options || [];
+	}, [options]);
+	const [leftWidth, setLeftWidth] = useState(0);
+	const [rightWidth, setRightWidth] = useState(40);
+	const debounceChange = useDebounceFn(({ current, total }) => {
+		if (current === 0) setLeftWidth(0);
+		else setLeftWidth(40);
+		if (current + 10 >= total) setRightWidth(0);
+		else setRightWidth(40);
+	}, { wait: 200 });
+	const onScroll = (e) => {
+		let total = e.target.scrollWidth - e.target.clientWidth;
+		let current = e.target.scrollLeft;
+		debounceChange.run({
+			current,
+			total
+		});
+	};
+	const setTabScroll = (val) => {
+		let dom = document.querySelector("#pisell-tabs-content");
+		console.log("domdom", dom);
+		if (!dom) return;
+		dom.scrollLeft = val;
+	};
+	/**
+	* @title: 手动触发滚动位置
+	* @description:
+	* @param {*} type
+	* @return {*}
+	* @Author: zhiwei.Wang
+	* @Date: 2023-06-03 10:45
+	*/
+	const onPageChange = (type) => {
+		let dom = document.querySelector("#pisell-tabs-content");
+		if (!dom) return;
+		if (type === "left") setTabScroll(dom?.scrollLeft - dom.clientWidth / 2);
+		else setTabScroll(dom?.scrollLeft + dom.clientWidth / 2);
+	};
+	const leftBtn = useMemo(() => {
+		return /* @__PURE__ */ React.createElement("div", {
+			className: "booking-pisell-tabs-btn-left",
+			style: {
+				width: leftWidth,
+				marginLeft: !leftWidth ? "20px" : 0
+			},
+			onClick: () => {
+				onPageChange("left");
+			}
+		}, /* @__PURE__ */ React.createElement(ChevronRight, { className: "booking-pisell-tabs-btn-icon" }));
+	}, [leftWidth]);
+	const rightBtn = useMemo(() => {
+		return /* @__PURE__ */ React.createElement("div", {
+			className: "booking-pisell-tabs-btn-right",
+			style: {
+				width: rightWidth,
+				marginRight: !rightWidth ? "20px" : 0
+			},
+			onClick: () => {
+				onPageChange("right");
+			}
+		}, /* @__PURE__ */ React.createElement(ChevronLeft, {
+			type: "icona-iconArrowsLine",
+			className: "booking-pisell-tabs-btn-icon"
+		}));
+	}, [rightWidth]);
+	const content = useMemo(() => {
+		return /* @__PURE__ */ React.createElement("div", {
+			className: "booking-pisell-tabs-content",
+			id: "pisell-tabs-content",
+			onScroll
+		}, _options.map((d, i) => {
+			let _key = rowKey ? d[rowKey] : i;
+			return /* @__PURE__ */ React.createElement("div", {
+				className: classNames("booking-pisell-tabs-tab", { "booking-pisell-tabs-tab-active": tab === _key }),
+				key: _key,
+				id: name + "" + _key,
+				onClick: (e) => {
+					_onChange(_key, d, e);
+				}
+			}, renderTab ? renderTab(d) : /* @__PURE__ */ React.createElement("div", { className: "booking-pisell-tabs-tab-content" }, d.name));
+		}));
+	}, [
+		_options,
+		rowKey,
+		name,
+		tab
+	]);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames("booking-pisell-tabs", className),
+		id: "pisell-tabs"
+	}, isShowButton && leftBtn, content, isShowButton && rightBtn);
+};
+var tabs_default = forwardRef(Tabs);
+
+//#endregion
+export { tabs_default as default };

package/dist/es/components/booking/components/TabProduct/tabs/index.less

@@ -0,0 +1,126 @@
+.booking-pisell-tabs {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0d1619;
+  cursor: default;
+
+  .booking-pisell-tabs-btn-left,
+  .booking-pisell-tabs-btn-right {
+    -webkit-box-flex: 0;
+    flex-grow: 0;
+    flex-shrink: 0;
+    transition: width 300ms ease 0s;
+    cursor: pointer;
+    overflow: visible;
+    background: #fff;
+    z-index: 1;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    overflow: hidden;
+    user-select: none;
+
+    .booking-pisell-tabs-btn-icon {
+      width: 24px;
+      height: 24px;
+      background: #f1f1f1;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #262626;
+      font-size: 20px;
+    }
+  }
+
+  .booking-pisell-tabs-btn-left {
+    .booking-pisell-tabs-btn-icon {
+      transform: rotate(180deg);
+
+    }
+  }
+
+  .booking-pisell-tabs-btn-right {
+    /* White */
+
+    background: #ffffff;
+    /* shadow-lg */
+
+    // box-shadow: 0px 6px 15px -3px rgba(0, 0, 0, 0.15);
+
+    .booking-pisell-tabs-btn-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  .booking-pisell-tabs-content {
+    width: 100%;
+    max-width: none;
+    overflow: scroll hidden;
+    scroll-snap-type: x mandatory;
+    white-space: nowrap;
+    display: flex;
+    position: relative;
+    scroll-behavior: smooth;
+
+    /*滚动条样式*/
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-track {
+      display: none;
+    }
+
+    .booking-pisell-tabs-tab {
+      scroll-snap-align: start;
+      white-space: initial;
+      flex-shrink: 0;
+      cursor: pointer;
+
+      .booking-pisell-tabs-tab-content {
+        display: inline-flex;
+        height: 40px;
+        padding: 0px 16px;
+        border-radius: 88px;
+        -webkit-box-align: center;
+        align-items: center;
+        transition: all 300ms ease 0s;
+        color: #1b1b1b;
+        letter-spacing: 0px;
+        min-width: 0px;
+        font-weight: 600;
+        font-size: 14px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        .booking-pisell-tabs-tab-content {
+          background-color: #f1f1f1;
+        }
+      }
+
+      &.booking-pisell-tabs-tab-active {
+        .booking-pisell-tabs-tab-content {
+          color: #fff;
+          background: var(--primary-600, #7F56D9);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Skeleton, message } from "antd";
+import { isFunction, locales } from "@pisell/utils";
+import PlusCircle from "@pisell/icon/es/PlusCircle";
+import classNames from "classnames";
+import ChevronRight from "@pisell/icon/es/ChevronRight";
+import "./index.less";
+
+//#region src/components/booking/components/addButton/index.tsx
+/**
+* @title: 添加按钮,  两种状态切换
+* @description:
+* @return {*}
+* @Author: zhiwei.Wang
+* @Date: 2024-01-30 16:42
+*/
+const AddButton = ({ onClick, showSub, title, subTitle, style, disabled, loading, showDisabledMessage = true }) => {
+	const _onClick = () => {
+		if (disabled) {
+			if (showDisabledMessage) message.warning(locales.getText("pisell2.text.please-select-the-customer-first"));
+		} else onClick?.();
+	};
+	if (loading) return /* @__PURE__ */ React.createElement(Skeleton, {
+		style: { marginTop: 16 },
+		loading: true,
+		round: true,
+		active: true
+	});
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, showSub ? /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-lowcode__booking-add-button-add-row",
+		onClick: _onClick,
+		style: isFunction(style) ? style(showSub) : style
+	}, /* @__PURE__ */ React.createElement(PlusCircle, { className: "pisell-lowcode__booking-add-button-add-row-icon" }), /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-add-button-add-row-txt" }, subTitle)) : /* @__PURE__ */ React.createElement("div", {
+		className: classNames("pisell-lowcode__booking-add-button-add", { "pisell-lowcode__booking-add-button-add-disabled": disabled }),
+		onClick: _onClick,
+		style: isFunction(style) ? style(showSub) : style
+	}, /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-add-button-add-label" }, title), /* @__PURE__ */ React.createElement(ChevronRight, { className: "pisell-lowcode__booking-add-button-add-icon" })));
+};
+var addButton_default = AddButton;
+
+//#endregion
+export { addButton_default as default };

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

@@ -0,0 +1,64 @@
+.pisell-lowcode__booking-add-button-add-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 16px 0;
+
+  .pisell-lowcode__booking-add-button-add-row-icon {
+    color: #7f56d9;
+    width: 24px;
+    height: 24px;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pisell-lowcode__booking-add-button-add-row-txt {
+    color: #7f56d9;
+
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    /* 150% */
+  }
+}
+
+.pisell-lowcode__booking-add-button-add {
+  border-radius: 8px;
+  border: 1px solid var(--gray-300, #D0D5DD);
+  background: var(--base-white, #FFF);
+  /* Shadow/xs */
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  cursor: pointer;
+  margin-bottom: 16px;
+
+  .pisell-lowcode__booking-add-button-add-label {
+    color: var(--gray-500, #667085);
+
+    /* Text md/Regular */
+
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    /* 150% */
+  }
+
+  .pisell-lowcode__booking-add-button-add-icon {
+    font-size: 20px;
+    color: #667085;
+  }
+}
+
+.pisell-lowcode__booking-add-button-add-disabled {
+  opacity: .5;
+  cursor: not-allowed;
+  user-select: none;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/components/booking/components/authWrap/index.tsx
+const AuthWrap = (props) => {
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, props.show ? props.trueRender : props.falseRender || null);
+};
+var authWrap_default = AuthWrap;
+
+//#endregion
+export { authWrap_default as default };

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

@@ -0,0 +1,36 @@
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import "./index.less";
+
+//#region src/components/booking/components/browserSelect/index.tsx
+/**
+* @title: 系统级别的下拉框
+* @description:
+* @param {BrowserSelectProps} props
+* @return {*}
+* @Author: zhiwei.Wang
+* @Date: 2024-01-30 16:43
+*/
+const BrowserSelect = (props) => {
+	const { options, ...resetProps } = props;
+	const _options = useMemo(() => {
+		return (props.options || []).map((d) => {
+			return /* @__PURE__ */ React.createElement("option", {
+				value: d.value,
+				key: d.value
+			}, d.label);
+		});
+	}, [props.options]);
+	return /* @__PURE__ */ React.createElement("select", {
+		...resetProps,
+		className: classNames("pisell-browser-select", resetProps.className),
+		onChange: (e) => {
+			e.persist();
+			resetProps.onChange?.(e);
+		}
+	}, _options);
+};
+var browserSelect_default = BrowserSelect;
+
+//#endregion
+export { browserSelect_default as default };

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

@@ -0,0 +1,18 @@
+.pisell-browser-select {
+  padding: 4px 10px;
+  border-radius: 20px;
+  background-color: var(--Gray-true-100, #F5F5F5);
+  background-image: url('./chevron-down.png');
+  color: var(--Gray-true-900, #141414);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-position: right 10px center;
+  background-size: 12px;
+  background-repeat: no-repeat;
+}