@pisell/private-materials 6.6.7 → 6.6.9

package/dist/lib/components/eventBooking/components/bookingDetailModal/components/Resource.js

@@ -0,0 +1,34 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.js');
+const require_Detail = require('../../../../Sales/Event/Detail.js');
+const require_index = require('../../resourceDisplay/index.js');
+const require_index$1 = require('../../OpenCard/index.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/eventBooking/components/bookingDetailModal/components/Resource.tsx
+const Resource = (props) => {
+	const { detail } = require_Detail.useEventDetail();
+	const resource = detail?.resource || [];
+	return /* @__PURE__ */ react.default.createElement(require_index$1.default, {
+		showBorder: true,
+		showArrow: false,
+		showHeader: false,
+		className: "detail-resource-wrap"
+	}, resource?.map((item, index) => {
+		return /* @__PURE__ */ react.default.createElement("div", {
+			key: index,
+			className: "item"
+		}, /* @__PURE__ */ react.default.createElement("span", { className: "title" }, item.title), item.children?.map((i) => {
+			return /* @__PURE__ */ react.default.createElement(require_index.default, {
+				key: i.id,
+				dataSource: i,
+				showSubtitle: false,
+				isClickable: false
+			});
+		}));
+	}));
+};
+var Resource_default = Resource;
+
+//#endregion
+exports.default = Resource_default;

package/dist/lib/components/eventBooking/components/bookingDetailModal/components/Schedule.js

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.js');
+const require_index = require('../../../../Sales/Init/index.js');
+const require_Detail = require('../../../../Sales/Event/Detail.js');
+const require_index$1 = require('../../OpenCard/index.js');
+const require_index$2 = require('../../scheduleCalendar/index.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_utils = require("@pisell/utils");
+
+//#region src/components/eventBooking/components/bookingDetailModal/components/Schedule.tsx
+const Schedule = () => {
+	const { initData } = require_index.useInit();
+	const { detail, getEventDetailSelectDate } = require_Detail.useEventDetail();
+	return /* @__PURE__ */ react.default.createElement(require_index$1.default, {
+		title: __pisell_utils.locales.getText("pisell2.event.schedule"),
+		showBorder: true,
+		isClick: false,
+		showArrow: false
+	}, /* @__PURE__ */ react.default.createElement(require_index$2.default, {
+		showScheduleName: false,
+		data: detail?.selectDate?.dates || [],
+		onChange: (e) => {
+			const id = detail?.introduction?._originData?.id;
+			if (!id) return;
+			getEventDetailSelectDate.run(id, {
+				days: 366,
+				start_date: `${e}-01-01`
+			});
+		},
+		type: initData?.scheduleDisplayType
+	}));
+};
+var Schedule_default = Schedule;
+
+//#endregion
+exports.default = Schedule_default;

package/dist/lib/components/eventBooking/components/bookingDetailModal/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./index.less";
+
+//#region src/components/eventBooking/components/bookingDetailModal/index.d.ts
+interface EventCardProps {
+  open?: boolean;
+}
+declare const BookingDetailModal: React.FC<EventCardProps>;
+//#endregion
+export { BookingDetailModal };

package/dist/lib/components/eventBooking/components/bookingDetailModal/index.js

@@ -0,0 +1,265 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_useEngineContext = require('../../../../hooks/useEngineContext.js');
+const require_index = require('../../../Sales/Cart/index.js');
+const require_index$1 = require('../../../Sales/Init/index.js');
+const require_Detail = require('../../../Sales/Event/Detail.js');
+const require_index$2 = require('../Provider/OrderProductModal/index.js');
+const require_index$3 = require('../eventCard/index.js');
+const require_Schedule = require('./components/Schedule.js');
+const require_Resource = require('./components/Resource.js');
+const require_BookingOptions = require('./components/BookingOptions.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_utils = require("@pisell/utils");
+let __pisell_materials = require("@pisell/materials");
+require("./index.less");
+
+//#region src/components/eventBooking/components/bookingDetailModal/index.tsx
+const BookingDetailModal = (props) => {
+	const modalContentRef = (0, react.useRef)(null);
+	const { utils } = require_useEngineContext.default().appHelper || {};
+	const tabsRef = (0, react.useRef)();
+	const { open = false } = props;
+	const { detail, onCloseEventDetail, onSelectEventDetail, selectEventDetailProductDetail, checkBeforeSelectEventDetail, getProductDetailRequest } = require_Detail.useEventDetail();
+	const { addToCart, checkBeforeAddToCart, checkBeforeAddToCartResquest } = require_index.useCart();
+	const { initData } = require_index$1.useInit();
+	const [activeTab, setActiveTab] = (0, react.useState)("introduction");
+	const [isScrolling, setIsScrolling] = (0, react.useState)(false);
+	const [openCheckout, setOpenCheckout] = (0, react.useState)(false);
+	const isUserClickRef = (0, react.useRef)(false);
+	const scrollTimeoutRef = (0, react.useRef)(null);
+	/**
+	* @title: 按钮确认文案
+	* @description:
+	* @param {*} useMemo
+	* @return {*}
+	* @Author: WangHan
+	* @Date: 2025-06-26 15:34
+	*/
+	const buttonText = (0, react.useMemo)(() => {
+		const config = initData?.boardSetting?.config?.product_display_setting || {};
+		return utils?.translation?.(config?.booking_event_v2_product_detail_button) || __pisell_utils.locales.getText("pisell2.event.add.to.cart");
+	}, [initData?.boardSetting?.config?.product_display_setting]);
+	/**
+	* @title: 详情锚点
+	* @description:
+	* @return {*}
+	* @Author: WangHan
+	* @Date: 2025-01-15 22:20
+	*/
+	const anchorOptions = (0, react.useMemo)(() => [
+		{
+			id: "introduction",
+			name: __pisell_utils.locales.getText("pisell2.event.introduction")
+		},
+		{
+			id: "schedule",
+			name: __pisell_utils.locales.getText("pisell2.event.schedule")
+		},
+		{
+			id: "resource",
+			name: __pisell_utils.locales.getText("pisell2.event.resource")
+		},
+		{
+			id: "booking_options",
+			name: __pisell_utils.locales.getText("pisell2.event.booking.options")
+		}
+	], []);
+	const images = (0, react.useMemo)(() => {
+		return detail?.introduction?.images || [];
+	}, [detail?.introduction?.images]);
+	(0, react.useEffect)(() => {
+		if (!modalContentRef.current) return;
+		let lastScrollTime = 0;
+		let pendingAnchorId = null;
+		const handleScroll = () => {
+			if (isScrolling || isUserClickRef.current) return;
+			lastScrollTime = Date.now();
+			if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+			const container$1 = modalContentRef.current;
+			if (!container$1) return;
+			const scrollTop = container$1.scrollTop;
+			const headerHeight = 56;
+			const containerHeight = container$1.clientHeight;
+			const visibleSections = anchorOptions.map((option) => {
+				const element = document.getElementById(option.id) || document.querySelector(`[data-section="${option.id}"]`);
+				if (!element) return null;
+				const elementOffsetTop = element.offsetTop;
+				const elementHeight = element.offsetHeight;
+				const isElementVisible = elementOffsetTop >= scrollTop && elementOffsetTop <= scrollTop + containerHeight || elementOffsetTop + elementHeight >= scrollTop && elementOffsetTop + elementHeight <= scrollTop + containerHeight || elementOffsetTop <= scrollTop && elementOffsetTop + elementHeight >= scrollTop + containerHeight;
+				return {
+					id: option.id,
+					offsetTop: elementOffsetTop,
+					height: elementHeight,
+					distanceFromViewportTop: Math.abs(elementOffsetTop - scrollTop - headerHeight),
+					isVisible: isElementVisible
+				};
+			}).filter((section) => section !== null).filter((section) => section.isVisible);
+			if (visibleSections.length === 0) return;
+			const bestSection = visibleSections.reduce((prev, current) => prev.distanceFromViewportTop < current.distanceFromViewportTop ? prev : current);
+			if (bestSection && activeTab !== bestSection.id) pendingAnchorId = bestSection.id;
+			scrollTimeoutRef.current = setTimeout(() => {
+				const timeSinceLastScroll = Date.now() - lastScrollTime;
+				if (timeSinceLastScroll >= 300) {
+					if (pendingAnchorId && activeTab !== pendingAnchorId && !isScrolling) setActiveTab(pendingAnchorId);
+					pendingAnchorId = null;
+				} else scrollTimeoutRef.current = setTimeout(() => {
+					if (pendingAnchorId && activeTab !== pendingAnchorId && !isScrolling) setActiveTab(pendingAnchorId);
+					pendingAnchorId = null;
+				}, 300 - timeSinceLastScroll);
+			}, 300);
+		};
+		const container = modalContentRef.current;
+		container.addEventListener("scroll", handleScroll);
+		return () => {
+			container.removeEventListener("scroll", handleScroll);
+			if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+		};
+	}, [
+		anchorOptions,
+		activeTab,
+		isScrolling
+	]);
+	/**
+	* 处理tab切换
+	* @param key 切换的标签ID
+	*/
+	const handleTabChange = (key) => {
+		setActiveTab(typeof key === "string" ? key : key.toString());
+		if (isUserClickRef.current) {
+			const section = document.querySelector(`[data-section="${typeof key === "string" ? key : key.toString()}"]`);
+			if (section && modalContentRef.current) {
+				const sectionTop = section.getBoundingClientRect().top;
+				const contentTop = modalContentRef.current.getBoundingClientRect().top;
+				const scrollTop = modalContentRef.current.scrollTop + (sectionTop - contentTop) - 50;
+				modalContentRef.current.scrollTo({
+					top: scrollTop,
+					behavior: "smooth"
+				});
+			}
+			isUserClickRef.current = false;
+		}
+	};
+	const content = () => {
+		return /* @__PURE__ */ react.default.createElement("div", {
+			className: "booking-detail-modal-content",
+			style: { height: (0, __pisell_utils.isMobile)() ? "100%" : "calc(80vh - 146px)" }
+		}, /* @__PURE__ */ react.default.createElement("div", { className: "anchor-wrapper" }, /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellAnchor, {
+			ref: tabsRef,
+			options: anchorOptions,
+			containerRef: modalContentRef,
+			tab: activeTab,
+			onChange: (key) => {
+				handleTabChange(key);
+			},
+			onTabClick: () => {
+				isUserClickRef.current = true;
+			}
+		})), /* @__PURE__ */ react.default.createElement("div", {
+			className: "content-wrapper",
+			ref: modalContentRef
+		}, /* @__PURE__ */ react.default.createElement("div", {
+			"data-section": "introduction",
+			className: "content-section"
+		}, images?.length > 0 ? /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellImageCarousels, {
+			dataSource: images,
+			width: "100%",
+			height: (0, __pisell_utils.isMobile)() ? 300 : 400,
+			showArrows: !(0, __pisell_utils.isMobile)(),
+			showDots: images?.length > 1,
+			autoplay: images?.length > 1,
+			loop: false
+		}) : null, /* @__PURE__ */ react.default.createElement(require_index$3.default, { data: detail?.introduction })), /* @__PURE__ */ react.default.createElement("div", {
+			"data-section": "schedule",
+			className: "content-section"
+		}, /* @__PURE__ */ react.default.createElement(require_Schedule.default, null)), /* @__PURE__ */ react.default.createElement("div", {
+			"data-section": "resource",
+			className: "content-section"
+		}, /* @__PURE__ */ react.default.createElement(require_Resource.default, null)), /* @__PURE__ */ react.default.createElement("div", {
+			"data-section": "booking_options",
+			className: "content-section"
+		}, /* @__PURE__ */ react.default.createElement(require_BookingOptions.default, { onChangeBookingOption: checkToOpenProductDetailModal }))));
+	};
+	/**
+	* @title: 判断是否需要拉起商品详情弹窗
+	* @description: 如果是普通商品，则不需要拉起商品详情弹窗
+	* @param {any} bookingOption 选中的option
+	* @return {void}
+	*/
+	const checkToOpenProductDetailModal = (bookingOption) => {
+		console.log(">>>>>>>", bookingOption);
+		if (bookingOption?._originData?.is_eject !== 1) return;
+		utils?.action({
+			type: "pisell1.productDetail",
+			data: {
+				detail: {
+					...bookingOption?._originData || {},
+					open_deposit: 1
+				},
+				isOS: false
+			},
+			callback: (data) => {
+				if (data?.isCancel) return;
+				console.log("data>>>>>>", data);
+				const product = {
+					...data,
+					options: data?.option || []
+				};
+				delete product.option;
+				selectEventDetailProductDetail(product);
+				handleOk();
+			}
+		});
+	};
+	/**
+	* @title: 点击加入购物车
+	* @description:
+	* @return {*}
+	* @Author: WangHan
+	* @Date: 2025-01-15 23:08
+	*/
+	const handleOk = async () => {
+		console.log(">>>>>>>", detail);
+		if (!checkBeforeSelectEventDetail()) {
+			checkToOpenProductDetailModal(detail?.selectedProduct);
+			return;
+		}
+		onSelectEventDetail();
+		if ((await checkBeforeAddToCart())?.result === false) {
+			setOpenCheckout(true);
+			return;
+		}
+		addToCart();
+	};
+	(0, react.useEffect)(() => {
+		if (open) {
+			setActiveTab("introduction");
+			setIsScrolling(false);
+			isUserClickRef.current = false;
+		}
+	}, [open]);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellModal, {
+		open,
+		title: __pisell_utils.locales.getText("pisell2.event.details"),
+		platform: (0, __pisell_utils.isMobile)() ? "h5" : "pc",
+		bodyStyle: {
+			padding: 0,
+			overflow: "hidden"
+		},
+		destroyOnClose: true,
+		className: "booking-detail-modal",
+		onCancel: onCloseEventDetail,
+		okText: buttonText,
+		cancelVisible: false,
+		onOk: handleOk,
+		width: (0, __pisell_utils.isMobile)() ? "100%" : 600,
+		okButtonProps: { loading: getProductDetailRequest?.loading || checkBeforeAddToCartResquest?.loading }
+	}, content()), /* @__PURE__ */ react.default.createElement(require_index$2.default, {
+		open: openCheckout,
+		onCancel: () => setOpenCheckout(false)
+	}));
+};
+var bookingDetailModal_default = BookingDetailModal;
+
+//#endregion
+exports.default = bookingDetailModal_default;

package/dist/lib/components/eventBooking/components/bookingDetailModal/index.less

@@ -0,0 +1,82 @@
+.booking-detail-modal {
+  color: #000;
+  .booking-detail-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(80vh - 146px);
+    overflow-y: hidden;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+
+    .anchor-wrapper {
+      background: #fff;
+      padding: 16px 16px 20px !important;
+    }
+
+    .content-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 16px 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      box-sizing: border-box;
+
+      .pisell-image-carousel {
+        margin-bottom: 16px;
+      }
+
+      .content-section {
+        scroll-margin-top: 74px;
+      }
+    }
+  }
+
+  .detail-resource-wrap {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+    }
+    .item {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      .title {
+        color: #000;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+  }
+
+  .detail-option-wrap {
+    .content {
+      padding: 0 16px 16px;
+      .option-item {
+        padding: 16px;
+        .item {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          color: var(--Text-Text_1, #1b1b1b);
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 20px;
+          .price {
+            color: var(--Text-Text_2, #777);
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 18px;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/lib/components/eventBooking/components/bookingServiceList/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "./index.less";
+
+//#region src/components/eventBooking/components/bookingServiceList/index.d.ts
+interface BookingServiceListProps {
+  dataSource?: any[];
+  onClick?: (item: any) => void;
+  showSearch?: boolean;
+  showCategory?: boolean;
+  showImage?: boolean;
+  showPrice?: boolean;
+  showTitle?: boolean;
+  placeholder?: string;
+  onSearch?: (value: string) => void;
+  isShowEmpty?: boolean;
+  description?: string;
+}
+declare const BookingServiceList: React.FC<BookingServiceListProps>;
+//#endregion
+export { BookingServiceList };

package/dist/lib/components/eventBooking/components/bookingServiceList/index.js

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_index = require('../productCard/index.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_materials = require("@pisell/materials");
+require("./index.less");
+
+//#region src/components/eventBooking/components/bookingServiceList/index.tsx
+const BookingServiceList = ({ dataSource, onClick, showSearch = false, showCategory = true, showImage, showPrice, showTitle, placeholder, onSearch, isShowEmpty, description }) => {
+	/**
+	* @title: 渲染服务项
+	* @description: 渲染服务项
+	* @param {any} service
+	* @return {*}
+	* @Author: WangHan
+	* @Date: 2025-01-13 16:52
+	*/
+	const renderServiceItem = (item) => {
+		return /* @__PURE__ */ react.default.createElement(require_index.default, {
+			item,
+			key: item.id,
+			showImage: item?.image && showImage,
+			showPrice,
+			showName: showTitle,
+			onClick: () => onClick && onClick(item)
+		});
+	};
+	return /* @__PURE__ */ react.default.createElement("div", { className: "event-booking-service-list" }, /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellList01, {
+		showSearch,
+		showCategory,
+		dataSource,
+		placeholder,
+		renderItem: renderServiceItem,
+		onSearch,
+		isShowEmpty,
+		description
+	}));
+};
+var bookingServiceList_default = BookingServiceList;
+
+//#endregion
+exports.default = bookingServiceList_default;

package/dist/lib/components/eventBooking/components/bookingServiceList/index.less

@@ -0,0 +1,6 @@
+.event-booking-service-list {
+  width: 100%;
+
+  .pisell-list-01 {
+  }
+}

package/dist/lib/components/eventBooking/components/eventCard/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./index.less";
+
+//#region src/components/eventBooking/components/eventCard/index.d.ts
+interface EventCardProps {
+  data: any;
+  showTitle?: boolean;
+  showSubtitle?: boolean;
+  showDescription?: boolean;
+  showPrice?: boolean;
+  showOriginalPrice?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+declare const EventCard: React.FC<EventCardProps>;
+//#endregion
+export { EventCard };

package/dist/lib/components/eventBooking/components/eventCard/index.js

@@ -0,0 +1,64 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_mock = require('../../mock.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_utils = require("@pisell/utils");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let __pisell_materials = require("@pisell/materials");
+require("./index.less");
+
+//#region src/components/eventBooking/components/eventCard/index.tsx
+const EventCard = ({ data, showTitle = true, showSubtitle = true, showDescription = true, showPrice = true, showOriginalPrice = true, className, style }) => {
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const [showToggle, setShowToggle] = (0, react.useState)(false);
+	const descriptionRef = (0, react.useRef)(null);
+	const { event_card } = require_mock.mock;
+	const { title, subtitle, description, price, origin_price } = data || event_card;
+	/**
+	* @title: 检查文本是否超过两行
+	* @description:
+	* @return {*}
+	* @Author: WangHan
+	* @Date: 2025-01-09 16:43
+	*/
+	(0, react.useEffect)(() => {
+		const element = descriptionRef.current;
+		const checkLineCount = () => {
+			if (element) {
+				const lineHeight = parseInt(window.getComputedStyle(element)?.lineHeight);
+				const height = element?.scrollHeight;
+				setShowToggle(Math.floor(height / lineHeight) > 2);
+			}
+		};
+		checkLineCount();
+		window.addEventListener("resize", checkLineCount);
+		return () => window.removeEventListener("resize", checkLineCount);
+	}, [description]);
+	return /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellCard, {
+		className: (0, classnames.default)("pisell-event-card", className),
+		style,
+		borderRadius: 10,
+		isClickable: false
+	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-event-card-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-event-card-title-wrapper" }, showTitle && /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellText, { className: "pisell-event-card-title" }, title), showSubtitle && /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellText, { className: "pisell-event-card-subtitle" }, subtitle)), showPrice && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-event-card-price-wrapper" }, /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellText.Amount, {
+		className: "pisell-event-card-price",
+		value: price,
+		precision: 2,
+		showCurrencySymbol: true
+	}), showOriginalPrice && origin_price && price !== origin_price && /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellText.Amount, {
+		className: "pisell-event-card-original-price",
+		value: origin_price,
+		precision: 2,
+		showCurrencySymbol: true
+	})), showDescription && description && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-event-card-line" }), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-event-card-description" }, /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellText, { className: "pisell-event-card-description-title" }, __pisell_utils.locales.getText("pisell2.event.description")), /* @__PURE__ */ react.default.createElement("div", {
+		ref: descriptionRef,
+		className: (0, classnames.default)("pisell-event-card-description-content", { "pisell-event-card-description-collapsed": !expanded && showToggle })
+	}, /* @__PURE__ */ react.default.createElement("div", { dangerouslySetInnerHTML: { __html: description } })), showToggle && /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellText, {
+		className: "pisell-event-card-description-toggle",
+		onClick: () => setExpanded(!expanded)
+	}, expanded ? __pisell_utils.locales.getText("pisell2.event.view.less") : __pisell_utils.locales.getText("pisell2.event.view.more"))))));
+};
+var eventCard_default = EventCard;
+
+//#endregion
+exports.default = eventCard_default;

package/dist/lib/components/eventBooking/components/eventCard/index.less

@@ -0,0 +1,81 @@
+.pisell-event-card {
+  &-content {
+    display: flex;
+    flex-direction: column;
+    color: var(--Gray-900, #101828);
+  }
+
+  &-title-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &-title {
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 36px;
+  }
+
+  &-subtitle {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+
+  &-price-wrapper {
+    margin-top: 14px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-price {
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 36px;
+  }
+
+  &-original-price {
+    color: var(--Gray-500, #667085);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 24px;
+    text-decoration-line: line-through;
+  }
+
+  &-line {
+    margin: 14px 0;
+    height: 1px;
+    background: #f2f2f2;
+  }
+
+  &-description-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+  }
+
+  &-description {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &-collapsed {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    &-toggle {
+      color: var(--Blue-600, #1570ef);
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      cursor: pointer;
+    }
+  }
+}

package/dist/lib/components/eventBooking/components/productCard/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "./index.less";
+
+//#region src/components/eventBooking/components/productCard/index.d.ts
+interface PisellProductCardProps {
+  item: any;
+  showImage?: boolean;
+  showName?: boolean;
+  showPrice?: boolean;
+  showArrow?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}
+declare const PisellProductCard: React.FC<PisellProductCardProps>;
+//#endregion
+export { PisellProductCard };