@lodashventure/medusa-booking-for-pickup 1.4.14 → 1.4.16

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

@@ -0,0 +1,892 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { Calendar, Package, ShoppingBag, Clock, MapPin, RefreshCw, ArrowLeft, Trash2 } from "lucide-react";
+import { defineWidgetConfig as defineWidgetConfig$1, defineRouteConfig, useSdk } from "@medusajs/admin-sdk";
+import { Container as Container$1, Heading as Heading$1, Text as Text$1, Badge as Badge$1, Button as Button$1, toast, createDataTableColumnHelper, useDataTable, DataTable, Select, clx, Switch, IconButton } from "@medusajs/ui";
+import { StackPerspective, Plus } from "@medusajs/icons";
+import { useNavigate, useParams, Navigate } from "react-router-dom";
+import Medusa from "@medusajs/js-sdk";
+import "@medusajs/admin-shared";
+const CustomerPickupHistoryWidget = ({ data }) => {
+  const [pickupHistory, setPickupHistory] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const customer = data;
+  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__ */ jsx(Badge, { color: statusColors[status] || "grey", size: "small", children: statusLabels[status] || status });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "ประวัติการจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: "กำลังโหลด..." }) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "ประวัติการจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-red-500", children: error }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "ประวัติการจองรับสินค้า" }),
+        pickupHistory.length > 0 && /* @__PURE__ */ jsx(Badge, { size: "small", children: pickupHistory.length })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "transparent", onClick: fetchPickupHistory, children: "รีเฟรช" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: pickupHistory.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+      /* @__PURE__ */ jsx(Package, { className: "text-ui-fg-muted mb-4", size: 48 }),
+      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: "ยังไม่มีประวัติการจองรับสินค้า" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: pickupHistory.map((pickup) => {
+      var _a;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rounded-lg border p-4 hover:bg-ui-bg-subtle transition-colors",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(ShoppingBag, { className: "text-ui-fg-subtle", size: 20 }),
+                /* @__PURE__ */ jsx("div", { children: pickup.order ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(Text, { weight: "plus", size: "small", children: [
+                    "คำสั่งซื้อ #",
+                    pickup.order.display_id
+                  ] }),
+                  /* @__PURE__ */ jsxs(Text, { size: "xsmall", className: "text-ui-fg-subtle", children: [
+                    ((_a = pickup.order.items) == null ? void 0 : _a.length) || 0,
+                    " รายการ"
+                  ] })
+                ] }) : /* @__PURE__ */ jsxs(Text, { weight: "plus", size: "small", children: [
+                  "คำสั่งซื้อ ",
+                  pickup.order_id
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1", children: [
+                pickup.order && getStatusBadge(pickup.order.status),
+                pickup.order && /* @__PURE__ */ jsx(Text, { weight: "plus", size: "small", children: formatCurrency(
+                  pickup.order.total,
+                  pickup.order.currency_code
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-ui-fg-subtle", children: [
+                /* @__PURE__ */ jsx(Calendar, { size: 16 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "วันที่รับ: ",
+                  formatDate(pickup.pickup_datetime)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-ui-fg-subtle", children: [
+                /* @__PURE__ */ jsx(Clock, { size: 16 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "จองเมื่อ: ",
+                  formatDate(pickup.created_at)
+                ] })
+              ] })
+            ] }),
+            pickup.order && pickup.order.shipping_methods && /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t", children: /* @__PURE__ */ 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] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const order = data;
+  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__ */ jsxs(Container$1, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading$1, { level: "h2", children: "การจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Text$1, { className: "text-ui-fg-subtle", children: "กำลังโหลด..." }) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(Container$1, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading$1, { level: "h2", children: "การจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Text$1, { className: "text-red-500", children: error }) })
+    ] });
+  }
+  if (!pickupBooking) {
+    return /* @__PURE__ */ jsxs(Container$1, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading$1, { level: "h2", children: "การจองรับสินค้า" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+        /* @__PURE__ */ jsx(MapPin, { className: "text-ui-fg-muted mb-4", size: 48 }),
+        /* @__PURE__ */ jsx(Text$1, { className: "text-ui-fg-subtle", children: "คำสั่งซื้อนี้ไม่ได้จองรับสินค้าที่สาขา" }),
+        /* @__PURE__ */ jsx(Text$1, { size: "xsmall", className: "text-ui-fg-muted mt-2", children: "คำสั่งซื้อนี้อาจเป็นการจัดส่งแบบปกติ" })
+      ] }) })
+    ] });
+  }
+  const status = getPickupStatus();
+  return /* @__PURE__ */ jsxs(Container$1, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading$1, { level: "h2", children: "การจองรับสินค้าที่สาขา" }),
+        /* @__PURE__ */ jsx(Badge$1, { color: status.color, size: "small", children: status.label })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          size: "small",
+          variant: "transparent",
+          onClick: () => {
+            fetchPickupBooking();
+            toast.success("รีเฟรชข้อมูลแล้ว");
+          },
+          children: /* @__PURE__ */ jsx(RefreshCw, { size: 16 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsx(Calendar, { size: 16 }),
+            /* @__PURE__ */ jsx(Text$1, { size: "xsmall", weight: "plus", children: "วันที่รับสินค้า" })
+          ] }),
+          /* @__PURE__ */ jsx(Text$1, { weight: "plus", children: formatDate(pickupBooking.pickup_datetime) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsx(Clock, { size: 16 }),
+            /* @__PURE__ */ jsx(Text$1, { size: "xsmall", weight: "plus", children: "เวลารับสินค้า" })
+          ] }),
+          /* @__PURE__ */ jsx(Text$1, { weight: "plus", children: formatTime(pickupBooking.pickup_datetime) })
+        ] })
+      ] }),
+      pickupBooking.shipping_option && /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-4 bg-ui-bg-subtle", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 mb-2", children: [
+        /* @__PURE__ */ jsx(MapPin, { className: "text-ui-fg-muted mt-1", size: 16 }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(Text$1, { 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text$1, { 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__ */ jsxs(Text$1, { 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__ */ 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__ */ jsx("div", { className: "pt-4 border-t", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Text$1, { size: "xsmall", className: "text-ui-fg-subtle", children: "จองเมื่อ" }),
+          /* @__PURE__ */ jsx(Text$1, { size: "small", children: formatDateTime(pickupBooking.created_at) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Text$1, { size: "xsmall", className: "text-ui-fg-subtle", children: "อัปเดตล่าสุด" }),
+          /* @__PURE__ */ jsx(Text$1, { size: "small", children: formatDateTime(pickupBooking.updated_at) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "pt-4 border-t", children: /* @__PURE__ */ jsxs(Text$1, { size: "xsmall", className: "text-ui-fg-muted", children: [
+        "Booking ID: ",
+        pickupBooking.id
+      ] }) })
+    ] }) })
+  ] });
+};
+defineWidgetConfig$1({
+  zone: "order.details.after"
+});
+const sdk = new Medusa({
+  baseUrl: "/",
+  debug: false,
+  auth: {
+    type: "session"
+  }
+});
+const usePickupShippingOptions = () => {
+  const [data, setData] = useState(
+    null
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = 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 = (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";
+        }
+      );
+      setData({
+        shipping_options: filteredOptions,
+        count: filteredOptions.length,
+        limit: options.limit,
+        offset: options.offset
+      });
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch pickup shipping options")
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetchOptions();
+  }, []);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchOptions
+  };
+};
+const columnHelper = createDataTableColumnHelper();
+const columns = [
+  columnHelper.accessor("shipping_profile.name", {
+    header: "Shipping Profile"
+  }),
+  columnHelper.accessor("service_zone.name", {
+    header: "Service Zone"
+  }),
+  columnHelper.accessor("name", {
+    header: "Pickup name"
+  }),
+  columnHelper.accessor("service_zone.fulfillment_set.name", {
+    header: "Fulfillment name"
+  })
+];
+const ShippingOptionList = () => {
+  const navigate = useNavigate();
+  const [pagination, setPagination] = useState({
+    pageSize: 1e3,
+    pageIndex: 0
+  });
+  const { data, isLoading } = usePickupShippingOptions();
+  const table = useDataTable({
+    columns,
+    data: (data == null ? void 0 : data.shipping_options) || [],
+    getRowId: (tier) => tier.id,
+    rowCount: (data == null ? void 0 : data.count) || 0,
+    isLoading,
+    pagination: {
+      state: pagination,
+      onPaginationChange: setPagination
+    },
+    onRowClick: (_, row) => {
+      navigate(`/pickup-shipping/${row.id}`);
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Container$1, { className: "flex flex-col p-0 overflow-hidden", children: /* @__PURE__ */ jsxs(DataTable, { instance: table, children: [
+    /* @__PURE__ */ jsx(DataTable.Toolbar, { className: "flex flex-col items-start justify-between gap-2 md:flex-row md:items-center", children: /* @__PURE__ */ jsx(Heading$1, { children: "Pickup Shipping Options" }) }),
+    /* @__PURE__ */ jsx(DataTable.Table, {})
+  ] }) }) });
+};
+const PickupShipping = () => {
+  return /* @__PURE__ */ jsx(ShippingOptionList, {});
+};
+const config = defineRouteConfig({
+  label: "Shipping Pickup",
+  icon: StackPerspective
+});
+const usePickupAvailable = (id) => {
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = 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");
+      }
+      setData(option);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch pickup availability")
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetchPickupAvailable();
+  }, [id]);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchPickupAvailable
+  };
+};
+const stringToMinutes = (time, defaultValue) => {
+  if (!time) return defaultValue;
+  const [hours, minutes] = time.split(":");
+  return parseInt(hours) * 60 + parseInt(minutes);
+};
+const minutesToString = (minutes) => {
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return `${hours.toString().padStart(2, "0")}:${remainingMinutes.toString().padStart(2, "0")}`;
+};
+const dateToString = (date) => {
+  if (typeof date === "string") {
+    date = new Date(date);
+  }
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+};
+const TimeSelect = ({
+  className,
+  intervalMinutes,
+  defaultValue,
+  onChange,
+  minTime,
+  maxTime
+}) => {
+  const minTimeMinutes = stringToMinutes(minTime, 0);
+  const maxTimeMinutes = stringToMinutes(maxTime, 24 * 60);
+  const times = useMemo(() => {
+    const times2 = [];
+    for (let i = minTimeMinutes; i <= maxTimeMinutes; i += intervalMinutes) {
+      times2.push(minutesToString(i));
+    }
+    return times2;
+  }, [minTimeMinutes, maxTimeMinutes, intervalMinutes]);
+  return /* @__PURE__ */ jsxs(Select, { onValueChange: onChange, defaultValue, children: [
+    /* @__PURE__ */ jsx(Select.Trigger, { className: clx("w-24", className), children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a time" }) }),
+    /* @__PURE__ */ jsx(Select.Content, { children: times.map((time) => /* @__PURE__ */ jsx(Select.Item, { value: time, children: time }, time)) })
+  ] });
+};
+function TimeTable({
+  schedule,
+  intervalMinutes = 30
+}) {
+  const days = [
+    "monday",
+    "tuesday",
+    "wednesday",
+    "thursday",
+    "friday",
+    "saturday",
+    "sunday"
+  ];
+  const timeSlots = useMemo(() => {
+    const minTimeMinutes = Math.min(
+      ...Object.values(schedule).filter((d) => d.enabled).map((d) => d.timeSlots.map((s) => stringToMinutes(s.start, 0))).flat()
+    );
+    const maxTimeMinutes = Math.max(
+      ...Object.values(schedule).filter((d) => d.enabled).map((d) => d.timeSlots.map((s) => stringToMinutes(s.end, 24 * 60))).flat()
+    );
+    const slots = [];
+    for (let i = Math.max(minTimeMinutes - 2 * intervalMinutes, 0); i <= Math.min(maxTimeMinutes + 2 * intervalMinutes, 24 * 60); i += intervalMinutes) {
+      slots.push(minutesToString(i));
+    }
+    return slots;
+  }, [schedule, intervalMinutes]);
+  const isWorkingHour = (day, timeSlot) => {
+    var _a;
+    if (!((_a = schedule[day]) == null ? void 0 : _a.enabled)) return false;
+    const [hours, minutes] = timeSlot.split(":");
+    const timeInMinutes = Number(hours) * 60 + Number(minutes);
+    return schedule[day].timeSlots.some((slot) => {
+      const startMatch = slot.start.match(/(\d+):(\d+)/);
+      if (!startMatch) return false;
+      let startHour = Number(startMatch[1]);
+      const startMinute = Number(startMatch[2]);
+      const startInMinutes = startHour * 60 + startMinute;
+      const endMatch = slot.end.match(/(\d+):(\d+)/);
+      if (!endMatch) return false;
+      let endHour = Number(endMatch[1]);
+      const endMinute = Number(endMatch[2]);
+      const endInMinutes = endHour * 60 + endMinute;
+      return timeInMinutes >= startInMinutes && timeInMinutes < endInMinutes;
+    });
+  };
+  if (timeSlots.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Container$1, { className: "p-4 overflow-x-auto", children: [
+    /* @__PURE__ */ jsx(Heading$1, { className: "text-xl font-bold mb-4", children: "Pickup Hours Schedule" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-full flex", children: [
+      /* @__PURE__ */ jsx("div", { className: "ml-2 mt-7 flex flex-col items-end", children: timeSlots.map((timeSlot) => /* @__PURE__ */ jsx(Text$1, { className: "h-8", children: timeSlot }, timeSlot)) }),
+      /* @__PURE__ */ jsxs("table", { className: "ml-2 w-full border-collapse", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: days.map((day) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: "py-2 px-4 border-b border-gray-800 text-center capitalize",
+            children: day.slice(0, 3)
+          },
+          day
+        )) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: timeSlots.map((timeSlot) => /* @__PURE__ */ jsx("tr", { className: "hover:bg-ui-bg-base-hover", children: days.map((day) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: clx(
+              `py-1 px-4 border-b border-gray-800 text-center h-8`,
+              isWorkingHour(day, timeSlot) && "bg-ui-bg-interactive"
+            ),
+            children: ""
+          },
+          `${day}-${timeSlot}`
+        )) }, timeSlot)) })
+      ] })
+    ] })
+  ] });
+}
+const INTERVAL_MINUTES = 30;
+const DEFAULT_SCHEDULE = {
+  monday: {
+    enabled: false,
+    timeSlots: []
+  },
+  tuesday: {
+    enabled: false,
+    timeSlots: []
+  },
+  wednesday: {
+    enabled: false,
+    timeSlots: []
+  },
+  thursday: {
+    enabled: false,
+    timeSlots: []
+  },
+  friday: {
+    enabled: false,
+    timeSlots: []
+  },
+  saturday: {
+    enabled: false,
+    timeSlots: []
+  },
+  sunday: { enabled: false, timeSlots: [] }
+};
+function ShippingOptionDetails() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const sdk2 = useSdk();
+  const [schedule, setSchedule] = useState(
+    structuredClone(DEFAULT_SCHEDULE)
+  );
+  const { data, refetch, error } = usePickupAvailable(id);
+  useEffect(() => {
+    if (!data) return;
+    const _schedule = structuredClone(DEFAULT_SCHEDULE);
+    data.shipping_option.pickup_availabilities.forEach((availability) => {
+      const timeSlots = _schedule[availability.day_of_week].timeSlots;
+      timeSlots.push({
+        start: dateToString(availability.timeStart),
+        end: dateToString(availability.timeEnd)
+      });
+      _schedule[availability.day_of_week] = {
+        enabled: availability.enable,
+        timeSlots
+      };
+    });
+    setSchedule({ ..._schedule });
+  }, [data]);
+  const toggleDay = useCallback((day) => {
+    setSchedule((prev) => ({
+      ...prev,
+      [day]: {
+        ...prev[day],
+        enabled: !prev[day].enabled
+      }
+    }));
+  }, []);
+  const handleUpdateSchedules = async () => {
+    const invalidSchedules = Object.entries(schedule).filter(
+      ([_, schedule2]) => {
+        if (!schedule2.enabled) return false;
+        return schedule2.timeSlots.filter((slot) => {
+          if (!slot.start || !slot.end) {
+            return true;
+          }
+        }).length > 0;
+      }
+    );
+    if (invalidSchedules.length > 0) {
+      toast.error("Invalid time slot", {
+        description: "Please fill in all time slots",
+        duration: 2500,
+        dismissable: true
+      });
+      return;
+    }
+    try {
+      await sdk2.client.fetch(`/admin/pickup-date/${id}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          schedules: Object.entries(schedule).filter(([_, daySchedule]) => daySchedule.enabled).map(([day, { enabled, timeSlots }]) => ({
+            day_of_week: day,
+            enable: enabled,
+            timeSlots: timeSlots.map((slot) => ({
+              start: slot.start,
+              end: slot.end
+            }))
+          }))
+        })
+      });
+      refetch();
+      toast.success("Availability updated", {
+        duration: 2500,
+        dismissable: true
+      });
+    } catch (error2) {
+      if (error2 instanceof Error) {
+        toast.error(error2.message, {
+          duration: 2500,
+          dismissable: true
+        });
+        return;
+      }
+      toast.error("Error while creating availability", {
+        duration: 2500,
+        dismissable: true
+      });
+    }
+  };
+  const updateTimeSlot = useCallback(
+    (day, index, field, value) => {
+      setSchedule((prev) => {
+        const newTimeSlots = [...prev[day].timeSlots];
+        newTimeSlots[index] = {
+          ...newTimeSlots[index],
+          [field]: value
+        };
+        return {
+          ...prev,
+          [day]: {
+            ...prev[day],
+            timeSlots: newTimeSlots
+          }
+        };
+      });
+    },
+    []
+  );
+  const addTimeSlot = useCallback((day) => {
+    setSchedule((prev) => {
+      const newTimeSlots = [...prev[day].timeSlots];
+      newTimeSlots.push({ start: "", end: "" });
+      return {
+        ...prev,
+        [day]: {
+          ...prev[day],
+          timeSlots: newTimeSlots
+        }
+      };
+    });
+  }, []);
+  const removeTimeSlot = useCallback((day, index) => {
+    setSchedule((prev) => {
+      const newTimeSlots = [...prev[day].timeSlots];
+      newTimeSlots.splice(index, 1);
+      return {
+        ...prev,
+        [day]: {
+          ...prev[day],
+          timeSlots: newTimeSlots
+        }
+      };
+    });
+  }, []);
+  if (error) {
+    return /* @__PURE__ */ jsx(Navigate, { to: "/pickup-shipping" });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Container$1, { className: "p-4 ", children: [
+      /* @__PURE__ */ jsxs(
+        Button$1,
+        {
+          onClick: () => navigate("/pickup-shipping"),
+          variant: "transparent",
+          className: "p-0 mb-4",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { size: 20 }),
+            /* @__PURE__ */ jsx(Text$1, { className: "ml-2", children: "Back" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mb-4", children: [
+        /* @__PURE__ */ jsx(Heading$1, { className: "text-xl font-bold", children: "Pickup Hours" }),
+        /* @__PURE__ */ jsx(Button$1, { onClick: handleUpdateSchedules, children: "Save" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(schedule).map(([day, { enabled, timeSlots }]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mb-2 h-8", children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: enabled,
+              onCheckedChange: () => toggleDay(day)
+            },
+            `switch-${day}`
+          ),
+          /* @__PURE__ */ jsx(Text$1, { className: "capitalize", children: day }),
+          enabled && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "transparent",
+              onClick: () => addTimeSlot(day),
+              children: /* @__PURE__ */ jsx(Plus, { className: "" })
+            }
+          )
+        ] }),
+        enabled && /* @__PURE__ */ jsx("div", { className: "ml-12 space-y-2", children: timeSlots.map((slot, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx(
+                TimeSelect,
+                {
+                  className: "w-40",
+                  intervalMinutes: INTERVAL_MINUTES,
+                  defaultValue: slot.start,
+                  onChange: (value) => updateTimeSlot(day, index, "start", value),
+                  maxTime: slot.end
+                }
+              ),
+              /* @__PURE__ */ jsx(Text$1, { className: "text-gray-400", children: "-" }),
+              /* @__PURE__ */ jsx(
+                TimeSelect,
+                {
+                  className: "w-40",
+                  intervalMinutes: INTERVAL_MINUTES,
+                  defaultValue: slot.end,
+                  onChange: (value) => updateTimeSlot(day, index, "end", value),
+                  minTime: slot.start
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "transparent",
+                  onClick: () => removeTimeSlot(day, index),
+                  className: " hover:text-red-400",
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
+                }
+              )
+            ]
+          },
+          `${day}-slot-${index}`
+        )) })
+      ] }, day)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-2" }),
+    /* @__PURE__ */ jsx(TimeTable, { schedule })
+  ] });
+}
+const widgetModule = { widgets: [
+  {
+    Component: CustomerPickupHistoryWidget,
+    zone: ["customer.details.after"]
+  },
+  {
+    Component: OrderPickupBookingWidget,
+    zone: ["order.details.after"]
+  }
+] };
+const routeModule = {
+  routes: [
+    {
+      Component: PickupShipping,
+      path: "/pickup-shipping"
+    },
+    {
+      Component: ShippingOptionDetails,
+      path: "/pickup-shipping/:id"
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/pickup-shipping",
+      nested: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+export {
+  plugin as default
+};