@anker-in/ui 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -10,7 +10,7 @@ import dayjs4 from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import 'dayjs/locale/zh-cn';
-import { QRCode, theme, ConfigProvider, Calendar, Select } from 'antd';
+import { Image, QRCode, theme, ConfigProvider, Calendar, Select } from 'antd';
 import dayLocaleData from 'dayjs/plugin/localeData';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
@@ -864,12 +864,12 @@ function useBookingDesign(client, params, options) {
   });
   const enabled = options?.enabled !== false;
   useEffect(() => {
-    if (!enabled || !params.booking_token) return;
+    if (!enabled || !params.booking_token && !(params.demoroom_code && params.session_id)) return;
     let cancelled = false;
     const fetchData = async () => {
       setState((prev) => ({ ...prev, loading: true, error: null }));
       try {
-        const data = await client.getBookingDesign(params.booking_token);
+        const data = await client.getBookingDesign(params);
         if (!cancelled) {
           setState({ data, loading: false, error: null });
         }
@@ -887,7 +887,7 @@ function useBookingDesign(client, params, options) {
     return () => {
       cancelled = true;
     };
-  }, [client, params.booking_token, enabled]);
+  }, [client, params.booking_token, params.demoroom_code, params.session_id, enabled]);
   return state;
 }
 var AntdMobileIsolated = ({
@@ -1766,12 +1766,23 @@ var DemoRoomApiClient = class {
     return response.booking;
   }
   /**
-   * 查询 POD 作品信息（模式1：精确查询）
-   * @param bookingToken 预约凭证
+   * 查询 POD 作品信息
+   * 模式1（优先）：通过 booking_token 精确查询
+   * 模式2：通过 demoroom_code + session_id 查询（MIR 跳回时预约尚未创建的场景）
+   * @param params 查询参数
    */
-  async getBookingDesign(bookingToken) {
+  async getBookingDesign(params) {
     const searchParams = new URLSearchParams();
-    searchParams.append("booking_token", bookingToken);
+    if (params.booking_token) {
+      searchParams.append("booking_token", params.booking_token);
+    } else {
+      if (params.demoroom_code) {
+        searchParams.append("demoroom_code", params.demoroom_code);
+      }
+      if (params.session_id) {
+        searchParams.append("session_id", params.session_id);
+      }
+    }
     return this.request(
       `/api/v1/store/bookings/design?${searchParams.toString()}`
     );
@@ -11404,6 +11415,7 @@ var DateTimePicker2 = ({
   apiClient,
   demoRoomCode,
   demoRoom: demoRoomProp,
+  demoRoomLoading,
   token,
   booking,
   timezone: timezone5,
@@ -11432,11 +11444,12 @@ var DateTimePicker2 = ({
     loading: editLoading,
     error: editError
   } = useEditBooking(apiClient);
+  const isManagedByParent = demoRoomLoading !== void 0;
   const { data: fetchedDemoRoom } = useDemoRoom(
     apiClient,
     demoRoomCode || "",
     locale,
-    { enabled: !demoRoomProp && !!demoRoomCode }
+    { enabled: !isManagedByParent && !demoRoomProp && !!demoRoomCode }
   );
   const demoRoom = demoRoomProp ?? fetchedDemoRoom;
   const isPodPurpose = selectedPurposeType === "pod";
@@ -12074,6 +12087,7 @@ var DemoRoomDetail2 = ({
   demoRoomCode,
   locale,
   demoRoom: demoRoomProp,
+  demoRoomLoading,
   title: titleProp,
   descriptions: descriptionsProp,
   devices: devicesProp,
@@ -12089,7 +12103,8 @@ var DemoRoomDetail2 = ({
   className,
   ...props
 }) => {
-  const shouldFetch = !demoRoomProp && !!apiClient && !!demoRoomCode;
+  const isManagedByParent = demoRoomLoading !== void 0;
+  const shouldFetch = !isManagedByParent && !demoRoomProp && !!apiClient && !!demoRoomCode;
   const {
     data: fetchedDemoRoom,
     loading,
@@ -12107,11 +12122,14 @@ 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 "#";
   })();
-  if (loading && shouldFetch) {
+  const isLoading = isManagedByParent ? !!demoRoomLoading : loading && shouldFetch;
+  if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: cn("w-full pb-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
         /* @__PURE__ */ jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
@@ -12127,129 +12145,133 @@ var DemoRoomDetail2 = ({
       /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: error.message })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "mt-[20px]", children: descriptions?.map((desc, index) => /* @__PURE__ */ jsx(
-        "p",
-        {
-          className: "text-base text-gray-600 leading-relaxed",
-          children: desc
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "text-base text-gray-900", children: devices })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                "circle",
-                {
-                  cx: "12",
-                  cy: "9",
-                  r: "2.5",
-                  stroke: "currentColor",
-                  strokeWidth: "2"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: address }),
-          /* @__PURE__ */ jsxs(
-            "a",
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "mt-[20px]", children: descriptions?.map((desc, index) => /* @__PURE__ */ 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__ */ jsx(
-                  "svg",
-                  {
-                    width: "12",
-                    height: "12",
-                    viewBox: "0 0 12 12",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
+              className: "text-base text-gray-600 leading-relaxed",
+              children: desc
+            },
+            index
+          )) }),
+          !!devices && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "text-base text-gray-900", children: devices })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                    "circle",
+                    {
+                      cx: "12",
+                      cy: "9",
+                      r: "2.5",
+                      stroke: "currentColor",
+                      strokeWidth: "2"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: address }),
+              /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                          "path",
+                          {
+                            d: "M3 9L9 3M9 3H3M9 3V9",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        )
                       }
                     )
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    images.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden demo-room-swiper", children: [
-      /* @__PURE__ */ jsx("style", { children: `
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        images.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden demo-room-swiper", children: [
+          /* @__PURE__ */ jsx("style", { children: `
               .demo-room-swiper .swiper-pagination-bullet {
                 background-color: rgba(255, 255, 255, 0.5);
               }
@@ -12279,51 +12301,73 @@ var DemoRoomDetail2 = ({
                 right: 16px !important;
               }
             ` }),
-      /* @__PURE__ */ 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__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsx(
-            "img",
+          /* @__PURE__ */ 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__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: img,
+                  alt: `Demo room view ${index + 1}`,
+                  className: "w-full h-full object-cover"
+                }
+              ) }) }, index))
             }
-          ) }) }, index))
-        }
-      )
-    ] })
-  ] }) });
+          )
+        ] })
+      ]
+    }
+  ) });
 };
 DemoRoomDetail2.displayName = "DemoRoomDetail";
 
 // src/components/BookingFormO2O/utils/buildMirUrl.ts
+var REDIRECT_URL_ALLOWED_PARAMS = ["code", "business_type", "token"];
+function sanitizeRedirectSource(source) {
+  if (!source) return source;
+  try {
+    const parsed = new URL(source);
+    const keptParams = new URLSearchParams();
+    REDIRECT_URL_ALLOWED_PARAMS.forEach((key) => {
+      const value = parsed.searchParams.get(key);
+      if (value) keptParams.set(key, value);
+    });
+    parsed.search = keptParams.toString();
+    return parsed.toString();
+  } catch {
+    return source;
+  }
+}
 function buildMirWelcomeUrl({
   baseUrl,
   language,
   managerId,
   credential,
-  currentUrl
+  currentUrl,
+  managerIdParam = "email",
+  credentialParam = "credential"
 }) {
   const url = new URL(baseUrl);
   if (language) {
     url.searchParams.set("language", language);
   }
   url.searchParams.set("countrycode", "US");
-  url.searchParams.set("email", managerId);
-  url.searchParams.set("credential", credential);
-  const redirectSource = currentUrl ?? (typeof window !== "undefined" ? window.location.href : "");
+  url.searchParams.set(managerIdParam, managerId);
+  url.searchParams.set(credentialParam, credential);
+  const redirectSource = sanitizeRedirectSource(
+    currentUrl ?? (typeof window !== "undefined" ? window.location.href : "")
+  );
   url.searchParams.set("redirect_url", encodeURIComponent(redirectSource));
   return url.toString();
 }
@@ -12400,7 +12444,7 @@ var getPurposeLabel = (pageData) => {
   return "What is your purpose of visit?";
 };
 var getPodContentDescription = (podContent) => podContent?.description || podContent?.subTitle;
-var getPodContentImage = (podContent) => podContent?.image || podContent?.defaultImg;
+var getPodContentImage = (podContent) => podContent?.defaultImg;
 var getPodContentButtonText = (podContent) => podContent?.buttonText || podContent?.btnText;
 var BookingFormO2O = ({
   layoutClassName,
@@ -12417,9 +12461,10 @@ var BookingFormO2O = ({
 }) => {
   const apiClient = useMemo(
     () => createDemoRoomApi(apiConfig),
-    [apiConfig]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [apiConfig.baseUrl, apiConfig.apiKey, apiConfig.locale]
   );
-  const { data: demoRoom } = useDemoRoom(
+  const { data: demoRoom, loading: demoRoomLoading } = useDemoRoom(
     apiClient,
     demoRoomCode || "",
     apiConfig.locale,
@@ -12460,17 +12505,47 @@ var BookingFormO2O = ({
   }, [purposeOptions, selectedPurposeType]);
   const selectedPodContent = selectedPurpose?.podContent;
   const selectedPodDescription = getPodContentDescription(selectedPodContent);
-  const selectedPodButtonText = getPodContentButtonText(selectedPodContent);
+  const podDesignId = useMemo(() => getQueryParam("design_id"), []);
+  const isPodDesignEditMode = !!podDesignId || !!booking?.design_project_id;
+  const storeManagerIdFromUrl = useMemo(
+    () => getQueryParam("store_manager_id"),
+    []
+  );
+  const mirSessionId = useMemo(() => getQueryParam("session_id"), []);
+  const effectiveStoreManagerId = storeManagerIdFromUrl || demoRoom?.contact?.manager_id;
+  const effectiveMirSessionId = mirSessionId || booking?.design_project_id;
+  const { data: bookingDesign } = useBookingDesign(
+    apiClient,
+    { demoroom_code: demoRoomCode, session_id: effectiveMirSessionId },
+    { enabled: !!demoRoomCode && !!effectiveMirSessionId }
+  );
+  const selectedPodButtonText = isPodDesignEditMode ? selectedPodContent?.btnEditText : getPodContentButtonText(selectedPodContent);
   const selectedPodImage = getSafePageDataUrl(
-    getPodContentImage(selectedPodContent)
+    isPodDesignEditMode && bookingDesign?.thumb_url || getPodContentImage(selectedPodContent)
   );
-  const selectedPodButtonIcon = getSafePageDataUrl(selectedPodContent?.btnIcon);
-  const podDesignId = useMemo(() => getQueryParam("design_id"), []);
-  const managerId = "57b98522a6a81087af435727aab98dfd0f8be7d3033338ba0db5517e0e08d0a7b13635faa5fc16c33f36fab1a6ceb29e";
-  const isPodButtonDisabled = !managerId;
+  const selectedPodButtonIcon = getSafePageDataUrl(
+    isPodDesignEditMode ? selectedPodContent?.btnEditIcon : selectedPodContent?.btnIcon
+  );
+  const managerId = demoRoom?.contact?.manager_hash;
+  const isPodButtonDisabled = isPodDesignEditMode ? !effectiveStoreManagerId || !effectiveMirSessionId : !managerId;
   const mirCredential = useMemo(() => crypto.randomUUID(), [demoRoomCode]);
-  console.log(selectedPodContent);
   const selectedPodButtonLink = useMemo(() => {
+    if (isPodButtonDisabled) return void 0;
+    if (isPodDesignEditMode) {
+      const editBaseUrl = getSafePageDataUrl(selectedPodContent?.buttonEditLink);
+      if (!editBaseUrl || !effectiveStoreManagerId || !effectiveMirSessionId) {
+        return void 0;
+      }
+      return buildMirWelcomeUrl({
+        baseUrl: editBaseUrl,
+        language: apiConfig.locale,
+        managerId: effectiveStoreManagerId,
+        credential: effectiveMirSessionId,
+        managerIdParam: "store_manager_id",
+        credentialParam: "sessionid"
+      });
+    }
+    if (!managerId) return void 0;
     const baseUrl = getSafePageDataUrl(selectedPodContent?.buttonLink);
     if (!baseUrl) return void 0;
     return buildMirWelcomeUrl({
@@ -12484,7 +12559,10 @@ var BookingFormO2O = ({
     apiConfig.locale,
     managerId,
     isPodButtonDisabled,
-    mirCredential
+    mirCredential,
+    isPodDesignEditMode,
+    effectiveStoreManagerId,
+    effectiveMirSessionId
   ]);
   const dateTimePickerPageData = useMemo(
     () => ({
@@ -12501,6 +12579,7 @@ var BookingFormO2O = ({
         apiClient,
         demoRoomCode,
         demoRoom,
+        demoRoomLoading,
         locale: apiConfig.locale,
         pageData: pageData?.demoRoomDetail
       }
@@ -12525,7 +12604,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__ */ jsx(
                   "option",
                   {
@@ -12548,7 +12631,7 @@ var BookingFormO2O = ({
             {
               src: selectedPodImage,
               alt: selectedPodContent.imageAlt || selectedPodContent.title || "",
-              className: "mt-[12px] h-[156px] w-full rounded-[8px] object-cover l:h-auto"
+              className: "mt-[12px] h-[220px] rounded-[8px] object-cover l:h-auto"
             }
           ),
           !!selectedPodButtonText && /* @__PURE__ */ jsxs(
@@ -12556,13 +12639,14 @@ var BookingFormO2O = ({
             {
               href: selectedPodButtonLink || "#",
               "aria-disabled": isPodButtonDisabled,
-              tabIndex: void 0,
+              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
+                isPodButtonDisabled && "pointer-events-none cursor-not-allowed opacity-50"
               ),
               children: [
                 selectedPodButtonIcon && /* @__PURE__ */ jsx(
@@ -12586,6 +12670,7 @@ var BookingFormO2O = ({
           apiClient,
           demoRoomCode,
           demoRoom,
+          demoRoomLoading,
           token,
           booking,
           timezone: timezone5,
@@ -12594,7 +12679,7 @@ var BookingFormO2O = ({
           onQuestionnaireSubmit,
           pageData: dateTimePickerPageData,
           selectedPurposeType: selectedPurpose?.type,
-          podDesignId
+          podDesignId: mirSessionId
         }
       ) })
     ] })
@@ -12604,6 +12689,7 @@ BookingFormO2O.displayName = "BookingFormO2O";
 var BookingSuccessO2O = ({
   bookingData: initialBookingData,
   token,
+  isStoreUser,
   apiConfig,
   onScheduleAgain,
   onCancelSuccess,
@@ -12723,7 +12809,9 @@ var BookingSuccessO2O = ({
       const fetchBookingDesign = async () => {
         try {
           const apiClient = createDemoRoomApi(apiConfig);
-          const design = await apiClient.getBookingDesign(token);
+          const design = await apiClient.getBookingDesign({
+            booking_token: token
+          });
           setBookingDesign(design);
         } catch (err) {
           console.error("Failed to fetch booking design:", err);
@@ -12785,9 +12873,7 @@ 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__ */ 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: [
@@ -12903,15 +12989,14 @@ var BookingSuccessO2O = ({
                     " ",
                     podDesignName
                   ] }),
-                  bookingData?.status && pageData.podData?.status?.[bookingData.status] && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[#4A4C56]", children: pageData.podData.status[bookingData.status] }),
-                  podOrderCode && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[#4A4C56]", children: podOrderCode })
+                  bookingData?.status && pageData.podData?.status?.[bookingData.status] && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[#4A4C56]", children: pageData.podData.status[bookingData.status] })
                 ] }),
                 podDesignImage && /* @__PURE__ */ jsx(
-                  "img",
+                  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"
                   }
                 )
               ] })
@@ -12928,7 +13013,7 @@ var BookingSuccessO2O = ({
                 children: /* @__PURE__ */ jsx(
                   QRCode,
                   {
-                    value: "https://www.eufymake.com/?type=qrcode",
+                    value: `${pageData.podData?.QRCodeUrl}${token}&isStoreUser=true` || "",
                     size: 200
                   }
                 )