@pisell/private-materials 6.3.131 → 6.3.133

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

@@ -53,6 +53,11 @@ function TimeGrid() {
   const resources = (grid == null ? void 0 : grid.resources) || [];
   const hourGroups = (0, import_react.useMemo)(() => (0, import_utils2.buildHourGroups)(timeLabels), [timeLabels]);
   const tableGridStyle = (0, import_react.useMemo)(() => (0, import_utils2.getTableGridStyle)(timeLabels.length), [timeLabels.length]);
+  const isIosDevice = (0, import_react.useMemo)(() => {
+    if (typeof navigator === "undefined") return false;
+    return (0, import_utils.isIos)();
+  }, []);
+  const scrollerOverscrollStyle = (0, import_react.useMemo)(() => isIosDevice ? { overscrollBehavior: "none" } : { overscrollBehaviorX: "none", overscrollBehaviorY: "auto" }, [isIosDevice]);
   const visibleResources = (0, import_react.useMemo)(() => resources.filter((resource) => {
     const hitType = filter === "ALL" || resource.productTitle === filter;
     const hitSearch = !search || resource.resourceName.toLowerCase().includes(search.toLowerCase());
@@ -81,6 +86,7 @@ function TimeGrid() {
     applyHeaderTransform(e.currentTarget.scrollLeft);
   }
   (0, import_react.useEffect)(() => {
+    if (isGridLoading) return;
     const scroller = scrollTableRef.current;
     if (!scroller || !timeLabels.length || !grid) return;
     const firstAvailableIndex = (0, import_utils2.getFirstAvailableSlotIndex)(grid);
@@ -94,7 +100,7 @@ function TimeGrid() {
     const targetLeft = Math.max(0, scrollToIndex * slotWidth);
     scroller.scrollTo({ left: targetLeft, behavior: "smooth" });
     applyHeaderTransform(targetLeft);
-  }, [grid == null ? void 0 : grid.date, timeLabels.length, applyHeaderTransform]);
+  }, [grid == null ? void 0 : grid.date, timeLabels.length, isGridLoading, applyHeaderTransform]);
   (0, import_react.useEffect)(() => {
     const scroller = scrollTableRef.current;
     if (!scroller) return void 0;
@@ -147,6 +153,18 @@ function TimeGrid() {
       scroller.removeEventListener("pointercancel", endDrag);
     };
   }, [applyHeaderTransform]);
+  (0, import_react.useEffect)(() => {
+    const scroller = scrollTableRef.current;
+    if (!scroller) return void 0;
+    function onWheel(e) {
+      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+        e.preventDefault();
+        window.scrollBy({ top: e.deltaY, behavior: "instant" });
+      }
+    }
+    scroller.addEventListener("wheel", onWheel, { passive: false });
+    return () => scroller.removeEventListener("wheel", onWheel);
+  }, []);
   function handleSlotClick(resourceId, slot) {
     if (dragStateRef.current.moved) {
       dragStateRef.current.moved = false;
@@ -213,7 +231,8 @@ function TimeGrid() {
           },
           headerTag && !timeMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ${headerTag.className}` }, headerTag.text) : null,
           timeMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold text-zinc-400" }, import_utils.locales.getText("pisell2.venue.label.sold.out") || "已满") : null,
-          !timeMeta.soldOut && timeMeta.fewLeft ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold", style: { color: "var(--vb-primary)" } }, import_utils.locales.getText("pisell2.venue.label.few.left") || "即将满") : null
+          !timeMeta.soldOut && timeMeta.fewLeft ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold", style: { color: "var(--vb-primary)" } }, import_utils.locales.getText("pisell2.venue.label.few.left") || "即将满") : null,
+          !timeMeta.soldOut && !timeMeta.fewLeft && !headerTag ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold text-zinc-500" }, import_utils.locales.getText("pisell2.venue.label.bookable") || "充足") : null
         );
       })
     )
@@ -222,12 +241,12 @@ function TimeGrid() {
     {
       ref: scrollTableRef,
       onScroll: syncHeader,
-      className: "max-w-full overflow-x-auto cursor-grab select-none touch-pan-y overscroll-none active:cursor-grabbing",
-      style: { WebkitOverflowScrolling: "touch", overscrollBehaviorX: "none" }
+      className: "max-w-full overflow-x-auto cursor-grab select-none touch-pan-y active:cursor-grabbing",
+      style: { WebkitOverflowScrolling: "touch", ...scrollerOverscrollStyle }
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full", key: grid.date }, visibleResources.map((resource) => {
       const courtMeta = (0, import_utils2.getResourceCourtMeta)(resource);
-      return /* @__PURE__ */ import_react.default.createElement("div", { key: `${resource.resourceId}-${grid.date}`, className: "grid border-b border-black/6", style: tableGridStyle }, /* @__PURE__ */ import_react.default.createElement("div", { className: `sticky left-0 z-10 border-r border-black/6 px-2 py-4 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 ${courtMeta.soldOut ? "bg-zinc-50" : "bg-white"}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[13px] font-extrabold leading-5 md:text-[15px] ${courtMeta.soldOut ? "text-zinc-400" : "text-zinc-900"}` }, resource.resourceName), /* @__PURE__ */ import_react.default.createElement("div", { className: `mt-1 text-[11px] md:text-xs ${courtMeta.soldOut ? "text-zinc-400" : "text-zinc-500"}` }, resource.productTitle), courtMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[11px] font-semibold text-zinc-500" }, import_utils.locales.getText("pisell2.venue.label.sold.out") || "已满") : null, !courtMeta.soldOut && courtMeta.fewLeft ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[12px] font-bold", style: { color: "var(--vb-primary)" } }, import_utils.locales.getText("pisell2.venue.label.few.left") || "即将满") : null))), resource.slots.map((slot, slotIndex) => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: `${resource.resourceId}-${grid.date}`, className: "grid border-b border-black/6", style: tableGridStyle }, /* @__PURE__ */ import_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__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[13px] font-extrabold leading-5 md:text-[15px] ${courtMeta.soldOut ? "text-zinc-400" : "text-zinc-900"}` }, resource.resourceName)))), resource.slots.map((slot, slotIndex) => {
         const isAvailable = slot.status === "available";
         const isUnavailable = slot.status === "occupied" || slot.status === "past" || slot.status === "unavailable";
         const selected = isAvailable && (0, import_hooks.isSlotSelected)(
@@ -247,14 +266,14 @@ function TimeGrid() {
             key: `${resource.resourceId}-${slot.startTime}`,
             onClick: () => handleSlotClick(resource.resourceId, slot),
             disabled: isUnavailable,
-            className: `px-1 py-3 text-center transition md:px-2 ${isUnavailable ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "text-white" : "bg-white hover:bg-[#fff6f6]"}`,
+            className: `px-1 py-2 text-center transition md:px-2 ${isUnavailable ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "text-white" : "bg-white hover:bg-[#fff6f6]"}`,
             style: {
               borderLeft: (0, import_utils2.isHourBoundary)(timeLabel) ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.03)",
               borderBottom: "1px solid rgba(0,0,0,0.04)",
               ...selected && !isUnavailable ? { backgroundColor: "var(--vb-primary)" } : null
             }
           },
-          isUnavailable ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-zinc-400" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg font-bold leading-none" }, "×")) : selected ? /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[11px] font-bold uppercase tracking-wide text-white/90" }, import_utils.locales.getText("pisell2.venue.label.selected") || "已选"), /* @__PURE__ */ import_react.default.createElement(
+          isUnavailable ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-zinc-400" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg font-bold leading-none" }, "×")) : selected ? /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[11px] font-bold uppercase tracking-wide leading-4 text-white/90" }, import_utils.locales.getText("pisell2.venue.label.selected") || "已选"), /* @__PURE__ */ import_react.default.createElement(
             import_materials.PisellText.Amount,
             {
               value: Number(slot.price || 0),
@@ -263,7 +282,7 @@ function TimeGrid() {
               showCurrencySymbol: true,
               className: "text-sm font-extrabold text-white"
             }
-          )) : /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react.default.createElement(
+          )) : /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ import_react.default.createElement(
             import_materials.PisellText.Amount,
             {
               value: Number(slot.price || 0),
@@ -271,9 +290,9 @@ function TimeGrid() {
               precision: 2,
               showCurrencySymbol: true,
               hideDecimalForWholeNumbers: false,
-              className: `text-[13px] font-normal ${priceClass} md:text-sm`
+              className: `text-[13px] font-normal leading-4 ${priceClass} md:text-sm`
             }
-          ), tag ? /* @__PURE__ */ import_react.default.createElement("div", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ${tag.className}` }, tagText) : null)
+          ), tag ? /* @__PURE__ */ import_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)
         );
       }));
     }))

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

@@ -57,12 +57,11 @@ function VenueSelection() {
   function goNextWeek() {
     navigateWeek(7);
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[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__ */ import_react.default.createElement("div", { className: "flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h2", { className: "text-2xl font-extrabold leading-tight text-zinc-900 md:text-[30px]" }, import_utils.locales.getText("pisell2.venue.step1.title") || "选择场地"), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-1 text-xs leading-5 text-zinc-500 md:mt-2 md:text-sm md:leading-6" }, import_utils.locales.getText("pisell2.venue.step1.subtitle") || "仅显示可用时段和价格。")), /* @__PURE__ */ import_react.default.createElement(import_DateNavigator.default, { onPrevWeek: goPrevWeek, onNextWeek: goNextWeek })), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 md:mt-5" }, /* @__PURE__ */ import_react.default.createElement(import_DayTabs.default, { onPrevWeek: goPrevWeek, onNextWeek: goNextWeek })), /* @__PURE__ */ import_react.default.createElement(import_CourtFilter.default, null)), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_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__ */ import_react.default.createElement("div", { className: "flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h2", { className: "text-2xl font-extrabold leading-tight text-zinc-900 md:text-[30px]" }, import_utils.locales.getText("pisell2.venue.step1.title") || "选择场地"), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-1 text-xs leading-5 text-zinc-500 md:mt-2 md:text-sm md:leading-6" }, import_utils.locales.getText("pisell2.venue.step1.subtitle") || "仅显示可用时段和价格。")), /* @__PURE__ */ import_react.default.createElement(import_DateNavigator.default, { onPrevWeek: goPrevWeek, onNextWeek: goNextWeek })), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 md:mt-5" }, /* @__PURE__ */ import_react.default.createElement(import_DayTabs.default, { onPrevWeek: goPrevWeek, onNextWeek: goNextWeek })), /* @__PURE__ */ import_react.default.createElement(import_CourtFilter.default, null)), /* @__PURE__ */ import_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",
-      style: { overflowX: "clip", overflowY: "visible" }
+      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"
     },
     /* @__PURE__ */ import_react.default.createElement(import_TimeGrid.default, null)
   ));

package/lib/components/venueBooking/context.js

@@ -52,6 +52,7 @@ var INITIAL_VIEW_MODEL = {
   venueProducts: [],
   addonProductList: []
 };
+var EMPTY_UTILS = {};
 function getWeekRange(anchor) {
   const days = (0, import_utils2.getWeekDays)(anchor);
   return {
@@ -59,6 +60,14 @@ function getWeekRange(anchor) {
     endDate: (0, import_utils2.formatDateKey)(days[days.length - 1])
   };
 }
+function clampRangeToToday(startDate, endDate) {
+  const todayKey = (0, import_utils2.formatDateKey)((0, import_dayjs.default)());
+  if (endDate < todayKey) return null;
+  return {
+    startDate: startDate < todayKey ? todayKey : startDate,
+    endDate
+  };
+}
 function getSubmitOrderErrorMessage(error) {
   const firstFailure = Array.isArray(error == null ? void 0 : error.failures) ? error.failures[0] : null;
   const failureTips = String((firstFailure == null ? void 0 : firstFailure.validationMessage) || "").trim();
@@ -78,12 +87,16 @@ function findNearestAvailableDate(params) {
   return availableDates.sort((a, b) => b.valueOf() - a.valueOf())[0];
 }
 function VenueBookingProvider({ entryContext, children }) {
-  var _a, _b;
+  var _a, _b, _c;
   const pisellOS = (0, import_useEngineContext.usePisellOS)();
   const venueBookingModule = (0, import_hooks.useVenueBookingModule)();
   const [currentStep, setCurrentStep] = (0, import_react.useState)("select-venue");
-  const stepList = [...import_hooks.VENUE_BOOKING_STEPS];
   const [viewModel, setViewModel] = (0, import_react.useState)(INITIAL_VIEW_MODEL);
+  const stepList = (0, import_react.useMemo)(() => {
+    var _a2;
+    const hasAddons = (((_a2 = viewModel.addonProductList) == null ? void 0 : _a2.length) || 0) > 0;
+    return hasAddons ? ["select-venue", "addons", "checkout"] : ["select-venue", "checkout"];
+  }, [(_a = viewModel.addonProductList) == null ? void 0 : _a.length]);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [isWeekLoading, setIsWeekLoading] = (0, import_react.useState)(true);
   const [isGridTransition, setIsGridTransition] = (0, import_react.useState)(true);
@@ -97,7 +110,7 @@ function VenueBookingProvider({ entryContext, children }) {
   const [monthCursor, setMonthCursor] = (0, import_react.useState)((0, import_dayjs.default)().startOf("month"));
   const { isLogin, openLoginModal } = (0, import_hooks.useVenueBookingLogin)();
   const engineContext = (0, import_useEngineContext2.default)();
-  const utils = ((_a = engineContext == null ? void 0 : engineContext.appHelper) == null ? void 0 : _a.utils) || {};
+  const utils = ((_b = engineContext == null ? void 0 : engineContext.appHelper) == null ? void 0 : _b.utils) || EMPTY_UTILS;
   const [discountList, setDiscountList] = (0, import_react.useState)([]);
   const [isAgreeDepositPolicy, setIsAgreeDepositPolicy] = (0, import_react.useState)(false);
   const [cartValidation, setCartValidation] = (0, import_react.useState)({ passed: null, failures: [] });
@@ -142,13 +155,18 @@ function VenueBookingProvider({ entryContext, children }) {
     if (!venueBookingModule) return;
     setIsWeekLoading(true);
     try {
-      await (0, import_hooks.fetchResourceAvailability)(venueBookingModule, startDate, endDate);
-      const summary = (0, import_hooks.getDateRangeSummary)(venueBookingModule, startDate, endDate);
+      const clamped = clampRangeToToday(startDate, endDate);
+      let summary = [];
+      if (clamped) {
+        await (0, import_hooks.fetchResourceAvailability)(venueBookingModule, clamped.startDate, clamped.endDate);
+        const raw = (0, import_hooks.getDateRangeSummary)(venueBookingModule, clamped.startDate, clamped.endDate);
+        summary = Array.isArray(raw) ? raw : [];
+      }
       const currentDateKey = (0, import_utils2.formatDateKey)(anchorDateRef.current);
       const grid = (0, import_hooks.getTimeSlotGrid)(venueBookingModule, currentDateKey);
       setViewModel((prev) => ({
         ...prev,
-        dateSummary: Array.isArray(summary) ? summary : [],
+        dateSummary: summary,
         timeSlotGrid: grid
       }));
     } finally {
@@ -164,8 +182,10 @@ function VenueBookingProvider({ entryContext, children }) {
       for (let weekOffset = 0; weekOffset <= MAX_FORWARD_WEEKS; weekOffset++) {
         const probeDate = fromDate.add(weekOffset * 7, "day");
         const { startDate, endDate } = getWeekRange(probeDate);
-        await (0, import_hooks.fetchResourceAvailability)(venueBookingModule, startDate, endDate);
-        const weekSummary = (0, import_hooks.getDateRangeSummary)(venueBookingModule, startDate, endDate);
+        const clamped = clampRangeToToday(startDate, endDate);
+        if (!clamped) continue;
+        await (0, import_hooks.fetchResourceAvailability)(venueBookingModule, clamped.startDate, clamped.endDate);
+        const weekSummary = (0, import_hooks.getDateRangeSummary)(venueBookingModule, clamped.startDate, clamped.endDate);
         if (weekOffset === 0) fallbackSummary = Array.isArray(weekSummary) ? weekSummary : [];
         const candidateDate = findNearestAvailableDate({
           summary: Array.isArray(weekSummary) ? weekSummary : [],
@@ -217,11 +237,11 @@ function VenueBookingProvider({ entryContext, children }) {
     return (0, import_hooks.safeRunModuleAction)(venueBookingModule, actionName, ...args);
   }, [venueBookingModule]);
   const syncCustomerLoginToModule = (0, import_react.useCallback)(async () => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c2, _d;
     try {
       const hasToken = !!((_b2 = (_a2 = utils == null ? void 0 : utils.token) == null ? void 0 : _a2.get) == null ? void 0 : _b2.call(_a2));
       if (!hasToken) return;
-      const rawCustomer = (_d = (_c = utils == null ? void 0 : utils.storage) == null ? void 0 : _c.get) == null ? void 0 : _d.call(_c, "customer");
+      const rawCustomer = (_d = (_c2 = utils == null ? void 0 : utils.storage) == null ? void 0 : _c2.get) == null ? void 0 : _d.call(_c2, "customer");
       const customer = typeof rawCustomer === "string" ? JSON.parse(rawCustomer || "{}") : rawCustomer || {};
       const customerId = customer == null ? void 0 : customer.id;
       if (!customerId) return;
@@ -260,7 +280,7 @@ function VenueBookingProvider({ entryContext, children }) {
     }
   }, [syncCustomerLoginToModule, venueBookingModule, refreshViewModel]);
   const submitOrder = (0, import_react.useCallback)(async () => {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c2;
     if (isSubmittingOrder) return;
     try {
       setIsSubmittingOrder(true);
@@ -278,7 +298,7 @@ function VenueBookingProvider({ entryContext, children }) {
       }
       if (typeof (utils == null ? void 0 : utils.action) === "function") {
         const otherParams = (0, import_hooks.getOtherParams)(venueBookingModule);
-        if (totalAmount === 0 || ((_c = otherParams == null ? void 0 : otherParams.openData["checkout.checkout_options"]) == null ? void 0 : _c.length) === 0) {
+        if (totalAmount === 0 || ((_c2 = otherParams == null ? void 0 : otherParams.openData["checkout.checkout_options"]) == null ? void 0 : _c2.length) === 0) {
           return location.replace(`/payment-finish/success?amount=${totalAmount}&order_id=${orderId}`);
         }
         utils.action({
@@ -300,7 +320,7 @@ function VenueBookingProvider({ entryContext, children }) {
     } finally {
       setIsSubmittingOrder(false);
     }
-  }, [isSubmittingOrder, venueBookingModule, refreshViewModel, utils, (_b = viewModel == null ? void 0 : viewModel.summary) == null ? void 0 : _b.total_amount]);
+  }, [isSubmittingOrder, venueBookingModule, refreshViewModel, utils, (_c = viewModel == null ? void 0 : viewModel.summary) == null ? void 0 : _c.total_amount]);
   const handleSubmitOrder = (0, import_react.useCallback)(async () => {
     if (isLogin) {
       await submitOrder();
@@ -315,6 +335,19 @@ function VenueBookingProvider({ entryContext, children }) {
       }
     });
   }, [isLogin, openLoginModal, handleLoginSuccess, submitOrder]);
+  const proceedToCheckout = (0, import_react.useCallback)(() => {
+    if (!isLogin) {
+      openLoginModal({
+        callback: (status) => {
+          if (status === "success") {
+            handleLoginSuccess().then(() => goToStep("checkout"));
+          }
+        }
+      });
+      return;
+    }
+    goToStep("checkout");
+  }, [isLogin, openLoginModal, handleLoginSuccess, goToStep]);
   const handlePrimaryAction = (0, import_react.useCallback)(() => {
     var _a2, _b2;
     if (currentStep === "select-venue") {
@@ -325,21 +358,15 @@ function VenueBookingProvider({ entryContext, children }) {
         });
         return;
       }
+      if (stepList[1] === "checkout") {
+        proceedToCheckout();
+        return;
+      }
       goToStep("addons");
       return;
     }
     if (currentStep === "addons") {
-      if (!isLogin) {
-        openLoginModal({
-          callback: (status) => {
-            if (status === "success") {
-              handleLoginSuccess().then(() => goToStep("checkout"));
-            }
-          }
-        });
-        return;
-      }
-      goToStep("checkout");
+      proceedToCheckout();
       return;
     }
     const deposit = (_a2 = viewModel.summary) == null ? void 0 : _a2.deposit;
@@ -348,7 +375,7 @@ function VenueBookingProvider({ entryContext, children }) {
       return;
     }
     void handleSubmitOrder();
-  }, [currentStep, canNext, isLogin, isAgreeDepositPolicy, viewModel.summary, goToStep, openLoginModal, handleLoginSuccess, handleSubmitOrder]);
+  }, [currentStep, canNext, isAgreeDepositPolicy, viewModel.summary, stepList, proceedToCheckout, goToStep, handleSubmitOrder]);
   (0, import_react.useEffect)(() => {
     var _a2;
     const pubsub = utils == null ? void 0 : utils.pubsub;

package/lib/components/venueBooking/hooks.d.ts

@@ -5,6 +5,7 @@ export declare const VENUE_BOOKING_STEPS: readonly ["select-venue", "addons", "c
 export declare const VENUE_PRODUCT_IDS: number[];
 /**
  * 获取 PisellOS venueBooking 业务模块
+ * 使用 useRef 稳定模块引用，防止 getModule 返回值每次渲染变化时触发 bootstrap useEffect 重跑
  */
 export declare function useVenueBookingModule(): any;
 /** 统一获取货币前缀（优先引擎配置，兜底 '$'） */

package/lib/components/venueBooking/hooks.js

@@ -49,6 +49,7 @@ __export(hooks_exports, {
   useVenueBookingSymbol: () => useVenueBookingSymbol
 });
 module.exports = __toCommonJS(hooks_exports);
+var import_react = require("react");
 var import_useEngineContext = require("../../hooks/useEngineContext");
 var import_useEngineContext2 = __toESM(require("../../hooks/useEngineContext"));
 var import_toShoppingCartProducts = require("../scanOrder/utils/toShoppingCartProducts");
@@ -57,7 +58,11 @@ var VENUE_PRODUCT_IDS = [61947, 61948];
 function useVenueBookingModule() {
   var _a;
   const pisellOS = (0, import_useEngineContext.usePisellOS)();
-  return (_a = pisellOS == null ? void 0 : pisellOS.getModule) == null ? void 0 : _a.call(pisellOS, "venueBooking");
+  const moduleRef = (0, import_react.useRef)(null);
+  if (!moduleRef.current) {
+    moduleRef.current = ((_a = pisellOS == null ? void 0 : pisellOS.getModule) == null ? void 0 : _a.call(pisellOS, "venueBooking")) ?? null;
+  }
+  return moduleRef.current;
 }
 function useVenueBookingSymbol() {
   var _a;

package/lib/components/venueBooking/index.js

@@ -44,6 +44,24 @@ function VenueBooking(props) {
   const context = (0, import_useEngineContext.default)();
   const entryContext = (0, import_hooks.normalizeEntryContext)((_a = context == null ? void 0 : context.engine) == null ? void 0 : _a.props);
   import_utils.locales.init(import_locales.default, ((_c = (_b = context == null ? void 0 : context.engine) == null ? void 0 : _b.props) == null ? void 0 : _c.locale) || "en");
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "venue-booking-scope h-full overflow-x-hidden overscroll-none bg-[#f5f5f3] text-zinc-900" }, /* @__PURE__ */ import_react.default.createElement(import_context.VenueBookingProvider, { entryContext }, /* @__PURE__ */ import_react.default.createElement(import_Content.default, null)));
+  const [viewportHeight, setViewportHeight] = (0, import_react.useState)(
+    typeof window !== "undefined" ? window.innerHeight : void 0
+  );
+  (0, import_react.useEffect)(() => {
+    function onResize() {
+      setViewportHeight(window.innerHeight);
+    }
+    setViewportHeight(window.innerHeight);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "venue-booking-scope overflow-x-hidden overscroll-none bg-[#f5f5f3] text-zinc-900",
+      style: viewportHeight !== void 0 ? { height: viewportHeight } : { height: "100vh" }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_context.VenueBookingProvider, { entryContext }, /* @__PURE__ */ import_react.default.createElement(import_Content.default, null))
+  );
 }
 var venueBooking_default = VenueBooking;

package/lib/components/venueBooking/locales.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
         'pisell2.venue.cart.delete.venue.only.step1': string;
         'pisell2.venue.cart.addons.ready': string;
         'pisell2.venue.cart.review.all': string;
+        'pisell2.venue.action.next': string;
         'pisell2.venue.action.next.addons': string;
         'pisell2.venue.action.review.pay': string;
         'pisell2.venue.action.pay.now': string;
@@ -40,6 +41,7 @@ declare const _default: {
         'pisell2.venue.label.selected': string;
         'pisell2.venue.label.sold.out': string;
         'pisell2.venue.label.few.left': string;
+        'pisell2.venue.label.bookable': string;
         'pisell2.venue.label.off.peak': string;
         'pisell2.venue.label.peak': string;
         'pisell2.venue.label.promo': string;
@@ -91,6 +93,7 @@ declare const _default: {
         'pisell2.venue.calendar.weekday.short.sun': string;
         'pisell2.venue.time.am': string;
         'pisell2.venue.time.pm': string;
+        'pisell2.venue.time.hour.format': string;
         'pisell2.venue.limit.message': string;
         'pisell2.text.goodpass': string;
         'pisell2.text.goodpass.product-vouchers': string;
@@ -119,6 +122,7 @@ declare const _default: {
         'pisell2.appointment.policy': string;
         'pisell2.appointment.policy.confirm': string;
         'pisell2.appointment.booking.empty.data': string;
+        'pisell2.product-select.search': string;
     };
     'zh-CN': {
         'pisell2.venue.step.select': string;
@@ -140,6 +144,7 @@ declare const _default: {
         'pisell2.venue.cart.delete.venue.only.step1': string;
         'pisell2.venue.cart.addons.ready': string;
         'pisell2.venue.cart.review.all': string;
+        'pisell2.venue.action.next': string;
         'pisell2.venue.action.next.addons': string;
         'pisell2.venue.action.review.pay': string;
         'pisell2.venue.action.pay.now': string;
@@ -157,6 +162,7 @@ declare const _default: {
         'pisell2.venue.label.selected': string;
         'pisell2.venue.label.sold.out': string;
         'pisell2.venue.label.few.left': string;
+        'pisell2.venue.label.bookable': string;
         'pisell2.venue.label.off.peak': string;
         'pisell2.venue.label.peak': string;
         'pisell2.venue.label.promo': string;
@@ -208,6 +214,7 @@ declare const _default: {
         'pisell2.venue.calendar.weekday.short.sun': string;
         'pisell2.venue.time.am': string;
         'pisell2.venue.time.pm': string;
+        'pisell2.venue.time.hour.format': string;
         'pisell2.venue.limit.message': string;
         'pisell2.text.goodpass': string;
         'pisell2.text.goodpass.product-vouchers': string;
@@ -236,6 +243,7 @@ declare const _default: {
         'pisell2.appointment.policy': string;
         'pisell2.appointment.policy.confirm': string;
         'pisell2.appointment.booking.empty.data': string;
+        'pisell2.product-select.search': string;
     };
     'zh-HK': {
         'pisell2.venue.step.select': string;
@@ -257,6 +265,7 @@ declare const _default: {
         'pisell2.venue.cart.delete.venue.only.step1': string;
         'pisell2.venue.cart.addons.ready': string;
         'pisell2.venue.cart.review.all': string;
+        'pisell2.venue.action.next': string;
         'pisell2.venue.action.next.addons': string;
         'pisell2.venue.action.review.pay': string;
         'pisell2.venue.action.pay.now': string;
@@ -274,6 +283,7 @@ declare const _default: {
         'pisell2.venue.label.selected': string;
         'pisell2.venue.label.sold.out': string;
         'pisell2.venue.label.few.left': string;
+        'pisell2.venue.label.bookable': string;
         'pisell2.venue.label.off.peak': string;
         'pisell2.venue.label.peak': string;
         'pisell2.venue.label.promo': string;
@@ -325,6 +335,7 @@ declare const _default: {
         'pisell2.venue.calendar.weekday.short.sun': string;
         'pisell2.venue.time.am': string;
         'pisell2.venue.time.pm': string;
+        'pisell2.venue.time.hour.format': string;
         'pisell2.venue.limit.message': string;
         'pisell2.text.goodpass': string;
         'pisell2.text.goodpass.product-vouchers': string;
@@ -353,6 +364,7 @@ declare const _default: {
         'pisell2.appointment.policy': string;
         'pisell2.appointment.policy.confirm': string;
         'pisell2.appointment.booking.empty.data': string;
+        'pisell2.product-select.search': string;
     };
     ja: {
         'pisell2.venue.step.select': string;
@@ -374,6 +386,7 @@ declare const _default: {
         'pisell2.venue.cart.delete.venue.only.step1': string;
         'pisell2.venue.cart.addons.ready': string;
         'pisell2.venue.cart.review.all': string;
+        'pisell2.venue.action.next': string;
         'pisell2.venue.action.next.addons': string;
         'pisell2.venue.action.review.pay': string;
         'pisell2.venue.action.pay.now': string;
@@ -391,6 +404,7 @@ declare const _default: {
         'pisell2.venue.label.selected': string;
         'pisell2.venue.label.sold.out': string;
         'pisell2.venue.label.few.left': string;
+        'pisell2.venue.label.bookable': string;
         'pisell2.venue.label.off.peak': string;
         'pisell2.venue.label.peak': string;
         'pisell2.venue.label.promo': string;
@@ -442,6 +456,7 @@ declare const _default: {
         'pisell2.venue.calendar.weekday.short.sun': string;
         'pisell2.venue.time.am': string;
         'pisell2.venue.time.pm': string;
+        'pisell2.venue.time.hour.format': string;
         'pisell2.venue.limit.message': string;
         'pisell2.text.goodpass': string;
         'pisell2.text.goodpass.product-vouchers': string;
@@ -470,6 +485,7 @@ declare const _default: {
         'pisell2.appointment.policy': string;
         'pisell2.appointment.policy.confirm': string;
         'pisell2.appointment.booking.empty.data': string;
+        'pisell2.product-select.search': string;
     };
     pt: {
         'pisell2.venue.step.select': string;
@@ -491,6 +507,7 @@ declare const _default: {
         'pisell2.venue.cart.delete.venue.only.step1': string;
         'pisell2.venue.cart.addons.ready': string;
         'pisell2.venue.cart.review.all': string;
+        'pisell2.venue.action.next': string;
         'pisell2.venue.action.next.addons': string;
         'pisell2.venue.action.review.pay': string;
         'pisell2.venue.action.pay.now': string;
@@ -508,6 +525,7 @@ declare const _default: {
         'pisell2.venue.label.selected': string;
         'pisell2.venue.label.sold.out': string;
         'pisell2.venue.label.few.left': string;
+        'pisell2.venue.label.bookable': string;
         'pisell2.venue.label.off.peak': string;
         'pisell2.venue.label.peak': string;
         'pisell2.venue.label.promo': string;
@@ -559,6 +577,7 @@ declare const _default: {
         'pisell2.venue.calendar.weekday.short.sun': string;
         'pisell2.venue.time.am': string;
         'pisell2.venue.time.pm': string;
+        'pisell2.venue.time.hour.format': string;
         'pisell2.venue.limit.message': string;
         'pisell2.text.goodpass': string;
         'pisell2.text.goodpass.product-vouchers': string;
@@ -587,6 +606,7 @@ declare const _default: {
         'pisell2.appointment.policy': string;
         'pisell2.appointment.policy.confirm': string;
         'pisell2.appointment.booking.empty.data': string;
+        'pisell2.product-select.search': string;
     };
 };
 export default _default;