@mercurjs/vendor 2.0.0-canary.0

package/dist/[id]-2VBOAZM4.js

@@ -0,0 +1,1215 @@
+import {
+  DEFAULT_FIELDS
+} from "./chunk-DARJTN4I.js";
+import "./chunk-BCU3FKP2.js";
+import {
+  formatProvider
+} from "./chunk-VW56KWO2.js";
+import {
+  getCanceledOrderStatus,
+  getOrderFulfillmentStatus,
+  getOrderPaymentStatus
+} from "./chunk-LQSLDDPT.js";
+import {
+  getLocaleAmount,
+  getStylizedAmount,
+  isAmountLessThenRoundingError
+} from "./chunk-PXYDR7WQ.js";
+import "./chunk-IQPN4PZJ.js";
+import {
+  getFormattedAddress,
+  isSameAddress
+} from "./chunk-W6Y3PPU5.js";
+import {
+  TwoColumnPage
+} from "./chunk-RM5RSDYP.js";
+import {
+  Thumbnail
+} from "./chunk-WIYFXWRI.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useDate
+} from "./chunk-CFETU5BI.js";
+import "./chunk-JRTZWK77.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  Skeleton,
+  TwoColumnPageSkeleton
+} from "./chunk-INNFZYX2.js";
+import {
+  useStockLocation
+} from "./chunk-SI4ALL7W.js";
+import {
+  ordersQueryKeys,
+  useCancelOrder,
+  useCancelOrderFulfillment,
+  useCompleteOrder,
+  useMarkOrderFulfillmentAsDelivered,
+  useOrder
+} from "./chunk-ZFFA36DB.js";
+import "./chunk-WPFTRRWV.js";
+import "./chunk-A5DJIOHN.js";
+import {
+  queryClient
+} from "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import {
+  fetchQuery
+} from "./chunk-Y224F4UU.js";
+import "./chunk-PKBMQBKP.js";
+
+// src/pages/orders/[id]/loader.tsx
+var orderDetailQuery = (id) => ({
+  queryKey: ordersQueryKeys.detail(id),
+  queryFn: async () => fetchQuery(`/vendor/orders/${id}`, {
+    method: "GET",
+    query: { fields: DEFAULT_FIELDS }
+  })
+});
+var loader = async ({ params }) => {
+  const id = params.id;
+  const query = orderDetailQuery(id);
+  return queryClient.ensureQueryData(query);
+};
+
+// src/pages/orders/[id]/order-detail-page.tsx
+import { Children } from "react";
+import { useLoaderData, useParams } from "react-router-dom";
+
+// src/pages/orders/[id]/_components/order-customer-section/order-customer-section.tsx
+import { Container, Heading } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
+// src/components/common/customer-info/customer-info.tsx
+import { Avatar, Copy, Text } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ID = ({ data }) => {
+  const { t } = useTranslation();
+  const id = data.customer_id;
+  const name = getOrderCustomer(data);
+  const email = data.email;
+  const fallback = (name || email || "").charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+    /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: t("fields.id") }),
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        to: `/customers/${id}`,
+        className: "focus:shadow-borders-focus rounded-[4px] outline-none transition-shadow",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "2xsmall", fallback }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "small",
+              leading: "compact",
+              className: "text-ui-fg-subtle hover:text-ui-fg-base transition-fg truncate",
+              children: name || email
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+var Company = ({ data }) => {
+  const { t } = useTranslation();
+  const company = data.shipping_address?.company || data.billing_address?.company;
+  if (!company) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+    /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: t("fields.company") }),
+    /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "truncate", children: company })
+  ] });
+};
+var Contact = ({ data }) => {
+  const { t } = useTranslation();
+  const phone = data.shipping_address?.phone || data.billing_address?.phone;
+  const email = data.email || "";
+  return /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4", children: [
+    /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: t("orders.customer.contactLabel") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_20px] items-start gap-x-2", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            leading: "compact",
+            className: "text-pretty break-all",
+            children: email
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Copy, { content: email, className: "text-ui-fg-muted" }) })
+      ] }),
+      phone && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_20px] items-start gap-x-2", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            leading: "compact",
+            className: "text-pretty break-all",
+            children: phone
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Copy, { content: phone, className: "text-ui-fg-muted" }) })
+      ] })
+    ] })
+  ] });
+};
+var AddressPrint = ({
+  address,
+  type
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4", children: [
+    /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: type === "shipping" ? t("addresses.shippingAddress.label") : t("addresses.billingAddress.label") }),
+    address ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_20px] items-start gap-x-2", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getFormattedAddress({ address }).map((line, i) => {
+        return /* @__PURE__ */ jsxs("span", { className: "break-words", children: [
+          line,
+          /* @__PURE__ */ jsx("br", {})
+        ] }, i);
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        Copy,
+        {
+          content: getFormattedAddress({ address }).join("\n"),
+          className: "text-ui-fg-muted"
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "-" })
+  ] });
+};
+var Addresses = ({ data }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "divide-y", children: [
+    /* @__PURE__ */ jsx(AddressPrint, { address: data.shipping_address, type: "shipping" }),
+    !isSameAddress(data.shipping_address, data.billing_address) ? /* @__PURE__ */ jsx(AddressPrint, { address: data.billing_address, type: "billing" }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "small",
+          leading: "compact",
+          weight: "plus",
+          className: "text-ui-fg-subtle",
+          children: t("addresses.billingAddress.label")
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-muted", children: t("addresses.billingAddress.sameAsShipping") })
+    ] })
+  ] });
+};
+var CustomerInfo = Object.assign(
+  {},
+  {
+    ID,
+    Company,
+    Contact,
+    Addresses
+  }
+);
+var getOrderCustomer = (obj) => {
+  const { first_name: sFirstName, last_name: sLastName } = obj.shipping_address || {};
+  const { first_name: bFirstName, last_name: bLastName } = obj.billing_address || {};
+  const { first_name: cFirstName, last_name: cLastName } = obj.customer || {};
+  const customerName = [cFirstName, cLastName].filter(Boolean).join(" ");
+  const shippingName = [sFirstName, sLastName].filter(Boolean).join(" ");
+  const billingName = [bFirstName, bLastName].filter(Boolean).join(" ");
+  const name = customerName || shippingName || billingName;
+  return name;
+};
+
+// src/pages/orders/[id]/_components/order-customer-section/order-customer-section.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OrderCustomerSection = ({ order }) => {
+  return /* @__PURE__ */ jsxs2(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsx2(Header, {}),
+    /* @__PURE__ */ jsx2(CustomerInfo.ID, { data: order }),
+    /* @__PURE__ */ jsx2(CustomerInfo.Contact, { data: order }),
+    /* @__PURE__ */ jsx2(CustomerInfo.Company, { data: order }),
+    /* @__PURE__ */ jsx2(CustomerInfo.Addresses, { data: order })
+  ] });
+};
+var Header = () => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx2(Heading, { level: "h2", children: t("fields.customer") }) });
+};
+
+// src/pages/orders/[id]/_components/order-fulfillment-section/order-fulfillment-section.tsx
+import { XCircle } from "@medusajs/icons";
+import {
+  Button,
+  Container as Container2,
+  Copy as Copy2,
+  Heading as Heading2,
+  StatusBadge,
+  Text as Text2,
+  Tooltip,
+  toast,
+  usePrompt
+} from "@medusajs/ui";
+import { format } from "date-fns";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Link as Link2, useNavigate } from "react-router-dom";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var OrderFulfillmentSection = ({
+  order
+}) => {
+  const fulfillments = order.fulfillments || [];
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-3", children: [
+    /* @__PURE__ */ jsx3(UnfulfilledItemBreakdown, { order }),
+    fulfillments.map((f, index) => /* @__PURE__ */ jsx3(Fulfillment, { index, fulfillment: f, order }, f.id))
+  ] });
+};
+var UnfulfilledItem = ({
+  item,
+  currencyCode
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-x-4", children: [
+          /* @__PURE__ */ jsx3(Thumbnail, { src: item.thumbnail }),
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3(
+              Text2,
+              {
+                size: "small",
+                leading: "compact",
+                weight: "plus",
+                className: "text-ui-fg-base",
+                children: item.title
+              }
+            ),
+            item.variant_sku && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-1", children: [
+              /* @__PURE__ */ jsx3(Text2, { size: "small", children: item.variant_sku }),
+              /* @__PURE__ */ jsx3(Copy2, { content: item.variant_sku, className: "text-ui-fg-muted" })
+            ] }),
+            /* @__PURE__ */ jsx3(Text2, { size: "small", children: item.variant?.options?.map((o) => o.value).join(" \xB7 ") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-3 items-center gap-x-4", children: [
+          /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx3(Text2, { size: "small", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
+          /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs3(Text2, { children: [
+            /* @__PURE__ */ jsx3("span", { className: "tabular-nums", children: item.quantity - item.detail.fulfilled_quantity }),
+            "x"
+          ] }) }),
+          /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx3(Text2, { size: "small", children: getLocaleAmount(item.subtotal || 0, currencyCode) }) })
+        ] })
+      ]
+    },
+    item.id
+  );
+};
+var UnfulfilledItemBreakdown = ({ order }) => {
+  const unfulfilledItemsWithShipping = order.items.filter(
+    (i) => i.requires_shipping && i.detail && i.quantity && i.detail.fulfilled_quantity < i.quantity
+  );
+  const unfulfilledItemsWithoutShipping = order.items.filter(
+    (i) => !i.requires_shipping && i.detail && i.quantity && i.detail.fulfilled_quantity < i.quantity
+  );
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    !!unfulfilledItemsWithShipping.length && /* @__PURE__ */ jsx3(
+      UnfulfilledItemDisplay,
+      {
+        order,
+        unfulfilledItems: unfulfilledItemsWithShipping,
+        requiresShipping: true
+      }
+    ),
+    !!unfulfilledItemsWithoutShipping.length && /* @__PURE__ */ jsx3(
+      UnfulfilledItemDisplay,
+      {
+        order,
+        unfulfilledItems: unfulfilledItemsWithoutShipping,
+        requiresShipping: false
+      }
+    )
+  ] });
+};
+var UnfulfilledItemDisplay = ({
+  order,
+  unfulfilledItems,
+  requiresShipping = false
+}) => {
+  const { t } = useTranslation3();
+  if (order.status === "canceled") {
+    return;
+  }
+  return /* @__PURE__ */ jsxs3(Container2, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Heading2, { level: "h2", children: t("orders.fulfillment.unfulfilledItems") }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-4", children: [
+        requiresShipping && /* @__PURE__ */ jsx3(StatusBadge, { color: "red", className: "text-nowrap", children: t("orders.fulfillment.requiresShipping") }),
+        /* @__PURE__ */ jsx3(StatusBadge, { color: "red", className: "text-nowrap", children: t("orders.fulfillment.awaitingFulfillmentBadge") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { children: unfulfilledItems.map((item) => /* @__PURE__ */ jsx3(
+      UnfulfilledItem,
+      {
+        item,
+        currencyCode: order.currency_code
+      },
+      item.id
+    )) }),
+    /* @__PURE__ */ jsx3("div", { className: "px-6 py-4 flex justify-end", children: /* @__PURE__ */ jsx3(
+      Link2,
+      {
+        to: `/orders/${order.id}/fulfillment?requires_shipping=${requiresShipping}`,
+        children: /* @__PURE__ */ jsx3(Button, { children: "Fulfill items" })
+      }
+    ) })
+  ] });
+};
+var Fulfillment = ({
+  fulfillment,
+  order,
+  index
+}) => {
+  const { t } = useTranslation3();
+  const prompt = usePrompt();
+  const navigate = useNavigate();
+  const showLocation = !!fulfillment.location_id;
+  const isPickUpFulfillment = fulfillment.shipping_option?.service_zone.fulfillment_set.type === "pickup" /* Pickup */;
+  const { stock_location, isError, error } = useStockLocation(
+    fulfillment.location_id,
+    void 0,
+    {
+      enabled: showLocation
+    }
+  );
+  let statusText = fulfillment.requires_shipping ? isPickUpFulfillment ? "Awaiting pickup" : "Awaiting shipping" : "Awaiting delivery";
+  let statusColor = "blue";
+  let statusTimestamp = fulfillment.created_at;
+  if (fulfillment.canceled_at) {
+    statusText = "Canceled";
+    statusColor = "red";
+    statusTimestamp = fulfillment.canceled_at;
+  } else if (fulfillment.delivered_at) {
+    statusText = "Delivered";
+    statusColor = "green";
+    statusTimestamp = fulfillment.delivered_at;
+  } else if (fulfillment.shipped_at) {
+    statusText = "Shipped";
+    statusColor = "green";
+    statusTimestamp = fulfillment.shipped_at;
+  }
+  const { mutateAsync } = useCancelOrderFulfillment(order.id, fulfillment.id);
+  const { mutateAsync: markAsDelivered } = useMarkOrderFulfillmentAsDelivered(
+    order.id,
+    fulfillment.id
+  );
+  const showShippingButton = !fulfillment.canceled_at && !fulfillment.shipped_at && !fulfillment.delivered_at && fulfillment.requires_shipping && !isPickUpFulfillment;
+  const showDeliveryButton = !fulfillment.canceled_at && !fulfillment.delivered_at;
+  const handleMarkAsDelivered = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("orders.fulfillment.markAsDeliveredWarning"),
+      confirmText: t("actions.continue"),
+      cancelText: t("actions.cancel"),
+      variant: "confirmation"
+    });
+    if (res) {
+      await markAsDelivered(void 0, {
+        onSuccess: () => {
+          toast.success(
+            t(
+              isPickUpFulfillment ? "orders.fulfillment.toast.fulfillmentPickedUp" : "orders.fulfillment.toast.fulfillmentDelivered"
+            )
+          );
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      });
+    }
+  };
+  const handleCancel = async () => {
+    if (fulfillment.shipped_at) {
+      toast.warning(t("orders.fulfillment.toast.fulfillmentShipped"));
+      return;
+    }
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("orders.fulfillment.cancelWarning"),
+      confirmText: t("actions.continue"),
+      cancelText: t("actions.cancel")
+    });
+    if (res) {
+      await mutateAsync(void 0, {
+        onSuccess: () => {
+          toast.success(t("orders.fulfillment.toast.canceled"));
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      });
+    }
+  };
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs3(Container2, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Heading2, { level: "h2", children: t("orders.fulfillment.number", {
+        number: index + 1
+      }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-4", children: [
+        /* @__PURE__ */ jsx3(
+          Tooltip,
+          {
+            content: format(
+              new Date(statusTimestamp),
+              "dd MMM, yyyy, HH:mm:ss"
+            ),
+            children: /* @__PURE__ */ jsx3(StatusBadge, { color: statusColor, className: "text-nowrap", children: statusText })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          ActionMenu,
+          {
+            groups: [
+              {
+                actions: [
+                  {
+                    label: t("actions.cancel"),
+                    icon: /* @__PURE__ */ jsx3(XCircle, {}),
+                    onClick: handleCancel,
+                    disabled: !!fulfillment.canceled_at
+                  }
+                ]
+              }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("orders.fulfillment.itemsLabel") }),
+      /* @__PURE__ */ jsx3("ul", { children: (fulfillment.items || []).map((f_item) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(Text2, { size: "small", leading: "compact", children: [
+        f_item.quantity,
+        "x ",
+        f_item.title
+      ] }) }, f_item.line_item_id)) })
+    ] }),
+    showLocation && /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("orders.fulfillment.shippingFromLabel") }),
+      stock_location ? /* @__PURE__ */ jsx3(
+        Link2,
+        {
+          to: `/settings/locations/${stock_location.id}`,
+          className: "text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg",
+          children: /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: stock_location.name })
+        }
+      ) : /* @__PURE__ */ jsx3(Skeleton, { className: "w-16" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("fields.provider") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: formatProvider(fulfillment.provider_id) })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: t("orders.fulfillment.trackingLabel") }),
+      /* @__PURE__ */ jsx3("div", { children: fulfillment.labels && fulfillment.labels.length > 0 ? /* @__PURE__ */ jsx3("ul", { children: fulfillment.labels.map((tlink) => {
+        const hasUrl = !!tlink.tracking_url?.length && tlink.tracking_url !== "#";
+        if (hasUrl) {
+          return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+            "a",
+            {
+              href: tlink.tracking_url || "",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg",
+              children: /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: tlink.tracking_number })
+            }
+          ) }, tlink.tracking_number);
+        }
+        return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: tlink.tracking_number }) }, tlink.tracking_number);
+      }) }) : /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: "-" }) })
+    ] }),
+    (showShippingButton || showDeliveryButton) && /* @__PURE__ */ jsxs3("div", { className: "bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4", children: [
+      showDeliveryButton && /* @__PURE__ */ jsx3(Button, { onClick: handleMarkAsDelivered, variant: "secondary", children: t(
+        isPickUpFulfillment ? "orders.fulfillment.markAsPickedUp" : "orders.fulfillment.markAsDelivered"
+      ) }),
+      showShippingButton && /* @__PURE__ */ jsx3(
+        Button,
+        {
+          onClick: () => navigate(`./${fulfillment.id}/create-shipment`),
+          variant: "secondary",
+          children: t("orders.fulfillment.markAsShipped")
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/pages/orders/[id]/_components/order-general-section/order-general-section.tsx
+import { CheckCircle, XCircle as XCircle2 } from "@medusajs/icons";
+import {
+  Container as Container3,
+  Copy as Copy3,
+  Heading as Heading3,
+  StatusBadge as StatusBadge2,
+  Text as Text3,
+  toast as toast2,
+  usePrompt as usePrompt2
+} from "@medusajs/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var OrderGeneralSection = ({ order }) => {
+  const { t } = useTranslation4();
+  const prompt = usePrompt2();
+  const { getFullDate } = useDate();
+  const { mutateAsync: cancelOrder } = useCancelOrder(order.id);
+  const { mutateAsync: completeOrder } = useCompleteOrder(order.id);
+  const handleComplete = async () => {
+    await completeOrder(void 0, {
+      onSuccess: () => {
+        toast2.success("Order completed");
+      },
+      onError: (e) => {
+        toast2.error(e.message);
+      }
+    });
+  };
+  const handleCancel = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("orders.cancelWarning", {
+        id: `#${order.display_id}`
+      }),
+      confirmText: t("actions.continue"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await cancelOrder(void 0, {
+      onSuccess: () => {
+        toast2.success(t("orders.orderCanceled"));
+      },
+      onError: (e) => {
+        toast2.error(e.message);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs4(Container3, { className: "flex items-center justify-between px-6 py-4", children: [
+    /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-1", children: [
+        /* @__PURE__ */ jsxs4(Heading3, { children: [
+          "#",
+          order.display_id
+        ] }),
+        /* @__PURE__ */ jsx4(Copy3, { content: `#${order.display_id}`, className: "text-ui-fg-muted" })
+      ] }),
+      /* @__PURE__ */ jsx4(Text3, { size: "small", className: "text-ui-fg-subtle", children: t("orders.onDateFromSalesChannel", {
+        date: getFullDate({ date: order.created_at, includeTime: true }),
+        salesChannel: order.sales_channel?.name
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-4", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-1.5", children: [
+        /* @__PURE__ */ jsx4(OrderBadge, { order }),
+        /* @__PURE__ */ jsx4(PaymentBadge, { order }),
+        /* @__PURE__ */ jsx4(FulfillmentBadge, { order })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.complete"),
+                  onClick: handleComplete,
+                  disabled: order.status !== "pending",
+                  icon: /* @__PURE__ */ jsx4(CheckCircle, {})
+                },
+                {
+                  label: t("actions.cancel"),
+                  onClick: handleCancel,
+                  //@ts-ignore
+                  disabled: !!order.canceled_at,
+                  icon: /* @__PURE__ */ jsx4(XCircle2, {})
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var FulfillmentBadge = ({ order }) => {
+  const { t } = useTranslation4();
+  if (!order.fulfillment_status) {
+    return null;
+  }
+  const { label, color } = getOrderFulfillmentStatus(
+    t,
+    order.fulfillment_status
+  );
+  return /* @__PURE__ */ jsx4(StatusBadge2, { color, className: "text-nowrap", children: label });
+};
+var PaymentBadge = ({ order }) => {
+  const { t } = useTranslation4();
+  if (!order.payment_status) {
+    return null;
+  }
+  const { label, color } = getOrderPaymentStatus(t, order.payment_status);
+  return /* @__PURE__ */ jsx4(StatusBadge2, { color, className: "text-nowrap", children: label });
+};
+var OrderBadge = ({ order }) => {
+  const { t } = useTranslation4();
+  const orderStatus = getCanceledOrderStatus(t, order.status);
+  if (!orderStatus) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(StatusBadge2, { color: orderStatus.color, className: "text-nowrap", children: orderStatus.label });
+};
+
+// src/pages/orders/[id]/_components/order-payment-section/order-payment-section.tsx
+import { Container as Container4, Heading as Heading4, StatusBadge as StatusBadge3, Text as Text4 } from "@medusajs/ui";
+import { useTranslation as useTranslation5 } from "react-i18next";
+
+// src/lib/payment.ts
+var getTotalCaptured = (paymentCollections) => paymentCollections.reduce((acc, paymentCollection) => {
+  acc = acc + (paymentCollection.captured_amount - paymentCollection.refunded_amount);
+  return acc;
+}, 0);
+var getTotalPending = (paymentCollections) => paymentCollections.filter((pc) => pc.status !== "canceled").reduce((acc, paymentCollection) => {
+  acc += paymentCollection.amount - paymentCollection.captured_amount;
+  return acc;
+}, 0);
+
+// src/pages/orders/[id]/_components/order-payment-section/order-payment-section.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var OrderPaymentSection = ({ order }) => {
+  return /* @__PURE__ */ jsxs5(Container4, { className: "divide-y divide-dashed p-0", children: [
+    /* @__PURE__ */ jsx5(Header2, { order }),
+    /* @__PURE__ */ jsx5(Total, { order })
+  ] });
+};
+var Header2 = ({ order }) => {
+  const { t } = useTranslation5();
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4", children: [
+    /* @__PURE__ */ jsx5(Heading4, { level: "h2", children: t("orders.payment.title") }),
+    order.payment_status && /* @__PURE__ */ jsx5(
+      StatusBadge3,
+      {
+        color: getOrderPaymentStatus(t, order.payment_status).color,
+        className: "text-nowrap",
+        children: getOrderPaymentStatus(t, order.payment_status).label
+      }
+    )
+  ] });
+};
+var Total = ({ order }) => {
+  const { t } = useTranslation5();
+  if (!order.payment_collections?.length) {
+    return null;
+  }
+  const paymentCollections = order.payment_collections;
+  const totalCaptured = getTotalCaptured(paymentCollections);
+  const totalPending = getTotalPending(paymentCollections);
+  const totalRefunded = paymentCollections.reduce(
+    (acc, pc) => acc + (pc.refunded_amount || 0),
+    0
+  );
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text4, { size: "small", weight: "plus", leading: "compact", children: t("orders.payment.totalPaidByCustomer") }),
+      /* @__PURE__ */ jsx5(Text4, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(totalCaptured, order.currency_code) })
+    ] }),
+    totalRefunded > 0 && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text4, { size: "small", weight: "plus", leading: "compact", children: "Refunded" }),
+      /* @__PURE__ */ jsx5(Text4, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(totalRefunded, order.currency_code) })
+    ] }),
+    order.status !== "canceled" && totalPending > 0 && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text4, { size: "small", weight: "plus", leading: "compact", children: "Total pending" }),
+      /* @__PURE__ */ jsx5(Text4, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(totalPending, order.currency_code) })
+    ] })
+  ] });
+};
+
+// src/pages/orders/[id]/_components/order-summary-section/order-summary-section.tsx
+import { useMemo, useState } from "react";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { Link as Link3 } from "react-router-dom";
+import {
+  ArrowLongRight,
+  TriangleDownMini
+} from "@medusajs/icons";
+import {
+  Button as Button2,
+  clx,
+  Container as Container5,
+  Copy as Copy4,
+  Heading as Heading5,
+  Text as Text5
+} from "@medusajs/ui";
+
+// src/pages/orders/[id]/_components/order-summary-section/shipping-info-popover.tsx
+import { InformationCircleSolid } from "@medusajs/icons";
+import { Badge, Tooltip as Tooltip2 } from "@medusajs/ui";
+import { useTranslation as useTranslation6 } from "react-i18next";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function ShippingInfoPopover({ shippingMethod }) {
+  const { t } = useTranslation6();
+  const shippingDetail = shippingMethod?.detail;
+  if (!shippingDetail) {
+    return;
+  }
+  let rmaType = t("orders.return");
+  let rmaId = shippingDetail.return_id;
+  if (shippingDetail.claim_id) {
+    rmaType = t("orders.claim");
+    rmaId = shippingDetail.claim_id;
+  }
+  if (shippingDetail.exchange_id) {
+    rmaType = t("orders.exchange");
+    rmaId = shippingDetail.exchange_id;
+  }
+  if (!rmaId) {
+    return;
+  }
+  return /* @__PURE__ */ jsx6(
+    Tooltip2,
+    {
+      content: /* @__PURE__ */ jsxs6(Badge, { size: "2xsmall", rounded: "full", children: [
+        rmaType,
+        ": #",
+        rmaId.slice(-7)
+      ] }),
+      children: /* @__PURE__ */ jsx6(InformationCircleSolid, { className: "inline-block text-ui-fg-muted ml-1" })
+    }
+  );
+}
+var shipping_info_popover_default = ShippingInfoPopover;
+
+// src/pages/orders/[id]/_components/order-summary-section/order-summary-section.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var OrderSummarySection = ({
+  order
+}) => {
+  const { t } = useTranslation7();
+  const receivableReturns = useMemo(
+    () => order.returns?.filter((r) => !r.canceled_at),
+    [order]
+  );
+  const showReturns = !!receivableReturns?.length;
+  const unpaidPaymentCollection = order.payment_collections?.find(
+    (pc) => pc.status !== "captured" && pc.status !== "canceled"
+  );
+  const pendingDifference = order.summary?.pending_difference || 0;
+  const isAmountSignificant = !isAmountLessThenRoundingError(
+    pendingDifference,
+    order.currency_code
+  );
+  const showRefund = unpaidPaymentCollection && pendingDifference < 0 && isAmountSignificant;
+  return /* @__PURE__ */ jsxs7(Container5, { className: "divide-y divide-dashed p-0", children: [
+    /* @__PURE__ */ jsx7(Header3, {}),
+    /* @__PURE__ */ jsx7(ItemBreakdown, { order }),
+    /* @__PURE__ */ jsx7(CostBreakdown, { order }),
+    /* @__PURE__ */ jsx7(Total2, { order }),
+    (showReturns || showRefund) && /* @__PURE__ */ jsxs7("div", { className: "bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4", children: [
+      showReturns && (receivableReturns?.length === 1 ? /* @__PURE__ */ jsx7(Button2, { asChild: true, variant: "secondary", size: "small", children: /* @__PURE__ */ jsx7(
+        Link3,
+        {
+          to: `/orders/${order.id}/returns/${receivableReturns[0].id}/receive`,
+          children: t("orders.returns.receive.action")
+        }
+      ) }) : /* @__PURE__ */ jsx7(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: receivableReturns?.map((r) => {
+                let id = r.id;
+                let returnType = "Return";
+                if (r.exchange_id) {
+                  id = r.exchange_id;
+                  returnType = "Exchange";
+                }
+                if (r.claim_id) {
+                  id = r.claim_id;
+                  returnType = "Claim";
+                }
+                return {
+                  label: t("orders.returns.receive.receiveItems", {
+                    id: `#${id?.slice(-7)}`,
+                    returnType
+                  }),
+                  icon: /* @__PURE__ */ jsx7(ArrowLongRight, {}),
+                  to: `/orders/${order.id}/returns/${r.id}/receive`
+                };
+              })
+            }
+          ],
+          children: /* @__PURE__ */ jsx7(Button2, { variant: "secondary", size: "small", children: t("orders.returns.receive.action") })
+        }
+      )),
+      showRefund && /* @__PURE__ */ jsx7(Button2, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx7(Link3, { to: `/orders/${order.id}/refund`, children: t("orders.payment.refundAmount", {
+        amount: getStylizedAmount(
+          pendingDifference * -1,
+          order?.currency_code
+        )
+      }) }) })
+    ] })
+  ] });
+};
+var Header3 = () => {
+  const { t } = useTranslation7();
+  return /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx7(Heading5, { level: "h2", children: t("fields.summary") }) });
+};
+var Item = ({
+  item,
+  currencyCode
+}) => {
+  const original_price = item.variant?.prices?.find((price2) => price2.currency_code === currencyCode)?.amount || 0;
+  const price = item.unit_price;
+  return /* @__PURE__ */ jsx7(Fragment2, { children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: "text-ui-fg-subtle grid grid-cols-2 items-center gap-x-4 px-6 py-4",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-x-4", children: [
+          /* @__PURE__ */ jsx7(Thumbnail, { src: item.thumbnail, size: "large" }),
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7(
+              Text5,
+              {
+                size: "small",
+                leading: "compact",
+                weight: "plus",
+                className: "text-ui-fg-base",
+                children: item.title || item.product_title
+              }
+            ),
+            item.variant_sku && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-x-1", children: [
+              /* @__PURE__ */ jsx7(Text5, { size: "small", children: item.variant_sku }),
+              /* @__PURE__ */ jsx7(Copy4, { content: item.variant_sku, className: "text-ui-fg-muted" })
+            ] }),
+            /* @__PURE__ */ jsx7(Text5, { size: "small", children: item.variant?.options?.map((o) => o.value).join(" \xB7 ") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-3 items-center gap-x-4", children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-end gap-x-4", children: /* @__PURE__ */ jsxs7(Text5, { size: "small", children: [
+            original_price !== price && /* @__PURE__ */ jsx7("span", { className: "line-through text-ui-fg-muted text-xs mr-1", children: getLocaleAmount(original_price, currencyCode) }),
+            getLocaleAmount(price, currencyCode)
+          ] }) }),
+          /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-x-2", children: /* @__PURE__ */ jsx7("div", { className: "w-fit min-w-[27px]", children: /* @__PURE__ */ jsxs7(Text5, { size: "small", children: [
+            /* @__PURE__ */ jsx7("span", { className: "tabular-nums", children: item.quantity }),
+            "x"
+          ] }) }) }),
+          /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx7(Text5, { size: "small", className: "pt-[1px]", children: getLocaleAmount(item.original_total || 0, currencyCode) }) })
+        ] })
+      ]
+    },
+    item.id
+  ) });
+};
+var ItemBreakdown = ({
+  order
+}) => {
+  return /* @__PURE__ */ jsx7("div", { children: order.items?.map((item) => {
+    return /* @__PURE__ */ jsx7(
+      Item,
+      {
+        item,
+        currencyCode: order.currency_code
+      },
+      item.id
+    );
+  }) });
+};
+var Cost = ({
+  label,
+  value,
+  secondaryValue,
+  tooltip
+}) => /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-3 items-center", children: [
+  /* @__PURE__ */ jsxs7(Text5, { size: "small", leading: "compact", children: [
+    label,
+    " ",
+    tooltip
+  ] }),
+  /* @__PURE__ */ jsx7("div", { className: "text-right", children: /* @__PURE__ */ jsx7(Text5, { size: "small", leading: "compact", children: secondaryValue }) }),
+  /* @__PURE__ */ jsx7("div", { className: "text-right", children: /* @__PURE__ */ jsx7(Text5, { size: "small", leading: "compact", children: value }) })
+] });
+var CostBreakdown = ({
+  order
+}) => {
+  const { t } = useTranslation7();
+  const [isTaxOpen, setIsTaxOpen] = useState(false);
+  const [isShippingOpen, setIsShippingOpen] = useState(false);
+  const commissionTotal = useMemo(() => {
+    return order.items.reduce((acc, item) => {
+      const lines = item.commission_lines;
+      if (!lines) return acc;
+      return acc + lines.reduce((sum, line) => sum + (line.amount ?? 0), 0);
+    }, 0);
+  }, [order.items]);
+  const discountCodes = useMemo(() => {
+    const codes = /* @__PURE__ */ new Set();
+    order.items.forEach(
+      (item) => item.adjustments?.forEach((adj) => {
+        codes.add(adj.code);
+      })
+    );
+    return Array.from(codes).sort();
+  }, [order]);
+  const taxCodes = useMemo(() => {
+    const taxCodeMap = {};
+    order.items.forEach((item) => {
+      item.tax_lines?.forEach((line) => {
+        taxCodeMap[line.code] = (taxCodeMap[line.code] || 0) + line.total;
+      });
+    });
+    order.shipping_methods.forEach((sm) => {
+      sm.tax_lines?.forEach((line) => {
+        taxCodeMap[line.code] = (taxCodeMap[line.code] || 0) + line.total;
+      });
+    });
+    return taxCodeMap;
+  }, [order]);
+  const automaticTaxesOn = !!order.region?.automatic_taxes;
+  const hasTaxLines = !!Object.keys(taxCodes).length;
+  const discountTotal = automaticTaxesOn ? order.discount_total : order.discount_subtotal;
+  return /* @__PURE__ */ jsxs7("div", { className: "text-ui-fg-subtle flex flex-col gap-y-2 px-6 py-4", children: [
+    /* @__PURE__ */ jsx7(
+      Cost,
+      {
+        label: t(
+          automaticTaxesOn ? "orders.summary.itemTotal" : "orders.summary.itemSubtotal"
+        ),
+        value: getLocaleAmount(order.item_total, order.currency_code)
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Cost,
+      {
+        label: /* @__PURE__ */ jsxs7(
+          "span",
+          {
+            onClick: () => setIsShippingOpen((o) => !o),
+            className: "flex cursor-pointer items-center gap-1",
+            children: [
+              /* @__PURE__ */ jsx7("span", { children: t(
+                automaticTaxesOn ? "orders.summary.shippingTotal" : "orders.summary.shippingSubtotal"
+              ) }),
+              /* @__PURE__ */ jsx7(
+                TriangleDownMini,
+                {
+                  style: {
+                    transform: `rotate(${isShippingOpen ? 0 : -90}deg)`
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        value: getLocaleAmount(
+          automaticTaxesOn ? order.shipping_total : order.shipping_subtotal,
+          order.currency_code
+        )
+      }
+    ),
+    isShippingOpen && /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-1 pl-5", children: (order.shipping_methods || []).sort(
+      (m1, m2) => m1.created_at.localeCompare(m2.created_at)
+    ).map((sm, i) => {
+      return /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: "flex items-center justify-between gap-x-2",
+          children: [
+            /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsxs7("span", { className: "txt-small text-ui-fg-subtle font-medium", children: [
+              sm.name,
+              sm.detail?.return_id && ` (${t("fields.returnShipping")})`,
+              " ",
+              /* @__PURE__ */ jsx7(shipping_info_popover_default, { shippingMethod: sm }, i)
+            ] }) }),
+            /* @__PURE__ */ jsx7("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx7("div", { className: "bottom-[calc(50% - 2px)] absolute h-[1px] w-full border-b border-dashed" }) }),
+            /* @__PURE__ */ jsx7("span", { className: "txt-small text-ui-fg-muted", children: getLocaleAmount(
+              automaticTaxesOn ? sm.total : sm.subtotal,
+              order.currency_code
+            ) })
+          ]
+        },
+        sm.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx7(
+      Cost,
+      {
+        label: t(
+          automaticTaxesOn ? "orders.summary.discountTotal" : "orders.summary.discountSubtotal"
+        ),
+        secondaryValue: discountCodes.join(", "),
+        value: discountTotal > 0 ? `- ${getLocaleAmount(discountTotal, order.currency_code)}` : "-"
+      }
+    ),
+    /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            onClick: () => hasTaxLines && setIsTaxOpen((o) => !o),
+            className: clx("flex items-center gap-1", {
+              "cursor-pointer": hasTaxLines
+            }),
+            children: [
+              /* @__PURE__ */ jsx7("span", { className: "txt-small select-none", children: t(
+                automaticTaxesOn ? "orders.summary.taxTotalIncl" : "orders.summary.taxTotal"
+              ) }),
+              hasTaxLines && /* @__PURE__ */ jsx7(
+                TriangleDownMini,
+                {
+                  style: {
+                    transform: `rotate(${isTaxOpen ? 0 : -90}deg)`
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7("div", { className: "text-right", children: /* @__PURE__ */ jsx7(Text5, { size: "small", leading: "compact", children: getLocaleAmount(order.tax_total, order.currency_code) }) })
+      ] }),
+      isTaxOpen && /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-1 pl-5", children: Object.entries(taxCodes).map(([code, total]) => {
+        return /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: "flex items-center justify-between gap-x-2",
+            children: [
+              /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7("span", { className: "txt-small text-ui-fg-subtle font-medium", children: code }) }),
+              /* @__PURE__ */ jsx7("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx7("div", { className: "bottom-[calc(50% - 2px)] absolute h-[1px] w-full border-b border-dashed" }) }),
+              /* @__PURE__ */ jsx7("span", { className: "txt-small text-ui-fg-muted", children: getLocaleAmount(total, order.currency_code) })
+            ]
+          },
+          code
+        );
+      }) })
+    ] }),
+    commissionTotal > 0 && /* @__PURE__ */ jsx7(
+      Cost,
+      {
+        label: "Commission",
+        value: getLocaleAmount(commissionTotal, order.currency_code)
+      }
+    )
+  ] });
+};
+var Total2 = ({ order }) => {
+  const { t } = useTranslation7();
+  return /* @__PURE__ */ jsxs7("div", { className: " flex flex-col gap-y-2 px-6 py-4", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "text-ui-fg-base flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx7(
+        Text5,
+        {
+          weight: "plus",
+          className: "text-ui-fg-subtle",
+          size: "small",
+          leading: "compact",
+          children: t("fields.total")
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Text5,
+        {
+          weight: "plus",
+          className: "text-ui-fg-subtle",
+          size: "small",
+          leading: "compact",
+          children: getStylizedAmount(order.total, order.currency_code)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "text-ui-fg-base flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx7(
+        Text5,
+        {
+          weight: "plus",
+          className: "text-ui-fg-subtle",
+          size: "small",
+          leading: "compact",
+          children: t("fields.paidTotal")
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Text5,
+        {
+          weight: "plus",
+          className: "text-ui-fg-subtle",
+          size: "small",
+          leading: "compact",
+          children: getStylizedAmount(
+            getTotalCaptured(order.payment_collections || []),
+            order.currency_code
+          )
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/pages/orders/[id]/order-detail-page.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  const initialData = useLoaderData();
+  const { id } = useParams();
+  const { order, isLoading, isError, error } = useOrder(
+    id,
+    {
+      fields: DEFAULT_FIELDS
+    },
+    {
+      initialData
+    }
+  );
+  if (order) {
+    order.items = order.items.sort((itemA, itemB) => {
+      if (itemA.created_at > itemB.created_at) {
+        return 1;
+      }
+      if (itemA.created_at < itemB.created_at) {
+        return -1;
+      }
+      return 0;
+    });
+  }
+  if (isLoading || !order) {
+    return /* @__PURE__ */ jsx8(TwoColumnPageSkeleton, { mainSections: 4, sidebarSections: 2, showJSON: true });
+  }
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx8(Fragment3, { children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs8(TwoColumnPage, { data: order, hasOutlet: true, children: [
+    /* @__PURE__ */ jsxs8(TwoColumnPage.Main, { children: [
+      /* @__PURE__ */ jsx8(OrderGeneralSection, { order }),
+      /* @__PURE__ */ jsx8(OrderSummarySection, { order }),
+      /* @__PURE__ */ jsx8(OrderPaymentSection, { order }),
+      /* @__PURE__ */ jsx8(OrderFulfillmentSection, { order })
+    ] }),
+    /* @__PURE__ */ jsx8(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx8(OrderCustomerSection, { order }) })
+  ] }) });
+};
+var OrderDetailPage = Object.assign(Root, {
+  Main: TwoColumnPage.Main,
+  Sidebar: TwoColumnPage.Sidebar,
+  MainGeneralSection: OrderGeneralSection,
+  MainSummarySection: OrderSummarySection,
+  MainPaymentSection: OrderPaymentSection,
+  MainFulfillmentSection: OrderFulfillmentSection,
+  SidebarCustomerSection: OrderCustomerSection
+});
+export {
+  OrderDetailPage,
+  loader
+};