@medusajs/draft-order 2.10.4-preview-20251004030756 → 2.10.4-preview-20251004060158

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

@@ -4,7 +4,7 @@ import { Tooltip, DropdownMenu, clx, IconButton, useDataTable, DataTable as Data
 import { useQuery, useQueryClient, useMutation, keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
 import React, { useState, useCallback, useMemo, Fragment, createContext, forwardRef, useId, useContext, useTransition, useRef, useImperativeHandle, useDeferredValue, useEffect, Suspense } from "react";
 import { useSearchParams, Link, useNavigate, Outlet, useBlocker, useLocation, useParams } from "react-router-dom";
-import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, Minus, PencilSquare, EllipsisVertical, ArrowUpMini, ArrowDownMini } from "@medusajs/icons";
+import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, EllipsisVertical, ArrowUpMini, ArrowDownMini, Minus, PencilSquare } from "@medusajs/icons";
 import Medusa from "@medusajs/js-sdk";
 import { format, formatDistance, sub, subDays, subMonths } from "date-fns";
 import { enUS } from "date-fns/locale";
@@ -9846,1429 +9846,753 @@ const EmailForm = ({ order }) => {
 const schema$3 = objectType({
   email: stringType().email()
 });
-const NumberInput = forwardRef(
-  ({
-    value,
-    onChange,
-    size = "base",
-    min = 0,
-    max = 100,
-    step = 1,
-    className,
-    disabled,
-    ...props
-  }, ref) => {
-    const handleChange = (event) => {
-      const newValue = event.target.value === "" ? min : Number(event.target.value);
-      if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
-        onChange(newValue);
-      }
-    };
-    const handleIncrement = () => {
-      const newValue = value + step;
-      if (max === void 0 || newValue <= max) {
-        onChange(newValue);
-      }
-    };
-    const handleDecrement = () => {
-      const newValue = value - step;
-      if (min === void 0 || newValue >= min) {
-        onChange(newValue);
-      }
-    };
+const InlineTip = forwardRef(
+  ({ variant = "tip", label, className, children, ...props }, ref) => {
+    const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        ref,
         className: clx(
-          "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
-          "[&:has(input:focus)]:shadow-borders-interactive-with-active",
-          {
-            "h-7": size === "small",
-            "h-8": size === "base"
-          },
+          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
           className
         ),
+        ...props,
         children: [
           /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type: "number",
-              value,
-              onChange: handleChange,
-              min,
-              max,
-              step,
-              className: clx(
-                "flex-1 px-2 py-1 bg-transparent txt-compact-small text-ui-fg-base outline-none [appearance:textfield]",
-                "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-                "placeholder:text-ui-fg-muted"
-              ),
-              ...props
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
+            "div",
             {
-              className: clx(
-                "flex items-center justify-center outline-none transition-fg",
-                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
-                "focus:bg-ui-bg-field-component-hover",
-                "hover:bg-ui-bg-field-component-hover",
-                {
-                  "size-7": size === "small",
-                  "size-8": size === "base"
-                }
-              ),
-              type: "button",
-              onClick: handleDecrement,
-              disabled: min !== void 0 && value <= min || disabled,
-              children: [
-                /* @__PURE__ */ jsx(Minus, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
-              ]
+              role: "presentation",
+              className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
+                "bg-ui-tag-orange-icon": variant === "warning"
+              })
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: clx(
-                "flex items-center justify-center outline-none transition-fg",
-                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
-                "focus:bg-ui-bg-field-hover",
-                "hover:bg-ui-bg-field-hover",
-                {
-                  "size-7": size === "small",
-                  "size-8": size === "base"
-                }
-              ),
-              type: "button",
-              onClick: handleIncrement,
-              disabled: max !== void 0 && value >= max || disabled,
-              children: [
-                /* @__PURE__ */ jsx(Plus, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Increase by ${step}` })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
+            /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
+              labelValue,
+              ":"
+            ] }),
+            " ",
+            children
+          ] })
         ]
       }
     );
   }
 );
-const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
-const productVariantsQueryKeys = {
-  list: (query2) => [
-    PRODUCT_VARIANTS_QUERY_KEY,
-    query2 ? query2 : void 0
-  ]
-};
-const useProductVariants = (query2, options) => {
-  const { data, ...rest } = useQuery({
-    queryKey: productVariantsQueryKeys.list(query2),
-    queryFn: async () => await sdk.admin.productVariant.list(query2),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-const useCancelOrderEdit = ({ preview }) => {
-  const { mutateAsync: cancelOrderEdit } = useDraftOrderCancelEdit(preview == null ? void 0 : preview.id);
-  const onCancel = useCallback(async () => {
-    if (!preview) {
-      return true;
-    }
-    let res = false;
-    await cancelOrderEdit(void 0, {
-      onError: (e) => {
-        toast.error(e.message);
-      },
-      onSuccess: () => {
-        res = true;
-      }
-    });
-    return res;
-  }, [preview, cancelOrderEdit]);
-  return { onCancel };
-};
-let IS_REQUEST_RUNNING = false;
-const useInitiateOrderEdit = ({
-  preview
-}) => {
-  const navigate = useNavigate();
-  const { mutateAsync } = useDraftOrderBeginEdit(preview == null ? void 0 : preview.id);
-  useEffect(() => {
-    async function run() {
-      if (IS_REQUEST_RUNNING || !preview) {
-        return;
-      }
-      if (preview.order_change) {
-        return;
-      }
-      IS_REQUEST_RUNNING = true;
-      await mutateAsync(void 0, {
-        onError: (e) => {
-          toast.error(e.message);
-          navigate(`/draft-orders/${preview.id}`, { replace: true });
-          return;
-        }
-      });
-      IS_REQUEST_RUNNING = false;
-    }
-    run();
-  }, [preview, navigate, mutateAsync]);
-};
-function convertNumber(value) {
-  return typeof value === "string" ? Number(value.replace(",", ".")) : value;
-}
-const STACKED_MODAL_ID = "items_stacked_modal";
-const Items = () => {
+InlineTip.displayName = "InlineTip";
+const MetadataFieldSchema = objectType({
+  key: stringType(),
+  disabled: booleanType().optional(),
+  value: anyType()
+});
+const MetadataSchema = objectType({
+  metadata: arrayType(MetadataFieldSchema)
+});
+const Metadata = () => {
   const { id } = useParams();
-  const {
-    order: preview,
-    isPending: isPreviewPending,
-    isError: isPreviewError,
-    error: previewError
-  } = useOrderPreview(id, void 0, {
-    placeholderData: keepPreviousData
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "metadata"
   });
-  useInitiateOrderEdit({ preview });
-  const { draft_order, isPending, isError, error } = useDraftOrder(
-    id,
-    {
-      fields: "currency_code"
-    },
-    {
-      enabled: !!id
-    }
-  );
-  const { onCancel } = useCancelOrderEdit({ preview });
   if (isError) {
     throw error;
   }
-  if (isPreviewError) {
-    throw previewError;
-  }
-  const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
-  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: ready ? /* @__PURE__ */ jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) : /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Items" }) }),
-    /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
-  ] }) });
+  const isReady = !isPending && !!order;
+  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
+    ] }),
+    !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
+  ] });
 };
-const ItemsForm = ({ preview, currencyCode }) => {
-  var _a;
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [modalContent, setModalContent] = useState(
-    null
-  );
+const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
+const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
+const MetadataForm = ({ orderId, metadata }) => {
   const { handleSuccess } = useRouteModal();
-  const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
-  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
-  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
-  const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
-  const matches = useMemo(() => {
-    return matchSorter(preview.items, query2, {
-      keys: ["product_title", "variant_title", "variant_sku", "title"]
-    });
-  }, [preview.items, query2]);
-  const onSubmit = async () => {
-    setIsSubmitting(true);
-    let requestSucceeded = false;
-    await requestOrderEdit(void 0, {
-      onError: (e) => {
-        toast.error(`Failed to request order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        requestSucceeded = true;
-      }
-    });
-    if (!requestSucceeded) {
-      setIsSubmitting(false);
-      return;
-    }
-    await confirmOrderEdit(void 0, {
-      onError: (e) => {
-        toast.error(`Failed to confirm order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        handleSuccess();
-      },
-      onSettled: () => {
-        setIsSubmitting(false);
-      }
-    });
-  };
-  const onKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-        if (modalContent || isSubmitting) {
-          return;
-        }
-        onSubmit();
-      }
-    },
-    [modalContent, isSubmitting, onSubmit]
-  );
-  useEffect(() => {
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [onKeyDown]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
-    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxs(
-      StackedFocusModal,
-      {
-        id: STACKED_MODAL_ID,
-        onOpenChangeCallback: (open) => {
-          if (!open) {
-            setModalContent(null);
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Items" }) }),
-              /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order" }) })
-            ] }),
-            /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
-                  /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      type: "search",
-                      placeholder: "Search items",
-                      value: searchValue,
-                      onChange: (e) => onSearchValueChange(e.target.value)
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-                    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", children: /* @__PURE__ */ jsx(Plus, {}) }) }),
-                    /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
-                      /* @__PURE__ */ jsx(
-                        StackedModalTrigger$1,
-                        {
-                          type: "add-items",
-                          setModalContent
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        StackedModalTrigger$1,
-                        {
-                          type: "add-custom-item",
-                          setModalContent
-                        }
-                      )
-                    ] })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
-                /* @__PURE__ */ jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-muted grid grid-cols-[2fr_1fr_2fr_28px] gap-3 px-4 py-2", children: [
-                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
-                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) }),
-                  /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Price" }) }),
-                  /* @__PURE__ */ jsx("div", {})
-                ] }) }),
-                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
-                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
-                  /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add items to the order to get started." })
-                ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsx(
-                  Item,
-                  {
-                    item,
-                    preview,
-                    currencyCode
-                  },
-                  item.id
-                )) : /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
-                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
-                  /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
-                    'No items found for "',
-                    query2,
-                    '".'
-                  ] })
-                ] }) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-                Text,
-                {
-                  size: "small",
-                  leading: "compact",
-                  className: "text-ui-fg-subtle",
-                  children: [
-                    itemCount,
-                    " ",
-                    itemCount === 1 ? "item" : "items"
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
-            ] })
-          ] }) }),
-          modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsx(
-            CustomItemForm,
-            {
-              orderId: preview.id,
-              currencyCode
-            }
-          ) : null)
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "small",
-          type: "button",
-          onClick: onSubmit,
-          isLoading: isSubmitting,
-          children: "Save"
-        }
-      )
-    ] }) })
-  ] });
-};
-const Item = ({ item, preview, currencyCode }) => {
-  if (item.variant_id) {
-    return /* @__PURE__ */ jsx(VariantItem, { item, preview, currencyCode });
-  }
-  return /* @__PURE__ */ jsx(CustomItem, { item, preview, currencyCode });
-};
-const VariantItem = ({ item, preview, currencyCode }) => {
-  const [editing, setEditing] = useState(false);
+  const hasUneditableRows = getHasUneditableRows(metadata);
+  const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
   const form = useForm({
     defaultValues: {
-      quantity: item.quantity,
-      unit_price: item.unit_price
+      metadata: getDefaultValues(metadata)
     },
-    resolver: zodResolver(variantItemSchema)
+    resolver: zodResolver(MetadataSchema)
   });
-  const actionId = useMemo(() => {
-    var _a, _b;
-    return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
-  }, [item]);
-  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
-  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
-  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
-  const onSubmit = form.handleSubmit(async (data) => {
-    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
-      setEditing(false);
-      return;
-    }
-    if (!actionId) {
-      await updateOriginalItem(
-        {
-          item_id: item.id,
-          quantity: data.quantity,
-          unit_price: convertNumber(data.unit_price)
-        },
-        {
-          onSuccess: () => {
-            setEditing(false);
-          },
-          onError: (e) => {
-            toast.error(e.message);
-          }
-        }
-      );
-      return;
-    }
-    await updateActionItem(
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const parsedData = parseValues(data);
+    await mutateAsync(
       {
-        action_id: actionId,
-        quantity: data.quantity,
-        unit_price: convertNumber(data.unit_price)
+        metadata: parsedData
       },
       {
         onSuccess: () => {
-          setEditing(false);
+          toast.success("Metadata updated");
+          handleSuccess();
         },
-        onError: (e) => {
-          toast.error(e.message);
+        onError: (error) => {
+          toast.error(error.message);
         }
       }
     );
   });
-  return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3", children: [
-      /* @__PURE__ */ jsx(
-        Thumbnail,
-        {
-          thumbnail: item.thumbnail,
-          alt: item.product_title ?? void 0
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
-          /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
-          /* @__PURE__ */ jsxs(
-            Text,
-            {
-              size: "small",
-              leading: "compact",
-              className: "text-ui-fg-subtle",
-              children: [
-                "(",
-                item.variant_title,
-                ")"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "small",
-            leading: "compact",
-            className: "text-ui-fg-subtle",
-            children: item.variant_sku
-          }
-        )
-      ] })
-    ] }),
-    editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "quantity",
-        render: ({ field }) => {
-          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
-        }
-      }
-    ) }) : /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }) }),
-    editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "unit_price",
-        render: ({ field: { onChange, ...field } }) => {
-          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-            CurrencyInput,
-            {
-              ...field,
-              symbol: getNativeSymbol(currencyCode),
-              code: currencyCode,
-              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
-            }
-          ) }) });
-        }
-      }
-    ) }) : /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        type: "button",
-        size: "small",
-        onClick: editing ? onSubmit : () => {
-          setEditing(true);
-        },
-        disabled: isPending,
-        children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
-      }
-    )
-  ] }) }) });
-};
-const variantItemSchema = objectType({
-  quantity: numberType(),
-  unit_price: unionType([numberType(), stringType()])
-});
-const CustomItem = ({ item, preview, currencyCode }) => {
-  const [editing, setEditing] = useState(false);
-  const { quantity, unit_price, title } = item;
-  const form = useForm({
-    defaultValues: {
-      title,
-      quantity,
-      unit_price
-    },
-    resolver: zodResolver(customItemSchema)
+  const { fields, insert, remove } = useFieldArray({
+    control: form.control,
+    name: "metadata"
   });
-  useEffect(() => {
-    form.reset({
-      title,
-      quantity,
-      unit_price
-    });
-  }, [form, title, quantity, unit_price]);
-  const actionId = useMemo(() => {
-    var _a, _b;
-    return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
-  }, [item]);
-  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
-  const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
-  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
-  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
-  const onSubmit = form.handleSubmit(async (data) => {
-    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
-      setEditing(false);
-      return;
-    }
-    if (!actionId) {
-      await updateOriginalItem(
-        {
-          item_id: item.id,
-          quantity: data.quantity,
-          unit_price: convertNumber(data.unit_price)
-        },
-        {
-          onSuccess: () => {
-            setEditing(false);
-          },
-          onError: (e) => {
-            toast.error(e.message);
-          }
-        }
-      );
-      return;
-    }
-    if (data.quantity === 0) {
-      await removeActionItem(actionId, {
-        onSuccess: () => {
-          setEditing(false);
-        },
-        onError: (e) => {
-          toast.error(e.message);
-        }
+  function deleteRow(index) {
+    remove(index);
+    if (fields.length === 1) {
+      insert(0, {
+        key: "",
+        value: "",
+        disabled: false
       });
-      return;
     }
-    await updateActionItem(
-      {
-        action_id: actionId,
-        quantity: data.quantity,
-        unit_price: convertNumber(data.unit_price)
-      },
-      {
-        onSuccess: () => {
-          setEditing(false);
-        },
-        onError: (e) => {
-          toast.error(e.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsx(
-        Thumbnail,
-        {
-          thumbnail: item.thumbnail,
-          alt: item.title ?? void 0
-        }
-      ),
-      editing ? /* @__PURE__ */ jsx(
-        Form$2.Field,
-        {
-          control: form.control,
-          name: "title",
-          render: ({ field }) => {
-            return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }) });
-          }
-        }
-      ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.title })
-    ] }),
-    editing ? /* @__PURE__ */ jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "quantity",
-        render: ({ field }) => {
-          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
-        }
-      }
-    ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }),
-    editing ? /* @__PURE__ */ jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "unit_price",
-        render: ({ field: { onChange, ...field } }) => {
-          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-            CurrencyInput,
-            {
-              ...field,
-              symbol: getNativeSymbol(currencyCode),
-              code: currencyCode,
-              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
-            }
-          ) }) });
-        }
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        type: "button",
-        size: "small",
-        onClick: editing ? onSubmit : () => {
-          setEditing(true);
-        },
-        disabled: isPending,
-        children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
-      }
-    )
-  ] }) }) });
-};
-const StackedModalTrigger$1 = ({
-  type,
-  setModalContent
-}) => {
-  const { setIsOpen } = useStackedModal();
-  const onClick = useCallback(() => {
-    setModalContent(type);
-    setIsOpen(STACKED_MODAL_ID, true);
-  }, [setModalContent, setIsOpen, type]);
-  return /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
-};
-const VARIANT_PREFIX = "items";
-const LIMIT = 50;
-const ExistingItemsForm = ({ orderId, items }) => {
-  const { setIsOpen } = useStackedModal();
-  const [rowSelection, setRowSelection] = useState(
-    items.reduce((acc, item) => {
-      acc[item.variant_id] = true;
-      return acc;
-    }, {})
-  );
-  useEffect(() => {
-    setRowSelection(
-      items.reduce((acc, item) => {
-        if (item.variant_id) {
-          acc[item.variant_id] = true;
-        }
-        return acc;
-      }, {})
-    );
-  }, [items]);
-  const { q, order, offset } = useQueryParams(
-    ["q", "order", "offset"],
-    VARIANT_PREFIX
-  );
-  const { variants, count, isPending, isError, error } = useProductVariants(
-    {
-      q,
-      order,
-      offset: offset ? parseInt(offset) : void 0,
-      limit: LIMIT
-    },
+  }
+  function insertRow(index, position) {
+    insert(index + (position === "above" ? 0 : 1), {
+      key: "",
+      value: "",
+      disabled: false
+    });
+  }
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
     {
-      placeholderData: keepPreviousData
-    }
-  );
-  const columns = useColumns();
-  const { mutateAsync } = useDraftOrderAddItems(orderId);
-  const onSubmit = async () => {
-    const ids = Object.keys(rowSelection).filter(
-      (id) => !items.find((i) => i.variant_id === id)
-    );
-    await mutateAsync(
-      {
-        items: ids.map((id) => ({
-          variant_id: id,
-          quantity: 1
-        }))
-      },
-      {
-        onSuccess: () => {
-          setRowSelection({});
-          setIsOpen(STACKED_MODAL_ID, false);
-        },
-        onError: (e) => {
-          toast.error(e.message);
-        }
-      }
-    );
-  };
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxs(
-    StackedFocusModal.Content,
-    {
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-        const searchInput = document.querySelector(
-          "[data-modal-id='modal-search-input']"
-        );
-        if (searchInput) {
-          searchInput.focus();
-        }
-      },
+      onSubmit: handleSubmit,
+      className: "flex flex-1 flex-col overflow-hidden",
       children: [
-        /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
-          /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Product Variants" }) }),
-          /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
-        ] }),
-        /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-          DataTable,
-          {
-            data: variants,
-            columns,
-            isLoading: isPending,
-            getRowId: (row) => row.id,
-            rowCount: count,
-            prefix: VARIANT_PREFIX,
-            layout: "fill",
-            rowSelection: {
-              state: rowSelection,
-              onRowSelectionChange: setRowSelection,
-              enableRowSelection: (row) => {
-                return !items.find((i) => i.variant_id === row.original.id);
+        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
+              /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
+              /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
+            ] }),
+            fields.map((field, index) => {
+              const isDisabled = field.disabled || false;
+              let placeholder = "-";
+              if (typeof field.value === "object") {
+                placeholder = "{ ... }";
               }
-            },
-            autoFocusSearch: true
-          }
-        ) }),
-        /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
+              if (Array.isArray(field.value)) {
+                placeholder = "[ ... ]";
+              }
+              return /* @__PURE__ */ jsx(
+                ConditionalTooltip,
+                {
+                  showTooltip: isDisabled,
+                  content: "This row is disabled because it contains non-primitive data.",
+                  children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: clx("grid grid-cols-2 divide-x", {
+                          "overflow-hidden rounded-b-lg": index === fields.length - 1
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Form$2.Field,
+                            {
+                              control: form.control,
+                              name: `metadata.${index}.key`,
+                              render: ({ field: field2 }) => {
+                                return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+                                  GridInput,
+                                  {
+                                    "aria-labelledby": METADATA_KEY_LABEL_ID,
+                                    ...field2,
+                                    disabled: isDisabled,
+                                    placeholder: "Key"
+                                  }
+                                ) }) });
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Form$2.Field,
+                            {
+                              control: form.control,
+                              name: `metadata.${index}.value`,
+                              render: ({ field: { value, ...field2 } }) => {
+                                return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+                                  GridInput,
+                                  {
+                                    "aria-labelledby": METADATA_VALUE_LABEL_ID,
+                                    ...field2,
+                                    value: isDisabled ? placeholder : value,
+                                    disabled: isDisabled,
+                                    placeholder: "Value"
+                                  }
+                                ) }) });
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                      /* @__PURE__ */ jsx(
+                        DropdownMenu.Trigger,
+                        {
+                          className: clx(
+                            "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
+                            {
+                              hidden: isDisabled
+                            }
+                          ),
+                          disabled: isDisabled,
+                          asChild: true,
+                          children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+                        /* @__PURE__ */ jsxs(
+                          DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => insertRow(index, "above"),
+                            children: [
+                              /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
+                              "Insert row above"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => insertRow(index, "below"),
+                            children: [
+                              /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
+                              "Insert row below"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+                        /* @__PURE__ */ jsxs(
+                          DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => deleteRow(index),
+                            children: [
+                              /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
+                              "Delete row"
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                },
+                field.id
+              );
+            })
+          ] }),
+          hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
+        ] }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
         ] }) })
       ]
     }
+  ) });
+};
+const GridInput = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      ...props,
+      autoComplete: "off",
+      className: clx(
+        "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
+        className
+      )
+    }
   );
+});
+GridInput.displayName = "MetadataForm.GridInput";
+const PlaceholderInner = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
+    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
+    ] }) })
+  ] });
 };
-const columnHelper = createDataTableColumnHelper();
-const useColumns = () => {
-  return useMemo(() => {
+const EDITABLE_TYPES = ["string", "number", "boolean"];
+function getDefaultValues(metadata) {
+  if (!metadata || !Object.keys(metadata).length) {
     return [
-      columnHelper.select(),
-      columnHelper.accessor("product.title", {
-        header: "Product",
-        cell: ({ row }) => {
-          var _a, _b, _c;
-          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
-            /* @__PURE__ */ jsx(
-              Thumbnail,
-              {
-                thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
-                alt: (_b = row.original.product) == null ? void 0 : _b.title
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
-          ] });
-        },
-        enableSorting: true
-      }),
-      columnHelper.accessor("title", {
-        header: "Variant",
-        enableSorting: true
-      }),
-      columnHelper.accessor("sku", {
-        header: "SKU",
-        cell: ({ getValue }) => {
-          return getValue() ?? "-";
-        },
-        enableSorting: true
-      }),
-      columnHelper.accessor("updated_at", {
-        header: "Updated",
-        cell: ({ getValue }) => {
-          return /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: getFullDate({ date: getValue(), includeTime: true }),
-              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: "Oldest first",
-        sortDescLabel: "Newest first"
-      }),
-      columnHelper.accessor("created_at", {
-        header: "Created",
-        cell: ({ getValue }) => {
-          return /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: getFullDate({ date: getValue(), includeTime: true }),
-              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: "Oldest first",
-        sortDescLabel: "Newest first"
-      })
+      {
+        key: "",
+        value: "",
+        disabled: false
+      }
     ];
-  }, []);
+  }
+  return Object.entries(metadata).map(([key, value]) => {
+    if (!EDITABLE_TYPES.includes(typeof value)) {
+      return {
+        key,
+        value,
+        disabled: true
+      };
+    }
+    let stringValue = value;
+    if (typeof value !== "string") {
+      stringValue = JSON.stringify(value);
+    }
+    return {
+      key,
+      value: stringValue,
+      original_key: key
+    };
+  });
+}
+function parseValues(values) {
+  const metadata = values.metadata;
+  const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
+  if (isEmpty) {
+    return null;
+  }
+  const update = {};
+  metadata.forEach((field) => {
+    let key = field.key;
+    let value = field.value;
+    const disabled = field.disabled;
+    if (!key || !value) {
+      return;
+    }
+    if (disabled) {
+      update[key] = value;
+      return;
+    }
+    key = key.trim();
+    value = value.trim();
+    if (value === "true") {
+      update[key] = true;
+    } else if (value === "false") {
+      update[key] = false;
+    } else {
+      const parsedNumber = parseFloat(value);
+      if (!isNaN(parsedNumber)) {
+        update[key] = parsedNumber;
+      } else {
+        update[key] = value;
+      }
+    }
+  });
+  return update;
+}
+function getHasUneditableRows(metadata) {
+  if (!metadata) {
+    return false;
+  }
+  return Object.values(metadata).some(
+    (value) => !EDITABLE_TYPES.includes(typeof value)
+  );
+}
+const PROMOTION_QUERY_KEY = "promotions";
+const promotionsQueryKeys = {
+  list: (query2) => [
+    PROMOTION_QUERY_KEY,
+    query2 ? query2 : void 0
+  ],
+  detail: (id, query2) => [
+    PROMOTION_QUERY_KEY,
+    id,
+    query2 ? query2 : void 0
+  ]
 };
-const CustomItemForm = ({ orderId, currencyCode }) => {
-  const { setIsOpen } = useStackedModal();
-  const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
-  const form = useForm({
-    defaultValues: {
-      title: "",
-      quantity: 1,
-      unit_price: ""
+const usePromotions = (query2, options) => {
+  const { data, ...rest } = useQuery({
+    queryKey: promotionsQueryKeys.list(query2),
+    queryFn: async () => sdk.admin.promotion.list(query2),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+const useCancelOrderEdit = ({ preview }) => {
+  const { mutateAsync: cancelOrderEdit } = useDraftOrderCancelEdit(preview == null ? void 0 : preview.id);
+  const onCancel = useCallback(async () => {
+    if (!preview) {
+      return true;
+    }
+    let res = false;
+    await cancelOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(e.message);
+      },
+      onSuccess: () => {
+        res = true;
+      }
+    });
+    return res;
+  }, [preview, cancelOrderEdit]);
+  return { onCancel };
+};
+let IS_REQUEST_RUNNING = false;
+const useInitiateOrderEdit = ({
+  preview
+}) => {
+  const navigate = useNavigate();
+  const { mutateAsync } = useDraftOrderBeginEdit(preview == null ? void 0 : preview.id);
+  useEffect(() => {
+    async function run() {
+      if (IS_REQUEST_RUNNING || !preview) {
+        return;
+      }
+      if (preview.order_change) {
+        return;
+      }
+      IS_REQUEST_RUNNING = true;
+      await mutateAsync(void 0, {
+        onError: (e) => {
+          toast.error(e.message);
+          navigate(`/draft-orders/${preview.id}`, { replace: true });
+          return;
+        }
+      });
+      IS_REQUEST_RUNNING = false;
+    }
+    run();
+  }, [preview, navigate, mutateAsync]);
+};
+const Promotions = () => {
+  const { id } = useParams();
+  const {
+    order: preview,
+    isError: isPreviewError,
+    error: previewError
+  } = useOrderPreview(id, void 0);
+  useInitiateOrderEdit({ preview });
+  const { onCancel } = useCancelOrderEdit({ preview });
+  if (isPreviewError) {
+    throw previewError;
+  }
+  const isReady = !!preview;
+  return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
+    /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
+    isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
+  ] });
+};
+const PromotionForm = ({ preview }) => {
+  const { items, shipping_methods } = preview;
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [comboboxValue, setComboboxValue] = useState("");
+  const { handleSuccess } = useRouteModal();
+  const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
+  const promoIds = getPromotionIds(items, shipping_methods);
+  const { promotions, isPending, isError, error } = usePromotions(
+    {
+      id: promoIds
     },
-    resolver: zodResolver(customItemSchema)
+    {
+      enabled: !!promoIds.length
+    }
+  );
+  const comboboxData = useComboboxData({
+    queryKey: ["promotions", "combobox", promoIds],
+    queryFn: async (params) => {
+      return await sdk.admin.promotion.list({
+        ...params,
+        id: {
+          $nin: promoIds
+        }
+      });
+    },
+    getOptions: (data) => {
+      return data.promotions.map((promotion) => ({
+        label: promotion.code,
+        value: promotion.code
+      }));
+    }
   });
-  const onSubmit = form.handleSubmit(async (data) => {
-    await addItems(
+  const add = async (value) => {
+    if (!value) {
+      return;
+    }
+    addPromotions(
       {
-        items: [
-          {
-            title: data.title,
-            quantity: data.quantity,
-            unit_price: convertNumber(data.unit_price)
-          }
-        ]
+        promo_codes: [value]
       },
       {
-        onSuccess: () => {
-          setIsOpen(STACKED_MODAL_ID, false);
-        },
         onError: (e) => {
           toast.error(e.message);
+          comboboxData.onSearchValueChange("");
+          setComboboxValue("");
+        },
+        onSuccess: () => {
+          comboboxData.onSearchValueChange("");
+          setComboboxValue("");
         }
       }
     );
-  });
-  return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxs(StackedFocusModal.Content, { children: [
-    /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
-    /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Add custom item" }) }),
-        /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsx(
-        Form$2.Field,
-        {
-          control: form.control,
-          name: "title",
-          render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Form$2.Label, { children: "Title" }),
-              /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the title of the item" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-            ] })
-          ] }) })
-        }
-      ),
+  };
+  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
+  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const onSubmit = async () => {
+    setIsSubmitting(true);
+    let requestSucceeded = false;
+    await requestOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(e.message);
+      },
+      onSuccess: () => {
+        requestSucceeded = true;
+      }
+    });
+    if (!requestSucceeded) {
+      setIsSubmitting(false);
+      return;
+    }
+    await confirmOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(e.message);
+      },
+      onSuccess: () => {
+        handleSuccess();
+      },
+      onSettled: () => {
+        setIsSubmitting(false);
+      }
+    });
+  };
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
+    /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
+          /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            id: "promotion-combobox",
+            "aria-describedby": "promotion-combobox-hint",
+            isFetchingNextPage: comboboxData.isFetchingNextPage,
+            fetchNextPage: comboboxData.fetchNextPage,
+            options: comboboxData.options,
+            onSearchValueChange: comboboxData.onSearchValueChange,
+            searchValue: comboboxData.searchValue,
+            disabled: comboboxData.disabled || isAddingPromotions,
+            onChange: add,
+            value: comboboxValue
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsx(
-        Form$2.Field,
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
+        PromotionItem,
         {
-          control: form.control,
-          name: "unit_price",
-          render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Form$2.Label, { children: "Unit price" }),
-              /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-                CurrencyInput,
-                {
-                  symbol: getNativeSymbol(currencyCode),
-                  code: currencyCode,
-                  onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
-                  ...field
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-            ] })
-          ] }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+          promotion,
+          orderId: preview.id,
+          isLoading: isPending
+        },
+        promotion.id
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
       /* @__PURE__ */ jsx(
-        Form$2.Field,
+        Button,
         {
-          control: form.control,
-          name: "quantity",
-          render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Form$2.Label, { children: "Quantity" }),
-              /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "w-full flex-1", children: [
-              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(NumberInput, { ...field, className: "w-full" }) }) }),
-              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-            ] })
-          ] }) })
+          size: "small",
+          type: "submit",
+          isLoading: isSubmitting || isAddingPromotions,
+          children: "Save"
         }
       )
-    ] }) }) }),
-    /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
     ] }) })
-  ] }) }) });
-};
-const customItemSchema = objectType({
-  title: stringType().min(1),
-  quantity: numberType(),
-  unit_price: unionType([numberType(), stringType()])
-});
-const InlineTip = forwardRef(
-  ({ variant = "tip", label, className, children, ...props }, ref) => {
-    const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: clx(
-          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "presentation",
-              className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
-                "bg-ui-tag-orange-icon": variant === "warning"
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
-            /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
-              labelValue,
-              ":"
-            ] }),
-            " ",
-            children
-          ] })
-        ]
-      }
-    );
-  }
-);
-InlineTip.displayName = "InlineTip";
-const MetadataFieldSchema = objectType({
-  key: stringType(),
-  disabled: booleanType().optional(),
-  value: anyType()
-});
-const MetadataSchema = objectType({
-  metadata: arrayType(MetadataFieldSchema)
-});
-const Metadata = () => {
-  const { id } = useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "metadata"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!order;
-  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
-      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
-    ] }),
-    !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
   ] });
 };
-const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
-const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
-const MetadataForm = ({ orderId, metadata }) => {
-  const { handleSuccess } = useRouteModal();
-  const hasUneditableRows = getHasUneditableRows(metadata);
-  const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
-  const form = useForm({
-    defaultValues: {
-      metadata: getDefaultValues(metadata)
-    },
-    resolver: zodResolver(MetadataSchema)
-  });
-  const handleSubmit = form.handleSubmit(async (data) => {
-    const parsedData = parseValues(data);
-    await mutateAsync(
+const PromotionItem = ({
+  promotion,
+  orderId,
+  isLoading
+}) => {
+  var _a;
+  const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
+  const onRemove = async () => {
+    removePromotions(
       {
-        metadata: parsedData
+        promo_codes: [promotion.code]
       },
       {
-        onSuccess: () => {
-          toast.success("Metadata updated");
-          handleSuccess();
-        },
-        onError: (error) => {
-          toast.error(error.message);
+        onError: (e) => {
+          toast.error(e.message);
         }
       }
     );
-  });
-  const { fields, insert, remove } = useFieldArray({
-    control: form.control,
-    name: "metadata"
-  });
-  function deleteRow(index) {
-    remove(index);
-    if (fields.length === 1) {
-      insert(0, {
-        key: "",
-        value: "",
-        disabled: false
-      });
-    }
-  }
-  function insertRow(index, position) {
-    insert(index + (position === "above" ? 0 : 1), {
-      key: "",
-      value: "",
-      disabled: false
-    });
-  }
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
-    KeyboundForm,
+  };
+  const displayValue = getDisplayValue(promotion);
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      onSubmit: handleSubmit,
-      className: "flex flex-1 flex-col overflow-hidden",
+      className: clx(
+        "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
+        {
+          "animate-pulse": isLoading
+        }
+      ),
       children: [
-        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
-          /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
-              /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
-              /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
+          /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
+            displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
+              /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
             ] }),
-            fields.map((field, index) => {
-              const isDisabled = field.disabled || false;
-              let placeholder = "-";
-              if (typeof field.value === "object") {
-                placeholder = "{ ... }";
-              }
-              if (Array.isArray(field.value)) {
-                placeholder = "[ ... ]";
-              }
-              return /* @__PURE__ */ jsx(
-                ConditionalTooltip,
-                {
-                  showTooltip: isDisabled,
-                  content: "This row is disabled because it contains non-primitive data.",
-                  children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: clx("grid grid-cols-2 divide-x", {
-                          "overflow-hidden rounded-b-lg": index === fields.length - 1
-                        }),
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            Form$2.Field,
-                            {
-                              control: form.control,
-                              name: `metadata.${index}.key`,
-                              render: ({ field: field2 }) => {
-                                return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-                                  GridInput,
-                                  {
-                                    "aria-labelledby": METADATA_KEY_LABEL_ID,
-                                    ...field2,
-                                    disabled: isDisabled,
-                                    placeholder: "Key"
-                                  }
-                                ) }) });
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            Form$2.Field,
-                            {
-                              control: form.control,
-                              name: `metadata.${index}.value`,
-                              render: ({ field: { value, ...field2 } }) => {
-                                return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-                                  GridInput,
-                                  {
-                                    "aria-labelledby": METADATA_VALUE_LABEL_ID,
-                                    ...field2,
-                                    value: isDisabled ? placeholder : value,
-                                    disabled: isDisabled,
-                                    placeholder: "Value"
-                                  }
-                                ) }) });
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-                      /* @__PURE__ */ jsx(
-                        DropdownMenu.Trigger,
-                        {
-                          className: clx(
-                            "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
-                            {
-                              hidden: isDisabled
-                            }
-                          ),
-                          disabled: isDisabled,
-                          asChild: true,
-                          children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
-                        /* @__PURE__ */ jsxs(
-                          DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => insertRow(index, "above"),
-                            children: [
-                              /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
-                              "Insert row above"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs(
-                          DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => insertRow(index, "below"),
-                            children: [
-                              /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
-                              "Insert row below"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-                        /* @__PURE__ */ jsxs(
-                          DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => deleteRow(index),
-                            children: [
-                              /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
-                              "Delete row"
-                            ]
-                          }
-                        )
-                      ] })
-                    ] })
-                  ] })
-                },
-                field.id
-              );
-            })
-          ] }),
-          hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
+            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            type: "button",
+            variant: "transparent",
+            onClick: onRemove,
+            isLoading: isPending || isLoading,
+            children: /* @__PURE__ */ jsx(XMark, {})
+          }
+        )
       ]
-    }
-  ) });
-};
-const GridInput = forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      ...props,
-      autoComplete: "off",
-      className: clx(
-        "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
-        className
-      )
-    }
+    },
+    promotion.id
   );
-});
-GridInput.displayName = "MetadataForm.GridInput";
-const PlaceholderInner = () => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
-    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
-    ] }) })
-  ] });
 };
-const EDITABLE_TYPES = ["string", "number", "boolean"];
-function getDefaultValues(metadata) {
-  if (!metadata || !Object.keys(metadata).length) {
-    return [
-      {
-        key: "",
-        value: "",
-        disabled: false
-      }
-    ];
+function getDisplayValue(promotion) {
+  var _a, _b, _c, _d;
+  const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
+  if (!value) {
+    return null;
   }
-  return Object.entries(metadata).map(([key, value]) => {
-    if (!EDITABLE_TYPES.includes(typeof value)) {
-      return {
-        key,
-        value,
-        disabled: true
-      };
-    }
-    let stringValue = value;
-    if (typeof value !== "string") {
-      stringValue = JSON.stringify(value);
+  if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
+    const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
+    if (!currency) {
+      return null;
     }
-    return {
-      key,
-      value: stringValue,
-      original_key: key
-    };
-  });
+    return getLocaleAmount(value, currency);
+  } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
+    return formatPercentage(value);
+  }
+  return null;
 }
-function parseValues(values) {
-  const metadata = values.metadata;
-  const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
-  if (isEmpty) {
-    return null;
+const formatter = new Intl.NumberFormat([], {
+  style: "percent",
+  minimumFractionDigits: 2
+});
+const formatPercentage = (value, isPercentageValue = false) => {
+  let val = value || 0;
+  if (!isPercentageValue) {
+    val = val / 100;
   }
-  const update = {};
-  metadata.forEach((field) => {
-    let key = field.key;
-    let value = field.value;
-    const disabled = field.disabled;
-    if (!key || !value) {
-      return;
+  return formatter.format(val);
+};
+function getPromotionIds(items, shippingMethods) {
+  const promotionIds = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (item.adjustments) {
+      for (const adjustment of item.adjustments) {
+        if (adjustment.promotion_id) {
+          promotionIds.add(adjustment.promotion_id);
+        }
+      }
     }
-    if (disabled) {
-      update[key] = value;
-      return;
+  }
+  for (const shippingMethod of shippingMethods) {
+    if (shippingMethod.adjustments) {
+      for (const adjustment of shippingMethod.adjustments) {
+        if (adjustment.promotion_id) {
+          promotionIds.add(adjustment.promotion_id);
+        }
+      }
     }
-    key = key.trim();
-    value = value.trim();
-    if (value === "true") {
-      update[key] = true;
-    } else if (value === "false") {
-      update[key] = false;
-    } else {
-      const parsedNumber = parseFloat(value);
-      if (!isNaN(parsedNumber)) {
-        update[key] = parsedNumber;
-      } else {
-        update[key] = value;
-      }
-    }
-  });
-  return update;
-}
-function getHasUneditableRows(metadata) {
-  if (!metadata) {
-    return false;
   }
-  return Object.values(metadata).some(
-    (value) => !EDITABLE_TYPES.includes(typeof value)
-  );
+  return Array.from(promotionIds);
 }
-const PROMOTION_QUERY_KEY = "promotions";
-const promotionsQueryKeys = {
-  list: (query2) => [
-    PROMOTION_QUERY_KEY,
-    query2 ? query2 : void 0
-  ],
-  detail: (id, query2) => [
-    PROMOTION_QUERY_KEY,
-    id,
-    query2 ? query2 : void 0
-  ]
-};
-const usePromotions = (query2, options) => {
-  const { data, ...rest } = useQuery({
-    queryKey: promotionsQueryKeys.list(query2),
-    queryFn: async () => sdk.admin.promotion.list(query2),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-const Promotions = () => {
+function convertNumber(value) {
+  return typeof value === "string" ? Number(value.replace(",", ".")) : value;
+}
+const STACKED_FOCUS_MODAL_ID = "shipping-form";
+const Shipping = () => {
+  var _a;
   const { id } = useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
+  });
   const {
     order: preview,
+    isPending: isPreviewPending,
     isError: isPreviewError,
     error: previewError
-  } = useOrderPreview(id, void 0);
+  } = useOrderPreview(id);
   useInitiateOrderEdit({ preview });
   const { onCancel } = useCancelOrderEdit({ preview });
+  if (isError) {
+    throw error;
+  }
   if (isPreviewError) {
     throw previewError;
   }
-  const isReady = !!preview;
-  return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
-    /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
-    isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
-  ] });
+  const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
+  const isReady = preview && !isPreviewPending && order && !isPending;
+  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
+      /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
+      /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
+  ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
+  ] }) });
 };
-const PromotionForm = ({ preview }) => {
-  const { items, shipping_methods } = preview;
+const ShippingForm = ({ preview, order }) => {
+  var _a;
+  const { setIsOpen } = useStackedModal();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [comboboxValue, setComboboxValue] = useState("");
-  const { handleSuccess } = useRouteModal();
-  const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
-  const promoIds = getPromotionIds(items, shipping_methods);
-  const { promotions, isPending, isError, error } = usePromotions(
+  const [data, setData] = useState(null);
+  const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
+  const { shipping_options } = useShippingOptions(
     {
-      id: promoIds
+      id: appliedShippingOptionIds,
+      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
     },
     {
-      enabled: !!promoIds.length
+      enabled: appliedShippingOptionIds.length > 0
     }
   );
-  const comboboxData = useComboboxData({
-    queryKey: ["promotions", "combobox", promoIds],
-    queryFn: async (params) => {
-      return await sdk.admin.promotion.list({
-        ...params,
-        id: {
-          $nin: promoIds
-        }
-      });
-    },
-    getOptions: (data) => {
-      return data.promotions.map((promotion) => ({
-        label: promotion.code,
-        value: promotion.code
-      }));
-    }
-  });
-  const add = async (value) => {
-    if (!value) {
-      return;
-    }
-    addPromotions(
-      {
-        promo_codes: [value]
-      },
-      {
-        onError: (e) => {
-          toast.error(e.message);
-          comboboxData.onSearchValueChange("");
-          setComboboxValue("");
-        },
-        onSuccess: () => {
-          comboboxData.onSearchValueChange("");
-          setComboboxValue("");
-        }
-      }
-    );
-  };
+  const uniqueShippingProfiles = useMemo(() => {
+    const profiles = /* @__PURE__ */ new Map();
+    getUniqueShippingProfiles(order.items).forEach((profile) => {
+      profiles.set(profile.id, profile);
+    });
+    shipping_options == null ? void 0 : shipping_options.forEach((option) => {
+      profiles.set(option.shipping_profile_id, option.shipping_profile);
+    });
+    return Array.from(profiles.values());
+  }, [order.items, shipping_options]);
+  const { handleSuccess } = useRouteModal();
   const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
-  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
+  const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
+  const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
   const onSubmit = async () => {
     setIsSubmitting(true);
     let requestSucceeded = false;
     await requestOrderEdit(void 0, {
       onError: (e) => {
-        toast.error(e.message);
+        toast.error(`Failed to request order edit: ${e.message}`);
       },
       onSuccess: () => {
         requestSucceeded = true;
@@ -11280,7 +10604,7 @@ const PromotionForm = ({ preview }) => {
     }
     await confirmOrderEdit(void 0, {
       onError: (e) => {
-        toast.error(e.message);
+        toast.error(`Failed to confirm order edit: ${e.message}`);
       },
       onSuccess: () => {
         handleSuccess();
@@ -11290,382 +10614,27 @@ const PromotionForm = ({ preview }) => {
       }
     });
   };
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
-    /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
-          /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Combobox,
-          {
-            id: "promotion-combobox",
-            "aria-describedby": "promotion-combobox-hint",
-            isFetchingNextPage: comboboxData.isFetchingNextPage,
-            fetchNextPage: comboboxData.fetchNextPage,
-            options: comboboxData.options,
-            onSearchValueChange: comboboxData.onSearchValueChange,
-            searchValue: comboboxData.searchValue,
-            disabled: comboboxData.disabled || isAddingPromotions,
-            onChange: add,
-            value: comboboxValue
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
-        PromotionItem,
-        {
-          promotion,
-          orderId: preview.id,
-          isLoading: isPending
-        },
-        promotion.id
-      )) })
-    ] }) }),
-    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "small",
-          type: "submit",
-          isLoading: isSubmitting || isAddingPromotions,
-          children: "Save"
-        }
-      )
-    ] }) })
-  ] });
-};
-const PromotionItem = ({
-  promotion,
-  orderId,
-  isLoading
-}) => {
-  var _a;
-  const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
-  const onRemove = async () => {
-    removePromotions(
-      {
-        promo_codes: [promotion.code]
-      },
-      {
-        onError: (e) => {
-          toast.error(e.message);
+  const onKeydown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        if (data || isSubmitting) {
+          return;
         }
+        onSubmit();
       }
-    );
-  };
-  const displayValue = getDisplayValue(promotion);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clx(
-        "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
-        {
-          "animate-pulse": isLoading
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
-          /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
-            displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
-              /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
-            ] }),
-            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "small",
-            type: "button",
-            variant: "transparent",
-            onClick: onRemove,
-            isLoading: isPending || isLoading,
-            children: /* @__PURE__ */ jsx(XMark, {})
-          }
-        )
-      ]
-    },
-    promotion.id
-  );
-};
-function getDisplayValue(promotion) {
-  var _a, _b, _c, _d;
-  const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
-  if (!value) {
-    return null;
-  }
-  if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
-    const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
-    if (!currency) {
-      return null;
-    }
-    return getLocaleAmount(value, currency);
-  } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
-    return formatPercentage(value);
-  }
-  return null;
-}
-const formatter = new Intl.NumberFormat([], {
-  style: "percent",
-  minimumFractionDigits: 2
-});
-const formatPercentage = (value, isPercentageValue = false) => {
-  let val = value || 0;
-  if (!isPercentageValue) {
-    val = val / 100;
-  }
-  return formatter.format(val);
-};
-function getPromotionIds(items, shippingMethods) {
-  const promotionIds = /* @__PURE__ */ new Set();
-  for (const item of items) {
-    if (item.adjustments) {
-      for (const adjustment of item.adjustments) {
-        if (adjustment.promotion_id) {
-          promotionIds.add(adjustment.promotion_id);
-        }
-      }
-    }
-  }
-  for (const shippingMethod of shippingMethods) {
-    if (shippingMethod.adjustments) {
-      for (const adjustment of shippingMethod.adjustments) {
-        if (adjustment.promotion_id) {
-          promotionIds.add(adjustment.promotion_id);
-        }
-      }
-    }
-  }
-  return Array.from(promotionIds);
-}
-const SalesChannel = () => {
-  const { id } = useParams();
-  const { draft_order, isPending, isError, error } = useDraftOrder(
-    id,
-    {
-      fields: "+sales_channel_id"
-    },
-    {
-      enabled: !!id
-    }
-  );
-  if (isError) {
-    throw error;
-  }
-  const ISrEADY = !!draft_order && !isPending;
-  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
-      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
-    ] }),
-    ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
-  ] });
-};
-const SalesChannelForm = ({ order }) => {
-  const form = useForm({
-    defaultValues: {
-      sales_channel_id: order.sales_channel_id || ""
-    },
-    resolver: zodResolver(schema$2)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      {
-        sales_channel_id: data.sales_channel_id
-      },
-      {
-        onSuccess: () => {
-          toast.success("Sales channel updated");
-          handleSuccess();
-        },
-        onError: (error) => {
-          toast.error(error.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
-    KeyboundForm,
-    {
-      className: "flex flex-1 flex-col overflow-hidden",
-      onSubmit,
-      children: [
-        /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
-        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const SalesChannelField = ({ control, order }) => {
-  const salesChannels = useComboboxData({
-    queryFn: async (params) => {
-      return await sdk.admin.salesChannel.list(params);
-    },
-    queryKey: ["sales-channels"],
-    getOptions: (data) => {
-      return data.sales_channels.map((salesChannel) => ({
-        label: salesChannel.name,
-        value: salesChannel.id
-      }));
-    },
-    defaultValue: order.sales_channel_id || void 0
-  });
-  return /* @__PURE__ */ jsx(
-    Form$2.Field,
-    {
-      control,
-      name: "sales_channel_id",
-      render: ({ field }) => {
-        return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-          /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
-          /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-            Combobox,
-            {
-              options: salesChannels.options,
-              fetchNextPage: salesChannels.fetchNextPage,
-              isFetchingNextPage: salesChannels.isFetchingNextPage,
-              searchValue: salesChannels.searchValue,
-              onSearchValueChange: salesChannels.onSearchValueChange,
-              placeholder: "Select sales channel",
-              ...field
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-        ] });
-      }
-    }
-  );
-};
-const schema$2 = objectType({
-  sales_channel_id: stringType().min(1)
-});
-const STACKED_FOCUS_MODAL_ID = "shipping-form";
-const Shipping = () => {
-  var _a;
-  const { id } = useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
-  });
-  const {
-    order: preview,
-    isPending: isPreviewPending,
-    isError: isPreviewError,
-    error: previewError
-  } = useOrderPreview(id);
-  useInitiateOrderEdit({ preview });
-  const { onCancel } = useCancelOrderEdit({ preview });
-  if (isError) {
-    throw error;
-  }
-  if (isPreviewError) {
-    throw previewError;
-  }
-  const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
-  const isReady = preview && !isPreviewPending && order && !isPending;
-  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
-    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
-      /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
-      /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
-  ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
-    /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
-  ] }) });
-};
-const ShippingForm = ({ preview, order }) => {
-  var _a;
-  const { setIsOpen } = useStackedModal();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [data, setData] = useState(null);
-  const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
-  const { shipping_options } = useShippingOptions(
-    {
-      id: appliedShippingOptionIds,
-      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
-    },
-    {
-      enabled: appliedShippingOptionIds.length > 0
-    }
-  );
-  const uniqueShippingProfiles = useMemo(() => {
-    const profiles = /* @__PURE__ */ new Map();
-    getUniqueShippingProfiles(order.items).forEach((profile) => {
-      profiles.set(profile.id, profile);
-    });
-    shipping_options == null ? void 0 : shipping_options.forEach((option) => {
-      profiles.set(option.shipping_profile_id, option.shipping_profile);
-    });
-    return Array.from(profiles.values());
-  }, [order.items, shipping_options]);
-  const { handleSuccess } = useRouteModal();
-  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
-  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
-  const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
-  const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
-  const onSubmit = async () => {
-    setIsSubmitting(true);
-    let requestSucceeded = false;
-    await requestOrderEdit(void 0, {
-      onError: (e) => {
-        toast.error(`Failed to request order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        requestSucceeded = true;
-      }
-    });
-    if (!requestSucceeded) {
-      setIsSubmitting(false);
-      return;
-    }
-    await confirmOrderEdit(void 0, {
-      onError: (e) => {
-        toast.error(`Failed to confirm order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        handleSuccess();
-      },
-      onSettled: () => {
-        setIsSubmitting(false);
-      }
-    });
-  };
-  const onKeydown = useCallback(
-    (e) => {
-      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-        if (data || isSubmitting) {
-          return;
-        }
-        onSubmit();
-      }
-    },
-    [data, isSubmitting, onSubmit]
-  );
-  useEffect(() => {
-    document.addEventListener("keydown", onKeydown);
-    return () => {
-      document.removeEventListener("keydown", onKeydown);
-    };
-  }, [onKeydown]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
-    /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
+    },
+    [data, isSubmitting, onSubmit]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", onKeydown);
+    return () => {
+      document.removeEventListener("keydown", onKeydown);
+    };
+  }, [onKeydown]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+    /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
           /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
@@ -11860,7 +10829,7 @@ const ShippingForm = ({ preview, order }) => {
                         ]
                       }
                     ) : /* @__PURE__ */ jsx(
-                      StackedModalTrigger,
+                      StackedModalTrigger$1,
                       {
                         shippingProfileId: profile.id,
                         shippingOption,
@@ -11971,7 +10940,7 @@ const ShippingForm = ({ preview, order }) => {
     ] }) })
   ] });
 };
-const StackedModalTrigger = ({
+const StackedModalTrigger$1 = ({
   shippingProfileId,
   shippingOption,
   shippingMethod,
@@ -12392,7 +11361,7 @@ const ShippingAddressForm = ({ order }) => {
       postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
       phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
     },
-    resolver: zodResolver(schema$1)
+    resolver: zodResolver(schema$2)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -12562,7 +11531,7 @@ const ShippingAddressForm = ({ order }) => {
     }
   ) });
 };
-const schema$1 = addressSchema;
+const schema$2 = addressSchema;
 const TransferOwnership = () => {
   const { id } = useParams();
   const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12586,7 +11555,7 @@ const TransferOwnershipForm = ({ order }) => {
     defaultValues: {
       customer_id: order.customer_id || ""
     },
-    resolver: zodResolver(schema)
+    resolver: zodResolver(schema$1)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -12855,189 +11824,1220 @@ const Illustration = () => {
         /* @__PURE__ */ jsx(
           "rect",
           {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
-            fill: "#D4D4D8"
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
+            fill: "#D4D4D8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "17",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
+            fill: "#D4D4D8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
+            fill: "#D4D4D8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
+            fill: "#A1A1AA"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "17",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
+            fill: "#A1A1AA"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
+            fill: "#A1A1AA"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
+            fill: "#52525B"
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
           {
-            width: "17",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
-            fill: "#D4D4D8"
+            d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
           {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
-            fill: "#D4D4D8"
+            d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
           "path",
           {
-            d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
-            fill: "#A1A1AA"
-          }
+            d: "M146.894 101.198L139.51 101.155L139.486 105.365",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+const schema$1 = objectType({
+  customer_id: stringType().min(1)
+});
+const SalesChannel = () => {
+  const { id } = useParams();
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
+    {
+      fields: "+sales_channel_id"
+    },
+    {
+      enabled: !!id
+    }
+  );
+  if (isError) {
+    throw error;
+  }
+  const ISrEADY = !!draft_order && !isPending;
+  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
+    ] }),
+    ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
+  ] });
+};
+const SalesChannelForm = ({ order }) => {
+  const form = useForm({
+    defaultValues: {
+      sales_channel_id: order.sales_channel_id || ""
+    },
+    resolver: zodResolver(schema)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        sales_channel_id: data.sales_channel_id
+      },
+      {
+        onSuccess: () => {
+          toast.success("Sales channel updated");
+          handleSuccess();
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const SalesChannelField = ({ control, order }) => {
+  const salesChannels = useComboboxData({
+    queryFn: async (params) => {
+      return await sdk.admin.salesChannel.list(params);
+    },
+    queryKey: ["sales-channels"],
+    getOptions: (data) => {
+      return data.sales_channels.map((salesChannel) => ({
+        label: salesChannel.name,
+        value: salesChannel.id
+      }));
+    },
+    defaultValue: order.sales_channel_id || void 0
+  });
+  return /* @__PURE__ */ jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "sales_channel_id",
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+          /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
+          /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+            Combobox,
+            {
+              options: salesChannels.options,
+              fetchNextPage: salesChannels.fetchNextPage,
+              isFetchingNextPage: salesChannels.isFetchingNextPage,
+              searchValue: salesChannels.searchValue,
+              onSearchValueChange: salesChannels.onSearchValueChange,
+              placeholder: "Select sales channel",
+              ...field
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+        ] });
+      }
+    }
+  );
+};
+const schema = objectType({
+  sales_channel_id: stringType().min(1)
+});
+const NumberInput = forwardRef(
+  ({
+    value,
+    onChange,
+    size = "base",
+    min = 0,
+    max = 100,
+    step = 1,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    const handleChange = (event) => {
+      const newValue = event.target.value === "" ? min : Number(event.target.value);
+      if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
+        onChange(newValue);
+      }
+    };
+    const handleIncrement = () => {
+      const newValue = value + step;
+      if (max === void 0 || newValue <= max) {
+        onChange(newValue);
+      }
+    };
+    const handleDecrement = () => {
+      const newValue = value - step;
+      if (min === void 0 || newValue >= min) {
+        onChange(newValue);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clx(
+          "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
+          "[&:has(input:focus)]:shadow-borders-interactive-with-active",
+          {
+            "h-7": size === "small",
+            "h-8": size === "base"
+          },
+          className
         ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "17",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
-            fill: "#A1A1AA"
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "number",
+              value,
+              onChange: handleChange,
+              min,
+              max,
+              step,
+              className: clx(
+                "flex-1 px-2 py-1 bg-transparent txt-compact-small text-ui-fg-base outline-none [appearance:textfield]",
+                "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                "placeholder:text-ui-fg-muted"
+              ),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: clx(
+                "flex items-center justify-center outline-none transition-fg",
+                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
+                "focus:bg-ui-bg-field-component-hover",
+                "hover:bg-ui-bg-field-component-hover",
+                {
+                  "size-7": size === "small",
+                  "size-8": size === "base"
+                }
+              ),
+              type: "button",
+              onClick: handleDecrement,
+              disabled: min !== void 0 && value <= min || disabled,
+              children: [
+                /* @__PURE__ */ jsx(Minus, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: clx(
+                "flex items-center justify-center outline-none transition-fg",
+                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
+                "focus:bg-ui-bg-field-hover",
+                "hover:bg-ui-bg-field-hover",
+                {
+                  "size-7": size === "small",
+                  "size-8": size === "base"
+                }
+              ),
+              type: "button",
+              onClick: handleIncrement,
+              disabled: max !== void 0 && value >= max || disabled,
+              children: [
+                /* @__PURE__ */ jsx(Plus, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Increase by ${step}` })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
+const productVariantsQueryKeys = {
+  list: (query2) => [
+    PRODUCT_VARIANTS_QUERY_KEY,
+    query2 ? query2 : void 0
+  ]
+};
+const useProductVariants = (query2, options) => {
+  const { data, ...rest } = useQuery({
+    queryKey: productVariantsQueryKeys.list(query2),
+    queryFn: async () => await sdk.admin.productVariant.list(query2),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+const STACKED_MODAL_ID = "items_stacked_modal";
+const Items = () => {
+  const { id } = useParams();
+  const {
+    order: preview,
+    isPending: isPreviewPending,
+    isError: isPreviewError,
+    error: previewError
+  } = useOrderPreview(id, void 0, {
+    placeholderData: keepPreviousData
+  });
+  useInitiateOrderEdit({ preview });
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
+    {
+      fields: "currency_code"
+    },
+    {
+      enabled: !!id
+    }
+  );
+  const { onCancel } = useCancelOrderEdit({ preview });
+  if (isError) {
+    throw error;
+  }
+  if (isPreviewError) {
+    throw previewError;
+  }
+  const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
+  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: ready ? /* @__PURE__ */ jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) : /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Items" }) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
+  ] }) });
+};
+const ItemsForm = ({ preview, currencyCode }) => {
+  var _a;
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [modalContent, setModalContent] = useState(
+    null
+  );
+  const { handleSuccess } = useRouteModal();
+  const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
+  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
+  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
+  const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
+  const matches = useMemo(() => {
+    return matchSorter(preview.items, query2, {
+      keys: ["product_title", "variant_title", "variant_sku", "title"]
+    });
+  }, [preview.items, query2]);
+  const onSubmit = async () => {
+    setIsSubmitting(true);
+    let requestSucceeded = false;
+    await requestOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(`Failed to request order edit: ${e.message}`);
+      },
+      onSuccess: () => {
+        requestSucceeded = true;
+      }
+    });
+    if (!requestSucceeded) {
+      setIsSubmitting(false);
+      return;
+    }
+    await confirmOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(`Failed to confirm order edit: ${e.message}`);
+      },
+      onSuccess: () => {
+        handleSuccess();
+      },
+      onSettled: () => {
+        setIsSubmitting(false);
+      }
+    });
+  };
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        if (modalContent || isSubmitting) {
+          return;
+        }
+        onSubmit();
+      }
+    },
+    [modalContent, isSubmitting, onSubmit]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxs(
+      StackedFocusModal,
+      {
+        id: STACKED_MODAL_ID,
+        onOpenChangeCallback: (open) => {
+          if (!open) {
+            setModalContent(null);
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
-            fill: "#A1A1AA"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Items" }) }),
+              /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order" }) })
+            ] }),
+            /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "search",
+                      placeholder: "Search items",
+                      value: searchValue,
+                      onChange: (e) => onSearchValueChange(e.target.value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", children: /* @__PURE__ */ jsx(Plus, {}) }) }),
+                    /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+                      /* @__PURE__ */ jsx(
+                        StackedModalTrigger,
+                        {
+                          type: "add-items",
+                          setModalContent
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        StackedModalTrigger,
+                        {
+                          type: "add-custom-item",
+                          setModalContent
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+                /* @__PURE__ */ jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-muted grid grid-cols-[2fr_1fr_2fr_28px] gap-3 px-4 py-2", children: [
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Price" }) }),
+                  /* @__PURE__ */ jsx("div", {})
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add items to the order to get started." })
+                ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsx(
+                  Item,
+                  {
+                    item,
+                    preview,
+                    currencyCode
+                  },
+                  item.id
+                )) : /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
+                  /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
+                    'No items found for "',
+                    query2,
+                    '".'
+                  ] })
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  size: "small",
+                  leading: "compact",
+                  className: "text-ui-fg-subtle",
+                  children: [
+                    itemCount,
+                    " ",
+                    itemCount === 1 ? "item" : "items"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
+            ] })
+          ] }) }),
+          modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsx(
+            CustomItemForm,
+            {
+              orderId: preview.id,
+              currencyCode
+            }
+          ) : null)
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          type: "button",
+          onClick: onSubmit,
+          isLoading: isSubmitting,
+          children: "Save"
+        }
+      )
+    ] }) })
+  ] });
+};
+const Item = ({ item, preview, currencyCode }) => {
+  if (item.variant_id) {
+    return /* @__PURE__ */ jsx(VariantItem, { item, preview, currencyCode });
+  }
+  return /* @__PURE__ */ jsx(CustomItem, { item, preview, currencyCode });
+};
+const VariantItem = ({ item, preview, currencyCode }) => {
+  const [editing, setEditing] = useState(false);
+  const form = useForm({
+    defaultValues: {
+      quantity: item.quantity,
+      unit_price: item.unit_price
+    },
+    resolver: zodResolver(variantItemSchema)
+  });
+  const actionId = useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
+  }, [item]);
+  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
+  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
+  const onSubmit = form.handleSubmit(async (data) => {
+    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
+      setEditing(false);
+      return;
+    }
+    if (!actionId) {
+      await updateOriginalItem(
+        {
+          item_id: item.id,
+          quantity: data.quantity,
+          unit_price: convertNumber(data.unit_price)
+        },
+        {
+          onSuccess: () => {
+            setEditing(false);
+          },
+          onError: (e) => {
+            toast.error(e.message);
           }
-        ),
+        }
+      );
+      return;
+    }
+    await updateActionItem(
+      {
+        action_id: actionId,
+        quantity: data.quantity,
+        unit_price: convertNumber(data.unit_price)
+      },
+      {
+        onSuccess: () => {
+          setEditing(false);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx(
+        Thumbnail,
+        {
+          thumbnail: item.thumbnail,
+          alt: item.product_title ?? void 0
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+          /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
+          /* @__PURE__ */ jsxs(
+            Text,
+            {
+              size: "small",
+              leading: "compact",
+              className: "text-ui-fg-subtle",
+              children: [
+                "(",
+                item.variant_title,
+                ")"
+              ]
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
-            fill: "#52525B"
-          }
-        ),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
+          Text,
           {
-            d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            size: "small",
+            leading: "compact",
+            className: "text-ui-fg-subtle",
+            children: item.variant_sku
           }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+        )
+      ] })
+    ] }),
+    editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "quantity",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
+        }
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }) }),
+    editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "unit_price",
+        render: ({ field: { onChange, ...field } }) => {
+          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+            CurrencyInput,
+            {
+              ...field,
+              symbol: getNativeSymbol(currencyCode),
+              code: currencyCode,
+              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
+            }
+          ) }) });
+        }
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        type: "button",
+        size: "small",
+        onClick: editing ? onSubmit : () => {
+          setEditing(true);
+        },
+        disabled: isPending,
+        children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
+      }
+    )
+  ] }) }) });
+};
+const variantItemSchema = objectType({
+  quantity: numberType(),
+  unit_price: unionType([numberType(), stringType()])
+});
+const CustomItem = ({ item, preview, currencyCode }) => {
+  const [editing, setEditing] = useState(false);
+  const { quantity, unit_price, title } = item;
+  const form = useForm({
+    defaultValues: {
+      title,
+      quantity,
+      unit_price
+    },
+    resolver: zodResolver(customItemSchema)
+  });
+  useEffect(() => {
+    form.reset({
+      title,
+      quantity,
+      unit_price
+    });
+  }, [form, title, quantity, unit_price]);
+  const actionId = useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
+  }, [item]);
+  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
+  const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
+  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
+  const onSubmit = form.handleSubmit(async (data) => {
+    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
+      setEditing(false);
+      return;
+    }
+    if (!actionId) {
+      await updateOriginalItem(
+        {
+          item_id: item.id,
+          quantity: data.quantity,
+          unit_price: convertNumber(data.unit_price)
+        },
+        {
+          onSuccess: () => {
+            setEditing(false);
+          },
+          onError: (e) => {
+            toast.error(e.message);
           }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+        }
+      );
+      return;
+    }
+    if (data.quantity === 0) {
+      await removeActionItem(actionId, {
+        onSuccess: () => {
+          setEditing(false);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      });
+      return;
+    }
+    await updateActionItem(
+      {
+        action_id: actionId,
+        quantity: data.quantity,
+        unit_price: convertNumber(data.unit_price)
+      },
+      {
+        onSuccess: () => {
+          setEditing(false);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx(
+        Thumbnail,
+        {
+          thumbnail: item.thumbnail,
+          alt: item.title ?? void 0
+        }
+      ),
+      editing ? /* @__PURE__ */ jsx(
+        Form$2.Field,
+        {
+          control: form.control,
+          name: "title",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }) });
           }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
+        }
+      ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.title })
+    ] }),
+    editing ? /* @__PURE__ */ jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "quantity",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
+        }
+      }
+    ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }),
+    editing ? /* @__PURE__ */ jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "unit_price",
+        render: ({ field: { onChange, ...field } }) => {
+          return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+            CurrencyInput,
+            {
+              ...field,
+              symbol: getNativeSymbol(currencyCode),
+              code: currencyCode,
+              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
+            }
+          ) }) });
+        }
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        type: "button",
+        size: "small",
+        onClick: editing ? onSubmit : () => {
+          setEditing(true);
+        },
+        disabled: isPending,
+        children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
+      }
+    )
+  ] }) }) });
+};
+const StackedModalTrigger = ({
+  type,
+  setModalContent
+}) => {
+  const { setIsOpen } = useStackedModal();
+  const onClick = useCallback(() => {
+    setModalContent(type);
+    setIsOpen(STACKED_MODAL_ID, true);
+  }, [setModalContent, setIsOpen, type]);
+  return /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
+};
+const VARIANT_PREFIX = "items";
+const LIMIT = 50;
+const ExistingItemsForm = ({ orderId, items }) => {
+  const { setIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = useState(
+    items.reduce((acc, item) => {
+      acc[item.variant_id] = true;
+      return acc;
+    }, {})
+  );
+  useEffect(() => {
+    setRowSelection(
+      items.reduce((acc, item) => {
+        if (item.variant_id) {
+          acc[item.variant_id] = true;
+        }
+        return acc;
+      }, {})
+    );
+  }, [items]);
+  const { q, order, offset } = useQueryParams(
+    ["q", "order", "offset"],
+    VARIANT_PREFIX
+  );
+  const { variants, count, isPending, isError, error } = useProductVariants(
+    {
+      q,
+      order,
+      offset: offset ? parseInt(offset) : void 0,
+      limit: LIMIT
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useColumns();
+  const { mutateAsync } = useDraftOrderAddItems(orderId);
+  const onSubmit = async () => {
+    const ids = Object.keys(rowSelection).filter(
+      (id) => !items.find((i) => i.variant_id === id)
+    );
+    await mutateAsync(
+      {
+        items: ids.map((id) => ({
+          variant_id: id,
+          quantity: 1
+        }))
+      },
+      {
+        onSuccess: () => {
+          setRowSelection({});
+          setIsOpen(STACKED_MODAL_ID, false);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  };
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs(
+    StackedFocusModal.Content,
+    {
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+        const searchInput = document.querySelector(
+          "[data-modal-id='modal-search-input']"
+        );
+        if (searchInput) {
+          searchInput.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
+          /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Product Variants" }) }),
+          /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
+        ] }),
+        /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+          DataTable,
           {
-            d: "M146.894 101.198L139.51 101.155L139.486 105.365",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            data: variants,
+            columns,
+            isLoading: isPending,
+            getRowId: (row) => row.id,
+            rowCount: count,
+            prefix: VARIANT_PREFIX,
+            layout: "fill",
+            rowSelection: {
+              state: rowSelection,
+              onRowSelectionChange: setRowSelection,
+              enableRowSelection: (row) => {
+                return !items.find((i) => i.variant_id === row.original.id);
+              }
+            },
+            autoFocusSearch: true
           }
         ) }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
+        /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
+        ] }) })
+      ]
+    }
+  );
+};
+const columnHelper = createDataTableColumnHelper();
+const useColumns = () => {
+  return useMemo(() => {
+    return [
+      columnHelper.select(),
+      columnHelper.accessor("product.title", {
+        header: "Product",
+        cell: ({ row }) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Thumbnail,
+              {
+                thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
+                alt: (_b = row.original.product) == null ? void 0 : _b.title
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
+          ] });
+        },
+        enableSorting: true
+      }),
+      columnHelper.accessor("title", {
+        header: "Variant",
+        enableSorting: true
+      }),
+      columnHelper.accessor("sku", {
+        header: "SKU",
+        cell: ({ getValue }) => {
+          return getValue() ?? "-";
+        },
+        enableSorting: true
+      }),
+      columnHelper.accessor("updated_at", {
+        header: "Updated",
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx(
+            Tooltip,
             {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
+              content: getFullDate({ date: getValue(), includeTime: true }),
+              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
             }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Oldest first",
+        sortDescLabel: "Newest first"
+      }),
+      columnHelper.accessor("created_at", {
+        header: "Created",
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx(
+            Tooltip,
             {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
+              content: getFullDate({ date: getValue(), includeTime: true }),
+              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
             }
-          ) })
-        ] })
-      ]
-    }
-  );
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Oldest first",
+        sortDescLabel: "Newest first"
+      })
+    ];
+  }, []);
 };
-const schema = objectType({
-  customer_id: stringType().min(1)
+const CustomItemForm = ({ orderId, currencyCode }) => {
+  const { setIsOpen } = useStackedModal();
+  const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
+  const form = useForm({
+    defaultValues: {
+      title: "",
+      quantity: 1,
+      unit_price: ""
+    },
+    resolver: zodResolver(customItemSchema)
+  });
+  const onSubmit = form.handleSubmit(async (data) => {
+    await addItems(
+      {
+        items: [
+          {
+            title: data.title,
+            quantity: data.quantity,
+            unit_price: convertNumber(data.unit_price)
+          }
+        ]
+      },
+      {
+        onSuccess: () => {
+          setIsOpen(STACKED_MODAL_ID, false);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxs(StackedFocusModal.Content, { children: [
+    /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
+    /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Add custom item" }) }),
+        /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+      /* @__PURE__ */ jsx(
+        Form$2.Field,
+        {
+          control: form.control,
+          name: "title",
+          render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Form$2.Label, { children: "Title" }),
+              /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the title of the item" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+            ] })
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+      /* @__PURE__ */ jsx(
+        Form$2.Field,
+        {
+          control: form.control,
+          name: "unit_price",
+          render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Form$2.Label, { children: "Unit price" }),
+              /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+                CurrencyInput,
+                {
+                  symbol: getNativeSymbol(currencyCode),
+                  code: currencyCode,
+                  onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+            ] })
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+      /* @__PURE__ */ jsx(
+        Form$2.Field,
+        {
+          control: form.control,
+          name: "quantity",
+          render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Form$2.Label, { children: "Quantity" }),
+              /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "w-full flex-1", children: [
+              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(NumberInput, { ...field, className: "w-full" }) }) }),
+              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+            ] })
+          ] }) })
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
+    ] }) })
+  ] }) }) });
+};
+const customItemSchema = objectType({
+  title: stringType().min(1),
+  quantity: numberType(),
+  unit_price: unionType([numberType(), stringType()])
 });
 const widgetModule = { widgets: [] };
 const routeModule = {
@@ -13071,10 +13071,6 @@ const routeModule = {
           Component: Email,
           path: "/draft-orders/:id/email"
         },
-        {
-          Component: Items,
-          path: "/draft-orders/:id/items"
-        },
         {
           Component: Metadata,
           path: "/draft-orders/:id/metadata"
@@ -13083,10 +13079,6 @@ const routeModule = {
           Component: Promotions,
           path: "/draft-orders/:id/promotions"
         },
-        {
-          Component: SalesChannel,
-          path: "/draft-orders/:id/sales-channel"
-        },
         {
           Component: Shipping,
           path: "/draft-orders/:id/shipping"
@@ -13098,6 +13090,14 @@ const routeModule = {
         {
           Component: TransferOwnership,
           path: "/draft-orders/:id/transfer-ownership"
+        },
+        {
+          Component: SalesChannel,
+          path: "/draft-orders/:id/sales-channel"
+        },
+        {
+          Component: Items,
+          path: "/draft-orders/:id/items"
         }
       ]
     }