@pisell/private-materials 6.12.256 → 6.12.258

package/lib/components/venueBooking/components/VenueSelection/components/TimeGrid.js

@@ -182,16 +182,16 @@ function TimeGrid() {
 	}
 	if (isGridLoading || !grid || !timeLabels.length) return /* @__PURE__ */ react.default.createElement(TimeGridSkeleton, null);
 	return /* @__PURE__ */ react.default.createElement("div", { className: "relative" }, /* @__PURE__ */ react.default.createElement("div", {
-		className: "sticky z-30 overflow-hidden bg-[#fff7f7]",
+		className: "sticky z-30 overflow-hidden rounded-t-[28px] bg-[#fff7f7]",
 		style: { top: "var(--vb-grid-sticky-top, 0px)" }
 	}, /* @__PURE__ */ react.default.createElement("div", {
 		ref: headerInnerRef,
-		className: "grid border-b border-black/6",
+		className: "grid border-b border-black/[0.06]",
 		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, tableGridStyle), {}, { willChange: "transform" }),
 		key: `${grid.date}-header`
 	}, /* @__PURE__ */ react.default.createElement("div", {
 		ref: headerFixedColRef,
-		className: "relative z-20 row-span-2 flex items-center gap-2 border-r border-black/6 bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4",
+		className: "relative z-20 row-span-2 flex items-center gap-2 border-r border-black/[0.06] bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4",
 		style: { willChange: "transform" }
 	}, /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
 		type: "pisell2-clock",
@@ -227,7 +227,7 @@ function TimeGrid() {
 	}))), /* @__PURE__ */ react.default.createElement("div", {
 		ref: scrollTableRef,
 		onScroll: syncHeader,
-		className: "max-w-full overflow-x-auto cursor-grab select-none touch-pan-y active:cursor-grabbing",
+		className: "max-w-full overflow-x-auto rounded-b-[28px] cursor-grab select-none touch-pan-y active:cursor-grabbing",
 		style: require_objectSpread2._objectSpread2({ WebkitOverflowScrolling: "touch" }, scrollerOverscrollStyle)
 	}, /* @__PURE__ */ react.default.createElement("div", {
 		className: "w-full",
@@ -237,9 +237,9 @@ function TimeGrid() {
 		const isMultiProduct = !!resource.hasMultipleProducts && Array.isArray(resource.products);
 		const expanded = !!expandedResources[String(resource.resourceId)];
 		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, { key: `${resource.resourceId}-${grid.date}` }, /* @__PURE__ */ react.default.createElement("div", {
-			className: "grid border-b border-black/6",
+			className: "grid border-b border-black/[0.06]",
 			style: tableGridStyle
-		}, /* @__PURE__ */ react.default.createElement("div", { className: `sticky left-0 z-10 border-r border-black/6 px-2 py-2 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 ${courtMeta.soldOut ? "bg-zinc-50" : "bg-white"}` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-1.5" }, isMultiProduct ? /* @__PURE__ */ react.default.createElement("button", {
+		}, /* @__PURE__ */ react.default.createElement("div", { className: `sticky left-0 z-10 border-r border-black/[0.06] px-2 py-2 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 ${courtMeta.soldOut ? "bg-zinc-50" : "bg-white"}` }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex items-center gap-1.5" }, isMultiProduct ? /* @__PURE__ */ react.default.createElement("button", {
 			type: "button",
 			"data-cart-button": "true",
 			onClick: (e) => {
@@ -303,9 +303,9 @@ function TimeGrid() {
 			}), showPlusLabel ? /* @__PURE__ */ react.default.createElement("span", { className: `text-[13px] font-semibold leading-4 ${priceClass} md:text-sm` }, "+") : null), tag ? /* @__PURE__ */ react.default.createElement("div", { className: `inline-flex rounded-full px-1.5 py-0 text-[8px] font-semibold leading-4 ring-1 md:text-[9px] ${tag.className}` }, tagText) : null));
 		})), isMultiProduct && expanded && resource.products.map((subRow) => /* @__PURE__ */ react.default.createElement("div", {
 			key: `${resource.resourceId}-sub-${subRow.productId}`,
-			className: "grid border-b border-black/6 bg-zinc-50/60",
+			className: "grid border-b border-black/[0.06] bg-zinc-50/60",
 			style: tableGridStyle
-		}, /* @__PURE__ */ react.default.createElement("div", { className: "sticky left-0 z-10 border-r border-black/6 bg-zinc-50/60 px-2 py-2 pl-8 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 md:pl-10" }, /* @__PURE__ */ react.default.createElement("div", { className: "text-[12px] font-semibold leading-5 text-zinc-700 md:text-[13px]" }, subRow.productTitle)), subRow.slots.map((slot, slotIndex) => {
+		}, /* @__PURE__ */ react.default.createElement("div", { className: "sticky left-0 z-10 border-r border-black/[0.06] bg-zinc-50/60 px-2 py-2 pl-8 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 md:pl-10" }, /* @__PURE__ */ react.default.createElement("div", { className: "text-[12px] font-semibold leading-5 text-zinc-700 md:text-[13px]" }, subRow.productTitle)), subRow.slots.map((slot, slotIndex) => {
 			const isAvailable = slot.status === "available";
 			const isUnavailable = slot.status === "occupied" || slot.status === "past" || slot.status === "unavailable";
 			const timeLabel = timeLabels[slotIndex] || "";
@@ -355,12 +355,12 @@ function TimeGridSkeleton() {
 		"aria-busy": "true",
 		"aria-live": "polite"
 	}, /* @__PURE__ */ react.default.createElement("div", {
-		className: "sticky z-30 overflow-hidden bg-[#fff7f7]",
+		className: "sticky z-30 overflow-hidden rounded-t-[28px] bg-[#fff7f7]",
 		style: { top: "var(--vb-grid-sticky-top, 0px)" }
 	}, /* @__PURE__ */ react.default.createElement("div", {
-		className: "grid border-b border-black/6",
+		className: "grid border-b border-black/[0.06]",
 		style: { gridTemplateColumns: `120px repeat(${SKELETON_COLS}, minmax(90px, 1fr))` }
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "relative z-20 flex items-center gap-2 border-r border-black/6 bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
+	}, /* @__PURE__ */ react.default.createElement("div", { className: "relative z-20 flex items-center gap-2 border-r border-black/[0.06] bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
 		type: "pisell2-clock",
 		style: {
 			fontSize: 16,
@@ -373,11 +373,11 @@ function TimeGridSkeleton() {
 	}, /* @__PURE__ */ react.default.createElement("div", { className: "h-3 w-10 rounded bg-zinc-200/80" }), /* @__PURE__ */ react.default.createElement("span", {
 		className: "vb-skeleton-shimmer",
 		"aria-hidden": "true"
-	}))))), /* @__PURE__ */ react.default.createElement("div", { className: "w-full" }, Array.from({ length: SKELETON_ROWS }).map((_, rowIdx) => /* @__PURE__ */ react.default.createElement("div", {
+	}))))), /* @__PURE__ */ react.default.createElement("div", { className: "w-full max-w-full overflow-hidden rounded-b-[28px]" }, Array.from({ length: SKELETON_ROWS }).map((_, rowIdx) => /* @__PURE__ */ react.default.createElement("div", {
 		key: `sk-row-${rowIdx}`,
-		className: "grid border-b border-black/6",
+		className: "grid border-b border-black/[0.06]",
 		style: { gridTemplateColumns: `120px repeat(${SKELETON_COLS}, minmax(90px, 1fr))` }
-	}, /* @__PURE__ */ react.default.createElement("div", { className: "sticky left-0 z-10 border-r border-black/6 bg-white px-2 py-4 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ react.default.createElement("div", { className: "relative overflow-hidden" }, /* @__PURE__ */ react.default.createElement("div", { className: "h-4 w-20 rounded bg-zinc-200/80 md:w-24" }), /* @__PURE__ */ react.default.createElement("div", { className: "mt-2 h-2.5 w-14 rounded bg-zinc-200/60 md:w-16" }), /* @__PURE__ */ react.default.createElement("span", {
+	}, /* @__PURE__ */ react.default.createElement("div", { className: "sticky left-0 z-10 border-r border-black/[0.06] bg-white px-2 py-4 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ react.default.createElement("div", { className: "relative overflow-hidden" }, /* @__PURE__ */ react.default.createElement("div", { className: "h-4 w-20 rounded bg-zinc-200/80 md:w-24" }), /* @__PURE__ */ react.default.createElement("div", { className: "mt-2 h-2.5 w-14 rounded bg-zinc-200/60 md:w-16" }), /* @__PURE__ */ react.default.createElement("span", {
 		className: "vb-skeleton-shimmer",
 		"aria-hidden": "true"
 	}))), Array.from({ length: SKELETON_COLS }).map((_, colIdx) => /* @__PURE__ */ react.default.createElement("div", {

package/lib/components/venueBooking/components/VenueSelection/index.js

@@ -39,7 +39,7 @@ function VenueSelection() {
 	function goNextWeek() {
 		navigateWeek(7);
 	}
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "rounded-b-[24px] bg-white p-3 shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6 md:rounded-[28px] md:p-6" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("h2", { className: "text-2xl font-extrabold leading-tight text-zinc-900 md:text-[30px]" }, _pisell_utils.locales.getText("pisell2.venue.step1.title") || "选择场地"), /* @__PURE__ */ react.default.createElement("p", { className: "mt-1 text-xs leading-5 text-zinc-500 md:mt-2 md:text-sm md:leading-6" }, _pisell_utils.locales.getText("pisell2.venue.step1.subtitle") || "仅显示可用时段和价格。")), /* @__PURE__ */ react.default.createElement(require_DateNavigator.default, {
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "rounded-b-[24px] bg-white p-3 md:rounded-[28px] md:p-6" }, /* @__PURE__ */ react.default.createElement("div", { className: "flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("h2", { className: "text-2xl font-extrabold leading-tight text-zinc-900 md:text-[30px]" }, _pisell_utils.locales.getText("pisell2.venue.step1.title") || "选择场地"), /* @__PURE__ */ react.default.createElement("p", { className: "mt-1 text-xs leading-5 text-zinc-500 md:mt-2 md:text-sm md:leading-6" }, _pisell_utils.locales.getText("pisell2.venue.step1.subtitle") || "仅显示可用时段和价格。")), /* @__PURE__ */ react.default.createElement(require_DateNavigator.default, {
 		onPrevWeek: goPrevWeek,
 		onNextWeek: goNextWeek
 	})), /* @__PURE__ */ react.default.createElement("div", { className: "mt-3 md:mt-5" }, /* @__PURE__ */ react.default.createElement(require_DayTabs.default, {
@@ -47,7 +47,7 @@ function VenueSelection() {
 		onNextWeek: goNextWeek
 	})), /* @__PURE__ */ react.default.createElement(require_CourtFilter.default, null)), /* @__PURE__ */ react.default.createElement("div", {
 		ref: tableSectionRef,
-		className: "w-full max-w-full isolate rounded-[28px] bg-white shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6"
+		className: "w-full max-w-full isolate rounded-[28px] bg-white"
 	}, /* @__PURE__ */ react.default.createElement(require_TimeGrid.default, null)));
 }
 //#endregion

package/lib/components/venueBooking/context.js

@@ -204,14 +204,13 @@ function VenueBookingProvider({ entryContext, children }) {
 	*/
 	const refreshViewModel = (0, react.useCallback)(function() {
 		var _ref = require_asyncToGenerator._asyncToGenerator(function* (extraFields) {
-			if (venueBookingModule && typeof venueBookingModule.getSummary === "function") try {
-				yield venueBookingModule.getSummary();
+			try {
+				const moduleData = yield require_hooks.createVenueBookingViewModel(venueBookingModule);
+				setViewModel((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), moduleData), extraFields || {}));
+				if (venueBookingModule && typeof venueBookingModule.getDiscountList === "function") setDiscountList(venueBookingModule.getDiscountList() || []);
 			} catch (error) {
-				console.warn("[venueBooking] getSummary failed during refreshViewModel", error);
+				console.warn("[venueBooking] refreshViewModel failed", error);
 			}
-			const moduleData = require_hooks.createVenueBookingViewModel(venueBookingModule);
-			setViewModel((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), moduleData), extraFields || {}));
-			if (venueBookingModule && typeof venueBookingModule.getDiscountList === "function") setDiscountList(venueBookingModule.getDiscountList() || []);
 		});
 		return function(_x) {
 			return _ref.apply(this, arguments);
@@ -623,7 +622,7 @@ function VenueBookingProvider({ entryContext, children }) {
 					yield require_hooks.loadVenueProducts(venueBookingModule, require_hooks.VENUE_PRODUCT_IDS);
 					const venueProducts = typeof (venueBookingModule === null || venueBookingModule === void 0 ? void 0 : venueBookingModule.getVenueProducts) === "function" ? venueBookingModule.getVenueProducts() : [];
 					yield goToNearestAvailableDateRef.current(anchorDateRef.current);
-					const moduleData = require_hooks.createVenueBookingViewModel(venueBookingModule);
+					const moduleData = yield require_hooks.createVenueBookingViewModel(venueBookingModule);
 					if (!unmounted) {
 						setViewModel((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, {
 							cartItems: Array.isArray(moduleData.cartItems) ? moduleData.cartItems : [],

package/lib/components/venueBooking/hooks.js

@@ -191,25 +191,31 @@ function getSelectedDateKeySet(module) {
 	return selectedDateKeySet;
 }
 /**
-* 从 OS 模块快照构建 ViewModel（购物车部分）
+* 等待 OS 金额汇总后，从模块快照构建 ViewModel（购物车部分）
 * 购物车数据使用 toShoppingCartProducts 转换为 ShoppingCart 组件所需格式
 */
-function createVenueBookingViewModel(module) {
-	const orderProducts = callModuleGetter(module, "getOrderProducts", []);
-	const summaryByGetter = callModuleGetter(module, "getSummary", null);
-	const tempOrder = callModuleGetter(module, "getTempOrder", null);
-	const amountSymbol = (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.currency_symbol) || "$";
-	const cartItems = require_toShoppingCartProducts.toShoppingCartProducts({
-		orderProducts: Array.isArray(orderProducts) ? orderProducts : [],
-		amountSymbol
+function createVenueBookingViewModel(_x10) {
+	return _createVenueBookingViewModel.apply(this, arguments);
+}
+function _createVenueBookingViewModel() {
+	_createVenueBookingViewModel = require_asyncToGenerator._asyncToGenerator(function* (module) {
+		const summaryByGetter = typeof (module === null || module === void 0 ? void 0 : module.getSummary) === "function" ? yield module.getSummary() : null;
+		const orderProducts = callModuleGetter(module, "getOrderProducts", []);
+		const tempOrder = callModuleGetter(module, "getTempOrder", null);
+		const amountSymbol = (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.currency_symbol) || "$";
+		const cartItems = require_toShoppingCartProducts.toShoppingCartProducts({
+			orderProducts: Array.isArray(orderProducts) ? orderProducts : [],
+			amountSymbol
+		});
+		const summary = (summaryByGetter && typeof summaryByGetter === "object" ? summaryByGetter : null) || (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.summary) || {};
+		return {
+			cartItems: Array.isArray(cartItems) ? cartItems : [],
+			summary: summary && typeof summary === "object" ? summary : {},
+			note: String((tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.note) || ""),
+			contactsInfo: Array.isArray(tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.contacts_info) ? tempOrder.contacts_info : []
+		};
 	});
-	const summary = (summaryByGetter && typeof summaryByGetter === "object" ? summaryByGetter : null) || (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.summary) || {};
-	return {
-		cartItems: Array.isArray(cartItems) ? cartItems : [],
-		summary: summary && typeof summary === "object" ? summary : {},
-		note: String((tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.note) || ""),
-		contactsInfo: Array.isArray(tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.contacts_info) ? tempOrder.contacts_info : []
-	};
+	return _createVenueBookingViewModel.apply(this, arguments);
 }
 /** 登录状态 hook（检查 token + 弹出登录弹窗） */
 function useVenueBookingLogin() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.12.256",
+  "version": "6.12.258",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -70,10 +70,10 @@
     "react-zoom-pan-pinch": "^3.7.0",
     "styled-components": "^6.0.0-rc.3",
     "use-sync-external-store": "^1.6.0",
-    "@pisell/materials": "6.12.74",
+    "@pisell/utils": "3.0.7",
     "@pisell/pi-payment-sdk": "0.0.3",
+    "@pisell/materials": "6.12.74",
     "@pisell/icon": "0.0.11",
-    "@pisell/utils": "3.0.7",
     "@pisell/date-picker": "3.0.12"
   },
   "peerDependencies": {