@pisell/private-materials 6.6.8 → 6.6.9

package/dist/es/components/booking/info/service/addService/utils.js

@@ -0,0 +1,174 @@
+import { isDayBooking, isDayBookingProduct, updateAppointmentServicePrice } from "../../service2/utils.js";
+import { flexibleObj, formatResource, getDiscountTime, getDuration, getEndDate, getServeStartTime, getServerItemExtend, sliceDayIntoFiveMinutes } from "../../../utils.js";
+import { getMultiDayPrices } from "../../utils.js";
+import dayjs from "dayjs";
+import React from "react";
+import { locales } from "@pisell/utils";
+import AlertTriangle from "@pisell/icon/es/AlertTriangle";
+
+//#region src/components/booking/info/service/addService/utils.tsx
+const getDurationProps = ({ cacheItem, useStartTime, currentResource, slice }) => {
+	let _cacheItem = cacheItem;
+	return {
+		startDate: dayjs(dayjs(_cacheItem._extend.start_date).format("YYYY-MM-DD ") + (getServeStartTime(useStartTime) || "00:00")),
+		usableTime: currentResource?._extend?.usableTime,
+		duration: getDuration(_cacheItem?.duration),
+		locale: locales.locale,
+		slice,
+		selectProps: { size: "large" }
+	};
+};
+/**
+* @title: 灵活时长选项
+* @description:
+* @param {*} useMemo
+* @return {*}
+* @Author: zhiwei.Wang
+* @Date: 2024-02-23 10:10
+*/
+const getFlexibleOption = ({ cacheItem, useStartTime, currentResource, slice, durationProps }) => {
+	const _durationProps = durationProps || getDurationProps({
+		cacheItem,
+		useStartTime,
+		currentResource,
+		slice
+	});
+	let _duration = _durationProps.duration;
+	if (_duration === "flexible") {
+		let timeValue = getEndDate(_durationProps.startDate, _duration, _durationProps.usableTime?.end_at ? dayjs(_durationProps.usableTime?.end_at) : null).diff(_durationProps.startDate, "minute");
+		return {
+			label: locales.getText("pisell2.text.flexible"),
+			value: flexibleObj.create(timeValue)
+		};
+	}
+	return null;
+};
+/**
+* @title: 时间切片
+* @description:
+* @return {*}
+* @Author: zhiwei.Wang
+* @Date: 2024-01-09 13:37
+*/
+const getTimeObj = ({ cacheItem, useStartTime, currentResource, state, useDuration, durationProps }) => {
+	const flexibleOption = getFlexibleOption({
+		cacheItem,
+		useStartTime,
+		currentResource,
+		state,
+		durationProps
+	});
+	let obj = sliceDayIntoFiveMinutes(state.bookingConfig?.config?.basic?.service_time, locales.locale, isDayBooking(state));
+	let timeSlices = [...obj.timeSlices];
+	let durationSlicesBasedOnTime = [...obj.durationSlicesBasedOnTime];
+	if (flexibleOption) durationSlicesBasedOnTime.unshift(flexibleOption);
+	if (useDuration && !durationSlicesBasedOnTime.some((d) => d.value === useDuration)) durationSlicesBasedOnTime.unshift({
+		label: getDiscountTime(useDuration, isDayBooking(state)),
+		value: useDuration,
+		disabled: true
+	});
+	if (useStartTime && useStartTime !== "now" && !timeSlices.some((d) => d.value === useStartTime)) timeSlices.unshift({
+		label: dayjs(useStartTime, "HH:mm").format("hh:mm A"),
+		value: useStartTime
+	});
+	timeSlices.unshift({
+		label: locales.getText("pisell2.text.now"),
+		value: "now"
+	});
+	return {
+		...obj,
+		timeSlices,
+		durationSlicesBasedOnTime
+	};
+};
+/**
+* @title: 获取资源列表
+* @description:
+* @return {*}
+* @Author: zhiwei.Wang
+* @Date: 2024-01-09 13:38
+*/
+const formatResources = ({ cacheItem, resourcesOrigin, isDay }) => {
+	try {
+		let _list = [...resourcesOrigin];
+		const _cacheItem = cacheItem;
+		_list = _list.map((d) => formatResource(d, _cacheItem, (item) => {
+			return /* @__PURE__ */ React.createElement("div", { className: "resource-option" }, /* @__PURE__ */ React.createElement("div", { className: "like-wrap" }), item.labelText, !item.usable && /* @__PURE__ */ React.createElement(AlertTriangle, { className: "resource-option-alert-icon" }));
+		}, isDay));
+		_list = _list.sort((a, b) => b.usable ? 1 : -1);
+		return _list;
+	} catch (err) {
+		console.log("formatResourcesErr", err);
+	}
+	return [];
+};
+const checkCacheItemResource = ({ cacheItem, resources }) => {
+	let resourceId = cacheItem._extend.resource;
+	if (resourceId || resourceId === 0) {
+		if (!resources.find((d) => d?.form_record_id === resourceId)) resourceId = void 0;
+	} else if (cacheItem.new) {
+		if (resources.length <= 2) resourceId = resources?.[resources?.length - 1]?.form_record_id;
+		if (resources.length > 2) {
+			const usableList = resources.filter((d) => d.usable && d.form_id !== 0);
+			if (usableList.length === 1) resourceId = usableList?.[0]?.form_record_id;
+		}
+	}
+	return resourceId;
+};
+/**
+* @title: 预生成服务的 extend
+* @description:
+* @param {any} param1
+* @return {*}
+* @Author: zhiwei.Wang
+* @Date: 2024-06-01 13:25
+*/
+const getProductExtend = ({ cacheItem, state }) => {
+	if (!cacheItem.new && cacheItem._extend.endDate) return cacheItem._extend;
+	const resourcesOrigin = state.service.resourcesOrigin || [];
+	let currentResource = null;
+	if (!cacheItem.new) {
+		let item = formatResources({
+			cacheItem,
+			resourcesOrigin
+		}).find((d) => d?.form_record_id == cacheItem._extend?.resource) || {};
+		if (item) currentResource = item;
+	}
+	let _extend = getServerItemExtend(state, cacheItem, getTimeObj({
+		cacheItem,
+		currentResource,
+		state
+	}));
+	const resources = formatResources({
+		cacheItem: {
+			...cacheItem,
+			_extend
+		},
+		resourcesOrigin
+	});
+	_extend.resource = checkCacheItemResource({
+		cacheItem: {
+			...cacheItem,
+			_extend
+		},
+		resources
+	});
+	return _extend;
+};
+const getMultiDay = async ({ start_date, end_date, state, cacheItem }) => {
+	let _cacheItem = cacheItem || state.service.cacheItem;
+	if (isDayBookingProduct(_cacheItem, state)) {
+		const { multiDayPrices, price } = await updateAppointmentServicePrice(state, {
+			start_date,
+			end_date,
+			product_id: _cacheItem.product_id
+		});
+		_cacheItem._extend.multiDayPrices = getMultiDayPrices(multiDayPrices || []);
+		if (!multiDayPrices?.length) _cacheItem._extend.price = price;
+		return _cacheItem;
+	}
+	return _cacheItem;
+};
+
+//#endregion
+export { formatResources, getDurationProps, getFlexibleOption, getMultiDay, getProductExtend, getTimeObj };

package/dist/es/components/booking/info/service/addTimeModal/index.js

@@ -0,0 +1,399 @@
+import { flexibleObj, getDiscountTime, getNowTime, getResourceTimeIsUsable, isNowTime, isWalkIn } from "../../../utils.js";
+import { Context } from "../../model.js";
+import drawer_default from "../../../components/drawer/index.js";
+import useEngineContext_default from "../../../../../hooks/useEngineContext.js";
+import browserSelect_default from "../../../components/browserSelect/index.js";
+import footer_default from "../../../components/footer/index.js";
+import { addTimeRowKey, getAddTimeSplits, isUsableProduct } from "./utils.js";
+import { getAddTimeProducts, saveAddTimeProduct } from "./serve.js";
+import dayjs from "dayjs";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Alert, Button, Skeleton, message } from "antd";
+import { createArray, formatAmount, formatDate, locales } from "@pisell/utils";
+import classNames from "classnames";
+import { useDebounceFn, useMemoizedFn, useUpdateEffect } from "ahooks";
+import "./index.less";
+
+//#region src/components/booking/info/service/addTimeModal/index.tsx
+const numberList = createArray(100, (d, i) => {
+	return {
+		label: i + 1,
+		value: i + 1
+	};
+});
+const AddTimeModal = () => {
+	const { state, dispatch } = useContext(Context);
+	const [isEdit, setIsEdit] = useState(false);
+	const [loading, setLoading] = useState("");
+	const [recordKey, setRecordKey] = useState("");
+	const [number, setNumber] = useState(1);
+	const originServices = useRef([]);
+	const [renderList, setRenderList] = useState([]);
+	const { interaction } = useEngineContext_default().appHelper?.utils;
+	const statusMap = {
+		available: {
+			label: locales.getText("page.booking.text.available"),
+			color: "#079455"
+		},
+		fully_booked: {
+			label: locales.getText("page.booking.text.fully-booked"),
+			color: "#DC6803"
+		},
+		unavailable: {
+			label: locales.getText("page.booking.text.unavailable"),
+			color: "#98A2B3"
+		}
+	};
+	const updateServices = useDebounceFn(() => {
+		createNewServices();
+	}, { wait: 200 });
+	const transaction_habit_selection = useMemo(() => {
+		return state?.bookingConfig?.config?.information_tab?.transaction_habit_selection || {
+			type: "service_now_pay_later",
+			button_rows: 1
+		};
+	}, [state?.bookingConfig?.config?.information_tab]);
+	const currentProductId = useMemo(() => {
+		return addTimeRowKey.getValue(recordKey).product_id;
+	}, [recordKey]);
+	const currentTime = useMemo(() => {
+		return addTimeRowKey.getValue(recordKey).time || "";
+	}, [recordKey]);
+	const currentProduct = useMemo(() => {
+		return (renderList || []).find((d) => d.id == currentProductId);
+	}, [renderList, currentProductId]);
+	const currentTimeItem = useMemo(() => {
+		return currentProduct?.times?.find((d) => d.value == currentTime) || { price: 0 };
+	}, [currentTime, currentProduct]);
+	const currentResource = useMemo(() => {
+		return (state.service?.resourcesOrigin || []).find((d) => d.form_record_id == state.service.cacheItem?._extend?.relation_id);
+	}, [state.service.cacheItem, state.service.resourcesOrigin]);
+	const currentResourceTimeEndDate = useMemo(() => {
+		try {
+			if (!currentResource || !state.service.cacheItem?._extend) return "";
+			let timeItem = currentResource?.times.find((_time) => _time.item_id === state.service.cacheItem._extend.relation_id);
+			return dayjs(timeItem.end_date + " " + timeItem.end_time).add(1, "second");
+		} catch (err) {
+			console.log("err", err);
+		}
+		return "";
+	}, [state.service.cacheItem, currentResource]);
+	const getTimeUsableStatus = (time) => {
+		if (!state.service.cacheItem?._extend || !currentResource) return { status: statusMap.unavailable };
+		try {
+			let _extend = { ...state.service.cacheItem._extend };
+			_extend.endDate = _extend.endDate.add(time, "minutes");
+			_extend.start_date = _extend.startDate;
+			_extend.end_date = _extend.endDate;
+			_extend.end_time = _extend.endDate.format("HH:mm");
+			_extend.start_time = _extend.startDate.format("HH:mm");
+			_extend.duration = flexibleObj.add(_extend.duration, time);
+			if (isNowTime(_extend.start_time)) _extend.start_time = getNowTime();
+			_extend.startDate.format("hh:mm A");
+			let endText = _extend.endDate.format("hh:mm A");
+			if (_extend.endDate.isAfter(_extend.startDate, "day")) endText = locales.getText("pisell1.text.tomorrow") + endText;
+			let timeItem = currentResource?.times.find((_time) => _time.item_id === _extend.relation_id);
+			if (!getResourceTimeIsUsable(timeItem, {
+				...state.service.cacheItem,
+				_extend: {
+					...state.service.cacheItem._extend,
+					..._extend
+				}
+			})._extend?.isUsable) return {
+				status: statusMap.unavailable,
+				message: `${currentResource.room_name || currentResource.name} ${locales.getText("pisell2.text.status.service-error-2")}`
+			};
+		} catch (err) {}
+		return { status: statusMap.available };
+	};
+	const _getAddTimeProducts = async () => {
+		return (await getAddTimeProducts({
+			skip: 1,
+			num: 500,
+			open_quotation: 1,
+			status: "published",
+			schedule_date: state.date.value.format("YYYY-MM-DD"),
+			customer_id: isWalkIn(state.client?.value?.id) ? void 0 : state.client?.value?.id,
+			extension_type: ["product_add_time"],
+			status: "published"
+		}, { useCache: true }))?.list || [];
+	};
+	const getTimeProducts = async () => {
+		setLoading("list");
+		let list = (await _getAddTimeProducts()).map((d) => {
+			let isUsable = isUsableProduct(d.add_time, state.service.cacheItem);
+			return {
+				...d,
+				usable: isUsable,
+				times: isUsable ? getAddTimeSplits(d, state.service.cacheItem, currentResourceTimeEndDate).map((time) => {
+					return {
+						...time,
+						status: getTimeUsableStatus(time.value)
+					};
+				}) : void 0
+			};
+		}).filter((d) => d.usable && d.times.length).sort((a, b) => b.sort - a.sort);
+		setRenderList(list);
+		if (list.length) setDefaultProduct(list);
+		setLoading("");
+		setIsEdit(true);
+	};
+	const setDefaultProduct = (list) => {
+		try {
+			let productId = list[0].id;
+			let time = list[0].times[0].value;
+			setRecordKey(addTimeRowKey.create(productId, time));
+		} catch (err) {}
+	};
+	useUpdateEffect(() => {
+		if (state.service.addTimeModal) {
+			getTimeProducts();
+			originServices.current = state.service;
+		} else updateServices.run();
+	}, [state.service.addTimeModal]);
+	const onSelectItem = useMemoizedFn((pItem, item) => {
+		setRecordKey(addTimeRowKey.create(pItem.id, item.value));
+		setIsEdit(true);
+		updateServices.run();
+	});
+	const newService = useMemo(() => {
+		if (!currentProduct || !state.service.cacheItem) return null;
+		const relation_product = {
+			product_add_schedule_time: currentTime,
+			num: number,
+			price: currentTimeItem.price || 0,
+			product_id: currentProduct.id,
+			discount_amount: 0,
+			product_discount_reason: "",
+			is_charge_tax: currentProduct.is_charge_tax,
+			discountway: "num",
+			discount_type: "discount"
+		};
+		let _extend = { ...state.service.cacheItem._extend };
+		let relation_products = [relation_product];
+		_extend.endDate = _extend.endDate.add(relation_product.product_add_schedule_time, "minutes");
+		const start_date = _extend.startDate.format("YYYY-MM-DD");
+		const end_date = _extend.endDate.format("YYYY-MM-DD");
+		const end_time = _extend.endDate.format("HH:mm");
+		let start_time = _extend.startDate.format("HH:mm");
+		let duration = flexibleObj.add(_extend.duration, relation_product.product_add_schedule_time);
+		if (isNowTime(_extend.start_time)) start_time = getNowTime();
+		_extend.relation_details = (_extend.relation_details || []).concat(relation_products);
+		_extend.duration = duration;
+		_extend.start_time = start_time;
+		_extend.end_time = end_time;
+		_extend.start_date = start_date;
+		_extend.end_date = end_date;
+		return {
+			id: _extend.id,
+			relation_id: _extend.relation_id,
+			like_status: _extend.like_status,
+			relation_type: _extend.relation_type,
+			is_all: _extend.is_all,
+			schedule_id: _extend.schedule_id,
+			end_time,
+			sub_type: _extend.sub_type,
+			select_date: start_date,
+			start_time,
+			end_date,
+			start_date,
+			duration,
+			number: _extend.number || 1,
+			relation_products,
+			_extend
+		};
+	}, [
+		currentTime,
+		state.service.cacheItem,
+		currentProduct,
+		number,
+		currentTimeItem
+	]);
+	const resetService = () => {
+		let _val = originServices.current?.value || [];
+		let _edit = originServices.current?.edit;
+		originServices.current = null;
+		dispatch({
+			type: "setService",
+			payload: {
+				value: _val,
+				edit: _edit
+			}
+		});
+	};
+	const createNewServices = useMemoizedFn(() => {
+		let _list = state.service?.value || [];
+		if (!originServices.current) return;
+		if (state.service.addTimeModal) {
+			_list = _list.map((d) => {
+				let _item = { ...d };
+				if (_item._extend.id === newService?.id) _item = {
+					..._item,
+					...newService || {},
+					_extend: newService?._extend
+				};
+				return _item;
+			});
+			dispatch({
+				type: "setService",
+				payload: {
+					value: _list,
+					edit: true
+				}
+			});
+		} else resetService();
+	});
+	const goCheckout = async () => {
+		/** terminal中打开原生checkout模块 */
+		if (state.isTerminal) return interaction?.utils?.postMessageToApp?.({
+			module: "booking",
+			key: "booking_checkout",
+			data: {
+				order_id: state.bookingId,
+				callbackType: "pisell2"
+			}
+		});
+		state.action({
+			type: "pisell1.handlePayment",
+			data: { orderId: state.bookingId },
+			callback: () => {
+				state?.callback();
+			}
+		});
+	};
+	const handleCheckout = useMemoizedFn(async () => {
+		if (isEdit) await handleSave("checkout");
+		goCheckout();
+	});
+	const handleSave = useMemoizedFn(async (loadingType = "save") => {
+		if (currentTime === null) return;
+		setLoading(loadingType);
+		await saveAddTimeProduct({
+			orderId: state.bookingId,
+			params: {
+				...newService,
+				_extend: void 0
+			}
+		});
+		setLoading("");
+		message.success(locales.getText("page.booking.text.add-time-success"));
+		onCancel();
+		if (loadingType === "checkout") return;
+		state?.action("init");
+	});
+	useEffect(() => {
+		if (!state.modalOpen) onCancel();
+	}, [state.modalOpen]);
+	const onCancel = useMemoizedFn(() => {
+		setIsEdit(false);
+		setRecordKey("");
+		resetService();
+		setTimeout(() => {
+			dispatch({
+				type: "setService",
+				payload: { addTimeModal: false }
+			});
+		}, 50);
+	});
+	const updateTime = useMemo(() => {
+		if (!newService) return "";
+		let startTime = newService.start_time;
+		let endTime = newService.end_time;
+		let hours = getDiscountTime(flexibleObj.getValue(newService.duration));
+		if (newService.start_date !== newService.end_date) {
+			const locale = state.locale;
+			const format = locale === "en" || locale === "en-US" ? "HH:mm DD/MM" : "MM-DD HH:mm";
+			startTime = formatDate(`${newService.start_date} ${newService.start_time}`, format);
+			endTime = formatDate(`${newService.end_date} ${newService.end_time}`, format);
+		}
+		return `${locales.getText("page.booking.text.update-time")}: ${startTime} ~ ${endTime} (${hours})`;
+	}, [newService, state.locale]);
+	return useMemo(() => {
+		return /* @__PURE__ */ React.createElement(drawer_default, {
+			titleNoWrap: true,
+			open: state.service.addTimeModal,
+			title: locales.getText("page.booking.text.add-time"),
+			rootClassName: "booking-server-wrap",
+			onClose: onCancel,
+			footerStyle: { padding: "10px 32px 20px" },
+			hideScrollBar: false,
+			bodyStyle: { position: "relative" },
+			footer: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-total-wrap" }, currentTimeItem && currentTimeItem?.status?.message ? /* @__PURE__ */ React.createElement(Alert, {
+				message: currentTimeItem.status.message,
+				type: "warning",
+				showIcon: true,
+				style: { marginBottom: 12 }
+			}) : null, newService ? /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-summary-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-summary" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-summary-time" }, updateTime), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-summary-total" }, locales.getText("pisell1.text.subtotal"), ":", " ", formatAmount((currentTimeItem.price || 0) * number, 2, state.amountSymbol))), currentProduct?.add_time?.calculate_type === "select_quantity" && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-quantity-wrap" }, /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-add-time-quantity" }, locales.getText("page.booking.text.quantity")), " ", /* @__PURE__ */ React.createElement(browserSelect_default, {
+				value: number,
+				onChange: (e) => {
+					setNumber(Number(e.target.value));
+					updateServices.run();
+				},
+				className: "pisell-lowcode__booking-add-time-quantity-select",
+				options: numberList
+			}))) : null), /* @__PURE__ */ React.createElement(footer_default, {
+				state,
+				dispatch,
+				source: "addTime",
+				buttons: [/* @__PURE__ */ React.createElement(Button, {
+					className: "pisell-lowcode__booking-footer-buttons-item",
+					type: transaction_habit_selection.type === "service_now_pay_later" ? "default" : "primary",
+					disabled: loading === "list" || !isEdit || !currentTime,
+					onClick: handleCheckout,
+					loading: loading === "checkout"
+				}, locales.getText("pisell2.text.checkout")), /* @__PURE__ */ React.createElement(Button, {
+					className: "pisell-lowcode__booking-footer-buttons-item",
+					type: transaction_habit_selection.type === "service_now_pay_later" ? "primary" : "default",
+					disabled: loading === "list" || !isEdit || !currentTime,
+					loading: loading === "save",
+					onClick: () => {
+						handleSave("save");
+					}
+				}, locales.getText("pisell2.text.save"))]
+			}))
+		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-body" }, /* @__PURE__ */ React.createElement(Skeleton, {
+			loading: loading === "list",
+			active: true,
+			round: true
+		}, /* @__PURE__ */ React.createElement("div", { className: "" }, renderList.map((d) => {
+			return /* @__PURE__ */ React.createElement("div", { className: "" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-hours" }, d.title), d.times ? /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-list" }, d.times.map((child) => {
+				return /* @__PURE__ */ React.createElement("div", {
+					className: classNames("pisell-lowcode__booking-add-time-child-card", { "pisell-lowcode__booking-add-time-child-card-active": recordKey === addTimeRowKey.create(d.id, child.value) }),
+					onClick: () => {
+						if (!child.value) return;
+						onSelectItem(d, child);
+					}
+				}, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left-time" }, child.label), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-add-time-child-card-left-price" }, formatAmount(child.price, 2, state.amountSymbol))), /* @__PURE__ */ React.createElement("div", {
+					className: "pisell-lowcode__booking-add-time-child-card-right",
+					style: { color: child.status?.status?.color }
+				}, child.status?.status?.label));
+			})) : null);
+		}))), /* @__PURE__ */ React.createElement("div", { className: "" })));
+	}, [
+		state.service.addTimeModal,
+		locales,
+		currentTimeItem,
+		currentTimeItem?.status?.message,
+		newService,
+		updateTime,
+		currentTimeItem.price,
+		number,
+		state.amountSymbol,
+		currentProduct?.add_time?.calculate_type,
+		numberList,
+		updateServices.run,
+		state,
+		dispatch,
+		transaction_habit_selection.type,
+		loading,
+		isEdit,
+		currentTime,
+		transaction_habit_selection.type,
+		renderList,
+		recordKey
+	]);
+};
+var addTimeModal_default = AddTimeModal;
+
+//#endregion
+export { addTimeModal_default as default };