@anker-in/ui 0.3.1 → 0.3.3

package/dist/index.js

@@ -10867,7 +10867,9 @@ var QuestionnaireForm2 = ({
   error,
   initialResponses
 }) => {
-  const [responses, setResponses] = React15.useState(() => initialResponses || {});
+  const [responses, setResponses] = React15.useState(
+    () => initialResponses || {}
+  );
   const [errors, setErrors] = React15.useState({});
   const [agreements, setAgreements] = React15.useState({});
   const [agreementError, setAgreementError] = React15.useState("");
@@ -10889,8 +10891,12 @@ var QuestionnaireForm2 = ({
     });
     return seeded;
   });
-  const prevHasBookedBeforeRef = React15.useRef(initialResponses?.["has_booked_before"] === "option2");
-  const hasBookedBeforeInitialized = React15.useRef(!!initialResponses?.["has_booked_before"]);
+  const prevHasBookedBeforeRef = React15.useRef(
+    initialResponses?.["has_booked_before"] === "option2"
+  );
+  const hasBookedBeforeInitialized = React15.useRef(
+    !!initialResponses?.["has_booked_before"]
+  );
   const hasBookedBeforeQuestion = questions.find(
     (q) => (q.key || q.id) === "has_booked_before"
   );
@@ -10908,6 +10914,7 @@ var QuestionnaireForm2 = ({
       return true;
     });
   }, [questions, hasBookedBefore]);
+  console.log(error, pageData);
   React15.useEffect(() => {
     if (hasBookedBeforeInitialized.current) return;
     if (hasBookedBeforeQuestion && hasBookedBeforeQuestionId) {
@@ -11060,7 +11067,9 @@ var QuestionnaireForm2 = ({
       onSubmit?.(finalResponses);
     } else {
       setTimeout(() => {
-        const firstErrorElement = document.querySelector('[data-has-error="true"]');
+        const firstErrorElement = document.querySelector(
+          '[data-has-error="true"]'
+        );
         if (firstErrorElement) {
           firstErrorElement.scrollIntoView({
             behavior: "smooth",
@@ -11416,7 +11425,7 @@ var QuestionnaireForm2 = ({
           children: loading ? pageData?.submitting || "Submitting..." : pageData?.submit || "Submit Booking"
         }
       ),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center w-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#FF4D4D] font-bold", children: error.message }) })
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center w-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#FF4D4D] font-bold", children: pageData?.errorMsg?.[String(error.code)] || pageData?.errorMsg?.[error.code || ""] || error.message }) })
     ] })
   ] });
 };
@@ -11578,22 +11587,34 @@ var DateTimePicker2 = ({
     return `${start} - ${end}`;
   };
   React15.useEffect(() => {
-    if (!booking || hasResolvedBookingSlot || !timeslotsData?.timeslots?.length) return;
+    if (!booking?.booking_date) return;
+    setSelectedDate(dayjs4__default.default(booking.booking_date));
+    setCalendarValue(dayjs4__default.default(booking.booking_date));
+    setIsInitialized(true);
+    if (booking.timeslot_id) {
+      setSelectedTimeslotId(booking.timeslot_id);
+      setHasResolvedBookingSlot(true);
+    }
+  }, [booking?.booking_date, booking?.timeslot_id]);
+  React15.useEffect(() => {
+    if (!booking || hasResolvedBookingSlot || !dayTimeslots.length) return;
     if (booking.timeslot_id) {
       setSelectedTimeslotId(booking.timeslot_id);
       setHasResolvedBookingSlot(true);
       return;
     }
-    if (booking.time_slot) {
-      const match = timeslotsData.timeslots.find(
-        (slot) => formatTimeslot(slot) === booking.time_slot
-      );
-      if (match) {
-        setSelectedTimeslotId(match.id);
-        setHasResolvedBookingSlot(true);
-      }
+    if (!booking.time_slot) return;
+    const tz = demoRoom?.timezone || timezone5;
+    const target = booking.time_slot.replace(/\s+/g, "");
+    const match = dayTimeslots.find((slot) => {
+      const toHm = (iso) => (tz ? dayjs4__default.default(iso).tz(tz) : dayjs4__default.default(iso)).format("HH:mm");
+      return `${toHm(slot.start_time)}-${toHm(slot.end_time)}` === target;
+    });
+    if (match) {
+      setSelectedTimeslotId(match.id);
+      setHasResolvedBookingSlot(true);
     }
-  }, [booking, timeslotsData, hasResolvedBookingSlot]);
+  }, [booking, dayTimeslots, hasResolvedBookingSlot, demoRoom?.timezone, timezone5]);
   const initialResponses = React15.useMemo(() => {
     if (!booking) return void 0;
     return {
@@ -12136,7 +12157,9 @@ var DemoRoomDetail2 = ({
     if (demoRoom?.latitude && demoRoom?.longitude) {
       return `https://www.google.com/maps/search/?api=1&query=${demoRoom.latitude},${demoRoom.longitude}`;
     } else if (address) {
-      return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
+      return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
+        address
+      )}`;
     }
     return "#";
   })();
@@ -12157,129 +12180,133 @@ var DemoRoomDetail2 = ({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: error.message })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-    "gap-[80px] l:gap-[40px] l:flex l:flex-col-reverse items-start py-[24px] l:pb-[64px]",
-    images.length > 0 ? "grid grid-cols-2" : "flex"
-  ), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[20px]", children: descriptions?.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "p",
-        {
-          className: "text-base text-gray-600 leading-relaxed",
-          children: desc
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            className: "flex-shrink-0 mt-0.5",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  d: "M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  d: "M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900", children: devices })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            className: "flex-shrink-0 mt-0.5",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2Z",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  cx: "12",
-                  cy: "9",
-                  r: "2.5",
-                  stroke: "currentColor",
-                  strokeWidth: "2"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: address }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "gap-[80px] l:gap-[40px] l:flex l:flex-col-reverse items-start py-[24px] l:pb-[64px]",
+        images.length > 0 ? "grid grid-cols-2" : "flex"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[20px]", children: descriptions?.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
             {
-              href: googleMapsLink,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 mt-1 underline",
-              children: [
-                pageData.openInGoogleMaps,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    width: "12",
-                    height: "12",
-                    viewBox: "0 0 12 12",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
+              className: "text-base text-gray-600 leading-relaxed",
+              children: desc
+            },
+            index
+          )) }),
+          !!devices && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "flex-shrink-0 mt-0.5",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900", children: devices })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "flex-shrink-0 mt-0.5",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2Z",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: "12",
+                      cy: "9",
+                      r: "2.5",
+                      stroke: "currentColor",
+                      strokeWidth: "2"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: address }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "a",
+                {
+                  href: googleMapsLink,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 mt-1 underline",
+                  children: [
+                    pageData.openInGoogleMaps,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
                       {
-                        d: "M3 9L9 3M9 3H3M9 3V9",
-                        stroke: "currentColor",
-                        strokeWidth: "1.5",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 12 12",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "path",
+                          {
+                            d: "M3 9L9 3M9 3H3M9 3V9",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
                       }
                     )
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    images.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden demo-room-swiper", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        images.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden demo-room-swiper", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
               .demo-room-swiper .swiper-pagination-bullet {
                 background-color: rgba(255, 255, 255, 0.5);
               }
@@ -12309,32 +12336,34 @@ var DemoRoomDetail2 = ({
                 right: 16px !important;
               }
             ` }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Swiper2,
-        {
-          modules: [Navigation, Pagination, Autoplay],
-          spaceBetween: 0,
-          slidesPerView: 1,
-          navigation: images.length > 1,
-          pagination: images.length > 1 ? { clickable: true } : false,
-          autoplay: images.length > 1 ? {
-            delay: 3e3,
-            disableOnInteraction: false
-          } : false,
-          loop: images.length > 1,
-          className: "h-full rounded-2xl",
-          children: images.map((img, index) => /* @__PURE__ */ jsxRuntime.jsx(SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Swiper2,
             {
-              src: img,
-              alt: `Demo room view ${index + 1}`,
-              className: "w-full h-full object-cover"
+              modules: [Navigation, Pagination, Autoplay],
+              spaceBetween: 0,
+              slidesPerView: 1,
+              navigation: images.length > 1,
+              pagination: images.length > 1 ? { clickable: true } : false,
+              autoplay: images.length > 1 ? {
+                delay: 3e3,
+                disableOnInteraction: false
+              } : false,
+              loop: images.length > 1,
+              className: "h-full rounded-2xl",
+              children: images.map((img, index) => /* @__PURE__ */ jsxRuntime.jsx(SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: img,
+                  alt: `Demo room view ${index + 1}`,
+                  className: "w-full h-full object-cover"
+                }
+              ) }) }, index))
             }
-          ) }) }, index))
-        }
-      )
-    ] })
-  ] }) });
+          )
+        ] })
+      ]
+    }
+  ) });
 };
 DemoRoomDetail2.displayName = "DemoRoomDetail";
 
@@ -12538,9 +12567,7 @@ var BookingFormO2O = ({
   const selectedPodButtonLink = React15.useMemo(() => {
     if (isPodButtonDisabled) return void 0;
     if (isPodDesignEditMode) {
-      const editBaseUrl = getSafePageDataUrl(
-        selectedPodContent?.buttonEditLink
-      );
+      const editBaseUrl = getSafePageDataUrl(selectedPodContent?.buttonEditLink);
       if (!editBaseUrl || !effectiveStoreManagerId || !effectiveMirSessionId) {
         return void 0;
       }
@@ -12612,7 +12639,11 @@ var BookingFormO2O = ({
                 onChange: (event2) => {
                   setSelectedPurposeType(event2.target.value);
                 },
-                className: "h-[48px] w-full appearance-none rounded-[8px] border border-[#D9DCE1] bg-white px-[16px] pr-[48px] text-[16px] font-medium text-[#2A2C32] outline-none transition-colors focus:border-[#080A0F] focus:ring-2 focus:ring-[#3ADB67]/30 l:text-[14px]",
+                disabled: !!token,
+                className: cn(
+                  "h-[48px] w-full appearance-none rounded-[8px] border border-[#D9DCE1] bg-white px-[16px] pr-[48px] text-[16px] font-medium text-[#2A2C32] outline-none transition-colors focus:border-[#080A0F] focus:ring-2 focus:ring-[#3ADB67]/30 l:text-[14px]",
+                  token && "pointer-events-none cursor-not-allowed opacity-50"
+                ),
                 children: purposeOptions.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
                   "option",
                   {
@@ -12638,7 +12669,7 @@ var BookingFormO2O = ({
               className: "mt-[12px] h-[220px] rounded-[8px] object-cover l:h-auto"
             }
           ),
-          !!selectedPodButtonText && /* @__PURE__ */ jsxRuntime.jsxs(
+          !!selectedPodButtonText && (booking?.print_status === "unprinted" && booking?.design_project_id || !token) && /* @__PURE__ */ jsxRuntime.jsxs(
             "a",
             {
               href: selectedPodButtonLink || "#",
@@ -12683,7 +12714,7 @@ var BookingFormO2O = ({
           onQuestionnaireSubmit,
           pageData: dateTimePickerPageData,
           selectedPurposeType: selectedPurpose?.type,
-          podDesignId
+          podDesignId: mirSessionId
         }
       ) })
     ] })
@@ -12693,6 +12724,7 @@ BookingFormO2O.displayName = "BookingFormO2O";
 var BookingSuccessO2O = ({
   bookingData: initialBookingData,
   token,
+  isStoreUser,
   apiConfig,
   onScheduleAgain,
   onCancelSuccess,
@@ -12736,10 +12768,14 @@ var BookingSuccessO2O = ({
   const [loading, setLoading] = React15.useState(false);
   const [bookingDesign, setBookingDesign] = React15.useState(null);
   const [isCancelled, setIsCancelled] = React15.useState(false);
+  const [isPending, setIsPending] = React15.useState(false);
   const [showCancelDialog, setShowCancelDialog] = React15.useState(false);
   const [cancelLoading, setCancelLoading] = React15.useState(false);
   const [cancelError, setCancelError] = React15.useState(null);
+  const [checkinLoading, setCheckinLoading] = React15.useState(false);
+  const [checkinError, setCheckinError] = React15.useState(null);
   const qrCodeContainerRef = React15.useRef(null);
+  const isStore = Boolean(isStoreUser);
   const handlePrintQRCode = () => {
     const canvas = qrCodeContainerRef.current?.querySelector("canvas");
     const qrImageSrc = canvas?.toDataURL("image/png");
@@ -12777,16 +12813,30 @@ var BookingSuccessO2O = ({
     const subtitle = iframeDoc.createElement("p");
     subtitle.textContent = pageData.podData?.QRCodeSubTitle || "";
     const image = iframeDoc.createElement("img");
-    image.src = qrImageSrc;
     image.alt = "QR Code";
     iframeDoc.body.appendChild(title);
     iframeDoc.body.appendChild(subtitle);
     iframeDoc.body.appendChild(image);
-    iframe.contentWindow?.focus();
-    iframe.contentWindow?.print();
-    setTimeout(() => {
-      document.body.removeChild(iframe);
-    }, 1e3);
+    const doPrint = () => {
+      iframe.contentWindow?.focus();
+      iframe.contentWindow?.print();
+      setTimeout(() => {
+        document.body.removeChild(iframe);
+      }, 1e3);
+    };
+    let printed = false;
+    const triggerPrintOnce = () => {
+      if (printed) return;
+      printed = true;
+      doPrint();
+    };
+    image.onload = triggerPrintOnce;
+    image.onerror = triggerPrintOnce;
+    setTimeout(triggerPrintOnce, 1500);
+    image.src = qrImageSrc;
+    if (image.complete) {
+      triggerPrintOnce();
+    }
   };
   React15.useEffect(() => {
     if (token && apiConfig && !initialBookingData) {
@@ -12797,6 +12847,7 @@ var BookingSuccessO2O = ({
           const booking = await apiClient.getBooking(token, apiConfig.locale);
           setBookingData(booking);
           setIsCancelled(booking.status === "cancelled");
+          setIsPending(booking.status === "pending");
         } catch (err) {
           console.error("Failed to fetch booking data:", err);
         } finally {
@@ -12812,7 +12863,9 @@ var BookingSuccessO2O = ({
       const fetchBookingDesign = async () => {
         try {
           const apiClient = createDemoRoomApi(apiConfig);
-          const design = await apiClient.getBookingDesign({ booking_token: token });
+          const design = await apiClient.getBookingDesign({
+            booking_token: token
+          });
           setBookingDesign(design);
         } catch (err) {
           console.error("Failed to fetch booking design:", err);
@@ -12858,6 +12911,33 @@ var BookingSuccessO2O = ({
       setCancelLoading(false);
     }
   };
+  const handleCheckin = async () => {
+    if (!token || !apiConfig) {
+      setCheckinError(
+        pageData.cancelError || "Unable to check in: Missing token or API configuration"
+      );
+      return;
+    }
+    setCheckinLoading(true);
+    setCheckinError(null);
+    try {
+      const apiClient = createDemoRoomApi(apiConfig);
+      const checkedInBooking = await apiClient.checkinBooking({
+        booking_token: token
+      });
+      if (checkedInBooking) {
+        setBookingData(checkedInBooking);
+        window.location.reload();
+      }
+    } catch (err) {
+      console.error("Failed to check in booking:", err);
+      setCheckinError(
+        pageData.cancelError || "Failed to check in. Please try again."
+      );
+    } finally {
+      setCheckinLoading(false);
+    }
+  };
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
@@ -12874,26 +12954,36 @@ var BookingSuccessO2O = ({
   }
   const podDesignName = bookingDesign?.material;
   const podDesignImage = bookingDesign?.thumb_url;
-  const podOrderCode = bookingDesign?.order_code;
-  console.log(bookingDesign);
-  console.log(bookingData);
+  bookingDesign?.order_code;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] xxl:text-[32px] font-bold text-[#080A0F] mb-8 print:hidden", children: pageData.yourAppointment }),
-    isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[16px] l:items-start p-6 mb-4 l:gap-2 flex l:flex-col items-center justify-between print:hidden", children: [
+    isCancelled && !isStore && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[16px] l:items-start l:p-3 p-6 mb-4 l:gap-2 flex l:flex-col items-center justify-between print:hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#080A0F]", children: pageData.appointmentCanceled }),
-      onScheduleAgain && bookingData && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => onScheduleAgain(bookingData.demoroom_code),
-          className: "px-6 py-3 text-[16px] bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
-          children: pageData.scheduleAgain
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center l:gap-2 gap-4", children: [
+        !!pageData.contactUs && /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: pageData?.contactUsLink,
+            target: "_blank",
+            className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] l:px-[12px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+            rel: "noreferrer",
+            children: pageData.contactUs
+          }
+        ),
+        onScheduleAgain && bookingData && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onScheduleAgain(bookingData.demoroom_code),
+            className: "text-[14px] cursor-pointer w-fit bg-black text-white rounded-full hover:bg-gray-800 border-2 border-[#080A0F] px-[20px] l:px-[12px] py-[10px] leading-[1] transition-colors",
+            children: pageData.scheduleAgain
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: bookingData.business_type === "pod" ? "grid grid-cols-2 gap-[16px] l:grid-cols-1 print:grid-cols-1" : "",
+        className: bookingData.business_type === "pod" && !isCancelled && !isStore ? "grid grid-cols-2 gap-[16px] l:grid-cols-1 print:grid-cols-1" : "",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px] print:hidden", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -12992,21 +13082,20 @@ var BookingSuccessO2O = ({
                     " ",
                     podDesignName
                   ] }),
-                  bookingData?.status && pageData.podData?.status?.[bookingData.status] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[#4A4C56]", children: pageData.podData.status[bookingData.status] }),
-                  podOrderCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[#4A4C56]", children: podOrderCode })
+                  bookingData?.status && pageData.podData?.status?.[bookingData.status] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[#4A4C56]", children: pageData.podData.status[bookingData.status] })
                 ] }),
                 podDesignImage && /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
+                  antd.Image,
                   {
                     src: podDesignImage,
                     alt: podDesignName,
-                    className: "w-[88px] h-[88px] rounded-[8px] object-cover shrink-0"
+                    className: "!w-[88px] !h-[88px] rounded-[8px] !object-cover"
                   }
                 )
               ] })
             ] })
           ] }),
-          bookingData.business_type === "pod" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[16px] px-[48px] l:px-[16px] l:py-[16px] py-[32px] flex flex-col items-center justify-center text-center print:w-full", children: [
+          bookingData.business_type === "pod" && !isStore && !isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[16px] px-[48px] l:px-[16px] l:py-[16px] py-[32px] flex flex-col items-center justify-center text-center print:w-full", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] text-center", children: pageData.podData?.QRCodeTitle }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 text-center mt-2", children: pageData.podData?.QRCodeSubTitle }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -13017,26 +13106,26 @@ var BookingSuccessO2O = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   antd.QRCode,
                   {
-                    value: "https://www.eufymake.com/?type=qrcode",
+                    value: `${pageData.podData?.QRCodeUrl}${token}&isStoreUser=true` || "",
                     size: 200
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-3 mt-6 print:hidden", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+              !!pageData.podData?.btnToWallet && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: () => onAddToWallet?.(bookingData),
-                  className: "rounded-full border-2 border-[#080A0F] px-[20px] py-[10px] text-[14px] hover:bg-gray-50 transition-colors",
+                  className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
                   children: pageData.podData?.btnToWallet
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              !!pageData.podData?.btnToPrint && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: handlePrintQRCode,
-                  className: "rounded-full border-2 border-[#080A0F] px-[20px] py-[10px] text-[14px] hover:bg-gray-50 transition-colors",
+                  className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
                   children: pageData.podData?.btnToPrint
                 }
               )
@@ -13045,8 +13134,8 @@ var BookingSuccessO2O = ({
         ]
       }
     ),
-    !isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[64px] print:hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    isPending && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[64px] pb-4 print:hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex md:w-full gap-4 md:flex-col md:items-center md:justify-center", children: [
         onEditBooking && token && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -13055,7 +13144,7 @@ var BookingSuccessO2O = ({
               bookingData.demoroom_code,
               bookingData.business_type
             ),
-            className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors",
+            className: "text-[14px] cursor-pointer w-fit bg-black text-white rounded-full hover:bg-gray-800 border-2 border-[#080A0F] l:px-[12px] px-[20px] py-[10px] leading-[1] transition-colors",
             children: pageData.editAppointment
           }
         ),
@@ -13064,13 +13153,25 @@ var BookingSuccessO2O = ({
           {
             onClick: () => setShowCancelDialog(true),
             disabled: cancelLoading,
-            className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+            className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] l:px-[12px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
             children: pageData.cancelAppointment
           }
         )
-      ] }),
+      ] }) }),
       cancelError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
     ] }),
+    isStore && bookingData?.print_status === "completed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[64px] pb-4 print:hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleCheckin,
+          disabled: checkinLoading,
+          className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] l:px-[12px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          children: pageData.changeStatusButton || "Change Pickup Status"
+        }
+      ) }),
+      checkinError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: checkinError })
+    ] }),
     showCancelDialog && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4 print:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[24px] max-w-[600px] p-8 shadow-xl relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",