@medusajs/draft-order 0.0.14 → 2.10.0-snapshot-20250826181741

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

@@ -7869,6 +7869,13 @@ const AddressField = ({ type, control, setValue }) => {
   const customerId = useWatch({ control, name: "customer_id" });
   const addressId = useWatch({ control, name: `${type}_id` });
   const sameAsShipping = useWatch({ control, name: "same_as_shipping" });
+  const { customer } = useCustomer(
+    customerId,
+    {},
+    {
+      enabled: !!customerId
+    }
+  );
   const addresses = useComboboxData({
     queryFn: async (params) => {
       const response = await sdk.client.fetch(
@@ -7908,7 +7915,11 @@ const AddressField = ({ type, control, setValue }) => {
       }
     );
     const address = response.address;
-    setValue(type, { ...address });
+    setValue(type, {
+      ...address,
+      first_name: address.first_name || (customer == null ? void 0 : customer.first_name),
+      last_name: address.last_name || (customer == null ? void 0 : customer.last_name)
+    });
   };
   const showFields = type === "billing_address" ? !sameAsShipping : true;
   return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
@@ -9295,6 +9306,7 @@ const getStylizedAmount = (amount, currencyCode) => {
 };
 const SummarySection = ({ order }) => {
   var _a;
+  const promotions = order.promotions || [];
   return /* @__PURE__ */ jsxs(Container, { className: "p-0 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 flex items-center justify-between gap-x-4", children: [
       /* @__PURE__ */ jsx(Heading, { children: "Summary" }),
@@ -9342,7 +9354,7 @@ const SummarySection = ({ order }) => {
         total: order.total,
         shippingSubtotal: order.shipping_subtotal,
         discountTotal: order.discount_total,
-        promotions: order.promotions,
+        promotions,
         taxTotal: order.tax_total,
         itemSubTotal: order.item_subtotal,
         itemCount: ((_a = order.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0
@@ -9396,7 +9408,6 @@ const Total = ({
   itemSubTotal,
   itemCount
 }) => {
-  var _a;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-6 py-4 gap-y-2", children: [
     itemCount > 0 && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 items-center justify-between gap-x-4 text-ui-fg-subtle", children: [
       /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Subtotal" }),
@@ -9418,7 +9429,7 @@ const Total = ({
         ),
         children: [
           /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "Discount" }),
-          (promotions == null ? void 0 : promotions.length) && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(Link, { to: `/promotions/${(_a = promotions == null ? void 0 : promotions[0]) == null ? void 0 : _a.id}`, children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: promotions.map((p) => p.code).join(", ") }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-x-2", children: promotions.map((promotion) => /* @__PURE__ */ jsx(Link, { to: `/promotions/${promotion.id}`, children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: promotion.code }) }, promotion.id)) }),
           /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getLocaleAmount(discountTotal, currencyCode) }) })
         ]
       }
@@ -9754,6 +9765,74 @@ const CustomItemsForm = () => {
 const schema$4 = objectType({
   email: stringType().email()
 });
+const Email = () => {
+  const { id } = useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+email"
+  });
+  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: "Edit Email" }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsx(EmailForm, { order })
+  ] });
+};
+const EmailForm = ({ order }) => {
+  const form = useForm({
+    defaultValues: {
+      email: order.email ?? ""
+    },
+    resolver: zodResolver(schema$3)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      { email: data.email },
+      {
+        onSuccess: () => {
+          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(
+          Form$2.Field,
+          {
+            control: form.control,
+            name: "email",
+            render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+              /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
+              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+            ] })
+          }
+        ) }),
+        /* @__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 schema$3 = objectType({
+  email: stringType().email()
+});
 const InlineTip = forwardRef(
   ({ variant = "tip", label, className, children, ...props }, ref) => {
     const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
@@ -10455,7 +10534,7 @@ const SalesChannelForm = ({ order }) => {
     defaultValues: {
       sales_channel_id: order.sales_channel_id || ""
     },
-    resolver: zodResolver(schema$3)
+    resolver: zodResolver(schema$2)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -10530,7 +10609,7 @@ const SalesChannelField = ({ control, order }) => {
     }
   );
 };
-const schema$3 = objectType({
+const schema$2 = objectType({
   sales_channel_id: stringType().min(1)
 });
 function convertNumber(value) {
@@ -11375,7 +11454,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$2)
+    resolver: zodResolver(schema$1)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -11545,1162 +11624,169 @@ const ShippingAddressForm = ({ order }) => {
     }
   ) });
 };
-const schema$2 = addressSchema;
-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
-        ),
-        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 schema$1 = addressSchema;
+const TransferOwnership = () => {
   const { id } = useParams();
-  const {
-    order: preview,
-    isPending: isPreviewPending,
-    isError: isPreviewError,
-    error: previewError
-  } = useOrderPreview(id, void 0, {
-    placeholderData: keepPreviousData
+  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
+    fields: "id,customer_id,customer.*"
   });
-  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 && !!draft_order;
+  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Transfer Ownership" }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsx(TransferOwnershipForm, { order: draft_order })
+  ] });
 };
-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);
-          }
-        },
-        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: "grid grid-cols-[1fr_1fr_1fr_28px] gap-3 px-4 py-2 text-ui-fg-muted", 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: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", 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: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", 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 gap-x-2 justify-end", 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 TransferOwnershipForm = ({ order }) => {
+  var _a, _b;
   const form = useForm({
     defaultValues: {
-      quantity: item.quantity,
-      unit_price: item.unit_price
+      customer_id: order.customer_id || ""
     },
-    resolver: zodResolver(variantItemSchema)
+    resolver: zodResolver(schema)
   });
-  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 { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
+  const currentCustomer = order.customer ? {
+    label: name ? `${name} (${order.customer.email})` : order.customer.email,
+    value: order.customer.id
+  } : null;
   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)
-      },
+    await mutateAsync(
+      { customer_id: data.customer_id },
       {
         onSuccess: () => {
-          setEditing(false);
+          toast.success("Customer 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: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full", 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,
-                ")"
-              ]
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsx(Illustration, {}) }),
+          currentCustomer && /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
+              /* @__PURE__ */ jsx(Hint$1, { children: "The customer that is currently associated with this draft order." })
+            ] }),
+            /* @__PURE__ */ jsxs(Select, { disabled: true, value: currentCustomer.value, children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+              /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            CustomerField,
+            {
+              control: form.control,
+              currentCustomerId: order.customer_id
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "small",
-            leading: "compact",
-            className: "text-ui-fg-subtle",
-            children: item.variant_sku
-          }
-        )
-      ] })
-    ] }),
-    editing ? /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", 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: "flex-1 w-full", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }) }),
-    editing ? /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", 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-1 flex items-center justify-end w-full", 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, {})
-      }
-    )
-  ] }) }) });
+        /* @__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, { variant: "secondary", size: "small", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
 };
-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
+const CustomerField = ({ control, currentCustomerId }) => {
+  const customers = useComboboxData({
+    queryFn: async (params) => {
+      return await sdk.admin.customer.list({
+        ...params,
+        id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
+      });
     },
-    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);
-          }
-        }
-      );
-      return;
-    }
-    if (data.quantity === 0) {
-      await removeActionItem(actionId, {
-        onSuccess: () => {
-          setEditing(false);
-        },
-        onError: (e) => {
-          toast.error(e.message);
-        }
+    queryKey: ["customers"],
+    getOptions: (data) => {
+      return data.customers.map((customer) => {
+        const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
+        return {
+          label: name ? `${name} (${customer.email})` : customer.email,
+          value: customer.id
+        };
       });
-      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: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", 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 }) }) });
+  return /* @__PURE__ */ jsx(
+    Form$2.Field,
+    {
+      name: "customer_id",
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Form$2.Label, { children: "New customer" }),
+          /* @__PURE__ */ jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
+        ] }),
+        /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            options: customers.options,
+            fetchNextPage: customers.fetchNextPage,
+            isFetchingNextPage: customers.isFetchingNextPage,
+            searchValue: customers.searchValue,
+            onSearchValueChange: customers.onSearchValueChange,
+            placeholder: "Select customer",
+            ...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-1 flex 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
+        ) }),
+        /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+      ] })
     }
   );
-  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;
-  }
+};
+const Illustration = () => {
   return /* @__PURE__ */ jsxs(
-    StackedFocusModal.Content,
+    "svg",
     {
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-        const searchInput = document.querySelector(
-          "[data-modal-id='modal-search-input']"
-        );
-        if (searchInput) {
-          searchInput.focus();
-        }
-      },
+      width: "280",
+      height: "180",
+      viewBox: "0 0 280 180",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
       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,
+        /* @__PURE__ */ jsx(
+          "rect",
           {
-            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
+            x: "0.00428286",
+            y: "-0.742904",
+            width: "33.5",
+            height: "65.5",
+            rx: "6.75",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
+            fill: "#D4D4D8",
+            stroke: "#52525B",
+            strokeWidth: "1.5"
           }
-        ) }),
-        /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 justify-end", 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,
-            {
-              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"
-      })
-    ];
-  }, []);
-};
-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: [
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
           {
-            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: "flex-1 w-full", children: [
-              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", 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 gap-x-2 justify-end", 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 Email = () => {
-  const { id } = useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+email"
-  });
-  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: "Edit Email" }) }),
-      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsx(EmailForm, { order })
-  ] });
-};
-const EmailForm = ({ order }) => {
-  const form = useForm({
-    defaultValues: {
-      email: order.email ?? ""
-    },
-    resolver: zodResolver(schema$1)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      { email: data.email },
-      {
-        onSuccess: () => {
-          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(
-          Form$2.Field,
-          {
-            control: form.control,
-            name: "email",
-            render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-              /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
-              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-            ] })
-          }
-        ) }),
-        /* @__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 schema$1 = objectType({
-  email: stringType().email()
-});
-const TransferOwnership = () => {
-  const { id } = useParams();
-  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
-    fields: "id,customer_id,customer.*"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!draft_order;
-  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Transfer Ownership" }) }),
-      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsx(TransferOwnershipForm, { order: draft_order })
-  ] });
-};
-const TransferOwnershipForm = ({ order }) => {
-  var _a, _b;
-  const form = useForm({
-    defaultValues: {
-      customer_id: order.customer_id || ""
-    },
-    resolver: zodResolver(schema)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
-  const currentCustomer = order.customer ? {
-    label: name ? `${name} (${order.customer.email})` : order.customer.email,
-    value: order.customer.id
-  } : null;
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      { customer_id: data.customer_id },
-      {
-        onSuccess: () => {
-          toast.success("Customer 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__ */ jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsx(Illustration, {}) }),
-          currentCustomer && /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
-              /* @__PURE__ */ jsx(Hint$1, { children: "The customer that is currently associated with this draft order." })
-            ] }),
-            /* @__PURE__ */ jsxs(Select, { disabled: true, value: currentCustomer.value, children: [
-              /* @__PURE__ */ jsx(Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
-              /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            CustomerField,
-            {
-              control: form.control,
-              currentCustomerId: order.customer_id
-            }
-          )
-        ] }),
-        /* @__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, { variant: "secondary", size: "small", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const CustomerField = ({ control, currentCustomerId }) => {
-  const customers = useComboboxData({
-    queryFn: async (params) => {
-      return await sdk.admin.customer.list({
-        ...params,
-        id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
-      });
-    },
-    queryKey: ["customers"],
-    getOptions: (data) => {
-      return data.customers.map((customer) => {
-        const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
-        return {
-          label: name ? `${name} (${customer.email})` : customer.email,
-          value: customer.id
-        };
-      });
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    Form$2.Field,
-    {
-      name: "customer_id",
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Form$2.Label, { children: "New customer" }),
-          /* @__PURE__ */ jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
-        ] }),
-        /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-          Combobox,
-          {
-            options: customers.options,
-            fetchNextPage: customers.fetchNextPage,
-            isFetchingNextPage: customers.isFetchingNextPage,
-            searchValue: customers.searchValue,
-            onSearchValueChange: customers.onSearchValueChange,
-            placeholder: "Select customer",
-            ...field
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-      ] })
-    }
-  );
-};
-const Illustration = () => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "280",
-      height: "180",
-      viewBox: "0 0 280 180",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.00428286",
-            y: "-0.742904",
-            width: "33.5",
-            height: "65.5",
-            rx: "6.75",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
-            fill: "#D4D4D8",
-            stroke: "#52525B",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.00428286",
-            y: "-0.742904",
-            width: "33.5",
-            height: "65.5",
-            rx: "6.75",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
-            fill: "white",
-            stroke: "#52525B",
-            strokeWidth: "1.5"
+            x: "0.00428286",
+            y: "-0.742904",
+            width: "33.5",
+            height: "65.5",
+            rx: "6.75",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
+            fill: "white",
+            stroke: "#52525B",
+            strokeWidth: "1.5"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12861,159 +11947,1084 @@ const Illustration = () => {
         /* @__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: "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("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"
+          }
+        ) }),
+        /* @__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"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            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 = objectType({
+  customer_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: "grid grid-cols-[1fr_1fr_1fr_28px] gap-3 px-4 py-2 text-ui-fg-muted", 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: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", 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: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", 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 gap-x-2 justify-end", 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: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full", 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: "flex-1 w-full", 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: "flex-1 w-full", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }) }),
+    editing ? /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", 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-1 flex items-center justify-end w-full", 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: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", 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-1 flex 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 gap-x-2 justify-end", 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: "flex-1 w-full", children: [
+              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx("div", { className: "flex-1 w-full", 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 gap-x-2 justify-end", 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 = {
@@ -13043,6 +13054,10 @@ const routeModule = {
           Component: CustomItems,
           path: "/draft-orders/:id/custom-items"
         },
+        {
+          Component: Email,
+          path: "/draft-orders/:id/email"
+        },
         {
           Component: Metadata,
           path: "/draft-orders/:id/metadata"
@@ -13063,17 +13078,13 @@ const routeModule = {
           Component: ShippingAddress,
           path: "/draft-orders/:id/shipping-address"
         },
-        {
-          Component: Items,
-          path: "/draft-orders/:id/items"
-        },
-        {
-          Component: Email,
-          path: "/draft-orders/:id/email"
-        },
         {
           Component: TransferOwnership,
           path: "/draft-orders/:id/transfer-ownership"
+        },
+        {
+          Component: Items,
+          path: "/draft-orders/:id/items"
         }
       ]
     }