@anker-in/ui 0.3.2 → 0.3.4

package/dist/index.mjs

@@ -10853,7 +10853,9 @@ var QuestionnaireForm2 = ({
   error,
   initialResponses
 }) => {
-  const [responses, setResponses] = useState(() => initialResponses || {});
+  const [responses, setResponses] = useState(
+    () => initialResponses || {}
+  );
   const [errors, setErrors] = useState({});
   const [agreements, setAgreements] = useState({});
   const [agreementError, setAgreementError] = useState("");
@@ -10875,8 +10877,12 @@ var QuestionnaireForm2 = ({
     });
     return seeded;
   });
-  const prevHasBookedBeforeRef = useRef(initialResponses?.["has_booked_before"] === "option2");
-  const hasBookedBeforeInitialized = useRef(!!initialResponses?.["has_booked_before"]);
+  const prevHasBookedBeforeRef = useRef(
+    initialResponses?.["has_booked_before"] === "option2"
+  );
+  const hasBookedBeforeInitialized = useRef(
+    !!initialResponses?.["has_booked_before"]
+  );
   const hasBookedBeforeQuestion = questions.find(
     (q) => (q.key || q.id) === "has_booked_before"
   );
@@ -10966,7 +10972,7 @@ var QuestionnaireForm2 = ({
     if (!emailRegex.test(value)) {
       setErrors((prev) => ({
         ...prev,
-        [questionId]: "Please enter a valid email address"
+        [questionId]: pageData?.emailValidError || "Please enter a valid email address"
       }));
     }
   };
@@ -11004,7 +11010,7 @@ var QuestionnaireForm2 = ({
         const questionId = getQuestionId(question);
         const value = responses[questionId];
         if (!value || Array.isArray(value) && value.length === 0) {
-          newErrors[questionId] = "This field is required";
+          newErrors[questionId] = pageData?.fieldRuquired || "This field is required";
         }
       }
     });
@@ -11015,7 +11021,7 @@ var QuestionnaireForm2 = ({
       );
       if (!allAgreed) {
         setAgreementError(
-          "Please agree to all terms and conditions to continue"
+          pageData?.agreeRuquired || "Please agree to all terms and conditions to continue"
         );
         setErrors(newErrors);
         return false;
@@ -11046,7 +11052,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",
@@ -11402,7 +11410,7 @@ var QuestionnaireForm2 = ({
           children: loading ? pageData?.submitting || "Submitting..." : pageData?.submit || "Submit Booking"
         }
       ),
-      error && /* @__PURE__ */ jsx("div", { className: "text-center w-full p-4", children: /* @__PURE__ */ jsx("p", { className: "text-[#FF4D4D] font-bold", children: error.message }) })
+      error && /* @__PURE__ */ jsx("div", { className: "text-center w-full p-4", children: /* @__PURE__ */ jsx("p", { className: "text-[#FF4D4D] font-bold", children: pageData?.errorMsg?.[String(error.code)] || pageData?.errorMsg?.[error.code || ""] || error.message }) })
     ] })
   ] });
 };
@@ -11499,6 +11507,25 @@ var DateTimePicker2 = ({
     });
     return dates;
   }, [timeslotsData, demoRoom?.timezone, timezone5]);
+  useEffect(() => {
+    if (booking || isInitialized || !demoRoom?.timeslots?.length) return;
+    const tz = demoRoom?.timezone || timezone5;
+    const now2 = tz ? dayjs4().tz(tz) : dayjs4();
+    const nearestSlot = demoRoom.timeslots.filter((slot) => {
+      const slotTime = tz ? dayjs4(slot.start_time).tz(tz) : dayjs4(slot.start_time);
+      return slot.status === "available" && slotTime.isAfter(now2);
+    }).sort((a, b) => {
+      const timeA = tz ? dayjs4(a.start_time).tz(tz) : dayjs4(a.start_time);
+      const timeB = tz ? dayjs4(b.start_time).tz(tz) : dayjs4(b.start_time);
+      return timeA.unix() - timeB.unix();
+    })[0];
+    if (!nearestSlot) return;
+    const nearestDate = tz ? dayjs4(nearestSlot.start_time).tz(tz) : dayjs4(nearestSlot.start_time);
+    setSelectedDate(nearestDate);
+    setCalendarValue(nearestDate);
+    setSelectedTimeslotId(nearestSlot.id);
+    setIsInitialized(true);
+  }, [booking, isInitialized, demoRoom?.timeslots, demoRoom?.timezone, timezone5]);
   useEffect(() => {
     if (!timeslotsData?.timeslots || isInitialized) return;
     const tz = demoRoom?.timezone || timezone5;
@@ -11564,22 +11591,34 @@ var DateTimePicker2 = ({
     return `${start} - ${end}`;
   };
   useEffect(() => {
-    if (!booking || hasResolvedBookingSlot || !timeslotsData?.timeslots?.length) return;
+    if (!booking?.booking_date) return;
+    setSelectedDate(dayjs4(booking.booking_date));
+    setCalendarValue(dayjs4(booking.booking_date));
+    setIsInitialized(true);
+    if (booking.timeslot_id) {
+      setSelectedTimeslotId(booking.timeslot_id);
+      setHasResolvedBookingSlot(true);
+    }
+  }, [booking?.booking_date, booking?.timeslot_id]);
+  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(iso).tz(tz) : dayjs4(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 = useMemo(() => {
     if (!booking) return void 0;
     return {
@@ -12486,6 +12525,9 @@ var BookingFormO2O = ({
   const [selectedPurposeType, setSelectedPurposeType] = useState(
     () => initialBusinessType || purposeOptions[0]?.type || ""
   );
+  const [isPurposeConfirmed, setIsPurposeConfirmed] = useState(
+    () => !!initialBusinessType && purposeOptions.some((item) => item.type === initialBusinessType)
+  );
   useEffect(() => {
     setSelectedPurposeType((currentType) => {
       if (purposeOptions.some((item) => item.type === currentType)) {
@@ -12499,11 +12541,16 @@ var BookingFormO2O = ({
       }
       return purposeOptions[0]?.type || "";
     });
+    const resolvedFromExplicitSource = !!initialBusinessType && purposeOptions.some((item) => item.type === initialBusinessType) || !!booking?.business_type && purposeOptions.some((item) => item.type === booking.business_type);
+    if (resolvedFromExplicitSource) {
+      setIsPurposeConfirmed(true);
+    }
   }, [purposeOptions, initialBusinessType, booking?.business_type]);
   const selectedPurpose = useMemo(() => {
-    return purposeOptions.find((item) => item.type === selectedPurposeType) || purposeOptions[0];
+    return purposeOptions.find((item) => item.type === selectedPurposeType) || {};
   }, [purposeOptions, selectedPurposeType]);
-  const selectedPodContent = selectedPurpose?.podContent;
+  const isPodSelected = isPurposeConfirmed && selectedPurpose?.type === "pod";
+  const selectedPodContent = isPodSelected ? selectedPurpose?.podContent : void 0;
   const selectedPodDescription = getPodContentDescription(selectedPodContent);
   const podDesignId = useMemo(() => getQueryParam("design_id"), []);
   const isPodDesignEditMode = !!podDesignId || !!booking?.design_project_id;
@@ -12585,85 +12632,95 @@ var BookingFormO2O = ({
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "bg-[#f5f5f5]", children: [
-      !!purposeOptions.length && /* @__PURE__ */ jsx("div", { className: cn("py-[40px] l:py-[24px]", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-[16px] l:grid-cols-1", children: [
-        /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[24px] l:px-[16px] l:py-[20px]", children: [
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: "booking-purpose-select",
-              className: "block text-[16px] font-bold text-[#080A0F] l:text-[14px]",
-              children: getPurposeLabel(pageData)
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "relative mt-[14px]", children: [
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                id: "booking-purpose-select",
-                value: selectedPurpose?.type || "",
-                onChange: (event2) => {
-                  setSelectedPurposeType(event2.target.value);
-                },
-                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__ */ jsx(
-                  "option",
-                  {
-                    value: item.type || "",
-                    children: item.label || item.type
-                  },
-                  `${item.type || item.label || "purpose"}-${index}`
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-[14px] top-1/2 flex -translate-y-1/2 text-[#080A0F]", children: /* @__PURE__ */ jsx(ChevronIcon2, {}) })
-          ] }),
-          !!selectedPurpose?.purposeNote && /* @__PURE__ */ jsx("p", { className: "mt-[16px] max-w-[720px] text-[14px] font-medium leading-[1.35] text-[#080A0F] l:text-[13px]", children: selectedPurpose.purposeNote })
-        ] }),
-        selectedPurpose?.type === "pod" && !!selectedPodContent && /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[20px] l:px-[16px] l:py-[20px]", children: [
-          !!selectedPodContent.title && /* @__PURE__ */ jsx("h2", { className: "text-[16px] font-bold text-[#080A0F] l:text-[14px]", children: selectedPodContent.title }),
-          !!selectedPodDescription && /* @__PURE__ */ jsx("p", { className: "mt-[6px] text-[13px] font-medium leading-[1.35] text-[#080A0F] l:text-[12px]", children: selectedPodDescription }),
-          !!selectedPodImage && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: selectedPodImage,
-              alt: selectedPodContent.imageAlt || selectedPodContent.title || "",
-              className: "mt-[12px] h-[220px] rounded-[8px] object-cover l:h-auto"
-            }
+      !!purposeOptions.length && /* @__PURE__ */ jsx("div", { className: cn("py-[40px] l:py-[24px]", className), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid gap-[16px] l:grid-cols-1",
+            isPodSelected && "grid-cols-2"
           ),
-          !!selectedPodButtonText && /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: selectedPodButtonLink || "#",
-              "aria-disabled": isPodButtonDisabled,
-              tabIndex: isPodButtonDisabled ? -1 : void 0,
-              onClick: (event2) => {
-                if (isPodButtonDisabled) event2.preventDefault();
-              },
-              rel: "noopener noreferrer",
-              className: cn(
-                "mt-[12px] inline-flex h-[42px] items-center justify-center gap-[6px] rounded-full bg-[#080A0F] px-[24px] text-[14px] font-bold text-white transition-colors hover:bg-[#2A2C32]",
-                isPodButtonDisabled && "pointer-events-none cursor-not-allowed opacity-50"
+          children: [
+            /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[24px] l:px-[16px] l:py-[20px]", children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: "booking-purpose-select",
+                  className: "block text-[16px] font-bold text-[#080A0F] l:text-[14px]",
+                  children: getPurposeLabel(pageData)
+                }
               ),
-              children: [
-                selectedPodButtonIcon && /* @__PURE__ */ jsx(
-                  "img",
+              /* @__PURE__ */ jsxs("div", { className: "relative mt-[14px]", children: [
+                /* @__PURE__ */ jsx(
+                  "select",
                   {
-                    src: selectedPodButtonIcon,
-                    alt: "",
-                    className: "h-[16px] w-[16px]",
-                    "aria-hidden": "true"
+                    id: "booking-purpose-select",
+                    value: selectedPurpose?.type || "",
+                    onChange: (event2) => {
+                      setSelectedPurposeType(event2.target.value);
+                      setIsPurposeConfirmed(true);
+                    },
+                    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__ */ jsx(
+                      "option",
+                      {
+                        value: item.type || "",
+                        children: item.label || item.type
+                      },
+                      `${item.type || item.label || "purpose"}-${index}`
+                    ))
                   }
                 ),
-                selectedPodButtonText
-              ]
-            }
-          )
-        ] })
-      ] }) }),
+                /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-[14px] top-1/2 flex -translate-y-1/2 text-[#080A0F]", children: /* @__PURE__ */ jsx(ChevronIcon2, {}) })
+              ] }),
+              !!selectedPurpose?.purposeNote && /* @__PURE__ */ jsx("p", { className: "mt-[16px] max-w-[720px] text-[14px] font-medium leading-[1.35] text-[#080A0F] l:text-[13px]", children: selectedPurpose.purposeNote })
+            ] }),
+            isPodSelected && !!selectedPodContent && /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[20px] l:px-[16px] l:py-[20px]", children: [
+              !!selectedPodContent.title && /* @__PURE__ */ jsx("h2", { className: "text-[16px] font-bold text-[#080A0F] l:text-[14px]", children: selectedPodContent.title }),
+              !!selectedPodDescription && /* @__PURE__ */ jsx("p", { className: "mt-[6px] text-[13px] font-medium leading-[1.35] text-[#080A0F] l:text-[12px]", children: selectedPodDescription }),
+              !!selectedPodImage && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: selectedPodImage,
+                  alt: selectedPodContent.imageAlt || selectedPodContent.title || "",
+                  className: "mt-[12px] h-[220px] rounded-[8px] object-cover l:h-auto"
+                }
+              ),
+              !!selectedPodButtonText && (booking?.print_status === "unprinted" && booking?.design_project_id || !token) && /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: selectedPodButtonLink || "#",
+                  "aria-disabled": isPodButtonDisabled,
+                  tabIndex: isPodButtonDisabled ? -1 : void 0,
+                  onClick: (event2) => {
+                    if (isPodButtonDisabled) event2.preventDefault();
+                  },
+                  rel: "noopener noreferrer",
+                  className: cn(
+                    "mt-[12px] inline-flex h-[42px] items-center justify-center gap-[6px] rounded-full bg-[#080A0F] px-[24px] text-[14px] font-bold text-white transition-colors hover:bg-[#2A2C32]",
+                    isPodButtonDisabled && "pointer-events-none cursor-not-allowed opacity-50"
+                  ),
+                  children: [
+                    selectedPodButtonIcon && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: selectedPodButtonIcon,
+                        alt: "",
+                        className: "h-[16px] w-[16px]",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    selectedPodButtonText
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
         DateTimePicker_default2,
         {
@@ -12733,10 +12790,14 @@ var BookingSuccessO2O = ({
   const [loading, setLoading] = useState(false);
   const [bookingDesign, setBookingDesign] = useState(null);
   const [isCancelled, setIsCancelled] = useState(false);
+  const [isPending, setIsPending] = useState(false);
   const [showCancelDialog, setShowCancelDialog] = useState(false);
   const [cancelLoading, setCancelLoading] = useState(false);
   const [cancelError, setCancelError] = useState(null);
+  const [checkinLoading, setCheckinLoading] = useState(false);
+  const [checkinError, setCheckinError] = useState(null);
   const qrCodeContainerRef = useRef(null);
+  const isStore = Boolean(isStoreUser);
   const handlePrintQRCode = () => {
     const canvas = qrCodeContainerRef.current?.querySelector("canvas");
     const qrImageSrc = canvas?.toDataURL("image/png");
@@ -12774,16 +12835,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();
+    }
   };
   useEffect(() => {
     if (token && apiConfig && !initialBookingData) {
@@ -12794,6 +12869,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 {
@@ -12857,6 +12933,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__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
       /* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
@@ -12876,21 +12979,33 @@ var BookingSuccessO2O = ({
   bookingDesign?.order_code;
   return /* @__PURE__ */ jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto", children: [
     /* @__PURE__ */ jsx("h1", { className: "text-[48px] xxl:text-[32px] font-bold text-[#080A0F] mb-8 print:hidden", children: pageData.yourAppointment }),
-    isCancelled && /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: "text-base text-[#080A0F]", children: pageData.appointmentCanceled }),
-      onScheduleAgain && bookingData && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center l:gap-2 gap-4", children: [
+        !!pageData.contactUs && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px] print:hidden", children: [
             /* @__PURE__ */ jsxs("div", { children: [
@@ -13002,7 +13117,7 @@ var BookingSuccessO2O = ({
               ] })
             ] })
           ] }),
-          bookingData.business_type === "pod" && /* @__PURE__ */ 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__ */ 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__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] text-center", children: pageData.podData?.QRCodeTitle }),
             /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 text-center mt-2", children: pageData.podData?.QRCodeSubTitle }),
             /* @__PURE__ */ jsx(
@@ -13020,19 +13135,19 @@ var BookingSuccessO2O = ({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-3 mt-6 print:hidden", children: [
-              /* @__PURE__ */ jsx(
+              !!pageData.podData?.btnToWallet && /* @__PURE__ */ 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__ */ jsx(
+              !!pageData.podData?.btnToPrint && /* @__PURE__ */ 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
                 }
               )
@@ -13041,8 +13156,8 @@ var BookingSuccessO2O = ({
         ]
       }
     ),
-    !isCancelled && /* @__PURE__ */ jsxs("div", { className: "mt-[64px] print:hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    isPending && /* @__PURE__ */ jsxs("div", { className: "mt-[64px] pb-4 print:hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex md:w-full gap-4 md:flex-col md:items-center md:justify-center", children: [
         onEditBooking && token && /* @__PURE__ */ jsx(
           "button",
           {
@@ -13051,7 +13166,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
           }
         ),
@@ -13060,13 +13175,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__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
     ] }),
+    isStore && bookingData?.print_status === "completed" && /* @__PURE__ */ jsxs("div", { className: "mt-[64px] pb-4 print:hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ 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__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: checkinError })
+    ] }),
     showCancelDialog && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4 print:hidden", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[24px] max-w-[600px] p-8 shadow-xl relative", children: [
       /* @__PURE__ */ jsx(
         "button",