@anker-in/ui 0.3.2 → 0.3.3

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"
   );
@@ -10894,6 +10900,7 @@ var QuestionnaireForm2 = ({
       return true;
     });
   }, [questions, hasBookedBefore]);
+  console.log(error, pageData);
   useEffect(() => {
     if (hasBookedBeforeInitialized.current) return;
     if (hasBookedBeforeQuestion && hasBookedBeforeQuestionId) {
@@ -11046,7 +11053,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 +11411,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 }) })
     ] })
   ] });
 };
@@ -11564,22 +11573,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 {
@@ -12634,7 +12655,7 @@ var BookingFormO2O = ({
               className: "mt-[12px] h-[220px] rounded-[8px] object-cover l:h-auto"
             }
           ),
-          !!selectedPodButtonText && /* @__PURE__ */ jsxs(
+          !!selectedPodButtonText && (booking?.print_status === "unprinted" && booking?.design_project_id || !token) && /* @__PURE__ */ jsxs(
             "a",
             {
               href: selectedPodButtonLink || "#",
@@ -12733,10 +12754,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 +12799,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 +12833,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 +12897,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 +12943,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 +13081,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 +13099,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 +13120,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 +13130,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 +13139,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",