@pisell/private-materials 6.6.7 → 6.6.9

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

@@ -0,0 +1,710 @@
+import { getSumTotal } from "../../../booking/components/footer/amount.js";
+import { formatProducts } from "../../../booking/info/service2/utils.js";
+import useEngineContext_default from "../../../../hooks/useEngineContext.js";
+import { formatDateToStr, getDisabledEdit, getNextTimeSlice, restoreProductOtherData } from "../../utils/index.js";
+import info_default from "../../../booking/info/index.js";
+import { useStore } from "../../miniRedux.js";
+import { getBookingConfig, getBookingDetail, getEventBookingDetail, getOrderInfoByCode, getServices, serve_exports, voidAppointment } from "../../serve.js";
+import addServiceVariant_default from "../addServiceVariant/index.js";
+import timeBar_default from "../timeBar/index.js";
+import formatProductMessage_default from "../../utils/formatProductMessage.js";
+import dayjs from "dayjs";
+import React, { useEffect, useRef } from "react";
+import { message } from "antd";
+import { locales, sendWarningLog } from "@pisell/utils";
+import { useDebounceFn } from "ahooks";
+import "./index.less";
+
+//#region src/components/ticketBooking/components/ticketBooking/index.tsx
+const _formatBookingDetail = (data, modalState) => {
+	let { customer_id, holder, customer_name, email, phone, country_calling_code, bookings, customer, note, payment_status, is_other_entrance_edited, shop_discount } = data;
+	const clientValue = {
+		name: (customer?.display_name || "").trim() || (customer?.nickname || "").trim() || "",
+		id: customer_id || customer?.id || customer?.customer_id || 1,
+		email: customer?.email,
+		phone: customer?.phone || "",
+		country_calling_code: customer?.country_calling_code || "",
+		cover: customer?.cover || ""
+	};
+	const start_date = bookings?.list?.[0]?.start_date;
+	const dateValue = dayjs(start_date ? start_date + " " + bookings?.list?.[0]?.start_time : /* @__PURE__ */ new Date());
+	const getCapacity = (resetD) => {
+		return resetD.metadata?.capacity;
+	};
+	const getResource = (resetD) => {
+		if (!bookings.relation_type) try {
+			if (resetD?.event_resources && resetD?.event_resources?.length) return resetD.event_resources.reduce((pre, cur) => {
+				if (pre[cur.form_id]) pre[cur.form_id].push(cur);
+				else pre[cur.form_id] = [cur];
+				return pre;
+			}, {});
+		} catch (err) {
+			console.error(err);
+		}
+		return resetD.relation_id;
+	};
+	const serviceValue = bookings.list.map((d) => {
+		let { detail, product, ...resetD } = d;
+		let _detail = detail || mockProduct;
+		let start_date$1 = dayjs(resetD.start_date + " " + resetD.start_time);
+		let end_date = dayjs(resetD.end_date + " " + resetD.end_time);
+		return {
+			_id: (Math.random() + "").replace(/\D/g, "").substring(0, 11),
+			..._detail,
+			booking_id: resetD.id,
+			id: _detail.product_id,
+			title: _detail.product_title,
+			quantity: Number(_detail.product_quantity),
+			cover: _detail.product_cover,
+			price: Number(_detail.source_product_price),
+			relation_form_name: resetD.relation_form_name,
+			product_resource: product?.product_resource,
+			capacity: product?.capacity,
+			_extend: {
+				...resetD,
+				quantity: Number(_detail.product_quantity),
+				startDate: start_date$1,
+				start_date: start_date$1,
+				endDate: end_date,
+				end_date,
+				price: Number(_detail.source_product_price),
+				product_name: _detail.product_title,
+				discount_reason: _detail.product_discount_reason,
+				order_detail_id: _detail.order_detail_id,
+				total: Number(_detail.selling_price),
+				origin_total: Number(_detail.original_price),
+				payment_price: Number(_detail.payment_price),
+				other: restoreProductOtherData(d),
+				bundle_edit: 0,
+				discount_per: _detail.discount_per,
+				discount_type: _detail.discount_type,
+				discountway: _detail.discountway,
+				capacity: getCapacity(resetD),
+				resource: getResource(resetD)
+			}
+		};
+	});
+	let disabledEdit = getDisabledEdit(data);
+	let channelDisabledEdit = !!is_other_entrance_edited;
+	return {
+		...modalState,
+		client: {
+			...modalState.client,
+			value: clientValue,
+			edit: false,
+			showModal: false
+		},
+		date: {
+			...modalState.date,
+			value: dateValue,
+			edit: false,
+			showModal: false
+		},
+		pet: {
+			...modalState.pet,
+			showModal: false,
+			edit: false
+		},
+		service: {
+			...modalState.service,
+			value: serviceValue,
+			addModal: false,
+			editModal: false,
+			edit: false
+		},
+		notes: {
+			...modalState.notes,
+			orderNote: note,
+			edit: false
+		},
+		disabledEdit,
+		channelDisabledEdit,
+		appointment_status: bookings?.appointment_status
+	};
+};
+const TicketBooking = () => {
+	const [state, setState] = useStore();
+	const engineContext = useEngineContext_default();
+	const { props: engineProps } = engineContext.engine;
+	const { action, isTerminal, lowcodeRef, interaction, store, storage, Toast, getSymbolic, translation } = engineContext.appHelper?.utils;
+	const _persistentRef = useRef(false);
+	const _initStateRef = useRef({});
+	const _listTimerRef = useRef();
+	const _timerRef = useRef();
+	const _callbackFnRef = useRef();
+	const { run: clearAllCart } = useDebounceFn((type, orderId) => {
+		try {
+			_initFn(() => {});
+			setState({ createCount: state.createCount + 1 });
+			sendWarningLog({
+				title: "清空购物车",
+				content: [
+					{
+						key: "店铺id",
+						value: store?.getState?.()?.global?.globalConfig?.id
+					},
+					{
+						key: "订单id",
+						value: orderId
+					},
+					{
+						key: "类型",
+						value: type
+					}
+				]
+			});
+		} catch (err) {
+			sendWarningLog({
+				title: "清空购物车失败",
+				content: [
+					{
+						key: "店铺id",
+						value: store?.getState?.()?.global?.globalConfig?.id
+					},
+					{
+						key: "订单id",
+						value: orderId
+					},
+					{
+						key: "类型",
+						value: type
+					},
+					{
+						key: "error",
+						value: err?.message
+					}
+				]
+			});
+		}
+	}, {
+		wait: 500,
+		leading: true,
+		trailing: false
+	});
+	useEffect(() => {
+		localStorage.removeItem("bookingResourceList");
+		_persistentRef.current = storage.get(`drawer-booking`) === "true" ? true : isTerminal();
+		if (lowcodeRef) lowcodeRef.onReady(void 0);
+		if (action) action({
+			type: "pisell1.registerPlugin",
+			data: { pluginList: ["ProductDetailPlugin"] }
+		});
+		interaction?.utils?.mountFunction("booking", "scanBookingDetailResult", _scanBookingDetailResult);
+		const off = _addVisibilityListener(() => {
+			setState({ verticalAddServiceKey: state.verticalAddServiceKey + 1 });
+		});
+		setState({ amountSymbol: store?.getState?.()?.global?.symbol || "$" }, () => {
+			_initStateRef.current = JSON.parse(JSON.stringify(state));
+			_getBoardConfig();
+		});
+		_setShopOpeningHours();
+		_setIntervalTime(true);
+		interaction?.utils?.mountFunction("booking", "refreshBookingDetail", clearAllCart);
+		interaction?.utils?.mountFunction("bookingTicket", "clearAllCart", clearAllCart);
+		interaction?.utils?.mountFunction("booking", "voidBooking", (orderId) => {
+			voidAppointment(orderId);
+		});
+		return () => {
+			off?.();
+			if (_listTimerRef.current) clearInterval(_listTimerRef.current);
+		};
+	}, []);
+	const _onDateChange = (date, dateString) => {
+		_setIntervalTime(false);
+		setState({ isDateChange: true });
+		_setDataChange(date, dateString);
+	};
+	const _setIntervalTime = (isInterval) => {
+		clearInterval(_timerRef.current);
+		if (isInterval) {
+			setState({
+				isTimeChange: false,
+				isDateChange: false
+			});
+			if (state.bookingId) _openModal({});
+			_setDataChange(dayjs());
+			_timerRef.current = setInterval(() => {
+				_setDataChange(dayjs());
+			}, 1e3 * 60);
+		}
+		setState({ intervalSetTime: isInterval });
+	};
+	useEffect(() => {
+		const cartItems = state?.modalState?.service?.value;
+		if (!Array.isArray(cartItems) || cartItems.length === 0) interaction?.utils?.postMessageToApp?.({
+			module: "cds",
+			key: "cartUpdate",
+			data: {
+				currency_symbol: getSymbolic(),
+				total: "0",
+				products: [],
+				fees: []
+			}
+		});
+		const total = getSumTotal(state.modalState, true);
+		let formatedProducts = [];
+		try {
+			formatedProducts = formatProducts(cartItems, state.modalState, false, true, true);
+		} catch (error) {
+			console.error(error);
+		}
+		console.log("formatedProducts", total, formatedProducts);
+		let fees = [];
+		let products = [];
+		for (const item of formatedProducts) {
+			const { id, name, image: image$1, origin_total, total: total$1, num, note, _origin } = item;
+			_origin?.discount_list?.forEach((dl) => {
+				fees.push({
+					isReduce: dl.type === "good_pass",
+					title: translation(dl?.discount.title),
+					price: dl.amount,
+					type: dl.type
+				});
+			});
+			let msg = "";
+			try {
+				msg = formatProductMessage_default({
+					...item,
+					currency_symbol: getSymbolic()
+				}, engineContext.appHelper?.utils);
+			} catch (error) {
+				console.error(error);
+			}
+			let _item = {
+				productID: id,
+				title: name,
+				cover: image$1,
+				price: total$1,
+				buyCount: num,
+				productFormatMessage: msg,
+				note
+			};
+			if (origin_total !== total$1) _item.modifyPrice = origin_total;
+			products.push(_item);
+		}
+		console.log("formatedProducts", locales.getText("pisell2.product.card.cart-items")?.(products.length));
+		if (products.length > 0) fees.unshift({
+			title: locales.getText("pisell2.product.card.subtotal"),
+			price: total.productAmount,
+			type: "subtotal",
+			message: locales.getText("pisell2.product.card.cart-items")?.(products.length)
+		});
+		console.log("start post message, config:", {
+			module: "cds",
+			key: "cartUpdate",
+			data: {
+				currency_symbol: getSymbolic(),
+				total: total.productAmount,
+				products,
+				fees
+			}
+		});
+		interaction?.utils?.postMessageToApp?.({
+			module: "cds",
+			key: "cartUpdate",
+			data: {
+				currency_symbol: getSymbolic(),
+				total: total.expectAmount,
+				products,
+				fees
+			}
+		});
+	}, [state?.modalState?.service?.value]);
+	/**
+	* 设置弹窗内的状态
+	*/
+	const _setModalState = (props) => {
+		console.log("同步state到外层", props);
+		let newVal = { ...props };
+		if (newVal.service) newVal.service.value = newVal?.service?.value || [];
+		console.log(newVal?.service?.value, "newVal.service.value");
+		setState({ modalState: {
+			...state.modalState,
+			...newVal
+		} });
+	};
+	const _setDataChange = (date, dateString, isTimeChange) => {
+		if (state.modalState.disabledEdit) return;
+		_setListState({ params: {
+			...state.list.params,
+			booking_time_start_between: formatDateToStr([date.startOf(isTimeChange ? "minute" : "day"), date.endOf(isTimeChange ? "minute" : "day")])
+		} });
+		_setModalState({ date: {
+			...state.modalState.date,
+			value: date,
+			edit: true
+		} });
+		setTimeout(() => {
+			if (state.modalState.service?.value?.length) {
+				let _list = state.bookingFunctions?.updateServiceDate?.(state.modalState.service?.value, date, false);
+				_setModalState({ service: {
+					...state.modalState.service,
+					value: _list,
+					edit: true
+				} });
+			}
+		}, 100);
+	};
+	const _setShopOpeningHours = () => {
+		let time = store?.getState?.()?.global?.shopDetail?.operating_day_boundary?.time;
+		if (time) localStorage.setItem("shopOpeningHours", time);
+	};
+	const _getAddTimeProducts = async () => {
+		const data = await getServices({
+			skip: 1,
+			num: 500,
+			extension_type: ["product_add_time"]
+		});
+		console.log("wwww", data);
+		setState({ addTimeProducts: data?.list || [] });
+	};
+	/**
+	* 获取board配置
+	*/
+	const _getBoardConfig = async () => {
+		const { bookingConfigParams } = state;
+		const data = await getBookingConfig({ ...bookingConfigParams });
+		if (data?.config?.information_tab?.appointment_card?.quick_time) _getAddTimeProducts();
+		setState({ bookingConfig: data });
+	};
+	const _addVisibilityListener = (callback) => {
+		const handleVisibilityChange = () => {
+			if (!document.hidden) callback();
+		};
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		};
+	};
+	const _setListState = (data, cb) => {
+		setState({ list: {
+			...state.list,
+			...data
+		} }, () => {
+			cb?.();
+		});
+	};
+	const _getInitState = (resetProps = {}) => {
+		const { modalState } = state;
+		let initState = JSON.parse(JSON.stringify(_initStateRef.current || {}));
+		let _state = {
+			...initState,
+			...resetProps
+		};
+		let _modalState = { ...modalState };
+		for (let key in _modalState) {
+			if (key === "notes") {
+				_modalState[key].orderNote = initState.modalState[key].orderNote;
+				_modalState[key].internalNotes = initState.modalState[key].internalNotes;
+			} else if (typeof _modalState[key] === "object") {
+				if (key !== "date") _modalState[key].value = initState.modalState[key]?.value;
+			}
+			if (typeof _modalState[key] === "object") {
+				if (_modalState[key].showModal) _modalState[key].showModal = initState.modalState[key].showModal;
+				if (_modalState[key].addModal) _modalState[key].addModal = initState.modalState[key].addModal;
+				if (_modalState[key].editModal) _modalState[key].editModal = initState.modalState[key].editModal;
+				if (_modalState[key].edit) _modalState[key].edit = false;
+				if (_modalState[key].load) _modalState[key].load = initState.modalState[key].load;
+			}
+		}
+		_modalState.service.value = [];
+		_modalState.service.cacheItem = null;
+		_modalState.service.addTimeModal = false;
+		_modalState.service.changeService = false;
+		_modalState.disabledEdit = initState.modalState.disabledEdit;
+		_modalState.channelDisabledEdit = initState.modalState.channelDisabledEdit;
+		_modalState.appointment_status = initState.modalState.appointment_status;
+		_state.modalState = _modalState;
+		return _state;
+	};
+	const _getBookingType = (record) => {
+		const { type } = state;
+		if (record.parent_id > 0 && record.item_type !== "recurring_booking" && !type) return "pisell2";
+		return "pisell1";
+	};
+	const _scrollToBooking = (bookingId) => {
+		if (bookingId || state.bookingId) document.getElementById(bookingId || state.bookingId)?.scrollIntoView?.({
+			block: "center",
+			behavior: "smooth"
+		});
+	};
+	/**
+	* 初始化预约数据
+	*
+	*/
+	const _initBookingData = (type, data) => {
+		let initState = _getInitState({
+			bookingDetail: null,
+			bookingConfig: state.bookingConfig,
+			renderType: state.renderType,
+			isShowDeposit: state.isShowDeposit,
+			openRebook: state.openRebook,
+			disableEventBookingEdit: state.disableEventBookingEdit,
+			isShowInfo: state.isShowInfo,
+			persistent: state.persistent,
+			list: state.list,
+			intervalSetTime: state.intervalSetTime,
+			createCount: state.createCount,
+			bookingFunctions: state.bookingFunctions
+		});
+		if (type === "edit") {
+			initState.bookingDetail = data;
+			initState.modalState = _formatBookingDetail(data, state.modalState);
+		}
+		if (type === "create") {
+			if (data?.serviceParams?.start_date) {
+				initState.modalState.date.value = dayjs(data?.serviceParams?.start_date);
+				sessionStorage.setItem("pisell2.booking.serviceParams", JSON.stringify(data));
+			} else {
+				let timezone = store?.getState?.()?.global?.globalConfig?.timezone;
+				initState.modalState.date.value = dayjs.tz(/* @__PURE__ */ new Date(), timezone);
+				sessionStorage.removeItem("pisell2.booking.serviceParams");
+			}
+			if (data?.params?.customer) initState.modalState.client.value = data?.params.customer;
+			if (data?.eventBookingServiceParams) {}
+		}
+		console.log(initState, "initState");
+		setState({
+			...initState,
+			[state.renderType === "eventBooking" ? "eventOpen" : "open"]: true,
+			bookingId: state.bookingId
+		});
+	};
+	const _rebook = () => {
+		let date = getNextTimeSlice(state.bookingConfig?.config?.basic?.service_time.value || 10);
+		setState({ rebookState: {
+			...state.rebookState,
+			open: true,
+			date
+		} });
+	};
+	/**
+	* 获取预约详情
+	*
+	*/
+	const _getBookingDetail = async (bookingId) => {
+		const { renderType, openRebook } = state;
+		setState({ loading: true });
+		let data = await (renderType === "eventBooking" ? getEventBookingDetail : getBookingDetail)(bookingId || state.bookingId, {});
+		if (renderType === "eventBooking") data = {
+			...data,
+			bookings: {
+				...data.bookings,
+				list: [data.bookings]
+			}
+		};
+		console.log("getBookingDetail", data);
+		_initBookingData("edit", data);
+		if (openRebook) setTimeout(() => {
+			_rebook();
+		});
+	};
+	/**
+	* 打开模态框
+	*
+	*/
+	const _openModal = (props) => {
+		const { bookingId, serviceParams, params, eventBookingServiceParams, renderType = "booking", openRebook } = props || {};
+		setState({ isShowInfo: false });
+		const _isTerminal = isTerminal();
+		const defaultInit = () => {
+			if (renderType === "eventBooking") _getBoardConfig();
+			if (bookingId) _getBookingDetail(bookingId);
+			else _initBookingData("create", {
+				serviceParams,
+				params,
+				eventBookingServiceParams
+			});
+		};
+		const isOpen = state.open;
+		setState({
+			[renderType === "eventBooking" ? "eventOpen" : "open"]: true,
+			bookingId: bookingId || 0,
+			renderType,
+			openRebook,
+			disableEventBookingEdit: eventBookingServiceParams?.disableEventBookingEdit,
+			modalState: {
+				...state.modalState,
+				eventOtherParams: eventBookingServiceParams
+			},
+			isShowInfo: !_isTerminal,
+			persistent: storage.get(`drawer-booking`) === "true" ? true : _isTerminal
+		}, () => {
+			console.log(isOpen, "isOpen");
+			if (isOpen) setTimeout(() => {
+				setState({ isShowInfo: true });
+			});
+			defaultInit();
+		});
+	};
+	const _scanBookingDetailResult = async (detail) => {
+		Toast?.loading?.(locales.getText("pisell2.ticket-booking.loading"), 6e4);
+		let result = {};
+		try {
+			result = JSON.parse(detail) || {};
+		} catch (err) {}
+		if (!result?.value) {
+			message?.error(locales.getText("pisell2.ticket-booking.appointment-not-found"));
+			Toast?.hide();
+			return;
+		}
+		const objDetail = await getOrderInfoByCode({ code: result.value });
+		Toast?.hide();
+		if (!objDetail?.order_id || objDetail?.event_id === 0) {
+			message?.error(locales.getText("pisell2.ticket-booking.appointment-not-found"));
+			return;
+		}
+		if (_getBookingType(objDetail) === "pisell1") {
+			setState({ confirmOpen: true });
+			return;
+		}
+		_scrollToBooking(objDetail.order_id);
+		_openModal({
+			bookingId: objDetail.order_id,
+			id: objDetail.event_id
+		});
+	};
+	/**
+	* 执行动作, 触发2.0页面外部的动作
+	*
+	* @param props 动作属性
+	*/
+	const _onAction = (props) => {
+		if (props === "init") {
+			_getBookingDetail(state.bookingId);
+			return;
+		}
+		action?.(props);
+	};
+	const _setActiveTab = (key) => {};
+	const _initFn = (callback, open) => {
+		setState({
+			..._getInitState({
+				bookingDetail: null,
+				bookingConfig: state.bookingConfig,
+				renderType: state.renderType,
+				isShowDeposit: state.isShowDeposit,
+				disableEventBookingEdit: state.disableEventBookingEdit,
+				list: state.list,
+				intervalSetTime: state.intervalSetTime,
+				createCount: state.createCount,
+				bookingFunctions: state.bookingFunctions
+			}),
+			loading: false,
+			open: open ?? false,
+			eventOpen: false,
+			isShowInfo: false,
+			bookingId: 0
+		}, () => {
+			callback?.();
+		});
+	};
+	const _callback = (data, type) => {
+		if (isTerminal() && type === "checkout") return;
+		setState({ createCount: state.createCount + 1 });
+		if (data?.afterCloseUpdate) return _callbackFnRef.current = () => {
+			lowcodeRef?.onChange({
+				type: "refresh",
+				...data
+			});
+		};
+		const { bookingId, renderType } = state;
+		let cb;
+		if (bookingId && renderType !== "eventBooking") cb = () => {
+			_openModal({ bookingId });
+		};
+		if (!bookingId) _setIntervalTime(true);
+		_initFn(cb);
+	};
+	const _refreshData = () => {
+		if (lowcodeRef) lowcodeRef.onChange({ type: "refresh" });
+	};
+	const _clearAllValue = () => {
+		setState({ modalState: _getInitState().modalState });
+	};
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column"
+	} }, /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		overflow: "hidden"
+	} }, /* @__PURE__ */ React.createElement(addServiceVariant_default, {
+		globalState: {
+			...state.modalState,
+			amountSymbol: state.amountSymbol,
+			bookingConfig: state.bookingConfig,
+			bookingDetail: state.bookingDetail,
+			bookingId: state.bookingId,
+			bookingStatus: state.bookingStatus,
+			apis: serve_exports,
+			action: _onAction,
+			callback: _callback,
+			locale: engineProps.locale,
+			modalOpen: state.open,
+			onRebook: _rebook,
+			refreshData: _refreshData,
+			setActiveTab: _setActiveTab,
+			addTimeProducts: state.addTimeProducts,
+			isBookingCreatePage: true,
+			closeAutoOpenService: true,
+			productExtensionType: state.productExtensionType,
+			isBookingTicket2: true
+		},
+		setGlobalState: _setModalState
+	})), /* @__PURE__ */ React.createElement(timeBar_default, {
+		setGlobalState: setState,
+		globalState: state,
+		onDateChange: (...args) => {
+			_onDateChange(...args);
+		},
+		onDateTimeChange: (...args) => {
+			_setDataChange(...args, true);
+		},
+		setIntervalTime: _setIntervalTime,
+		locale: engineProps.locale
+	})), /* @__PURE__ */ React.createElement("div", { style: {
+		flexShrink: 0,
+		width: 355
+	} }, /* @__PURE__ */ React.createElement(info_default, {
+		key: state.createCount,
+		globalState: {
+			...state.modalState,
+			hideCreateText: true,
+			amountSymbol: state.amountSymbol,
+			bookingConfig: state.bookingConfig,
+			bookingDetail: state.bookingDetail,
+			bookingId: state.bookingId,
+			bookingStatus: state.bookingStatus,
+			apis: serve_exports,
+			modalOpen: state.open,
+			onRebook: _rebook,
+			addTimeProducts: state.addTimeProducts,
+			isBookingCreatePage: true,
+			closeAutoOpenService: true,
+			renderType: "booking",
+			action: _onAction,
+			callback: _callback,
+			locale: engineProps.locale,
+			refreshData: _refreshData,
+			setActiveTab: _setActiveTab,
+			clearAllValue: _clearAllValue,
+			drawerMask: true,
+			isBookingTicket2: true
+		},
+		setGlobalState: _setModalState,
+		setState,
+		modules: {
+			client: 1,
+			date: 0,
+			service: 1,
+			holder: 1,
+			note: 1
+		}
+	})));
+};
+var ticketBooking_default = TicketBooking;
+
+//#endregion
+export { _formatBookingDetail, ticketBooking_default as default };