@medusajs/draft-order 0.0.1

package/.medusa/server/src/admin/components/draft-orders/activity-section.js

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Container, Heading, Text, clx, Tooltip, Avatar, Skeleton } from "@medusajs/ui";
+import { Collapsible } from "radix-ui";
+import { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { useUser } from "../../hooks/api/users.js";
+import { getFullDate, getRelativeDate } from "../../lib/utils/date-utils.js";
+const ActivitySection = ({ order, changes }) => {
+  const activityItems = useMemo(
+    () => getActivityItems(order, changes),
+    [order, changes]
+  );
+  return /* @__PURE__ */ jsxs(Container, { className: "p-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { children: "Activity" }) }),
+    /* @__PURE__ */ jsx(ActivityItemList, { items: activityItems })
+  ] });
+};
+const ActivityItemList = ({ items }) => {
+  if (items.length <= 3) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-0.5 px-6 pb-6", children: items.map((item, idx) => /* @__PURE__ */ jsx(
+      ActivityItem,
+      {
+        item,
+        isFirst: idx === items.length - 1
+      },
+      idx
+    )) });
+  }
+  const lastItems = items.slice(0, 2);
+  const collapsibleItems = items.slice(2, items.length - 1);
+  const firstItem = items[items.length - 1];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-0.5 px-6 pb-6", children: [
+    lastItems.map((item, idx) => /* @__PURE__ */ jsx(ActivityItem, { item }, idx)),
+    /* @__PURE__ */ jsx(CollapsibleActivityItemList, { items: collapsibleItems }),
+    /* @__PURE__ */ jsx(ActivityItem, { item: firstItem, isFirst: true }, items.length - 1)
+  ] });
+};
+const CollapsibleActivityItemList = ({
+  items
+}) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Collapsible.Root, { open, onOpenChange: setOpen, children: [
+    !open && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[20px_1fr] items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-full flex-col items-center", children: /* @__PURE__ */ jsx("div", { className: "border-ui-border-strong w-px flex-1 bg-[linear-gradient(var(--border-strong)_33%,rgba(255,255,255,0)_0%)] bg-[length:1px_3px] bg-right bg-repeat-y bg-clip-content" }) }),
+      /* @__PURE__ */ jsx(Collapsible.Trigger, { className: "text-left p-0 m-0 pb-4 text-ui-fg-muted hover:text-ui-fg-base focus:text-ui-fg-base outline-none transition-colors", children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: `Show ${items.length} more ${items.length === 1 ? "activity" : "activities"}` }) })
+    ] }),
+    /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-0.5", children: items.map((item, idx) => {
+      return /* @__PURE__ */ jsx(ActivityItem, { item }, idx);
+    }) }) })
+  ] });
+};
+const ActivityItem = ({ item, isFirst = false }) => {
+  const { user, isPending, isError, error } = useUser(item.userId, void 0, {
+    enabled: !!item.userId
+  });
+  if (isError) {
+    throw error;
+  }
+  const isUserLoaded = !isPending && !!user && !!item.userId;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clx("grid grid-cols-[20px_1fr] items-start gap-x-2 w-full"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5 h-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-5 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-2.5 rounded-full shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-ui-tag-neutral-icon" }) }) }),
+          !isFirst && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-full w-px bg-ui-border-base" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: clx("flex flex-col", !isFirst && "pb-4"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 justify-between", children: [
+            /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.label }),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: getFullDate({ date: item.timestamp, includeTime: true }),
+                children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "cursor-default", children: getRelativeDate(item.timestamp) })
+              }
+            )
+          ] }),
+          item.content && renderContent(item.content),
+          item.userId && /* @__PURE__ */ jsx("div", { className: "pt-2 text-ui-fg-muted", children: isUserLoaded ? /* @__PURE__ */ jsx(Link, { to: `/settings/users/${user.id}`, className: "w-fit", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5 w-fit", children: [
+            /* @__PURE__ */ jsx(Text, { size: "small", children: "By" }),
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                size: "2xsmall",
+                fallback: [user.first_name, user.last_name].filter(Boolean).join("").slice(0, 1)
+              }
+            ),
+            /* @__PURE__ */ jsxs(Text, { size: "small", children: [
+              user.first_name,
+              " ",
+              user.last_name
+            ] })
+          ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5", children: [
+            /* @__PURE__ */ jsx(Text, { size: "small", children: "By" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "rounded-full w-5 h-5" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "w-[75px] h-4" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+function renderContent(content) {
+  if (typeof content === "string") {
+    return /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: content });
+  }
+  return content;
+}
+function getEditActivityItems(change) {
+  const activityItems = [];
+  const counts = {
+    itemsAdded: 0,
+    itemsRemoved: 0,
+    shippingMethodsAdded: 0,
+    shippingMethodsRemoved: 0
+  };
+  for (const action of change.actions) {
+    if (!action.details) {
+      continue;
+    }
+    switch (action.action) {
+      case "ITEM_ADD":
+        counts.itemsAdded += action.details.quantity;
+        break;
+      case "ITEM_UPDATE":
+        const diff = action.details.quantity_diff;
+        diff > 0 ? counts.itemsAdded += diff : counts.itemsRemoved += diff;
+        break;
+      case "SHIPPING_ADD":
+        counts.shippingMethodsAdded += 1;
+        break;
+      case "SHIPPING_REMOVE":
+        counts.shippingMethodsRemoved += 1;
+        break;
+    }
+  }
+  const createActivityItem = (type, added, removed) => {
+    if (added === 0 && removed === 0) return;
+    const getText = (count, singular, plural) => count === 1 ? `${count} ${singular}` : `${count} ${plural}`;
+    const addedText = getText(
+      added,
+      type === "items" ? "item" : "shipping method",
+      type === "items" ? "items" : "shipping methods"
+    );
+    const removedText = getText(
+      Math.abs(removed),
+      type === "items" ? "item" : "shipping method",
+      type === "items" ? "items" : "shipping methods"
+    );
+    const content = added && removed ? `Added ${addedText}, removed ${removedText}` : added ? `Added ${addedText}` : `Removed ${removedText}`;
+    const label = added && removed ? `${type === "items" ? "Items" : "Shipping methods"} updated` : added ? `${type === "items" ? "Items" : "Shipping methods"} added` : `${type === "items" ? "Items" : "Shipping methods"} removed`;
+    activityItems.push({
+      label,
+      content,
+      timestamp: new Date(change.created_at).toISOString(),
+      userId: change.confirmed_by
+    });
+  };
+  createActivityItem("items", counts.itemsAdded, counts.itemsRemoved);
+  createActivityItem(
+    "shipping",
+    counts.shippingMethodsAdded,
+    counts.shippingMethodsRemoved
+  );
+  return activityItems;
+}
+function getTransferActivityItem(change) {
+  return {
+    label: "Transferred",
+    content: "Draft order transferred",
+    timestamp: new Date(change.created_at).toISOString()
+  };
+}
+function getActivityItems(order, changes) {
+  const items = [];
+  if (order.created_at) {
+    items.push({
+      label: "Created",
+      content: "Draft order created",
+      timestamp: new Date(order.created_at).toISOString()
+    });
+  }
+  changes.forEach((change) => {
+    if (!change.change_type || !change.confirmed_at) {
+      return;
+    }
+    switch (change.change_type) {
+      case "edit": {
+        items.push(...getEditActivityItems(change));
+        break;
+      }
+      case "transfer":
+        items.push(getTransferActivityItem(change));
+        break;
+    }
+  });
+  return items.sort(
+    (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+  );
+}
+export {
+  ActivitySection
+};

package/.medusa/server/src/admin/components/draft-orders/customer-section.js

@@ -0,0 +1,165 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { FlyingBox, CurrencyDollar, Envelope } from "@medusajs/icons";
+import { Container, Heading, Text, Avatar, Copy } from "@medusajs/ui";
+import { Link } from "react-router-dom";
+import { isSameAddress, getFormattedAddress } from "../../lib/utils/address-utils.js";
+import { ActionMenu } from "../common/action-menu.js";
+const CustomerSection = ({ order }) => {
+  return /* @__PURE__ */ jsxs(Container, { className: "p-0 divide-y", children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsx(ID, { order }),
+    /* @__PURE__ */ jsx(Contact, { order }),
+    /* @__PURE__ */ jsx(Addresses, { order })
+  ] });
+};
+const Header = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 gap-2", children: [
+    /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Customer" }),
+    /* @__PURE__ */ jsx(
+      ActionMenu,
+      {
+        groups: [
+          {
+            actions: [
+              {
+                label: "Edit shipping address",
+                to: "shipping-address",
+                icon: /* @__PURE__ */ jsx(FlyingBox, {})
+              },
+              {
+                label: "Edit billing address",
+                to: "billing-address",
+                icon: /* @__PURE__ */ jsx(CurrencyDollar, {})
+              }
+            ]
+          },
+          {
+            actions: [
+              {
+                label: "Edit email",
+                to: `email`,
+                icon: /* @__PURE__ */ jsx(Envelope, {})
+              }
+            ]
+          }
+        ]
+      }
+    )
+  ] });
+};
+const ID = ({ order }) => {
+  const id = order.customer_id;
+  const name = getOrderCustomer(order);
+  const email = order.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: "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", children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "2xsmall", fallback }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "small",
+              leading: "compact",
+              className: "text-ui-fg-subtle hover:text-ui-fg-base transition-fg truncate",
+              children: name || email
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
+const Contact = ({ order }) => {
+  var _a, _b;
+  const phone = ((_a = order.shipping_address) == null ? void 0 : _a.phone) || ((_b = order.billing_address) == null ? void 0 : _b.phone);
+  const email = order.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: "Contact" }),
+    /* @__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: email, className: "text-ui-fg-muted" }) })
+      ] })
+    ] })
+  ] });
+};
+const AddressPrint = ({
+  address,
+  type
+}) => {
+  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" ? "Shipping address" : "Billing address" }),
+    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: "-" })
+  ] });
+};
+const Addresses = ({ order }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "divide-y", children: [
+    /* @__PURE__ */ jsx(AddressPrint, { address: order.shipping_address, type: "shipping" }),
+    !isSameAddress(order.shipping_address, order.billing_address) ? /* @__PURE__ */ jsx(AddressPrint, { address: order.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: "Billing address"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-muted", children: "Same as shipping address" })
+    ] })
+  ] });
+};
+function 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;
+}
+export {
+  CustomerSection
+};

package/.medusa/server/src/admin/components/draft-orders/general-section.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Container, Heading, Copy, Badge, Skeleton, Text } from "@medusajs/ui";
+import { Link } from "react-router-dom";
+import { useRegion } from "../../hooks/api/regions.js";
+import { getFullDate } from "../../lib/utils/date-utils.js";
+const GeneralSection = ({ order }) => {
+  var _a;
+  const { region, isPending, isError, error } = useRegion(
+    order.region_id,
+    void 0,
+    {
+      enabled: !!order.region_id
+    }
+  );
+  const isRegionLoaded = !!region && !isPending;
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx(Container, { className: "flex items-center justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsxs(Heading, { children: [
+        "Draft Order #",
+        order.display_id
+      ] }),
+      /* @__PURE__ */ jsx(Copy, { content: `#${order.display_id}` }),
+      isRegionLoaded ? /* @__PURE__ */ jsx(Badge, { size: "2xsmall", rounded: "full", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: `/settings/regions/${region == null ? void 0 : region.id}`, children: region == null ? void 0 : region.name }) }) : /* @__PURE__ */ jsx(Skeleton, { className: "w-14 h-5 rounded-full" })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: `${getFullDate({
+      date: order.created_at,
+      includeTime: true
+    })} from ${(_a = order.sales_channel) == null ? void 0 : _a.name}` })
+  ] }) });
+};
+export {
+  GeneralSection
+};

package/.medusa/server/src/admin/components/draft-orders/json-view-section.js

@@ -0,0 +1,140 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ArrowUpRightOnBox, XMarkMini, TriangleDownMini, Check, SquareTwoStack } from "@medusajs/icons";
+import { Container, Heading, Badge, Drawer, IconButton, Kbd } from "@medusajs/ui";
+import Primitive from "@uiw/react-json-view";
+import { Suspense, useState } from "react";
+const JsonViewSection = ({ data }) => {
+  const numberOfKeys = Object.keys(data).length;
+  return /* @__PURE__ */ jsxs(Container, { className: "flex items-center justify-between px-6 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", children: "JSON" }),
+      /* @__PURE__ */ jsx(Badge, { size: "2xsmall", rounded: "full", children: `${numberOfKeys} ${numberOfKeys === 1 ? "key" : "keys"}` })
+    ] }),
+    /* @__PURE__ */ jsxs(Drawer, { children: [
+      /* @__PURE__ */ jsx(Drawer.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          variant: "transparent",
+          className: "text-ui-fg-muted hover:text-ui-fg-subtle",
+          children: /* @__PURE__ */ jsx(ArrowUpRightOnBox, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Drawer.Content, { className: "bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-ui-code-bg-base flex items-center justify-between px-6 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-4", children: [
+            /* @__PURE__ */ jsx(Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxs(Heading, { className: "text-ui-contrast-fg-primary", children: [
+              "JSON",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-ui-fg-subtle", children: numberOfKeys }, "count-span")
+            ] }) }),
+            /* @__PURE__ */ jsx(Drawer.Description, { className: "sr-only", children: "View the JSON representation of the draft order." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(Kbd, { className: "bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary", children: "esc" }),
+            /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                variant: "transparent",
+                className: "text-ui-contrast-fg-secondary hover:text-ui-contrast-fg-primary hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:bg-ui-contrast-bg-base-hover focus-visible:shadow-borders-interactive-with-active",
+                children: /* @__PURE__ */ jsx(XMarkMini, {})
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Drawer.Body, { className: "flex flex-1 flex-col overflow-hidden px-[5px] py-0 pb-[5px]", children: /* @__PURE__ */ jsx("div", { className: "bg-ui-contrast-bg-subtle flex-1 overflow-auto rounded-b-[4px] rounded-t-lg p-3", children: /* @__PURE__ */ jsx(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsx("div", { className: "flex size-full flex-col" }),
+            children: /* @__PURE__ */ jsxs(
+              Primitive,
+              {
+                value: data,
+                displayDataTypes: false,
+                style: {
+                  "--w-rjv-font-family": "Roboto Mono, monospace",
+                  "--w-rjv-line-color": "var(--contrast-border-base)",
+                  "--w-rjv-curlybraces-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-brackets-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-key-string": "var(--contrast-fg-primary)",
+                  "--w-rjv-info-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-type-string-color": "var(--tag-green-icon)",
+                  "--w-rjv-quotes-string-color": "var(--tag-green-icon)",
+                  "--w-rjv-type-boolean-color": "var(--tag-orange-icon)",
+                  "--w-rjv-type-int-color": "var(--tag-orange-icon)",
+                  "--w-rjv-type-float-color": "var(--tag-orange-icon)",
+                  "--w-rjv-type-bigint-color": "var(--tag-orange-icon)",
+                  "--w-rjv-key-number": "var(--contrast-fg-secondary)",
+                  "--w-rjv-arrow-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-copied-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-copied-success-color": "var(--contrast-fg-primary)",
+                  "--w-rjv-colon-color": "var(--contrast-fg-primary)",
+                  "--w-rjv-ellipsis-color": "var(--contrast-fg-secondary)"
+                },
+                collapsed: 1,
+                children: [
+                  /* @__PURE__ */ jsx(Primitive.Quote, { render: () => /* @__PURE__ */ jsx("span", {}) }),
+                  /* @__PURE__ */ jsx(
+                    Primitive.Null,
+                    {
+                      render: () => /* @__PURE__ */ jsx("span", { className: "text-ui-tag-red-icon", children: "null" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Primitive.Undefined,
+                    {
+                      render: () => /* @__PURE__ */ jsx("span", { className: "text-ui-tag-blue-icon", children: "undefined" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Primitive.CountInfo,
+                    {
+                      render: (_props, { value }) => {
+                        return /* @__PURE__ */ jsx("span", { className: "text-ui-contrast-fg-secondary ml-2", children: `${Object.keys(value).length} ${Object.keys(value).length === 1 ? "key" : "keys"}` });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Primitive.Arrow, { children: /* @__PURE__ */ jsx(TriangleDownMini, { className: "text-ui-contrast-fg-secondary -ml-[0.5px]" }) }),
+                  /* @__PURE__ */ jsx(Primitive.Colon, { children: /* @__PURE__ */ jsx("span", { className: "mr-1", children: ":" }) }),
+                  /* @__PURE__ */ jsx(
+                    Primitive.Copied,
+                    {
+                      render: ({ style }, { value }) => {
+                        return /* @__PURE__ */ jsx(Copied, { style, value });
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }) })
+      ] })
+    ] })
+  ] });
+};
+const Copied = ({ style, value }) => {
+  const [copied, setCopied] = useState(false);
+  const handler = (e) => {
+    e.stopPropagation();
+    setCopied(true);
+    if (typeof value === "string") {
+      navigator.clipboard.writeText(value);
+    } else {
+      const json = JSON.stringify(value, null, 2);
+      navigator.clipboard.writeText(json);
+    }
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  const styl = { whiteSpace: "nowrap", width: "20px" };
+  if (copied) {
+    return /* @__PURE__ */ jsx("span", { style: { ...style, ...styl }, children: /* @__PURE__ */ jsx(Check, { className: "text-ui-contrast-fg-primary" }) });
+  }
+  return /* @__PURE__ */ jsx("span", { style: { ...style, ...styl }, onClick: handler, children: /* @__PURE__ */ jsx(SquareTwoStack, { className: "text-ui-contrast-fg-secondary" }) });
+};
+export {
+  JsonViewSection
+};

package/.medusa/server/src/admin/components/draft-orders/metadata-section.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ArrowUpRightOnBox } from "@medusajs/icons";
+import { Container, Heading, Badge, IconButton } from "@medusajs/ui";
+import { Link } from "react-router-dom";
+const MetadataSection = ({ order }) => {
+  return /* @__PURE__ */ jsxs(Container, { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Metadata" }),
+      /* @__PURE__ */ jsxs(Badge, { size: "2xsmall", rounded: "full", children: [
+        Object.keys(order.metadata || {}).length,
+        " keys"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "transparent",
+        size: "small",
+        className: "text-ui-fg-muted hover:text-ui-fg-subtle",
+        asChild: true,
+        children: /* @__PURE__ */ jsx(Link, { to: "metadata", children: /* @__PURE__ */ jsx(ArrowUpRightOnBox, {}) })
+      }
+    )
+  ] });
+};
+export {
+  MetadataSection
+};