@lodashventure/medusa-booking-for-pickup 1.4.1 → 1.4.3

package/.medusa/server/src/admin/index.js

@@ -1,15 +1,346 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const lucideReact = require("lucide-react");
 const adminSdk = require("@medusajs/admin-sdk");
-const icons = require("@medusajs/icons");
 const ui = require("@medusajs/ui");
-const react = require("react");
+const icons = require("@medusajs/icons");
 const reactRouterDom = require("react-router-dom");
-const reactQuery = require("@tanstack/react-query");
 const Medusa = require("@medusajs/js-sdk");
-const lucideReact = require("lucide-react");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
+const CustomerPickupHistoryWidget = ({ data }) => {
+  const [pickupHistory, setPickupHistory] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const customer = data;
+  react.useEffect(() => {
+    fetchPickupHistory();
+  }, [customer.id]);
+  const fetchPickupHistory = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/admin/customers/${customer.id}/pickup-history`,
+        {
+          credentials: "include"
+        }
+      );
+      if (!response.ok) {
+        throw new Error("Failed to fetch pickup history");
+      }
+      const data2 = await response.json();
+      setPickupHistory(data2.pickup_history || []);
+    } catch (err) {
+      console.error("Error fetching pickup history:", err);
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("th-TH", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).format(date);
+  };
+  const formatCurrency = (amount, currency) => {
+    return new Intl.NumberFormat("th-TH", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(amount / 100);
+  };
+  const getStatusBadge = (status) => {
+    const statusColors = {
+      completed: "green",
+      pending: "orange",
+      canceled: "red",
+      processing: "blue"
+    };
+    const statusLabels = {
+      completed: "เสร็จสิ้น",
+      pending: "รอดำเนินการ",
+      canceled: "ยกเลิก",
+      processing: "กำลังดำเนินการ"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: statusColors[status] || "grey", size: "small", children: statusLabels[status] || status });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: "h2", children: "ประวัติการจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "text-ui-fg-subtle", children: "กำลังโหลด..." }) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: "h2", children: "ประวัติการจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "text-red-500", children: error }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: "h2", children: "ประวัติการจองรับสินค้า" }),
+        pickupHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "small", children: pickupHistory.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "small", variant: "transparent", onClick: fetchPickupHistory, children: "รีเฟรช" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: pickupHistory.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "text-ui-fg-muted mb-4", size: 48 }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "text-ui-fg-subtle", children: "ยังไม่มีประวัติการจองรับสินค้า" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: pickupHistory.map((pickup) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "rounded-lg border p-4 hover:bg-ui-bg-subtle transition-colors",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShoppingBag, { className: "text-ui-fg-subtle", size: 20 }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: pickup.order ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Text, { weight: "plus", size: "small", children: [
+                    "คำสั่งซื้อ #",
+                    pickup.order.display_id
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: "xsmall", className: "text-ui-fg-subtle", children: [
+                    ((_a = pickup.order.items) == null ? void 0 : _a.length) || 0,
+                    " รายการ"
+                  ] })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Text, { weight: "plus", size: "small", children: [
+                  "คำสั่งซื้อ ",
+                  pickup.order_id
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-1", children: [
+                pickup.order && getStatusBadge(pickup.order.status),
+                pickup.order && /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "plus", size: "small", children: formatCurrency(
+                  pickup.order.total,
+                  pickup.order.currency_code
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-ui-fg-subtle", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 16 }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "วันที่รับ: ",
+                  formatDate(pickup.pickup_datetime)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-ui-fg-subtle", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 16 }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "จองเมื่อ: ",
+                  formatDate(pickup.created_at)
+                ] })
+              ] })
+            ] }),
+            pickup.order && pickup.order.shipping_methods && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 pt-2 border-t", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xsmall", className: "text-ui-fg-subtle", children: pickup.order.shipping_methods.map((sm) => sm.name).join(", ") }) })
+          ]
+        },
+        pickup.id
+      );
+    }) }) })
+  ] });
+};
+defineWidgetConfig({
+  zone: "customer.details.after"
+});
+const OrderPickupBookingWidget = ({ data }) => {
+  var _a, _b;
+  const [pickupBooking, setPickupBooking] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const order = data;
+  react.useEffect(() => {
+    fetchPickupBooking();
+  }, [order.id]);
+  const fetchPickupBooking = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`/admin/orders/${order.id}/pickup-booking`, {
+        credentials: "include"
+      });
+      if (!response.ok) {
+        if (response.status === 404) {
+          setPickupBooking(null);
+          setLoading(false);
+          return;
+        }
+        throw new Error("Failed to fetch pickup booking");
+      }
+      const data2 = await response.json();
+      setPickupBooking(data2.pickup_booking);
+    } catch (err) {
+      console.error("Error fetching pickup booking:", err);
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("th-TH", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(date);
+  };
+  const formatTime = (dateString) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("th-TH", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+    }).format(date);
+  };
+  const formatDateTime = (dateString) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("th-TH", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).format(date);
+  };
+  const getPickupStatus = () => {
+    const now = /* @__PURE__ */ new Date();
+    const pickupDate = pickupBooking ? new Date(pickupBooking.pickup_datetime) : null;
+    if (!pickupDate) return { label: "N/A", color: "grey" };
+    if (order.status === "completed" || order.status === "delivered") {
+      return { label: "รับสินค้าแล้ว", color: "green" };
+    }
+    if (order.status === "canceled") {
+      return { label: "ยกเลิก", color: "red" };
+    }
+    if (now > pickupDate) {
+      return { label: "เลยกำหนดรับ", color: "orange" };
+    }
+    return { label: "รอรับสินค้า", color: "blue" };
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "การจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "กำลังโหลด..." }) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "การจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-red-500", children: error }) })
+    ] });
+  }
+  if (!pickupBooking) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "การจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "text-ui-fg-muted mb-4", size: 48 }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "คำสั่งซื้อนี้ไม่ได้จองรับสินค้าที่สาขา" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-muted mt-2", children: "คำสั่งซื้อนี้อาจเป็นการจัดส่งแบบปกติ" })
+      ] }) })
+    ] });
+  }
+  const status = getPickupStatus();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "การจองรับสินค้าที่สาขา" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: status.color, size: "small", children: status.label })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          size: "small",
+          variant: "transparent",
+          onClick: () => {
+            fetchPickupBooking();
+            ui.toast.success("รีเฟรชข้อมูลแล้ว");
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: 16 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 16 }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", weight: "plus", children: "วันที่รับสินค้า" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "plus", children: formatDate(pickupBooking.pickup_datetime) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 16 }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", weight: "plus", children: "เวลารับสินค้า" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "plus", children: formatTime(pickupBooking.pickup_datetime) })
+        ] })
+      ] }),
+      pickupBooking.shipping_option && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border p-4 bg-ui-bg-subtle", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "text-ui-fg-muted mt-1", size: 16 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "plus", size: "small", className: "mb-1", children: pickupBooking.shipping_option.name }),
+          ((_b = (_a = pickupBooking.shipping_option.service_zone) == null ? void 0 : _a.fulfillment_set) == null ? void 0 : _b.location) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: pickupBooking.shipping_option.service_zone.fulfillment_set.location.name }),
+            pickupBooking.shipping_option.service_zone.fulfillment_set.location.address && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted mt-1", children: [
+              pickupBooking.shipping_option.service_zone.fulfillment_set.location.address.address_1,
+              pickupBooking.shipping_option.service_zone.fulfillment_set.location.address.address_2 && `, ${pickupBooking.shipping_option.service_zone.fulfillment_set.location.address.address_2}`,
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              pickupBooking.shipping_option.service_zone.fulfillment_set.location.address.city,
+              " ",
+              pickupBooking.shipping_option.service_zone.fulfillment_set.location.address.province,
+              " ",
+              pickupBooking.shipping_option.service_zone.fulfillment_set.location.address.postal_code
+            ] })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4 border-t", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: "จองเมื่อ" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: formatDateTime(pickupBooking.created_at) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xsmall", className: "text-ui-fg-subtle", children: "อัปเดตล่าสุด" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: formatDateTime(pickupBooking.updated_at) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4 border-t", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: [
+        "Booking ID: ",
+        pickupBooking.id
+      ] }) })
+    ] }) })
+  ] });
+};
+adminSdk.defineWidgetConfig({
+  zone: "order.details.after"
+});
 const sdk = new Medusa__default.default({
   baseUrl: "/",
   debug: false,
@@ -17,25 +348,54 @@ const sdk = new Medusa__default.default({
     type: "session"
   }
 });
-const usePickupShippingOptions = (options) => {
-  return reactQuery.useQuery({
-    ...options,
-    queryKey: ["pickup-shipping-options"],
-    queryFn: async () => {
-      const options2 = await sdk.admin.shippingOption.list({
-        fields: "*.*"
+const usePickupShippingOptions = () => {
+  const [data, setData] = react.useState(
+    null
+  );
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const fetchOptions = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const options = await sdk.admin.shippingOption.list({
+        fields: [
+          "id",
+          "name",
+          "shipping_profile.*",
+          "service_zone.*",
+          "service_zone.fulfillment_set.*"
+        ].join(",")
       });
-      const filteredOptions = options2.shipping_options.filter(
-        (option) => option.service_zone.fulfillment_set.type === "pickup"
+      const filteredOptions = (options.shipping_options ?? []).filter(
+        (option) => {
+          var _a, _b;
+          return ((_b = (_a = option == null ? void 0 : option.service_zone) == null ? void 0 : _a.fulfillment_set) == null ? void 0 : _b.type) === "pickup";
+        }
       );
-      return {
+      setData({
         shipping_options: filteredOptions,
         count: filteredOptions.length,
-        limit: options2.limit,
-        offset: options2.offset
-      };
+        limit: options.limit,
+        offset: options.offset
+      });
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch pickup shipping options")
+      );
+    } finally {
+      setIsLoading(false);
     }
-  });
+  };
+  react.useEffect(() => {
+    fetchOptions();
+  }, []);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchOptions
+  };
 };
 const columnHelper = ui.createDataTableColumnHelper();
 const columns = [
@@ -1238,23 +1598,43 @@ axios$3.exports.default = axios$2;
 var axiosExports = axios$3.exports;
 var axios = axiosExports;
 const axios$1 = /* @__PURE__ */ getDefaultExportFromCjs(axios);
-const usePickupAvailable = (id, options) => {
-  return reactQuery.useQuery({
-    ...options,
-    queryKey: ["pickup-shipping-option", id],
-    queryFn: async () => {
-      if (!id) {
-        throw new Error("id is required");
-      }
+const usePickupAvailable = (id) => {
+  const [data, setData] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const fetchPickupAvailable = async () => {
+    if (!id) {
+      setError(new Error("id is required"));
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
       const option = await sdk.admin.shippingOption.retrieve(id, {
         fields: "*.*,pickup_availabilities.*"
       });
       if (option.shipping_option.service_zone.fulfillment_set.type !== "pickup") {
         throw new Error("shipping option is not pickup");
       }
-      return option;
+      setData(option);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch pickup availability")
+      );
+    } finally {
+      setIsLoading(false);
     }
-  });
+  };
+  react.useEffect(() => {
+    fetchPickupAvailable();
+  }, [id]);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchPickupAvailable
+  };
 };
 const stringToMinutes = (time, defaultValue) => {
   if (!time) return defaultValue;
@@ -1611,7 +1991,16 @@ function ShippingOptionDetails() {
     /* @__PURE__ */ jsxRuntime.jsx(TimeTable, { schedule })
   ] });
 }
-const widgetModule = { widgets: [] };
+const widgetModule = { widgets: [
+  {
+    Component: CustomerPickupHistoryWidget,
+    zone: ["customer.details.after"]
+  },
+  {
+    Component: OrderPickupBookingWidget,
+    zone: ["order.details.after"]
+  }
+] };
 const routeModule = {
   routes: [
     {
@@ -1638,11 +2027,13 @@ const formModule = { customFields: {} };
 const displayModule = {
   displays: {}
 };
+const i18nModule = { resources: {} };
 const plugin = {
   widgetModule,
   routeModule,
   menuItemModule,
   formModule,
-  displayModule
+  displayModule,
+  i18nModule
 };
 module.exports = plugin;