@anker-in/ui 0.3.2 → 0.3.3

package/dist/index.d.mts

@@ -611,6 +611,9 @@ interface BookingFormPageData {
         emailDescription?: string;
         dealsType?: string;
         agrees?: string[];
+        errorMsg?: {
+            [key: string]: string;
+        };
     };
 }
 /**
@@ -645,6 +648,8 @@ interface BookingSuccessPageData {
      * 活动标题
      */
     event?: string;
+    contactUs?: string;
+    contactUsLink?: string;
     /**
      * Demo Room 标题
      */
@@ -665,6 +670,10 @@ interface BookingSuccessPageData {
      * 取消预约按钮
      */
     cancelAppointment?: string;
+    /**
+     * 改变领取状态按钮（门店店员身份时显示）
+     */
+    changeStatusButton?: string;
     /**
      * 编辑预约按钮
      */

package/dist/index.d.ts

@@ -611,6 +611,9 @@ interface BookingFormPageData {
         emailDescription?: string;
         dealsType?: string;
         agrees?: string[];
+        errorMsg?: {
+            [key: string]: string;
+        };
     };
 }
 /**
@@ -645,6 +648,8 @@ interface BookingSuccessPageData {
      * 活动标题
      */
     event?: string;
+    contactUs?: string;
+    contactUsLink?: string;
     /**
      * Demo Room 标题
      */
@@ -665,6 +670,10 @@ interface BookingSuccessPageData {
      * 取消预约按钮
      */
     cancelAppointment?: string;
+    /**
+     * 改变领取状态按钮（门店店员身份时显示）
+     */
+    changeStatusButton?: string;
     /**
      * 编辑预约按钮
      */

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 {
@@ -12648,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 || "#",
@@ -12747,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");
@@ -12788,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) {
@@ -12808,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 {
@@ -12871,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" }),
@@ -12890,21 +12957,33 @@ var BookingSuccessO2O = ({
   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: [
@@ -13016,7 +13095,7 @@ var BookingSuccessO2O = ({
               ] })
             ] })
           ] }),
-          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(
@@ -13034,19 +13113,19 @@ var BookingSuccessO2O = ({
               }
             ),
             /* @__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
                 }
               )
@@ -13055,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",
           {
@@ -13065,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
           }
         ),
@@ -13074,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",