@anker-in/ui 0.1.3 → 0.1.4

package/dist/index.mjs

@@ -1028,6 +1028,66 @@ function useCreateBooking(client) {
     createBooking
   };
 }
+function useBooking(client, token, locale, options) {
+  const [state, setState] = useState({
+    data: null,
+    loading: true,
+    error: null
+  });
+  const enabled = options?.enabled !== false;
+  useEffect(() => {
+    if (!enabled || !token) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setState((prev) => ({ ...prev, loading: true, error: null }));
+      try {
+        const data = await client.getBooking(token, locale);
+        if (!cancelled) {
+          setState({ data, loading: false, error: null });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            data: null,
+            loading: false,
+            error: error instanceof ApiError ? error : new ApiError(1006, "Unknown error")
+          });
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token, locale, enabled]);
+  return state;
+}
+function useCancelBooking(client) {
+  const [state, setState] = useState({
+    data: null,
+    loading: false,
+    error: null
+  });
+  const cancelBooking = useCallback(
+    async (token, locale) => {
+      setState({ data: null, loading: true, error: null });
+      try {
+        const result = await client.cancelBooking(token, locale);
+        setState({ data: result, loading: false, error: null });
+        return result;
+      } catch (error) {
+        const apiError = error instanceof ApiError ? error : new ApiError(1006, "Unknown error");
+        setState({ data: null, loading: false, error: apiError });
+        throw apiError;
+      }
+    },
+    [client]
+  );
+  return {
+    ...state,
+    cancelBooking
+  };
+}
 var AntdMobileIsolated = ({
   children,
   className,
@@ -1799,11 +1859,39 @@ var DemoRoomApiClient = class {
     });
   }
   /**
-   * 根据 token 获取预约信息
-   * @param token 预约 token
+   * 根据 token 获取预约详情（支持多语言）
+   * @param token 预约凭证 (cancel_token)
+   * @param locale 语言偏好（可选，也可以通过 Accept-Language Header）
+   */
+  async getBooking(token, locale) {
+    const headers = {};
+    if (locale) {
+      headers["Accept-Language"] = locale;
+    }
+    const response = await this.request(
+      `/api/v1/store/bookings/${token}`,
+      { headers }
+    );
+    return response.booking;
+  }
+  /**
+   * 取消预约（支持多语言邮件通知）
+   * @param token 预约凭证 (cancel_token)
+   * @param locale 语言偏好（可选，用于邮件通知）
    */
-  async getBooking(token) {
-    return this.request(`/api/v1/store/bookings/${token}`);
+  async cancelBooking(token, locale) {
+    const headers = {};
+    if (locale) {
+      headers["Accept-Language"] = locale;
+    }
+    const response = await this.request(
+      `/api/v1/store/bookings/${token}/cancel`,
+      {
+        method: "POST",
+        headers
+      }
+    );
+    return response.booking;
   }
 };
 function createDemoRoomApi(config) {
@@ -2227,7 +2315,7 @@ var QuestionnaireForm = ({
           }
         );
       case "radio":
-        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question.options?.map((option) => /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question?.options?.map((option) => /* @__PURE__ */ jsxs(
           "label",
           {
             className: "flex items-center gap-3 cursor-pointer group",
@@ -2249,7 +2337,7 @@ var QuestionnaireForm = ({
           option.value || option.label
         )) });
       case "checkbox":
-        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question.options?.map((option) => {
+        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question?.options?.map((option) => {
           const optionValue = option.value || option.label;
           const isChecked = (responses[questionId] || []).includes(
             optionValue
@@ -2308,7 +2396,7 @@ var QuestionnaireForm = ({
     }
   };
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: [
-    questions.map((question) => {
+    questions?.map((question) => {
       const questionId = getQuestionId(question);
       return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("label", { className: "block", children: [
@@ -2794,12 +2882,13 @@ var BookingSuccess = ({
   bookingData: initialBookingData,
   token,
   apiConfig,
-  onBackToHome,
+  onScheduleAgain,
   className
 }) => {
   const [bookingData, setBookingData] = useState(initialBookingData || null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [isCancelled, setIsCancelled] = useState(false);
   useEffect(() => {
     if (token && apiConfig && !initialBookingData) {
       const fetchBookingData = async () => {
@@ -2807,8 +2896,9 @@ var BookingSuccess = ({
         setError(null);
         try {
           const apiClient = createDemoRoomApi(apiConfig);
-          const booking = await apiClient.getBooking(token);
+          const booking = await apiClient.getBooking(token, apiConfig.locale);
           setBookingData(booking);
+          setIsCancelled(booking.status === "cancelled");
         } catch (err) {
           console.error("Failed to fetch booking data:", err);
           setError("Failed to load booking information");
@@ -2820,140 +2910,115 @@ var BookingSuccess = ({
     }
   }, [token, apiConfig, initialBookingData]);
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-[#F5F5F5] py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "animate-spin w-16 h-16 mx-auto mb-4 border-4 border-[#3ADB67] border-t-transparent rounded-full" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xl text-gray-600", children: "Loading booking information..." })
-    ] }) });
+    return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl 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" }),
+      /* @__PURE__ */ jsx("div", { className: "h-24 bg-gray-200 rounded" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-20 bg-gray-200 rounded" }),
+        /* @__PURE__ */ jsx("div", { className: "h-20 bg-gray-200 rounded" }),
+        /* @__PURE__ */ jsx("div", { className: "h-20 bg-gray-200 rounded" })
+      ] })
+    ] }) }) });
   }
   if (error || !bookingData) {
-    return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-[#F5F5F5] py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-2xl mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[12px] border border-red-200 p-8 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          width: "32",
-          height: "32",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
-              stroke: "#EF4444",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        }
-      ) }),
+    return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u274C" }),
       /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2", children: error || "Booking Not Found" }),
-      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600 mb-6", children: "We couldn't find your booking information. Please check your booking confirmation email or contact support." }),
-      onBackToHome && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600 mb-6", children: "We couldn't find your booking information." }),
+      onScheduleAgain && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: onBackToHome,
-          className: "px-6 py-3 rounded-full bg-[#3ADB67] text-white font-medium text-base hover:bg-[#2FC257] transition-colors focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
-          children: "Back to Home"
+          onClick: onScheduleAgain,
+          className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors",
+          children: "Schedule Again"
         }
       )
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-[#F5F5F5] py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto", children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-20 h-20 mx-auto mb-6 rounded-full bg-[#3ADB67] flex items-center justify-center", children: /* @__PURE__ */ jsx(
-        "svg",
+  return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: "Your Appointment" }),
+    isCancelled ? /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-6 mb-8 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: "This appointment has been canceled." }),
+      onScheduleAgain && /* @__PURE__ */ jsx(
+        "button",
         {
-          width: "48",
-          height: "48",
-          viewBox: "0 0 32 32",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M26.6667 8L12 22.6667L5.33334 16",
-              stroke: "white",
-              strokeWidth: "3",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
+          onClick: onScheduleAgain,
+          className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors whitespace-nowrap",
+          children: "Schedule again"
         }
-      ) }),
-      /* @__PURE__ */ jsx("h1", { className: "text-[48px] font-bold text-gray-900 mb-4", children: "Booking Confirmed!" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xl text-gray-600", children: "Your demo room booking has been successfully confirmed." })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 mb-6", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: "Booking Details" }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-600 font-medium", children: "Booking ID" }),
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.booking_id })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-600 font-medium", children: "Date" }),
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.booking_date })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-600 font-medium", children: "Time" }),
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.booking_time })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-600 font-medium", children: "Status" }),
-          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-[#3ADB67] bg-opacity-10 text-[#3ADB67]", children: bookingData.status })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start py-3", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-600 font-medium", children: "Email" }),
-          /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.customer_email })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-[12px] p-6 mb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          children: /* @__PURE__ */ jsx(
-            "path",
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "bg-green-50 rounded-lg p-6 mb-8 flex items-center justify-between border border-green-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: "Your appointment has been confirmed." })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Location" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-gray-900", children: bookingData.demoroom_name }),
+          bookingData.address && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
+          bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsx(
+            "a",
             {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              href: `https://www.google.com/maps/search/?api=1&query=${bookingData.latitude},${bookingData.longitude}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center gap-1 text-base text-blue-600 hover:text-blue-700 hover:underline",
+              children: "Open in Google Maps \u2197"
             }
           )
-        }
-      ),
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-blue-900 mb-1", children: "Confirmation Email Sent" }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-blue-800", children: [
-          "A confirmation email has been sent to ",
-          /* @__PURE__ */ jsx("strong", { children: bookingData.customer_email }),
-          " with all the booking details and instructions."
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Date and Time" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-base text-gray-900", children: [
+          bookingData.booking_date,
+          bookingData.time_slot && `, ${bookingData.time_slot}`,
+          !bookingData.time_slot && bookingData.booking_time && `, ${bookingData.booking_time}`
+        ] })
+      ] }),
+      bookingData.equipment && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Event" }),
+        /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Demo Room" }),
+        /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Visitor Info" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+              }
+            ) }),
+            bookingData.phone_code && bookingData.phone_number ? /* @__PURE__ */ jsxs("span", { children: [
+              bookingData.phone_code,
+              " ",
+              bookingData.phone_number
+            ] }) : /* @__PURE__ */ jsx("span", { children: "No phone provided" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { children: bookingData.customer_email })
+          ] })
         ] })
       ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4", children: [
-      onBackToHome && /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onBackToHome,
-          className: "flex-1 px-6 py-4 rounded-full bg-[#3ADB67] text-white font-medium text-base hover:bg-[#2FC257] transition-colors focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
-          children: "Back to Home"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => window.print(),
-          className: "flex-1 px-6 py-4 rounded-full border-2 border-[#3ADB67] text-[#3ADB67] font-medium text-base hover:bg-[#3ADB67] hover:bg-opacity-5 transition-colors focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
-          children: "Print Confirmation"
-        }
-      )
     ] })
   ] }) });
 };
@@ -3096,6 +3161,6 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: theme2 }, children });
 };
 
-export { BookingForm, BookingSuccess, DemoRoom, DemoRoomApiClient, DemoRoomDetail, ThemeProvider, cn, createDemoRoomApi, useCreateBooking, useDemoRoom, useDemoRooms, useQuestionnaire, useTheme, useTimeslots };
+export { BookingForm, BookingSuccess, DemoRoom, DemoRoomApiClient, DemoRoomDetail, ThemeProvider, cn, createDemoRoomApi, useBooking, useCancelBooking, useCreateBooking, useDemoRoom, useDemoRooms, useQuestionnaire, useTheme, useTimeslots };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map