@medusajs/draft-order 0.0.2 → 0.0.3

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

@@ -7395,18 +7395,7 @@ const CreateForm = () => {
         company: ""
       },
       billing_address_id: "",
-      billing_address: {
-        country_code: "",
-        first_name: "",
-        last_name: "",
-        address_1: "",
-        address_2: "",
-        city: "",
-        province: "",
-        company: "",
-        postal_code: "",
-        phone: ""
-      },
+      billing_address: void 0,
       same_as_shipping: true
     },
     resolver: zod.zodResolver(schema$8)
@@ -7976,7 +7965,7 @@ const schema$8 = z.object({
   shipping_address_id: z.string().optional(),
   shipping_address: addressSchema.optional(),
   billing_address_id: z.string().optional(),
-  billing_address: addressSchema.nullish(),
+  billing_address: z.any().optional(),
   same_as_shipping: z.boolean().optional()
 }).superRefine((data, ctx) => {
   if (!data.customer_id && !data.email) {
@@ -8907,20 +8896,6 @@ const SummarySection = ({ order }) => {
                   label: "Edit items",
                   icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
                   to: "items"
-                },
-                {
-                  label: "Edit custom items",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-                  to: "custom-items"
-                }
-              ]
-            },
-            {
-              actions: [
-                {
-                  label: "Edit promotions",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ReceiptPercent, {}),
-                  to: "promotions"
                 }
               ]
             }
@@ -9085,95 +9060,6 @@ const ID = () => {
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
   ] });
 };
-const Email = () => {
-  const { id } = reactRouterDom.useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+email"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!order;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
-  ] });
-};
-const EmailForm = ({ order }) => {
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      email: order.email ?? ""
-    },
-    resolver: zod.zodResolver(schema$7)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      { email: data.email },
-      {
-        onSuccess: () => {
-          handleSuccess();
-        },
-        onError: (error) => {
-          ui.toast.error(error.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    KeyboundForm,
-    {
-      className: "flex flex-1 flex-col overflow-hidden",
-      onSubmit,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Form$2.Field,
-          {
-            control: form.control,
-            name: "email",
-            render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const schema$7 = z.object({
-  email: z.string().email()
-});
-const CustomItems = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
-  ] });
-};
-const CustomItemsForm = () => {
-  const form = reactHookForm.useForm({
-    resolver: zod.zodResolver(schema$6)
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
-    ] }) })
-  ] }) });
-};
-const schema$6 = z.object({
-  email: z.string().email()
-});
 const SwitchBlock = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Form$2.Field,
@@ -9231,7 +9117,7 @@ const BillingAddressForm = ({ order }) => {
       phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? "",
       notify: false
     },
-    resolver: zod.zodResolver(schema$5)
+    resolver: zod.zodResolver(schema$7)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -9399,57 +9285,34 @@ const BillingAddressForm = ({ order }) => {
     }
   ) });
 };
-const schema$5 = addressSchema.extend({
+const schema$7 = addressSchema.extend({
   notify: z.boolean().optional()
 });
-const InlineTip = React.forwardRef(
-  ({ variant = "tip", label, className, children, ...props }, ref) => {
-    const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: ui.clx(
-          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              role: "presentation",
-              className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
-                "bg-ui-tag-orange-icon": variant === "warning"
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
-              labelValue,
-              ":"
-            ] }),
-            " ",
-            children
-          ] })
-        ]
-      }
-    );
-  }
-);
-InlineTip.displayName = "InlineTip";
-const MetadataFieldSchema = z.object({
-  key: z.string(),
-  disabled: z.boolean().optional(),
-  value: z.any()
-});
-const MetadataSchema = z.object({
-  metadata: z.array(MetadataFieldSchema)
+const CustomItems = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
+  ] });
+};
+const CustomItemsForm = () => {
+  const form = reactHookForm.useForm({
+    resolver: zod.zodResolver(schema$6)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
+    ] }) })
+  ] }) });
+};
+const schema$6 = z.object({
+  email: z.string().email()
 });
-const Metadata = () => {
+const Email = () => {
   const { id } = reactRouterDom.useParams();
   const { order, isPending, isError, error } = useOrder(id, {
-    fields: "metadata"
+    fields: "+email"
   });
   if (isError) {
     throw error;
@@ -9457,33 +9320,26 @@ const Metadata = () => {
   const isReady = !isPending && !!order;
   return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
     ] }),
-    !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
+    isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
   ] });
 };
-const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
-const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
-const MetadataForm = ({ orderId, metadata }) => {
-  const { handleSuccess } = useRouteModal();
-  const hasUneditableRows = getHasUneditableRows(metadata);
-  const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
+const EmailForm = ({ order }) => {
   const form = reactHookForm.useForm({
     defaultValues: {
-      metadata: getDefaultValues(metadata)
+      email: order.email ?? ""
     },
-    resolver: zod.zodResolver(MetadataSchema)
+    resolver: zod.zodResolver(schema$5)
   });
-  const handleSubmit = form.handleSubmit(async (data) => {
-    const parsedData = parseValues(data);
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(
-      {
-        metadata: parsedData
-      },
+      { email: data.email },
       {
         onSuccess: () => {
-          ui.toast.success("Metadata updated");
           handleSuccess();
         },
         onError: (error) => {
@@ -9492,266 +9348,35 @@ const MetadataForm = ({ orderId, metadata }) => {
       }
     );
   });
-  const { fields, insert, remove } = reactHookForm.useFieldArray({
-    control: form.control,
-    name: "metadata"
-  });
-  function deleteRow(index) {
-    remove(index);
-    if (fields.length === 1) {
-      insert(0, {
-        key: "",
-        value: "",
-        disabled: false
-      });
-    }
-  }
-  function insertRow(index, position) {
-    insert(index + (position === "above" ? 0 : 1), {
-      key: "",
-      value: "",
-      disabled: false
-    });
-  }
   return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
     KeyboundForm,
     {
-      onSubmit: handleSubmit,
       className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
-            ] }),
-            fields.map((field, index) => {
-              const isDisabled = field.disabled || false;
-              let placeholder = "-";
-              if (typeof field.value === "object") {
-                placeholder = "{ ... }";
-              }
-              if (Array.isArray(field.value)) {
-                placeholder = "[ ... ]";
-              }
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                ConditionalTooltip,
-                {
-                  showTooltip: isDisabled,
-                  content: "This row is disabled because it contains non-primitive data.",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        className: ui.clx("grid grid-cols-2 divide-x", {
-                          "overflow-hidden rounded-b-lg": index === fields.length - 1
-                        }),
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            Form$2.Field,
-                            {
-                              control: form.control,
-                              name: `metadata.${index}.key`,
-                              render: ({ field: field2 }) => {
-                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  GridInput,
-                                  {
-                                    "aria-labelledby": METADATA_KEY_LABEL_ID,
-                                    ...field2,
-                                    disabled: isDisabled,
-                                    placeholder: "Key"
-                                  }
-                                ) }) });
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            Form$2.Field,
-                            {
-                              control: form.control,
-                              name: `metadata.${index}.value`,
-                              render: ({ field: { value, ...field2 } }) => {
-                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  GridInput,
-                                  {
-                                    "aria-labelledby": METADATA_VALUE_LABEL_ID,
-                                    ...field2,
-                                    value: isDisabled ? placeholder : value,
-                                    disabled: isDisabled,
-                                    placeholder: "Value"
-                                  }
-                                ) }) });
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.DropdownMenu.Trigger,
-                        {
-                          className: ui.clx(
-                            "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
-                            {
-                              hidden: isDisabled
-                            }
-                          ),
-                          disabled: isDisabled,
-                          asChild: true,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          ui.DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => insertRow(index, "above"),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
-                              "Insert row above"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          ui.DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => insertRow(index, "below"),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
-                              "Insert row below"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          ui.DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => deleteRow(index),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
-                              "Delete row"
-                            ]
-                          }
-                        )
-                      ] })
-                    ] })
-                  ] })
-                },
-                field.id
-              );
-            })
-          ] }),
-          hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Form$2.Field,
+          {
+            control: form.control,
+            name: "email",
+            render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
         ] }) })
       ]
     }
   ) });
 };
-const GridInput = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      ref,
-      ...props,
-      autoComplete: "off",
-      className: ui.clx(
-        "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
-        className
-      )
-    }
-  );
+const schema$5 = z.object({
+  email: z.string().email()
 });
-GridInput.displayName = "MetadataForm.GridInput";
-const PlaceholderInner = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
-    ] }) })
-  ] });
-};
-const EDITABLE_TYPES = ["string", "number", "boolean"];
-function getDefaultValues(metadata) {
-  if (!metadata || !Object.keys(metadata).length) {
-    return [
-      {
-        key: "",
-        value: "",
-        disabled: false
-      }
-    ];
-  }
-  return Object.entries(metadata).map(([key, value]) => {
-    if (!EDITABLE_TYPES.includes(typeof value)) {
-      return {
-        key,
-        value,
-        disabled: true
-      };
-    }
-    let stringValue = value;
-    if (typeof value !== "string") {
-      stringValue = JSON.stringify(value);
-    }
-    return {
-      key,
-      value: stringValue,
-      original_key: key
-    };
-  });
-}
-function parseValues(values) {
-  const metadata = values.metadata;
-  const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
-  if (isEmpty) {
-    return null;
-  }
-  const update = {};
-  metadata.forEach((field) => {
-    let key = field.key;
-    let value = field.value;
-    const disabled = field.disabled;
-    if (!key || !value) {
-      return;
-    }
-    if (disabled) {
-      update[key] = value;
-      return;
-    }
-    key = key.trim();
-    value = value.trim();
-    if (value === "true") {
-      update[key] = true;
-    } else if (value === "false") {
-      update[key] = false;
-    } else {
-      const parsedNumber = parseFloat(value);
-      if (!isNaN(parsedNumber)) {
-        update[key] = parsedNumber;
-      } else {
-        update[key] = value;
-      }
-    }
-  });
-  return update;
-}
-function getHasUneditableRows(metadata) {
-  if (!metadata) {
-    return false;
-  }
-  return Object.values(metadata).some(
-    (value) => !EDITABLE_TYPES.includes(typeof value)
-  );
-}
 const Promotions = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
@@ -9802,911 +9427,804 @@ const PromotionForm = () => {
 const schema$4 = z.object({
   promo_codes: z.string().optional()
 });
-const SalesChannel = () => {
-  const { id } = reactRouterDom.useParams();
-  const { draft_order, isPending, isError, error } = useDraftOrder(
-    id,
-    {
-      fields: "+sales_channel_id"
-    },
-    {
-      enabled: !!id
+function NumberInput({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  className,
+  disabled,
+  ...props
+}) {
+  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);
     }
-  );
-  if (isError) {
-    throw error;
-  }
-  const ready = draft_order && !isPending;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
-    ] }),
-    ready && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
-  ] });
-};
-const SalesChannelForm = ({ order }) => {
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      sales_channel_id: order.sales_channel_id || void 0,
-      notify: false
-    },
-    resolver: zod.zodResolver(schema$3)
-  });
-  const salesChannels = useComboboxData({
-    queryFn: async (params) => {
-      return await sdk.admin.salesChannel.list(params);
-    },
-    queryKey: ["sales-channels"],
-    getOptions: (data) => {
-      return data.sales_channels.map((salesChannel) => ({
-        label: salesChannel.name,
-        value: salesChannel.id
-      }));
-    },
-    defaultValue: order.sales_channel_id || void 0
+  };
+  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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.clx(
+        "inline-flex h-7 rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
+        "[&:has(input:focus)]:shadow-borders-interactive-with-active",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "number",
+            value,
+            onChange: handleChange,
+            min,
+            max,
+            step,
+            className: ui.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__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: ui.clx(
+              "size-7 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"
+            ),
+            type: "button",
+            onClick: handleDecrement,
+            disabled: min !== void 0 && value <= min || disabled,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: ui.clx(
+              "size-7 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"
+            ),
+            type: "button",
+            onClick: handleIncrement,
+            disabled: max !== void 0 && value >= max || disabled,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Increase by ${step}` })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
+const productVariantsQueryKeys = {
+  list: (query) => [
+    PRODUCT_VARIANTS_QUERY_KEY,
+    query ? query : void 0
+  ]
+};
+const useProductVariants = (query, options) => {
+  const { data, ...rest } = reactQuery.useQuery({
+    queryKey: productVariantsQueryKeys.list(query),
+    queryFn: async () => await sdk.admin.productVariant.list(query),
+    ...options
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Form$2.Field,
+  return { ...data, ...rest };
+};
+const useCancelOrderEdit = ({ preview }) => {
+  const { mutateAsync: cancelOrderEdit } = useOrderEditCancel(preview == null ? void 0 : preview.id);
+  const onCancel = React.useCallback(async () => {
+    if (!preview) {
+      return true;
+    }
+    let res = false;
+    await cancelOrderEdit(void 0, {
+      onError: (e) => {
+        ui.toast.error(e.message);
+      },
+      onSuccess: () => {
+        res = true;
+      }
+    });
+    return res;
+  }, [preview, cancelOrderEdit]);
+  return { onCancel };
+};
+let IS_REQUEST_RUNNING = false;
+const useInitiateOrderEdit = ({
+  preview
+}) => {
+  const navigate = reactRouterDom.useNavigate();
+  const { mutateAsync } = useOrderEditCreate(preview == null ? void 0 : preview.id);
+  React.useEffect(() => {
+    async function run() {
+      if (IS_REQUEST_RUNNING || !preview) {
+        return;
+      }
+      if (preview.order_change) {
+        return;
+      }
+      IS_REQUEST_RUNNING = true;
+      await mutateAsync(
         {
-          control: form.control,
-          name: "sales_channel_id",
-          render: ({ field }) => {
-            return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                Combobox,
-                {
-                  options: salesChannels.options,
-                  fetchNextPage: salesChannels.fetchNextPage,
-                  isFetchingNextPage: salesChannels.isFetchingNextPage,
-                  searchValue: salesChannels.searchValue,
-                  onSearchValueChange: salesChannels.onSearchValueChange,
-                  placeholder: "Select sales channel",
-                  ...field
-                }
-              ) })
-            ] });
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SwitchBlock,
+          order_id: preview.id
+        },
         {
-          label: "Send notification",
-          description: "Notify the customer that the sales channel has been updated.",
-          control: form.control,
-          name: "notify"
+          onError: (e) => {
+            ui.toast.error(e.message);
+            navigate(`/draft-orders/${preview.id}`, { replace: true });
+            return;
+          }
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
-    ] }) })
-  ] }) });
+      );
+      IS_REQUEST_RUNNING = false;
+    }
+    run();
+  }, [preview, navigate, mutateAsync]);
 };
-const schema$3 = z.object({
-  sales_channel_id: z.string().min(1),
-  notify: z.boolean().optional()
-});
-const ShippingAddress = () => {
+const STACKED_MODAL_ID = "items_stacked_modal";
+const Items = () => {
   const { id } = reactRouterDom.useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+shipping_address"
-  });
+  const {
+    order: preview,
+    isPending: isPreviewPending,
+    isError: isPreviewError,
+    error: previewError
+  } = useOrderPreview(id);
+  useInitiateOrderEdit({ preview });
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
+    {
+      fields: "currency_code"
+    },
+    {
+      enabled: !!id
+    }
+  );
+  const { onCancel } = useCancelOrderEdit({ preview });
   if (isError) {
     throw error;
   }
-  const isReady = !isPending && !!order;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
-  ] });
+  if (isPreviewError) {
+    throw previewError;
+  }
+  const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: ready && /* @__PURE__ */ jsxRuntime.jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) });
 };
-const ShippingAddressForm = ({ order }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+const ItemsForm = ({ preview, currencyCode }) => {
+  var _a;
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const { handleSuccess } = useRouteModal();
+  const { searchValue, onSearchValueChange, query } = useDebouncedSearch();
   const form = reactHookForm.useForm({
     defaultValues: {
-      first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
-      last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
-      company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
-      address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
-      address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
-      city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
-      province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
-      country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
-      postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
-      phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? "",
       notify: false
     },
-    resolver: zod.zodResolver(schema$2)
+    resolver: zod.zodResolver(schema$3)
   });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      {
-        shipping_address: {
-          first_name: data.first_name,
-          last_name: data.last_name,
-          company: data.company,
-          address_1: data.address_1,
-          address_2: data.address_2,
-          city: data.city,
-          province: data.province,
-          country_code: data.country_code,
-          postal_code: data.postal_code,
-          phone: data.phone
-        }
+  const { mutateAsync: confirmOrderEdit } = useOrderEditConfirm(preview.id);
+  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
+  const matches = React.useMemo(() => {
+    return matchSorter.matchSorter(preview.items, query, {
+      keys: ["product_title", "variant_title", "variant_sku"]
+    });
+  }, [preview.items, query]);
+  const onSubmit = form.handleSubmit(async (_data) => {
+    setIsSubmitting(true);
+    let requestSucceeded = false;
+    await requestOrderEdit(void 0, {
+      onError: (e) => {
+        ui.toast.error(`Failed to request order edit: ${e.message}`);
       },
-      {
-        onSuccess: () => {
-          handleSuccess();
-        },
-        onError: (error) => {
-          ui.toast.error(error.message);
-        }
+      onSuccess: () => {
+        requestSucceeded = true;
       }
-    );
+    });
+    if (!requestSucceeded) {
+      setIsSubmitting(false);
+      return;
+    }
+    await confirmOrderEdit(void 0, {
+      onError: (e) => {
+        ui.toast.error(`Failed to confirm order edit: ${e.message}`);
+      },
+      onSuccess: () => {
+        handleSuccess();
+      },
+      onSettled: () => {
+        setIsSubmitting(false);
+      }
+    });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
     KeyboundForm,
     {
-      className: "flex flex-1 flex-col overflow-hidden",
+      className: "flex h-full flex-col overflow-hidden",
       onSubmit,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "country_code",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal, { id: STACKED_MODAL_ID, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Items" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order." }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Input,
+                    {
+                      type: "search",
+                      placeholder: "Search items",
+                      value: searchValue,
+                      onChange: (e) => onSearchValueChange(e.target.value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "secondary", children: "Add items" }) })
                 ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Form$2.Field,
-                {
-                  control: form.control,
-                  name: "first_name",
-                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3 px-4 py-2 text-ui-fg-muted", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Price" }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          Thumbnail,
+                          {
+                            thumbnail: item.thumbnail,
+                            alt: item.product_title ?? void 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              ui.Text,
+                              {
+                                size: "small",
+                                weight: "plus",
+                                leading: "compact",
+                                children: item.product_title
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              ui.Text,
+                              {
+                                size: "small",
+                                leading: "compact",
+                                className: "text-ui-fg-subtle",
+                                children: [
+                                  "(",
+                                  item.variant_title,
+                                  ")"
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.Text,
+                            {
+                              size: "small",
+                              leading: "compact",
+                              className: "text-ui-fg-subtle",
+                              children: item.variant_sku
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(QuantityInput, { orderId: preview.id, item }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        UnitPriceInput,
+                        {
+                          orderId: preview.id,
+                          item,
+                          currencyCode
+                        }
+                      )
+                    ]
+                  },
+                  item.id
+                )) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
+                    'No items found for "',
+                    query,
+                    '".'
                   ] })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Form$2.Field,
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Text,
                 {
-                  control: form.control,
-                  name: "last_name",
-                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                  ] })
+                  size: "small",
+                  leading: "compact",
+                  className: "text-ui-fg-subtle",
+                  children: [
+                    itemCount,
+                    " ",
+                    itemCount === 1 ? "item" : "items"
+                  ]
                 }
-              )
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
             ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "company",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "address_1",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
+              SwitchBlock,
               {
+                label: "Send notification",
+                description: "Notify the customer that the items have been updated.",
                 control: form.control,
-                name: "address_2",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Form$2.Field,
-                {
-                  control: form.control,
-                  name: "postal_code",
-                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Form$2.Field,
-                {
-                  control: form.control,
-                  name: "city",
-                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                  ] })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "province",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "phone",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
+                name: "notify"
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SwitchBlock,
-            {
-              control: form.control,
-              name: "notify",
-              label: "Notify customer",
-              description: "Notify the customer of the new shipping address."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2 justify-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isSubmitting, children: "Save" })
         ] }) })
       ]
     }
   ) });
 };
-const schema$2 = addressSchema.extend({
-  notify: z.boolean().optional()
-});
-const useCancelOrderEdit = ({ preview }) => {
-  const { mutateAsync: cancelOrderEdit } = useOrderEditCancel(preview == null ? void 0 : preview.id);
-  const onCancel = React.useCallback(async () => {
-    if (!preview) {
-      return true;
+const UnitPriceInput = ({
+  orderId,
+  item,
+  currencyCode
+}) => {
+  const [unitPrice, setUnitPrice] = React.useState(item.unit_price);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const actionId = React.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 } = useOrderEditUpdateActionItem(orderId);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useOrderEditUpdateOriginalItem(orderId);
+  const onSubmit = React.useCallback(async () => {
+    if (unitPrice === item.unit_price) {
+      setIsEditing(false);
+      return;
     }
-    let res = false;
-    await cancelOrderEdit(void 0, {
-      onError: (e) => {
-        ui.toast.error(e.message);
+    if (!actionId) {
+      await updateOriginalItem(
+        {
+          item_id: item.id,
+          quantity: item.quantity,
+          unit_price: unitPrice
+        },
+        {
+          onSuccess: () => {
+            setIsEditing(false);
+          },
+          onError: (e) => {
+            ui.toast.error(e.message);
+          }
+        }
+      );
+      return;
+    }
+    await updateActionItem(
+      {
+        action_id: actionId,
+        unit_price: unitPrice
       },
-      onSuccess: () => {
-        res = true;
+      {
+        onSuccess: () => {
+          setIsEditing(false);
+        },
+        onError: (e) => {
+          ui.toast.error(e.message);
+        }
       }
-    });
-    return res;
-  }, [preview, cancelOrderEdit]);
-  return { onCancel };
+    );
+  }, [item, actionId, updateActionItem, updateOriginalItem, unitPrice]);
+  const onChange = React.useCallback((e) => {
+    const value = e.target.value;
+    if (value === "") {
+      setUnitPrice(null);
+    }
+    const unitPrice2 = parseFloat(value);
+    if (isNaN(unitPrice2)) {
+      return;
+    }
+    setUnitPrice(unitPrice2);
+  }, []);
+  const isLoading = isUpdatingActionItem || isUpdatingOriginalItem;
+  return isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Input,
+      {
+        size: "small",
+        type: "number",
+        value: unitPrice || "",
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.IconButton,
+      {
+        className: "shrink-0",
+        type: "button",
+        size: "small",
+        onClick: onSubmit,
+        isLoading,
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { type: "button", size: "small", onClick: () => setIsEditing(true), children: /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {}) })
+  ] });
 };
-let IS_REQUEST_RUNNING = false;
-const useInitiateOrderEdit = ({
-  preview
-}) => {
-  const navigate = reactRouterDom.useNavigate();
-  const { mutateAsync } = useOrderEditCreate(preview == null ? void 0 : preview.id);
-  React.useEffect(() => {
-    async function run() {
-      if (IS_REQUEST_RUNNING || !preview) {
+const QuantityInput = ({ orderId, item }) => {
+  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useOrderEditUpdateActionItem(orderId);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useOrderEditUpdateOriginalItem(orderId);
+  const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useOrderEditRemoveActionItem(orderId);
+  const onChange = React.useCallback(
+    async (quantity) => {
+      var _a, _b;
+      if (quantity === item.quantity) {
         return;
       }
-      if (preview.order_change) {
+      const actionId = (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
+      if (actionId) {
+        if (quantity === 0) {
+          await removeActionItem(actionId, {
+            onError: (e) => {
+              ui.toast.error(e.message);
+            }
+          });
+          return;
+        }
+        await updateActionItem(
+          {
+            action_id: actionId,
+            quantity
+          },
+          {
+            onError: (e) => {
+              ui.toast.error(e.message);
+            }
+          }
+        );
         return;
       }
-      IS_REQUEST_RUNNING = true;
-      await mutateAsync(
+      await updateOriginalItem(
         {
-          order_id: preview.id
+          item_id: item.id,
+          quantity
         },
         {
           onError: (e) => {
             ui.toast.error(e.message);
-            navigate(`/draft-orders/${preview.id}`, { replace: true });
-            return;
           }
         }
       );
-      IS_REQUEST_RUNNING = false;
-    }
-    run();
-  }, [preview, navigate, mutateAsync]);
-};
-const Shipping = () => {
-  const { id } = reactRouterDom.useParams();
-  const [searchParams] = reactRouterDom.useSearchParams();
-  const shippingProfileId = searchParams.get("shipping_profile_id");
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+items.variant.options.*,+currency_code"
-  });
-  const {
-    order: preview,
-    isPending: isPreviewPending,
-    isError: isPreviewError,
-    error: previewError
-  } = useOrderPreview(id);
-  useInitiateOrderEdit({ preview });
-  const { onCancel } = useCancelOrderEdit({ preview });
-  const onClose = async () => {
-    const res = await onCancel();
-    if (res) {
-      clearLocalStorageShippingInformation();
-    }
-    return res;
-  };
-  if (isError) {
-    throw error;
-  }
-  if (isPreviewError) {
-    throw previewError;
-  }
-  const ready = order && !isPending && preview && !isPreviewPending;
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose, children: ready && /* @__PURE__ */ jsxRuntime.jsx(
-    ShippingForm,
+    },
+    [item, updateActionItem, updateOriginalItem, removeActionItem]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NumberInput,
     {
-      order,
-      preview,
-      selectedShippingProfileId: shippingProfileId
+      value: item.quantity,
+      onChange,
+      disabled: isUpdatingActionItem || isUpdatingOriginalItem || isRemovingActionItem
     }
-  ) });
+  );
 };
-const ShippingForm = ({
-  order,
-  preview,
-  selectedShippingProfileId
-}) => {
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const { searchValue, onSearchValueChange, query } = useDebouncedSearch();
-  const uniqueShippingProfiles = getUniqueShippingProfiles(order.items);
-  const navigate = reactRouterDom.useNavigate();
-  const { handleSuccess } = useRouteModal();
-  const { mutateAsync: confirmOrderEdit } = useOrderEditConfirm(preview.id);
-  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
-  const shippingInformation = getLocalStorageShippingInformation();
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      shipping_profile_id: selectedShippingProfileId ? selectedShippingProfileId : uniqueShippingProfiles.length <= 1 ? uniqueShippingProfiles[0].id : (shippingInformation == null ? void 0 : shippingInformation.shipping_profile_id) || "",
-      location_id: (shippingInformation == null ? void 0 : shippingInformation.location_id) || ""
-    },
-    resolver: zod.zodResolver(schema$1)
-  });
-  const shippingProfileId = reactHookForm.useWatch({
-    control: form.control,
-    name: "shipping_profile_id"
-  });
-  const locationId = reactHookForm.useWatch({
-    control: form.control,
-    name: "location_id"
-  });
+const VARIANT_PREFIX = "items";
+const LIMIT = 50;
+const ExistingItemsForm = ({ orderId, items }) => {
+  const { setIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = React.useState(
+    items.reduce((acc, item) => {
+      acc[item.variant_id] = true;
+      return acc;
+    }, {})
+  );
   React.useEffect(() => {
-    updateLocalStorageShippingInformation({
-      shipping_profile_id: shippingProfileId,
-      location_id: locationId
-    });
-  }, [shippingProfileId, locationId]);
-  const items = React.useMemo(() => {
-    var _a;
-    return (_a = order.items) == null ? void 0 : _a.filter(
-      (item) => {
-        var _a2, _b, _c;
-        return ((_c = (_b = (_a2 = item.variant) == null ? void 0 : _a2.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
-      }
-    );
-  }, [order.items, shippingProfileId]);
-  const itemCount = (items == null ? void 0 : items.reduce((acc, item) => acc + item.quantity, 0)) || 0;
-  const matches = React.useMemo(() => {
-    return matchSorter.matchSorter(items, query, {
-      keys: ["product_title", "variant_title", "variant_sku"]
-    });
-  }, [items, query]);
-  if (selectedShippingProfileId && !uniqueShippingProfiles.find(
-    (profile) => profile.id === selectedShippingProfileId
-  )) {
-    ui.toast.error(
-      `Unable to find a shipping profile with the provided ID: ${selectedShippingProfileId}`
+    setRowSelection(
+      items.reduce((acc, item) => {
+        acc[item.variant_id] = true;
+        return acc;
+      }, {})
     );
-    navigate("..");
-  }
-  const onSubmit = form.handleSubmit(async (_data) => {
-    setIsSubmitting(true);
-    let requestSucceeded = false;
-    await requestOrderEdit(void 0, {
-      onError: (e) => {
-        ui.toast.error(`Failed to request order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        requestSucceeded = true;
-      }
-    });
-    if (!requestSucceeded) {
-      setIsSubmitting(false);
-      return;
+  }, [items]);
+  const queryParams = useQueryParams(["q", "order"], VARIANT_PREFIX);
+  const { variants, count, isPending, isError, error } = useProductVariants(
+    {
+      ...queryParams,
+      limit: LIMIT
+    },
+    {
+      placeholderData: reactQuery.keepPreviousData
     }
-    await confirmOrderEdit(void 0, {
-      onError: (e) => {
-        ui.toast.error(`Failed to confirm order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        handleSuccess();
+  );
+  const columns = useColumns();
+  const { mutateAsync } = useOrderEditAddItems(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
+        }))
       },
-      onSettled: () => {
-        setIsSubmitting(false);
+      {
+        onSuccess: () => {
+          setRowSelection({});
+          setIsOpen(STACKED_MODAL_ID, false);
+        },
+        onError: (e) => {
+          ui.toast.error(e.message);
+        }
       }
-    });
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    KeyboundForm,
+    );
+  };
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StackedFocusModal.Content,
     {
-      className: "flex h-full flex-col overflow-hidden",
-      onSubmit,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+        const searchInput = document.querySelector(
+          "[data-modal-id='modal-search-input']"
+        );
+        if (searchInput) {
+          searchInput.focus();
+        }
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for this order." }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ShippingProfileField,
+        /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Header, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Product Variants" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Choose which product variants to add to the order." }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          DataTable,
+          {
+            data: variants,
+            columns,
+            isLoading: isPending,
+            getRowId: (row) => row.id,
+            rowCount: count,
+            prefix: VARIANT_PREFIX,
+            layout: "fill",
+            rowSelection: {
+              state: rowSelection,
+              onRowSelectionChange: setRowSelection,
+              enableRowSelection: (row) => {
+                return !items.find((i) => i.variant_id === row.original.id);
+              }
+            },
+            autoFocusSearch: true
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2 justify-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
+        ] }) })
+      ]
+    }
+  );
+};
+const columnHelper = ui.createDataTableColumnHelper();
+const useColumns = () => {
+  return React.useMemo(() => {
+    return [
+      columnHelper.select(),
+      columnHelper.accessor("product.title", {
+        header: "Product",
+        cell: ({ row }) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Thumbnail,
+              {
+                thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
+                alt: (_b = row.original.product) == null ? void 0 : _b.title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            ui.Tooltip,
             {
-              control: form.control,
-              shippingProfiles: uniqueShippingProfiles
+              content: getFullDate({ date: getValue(), includeTime: true }),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(LocationField, { control: form.control }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ShippingOptionField,
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Oldest first",
+        sortDescLabel: "Newest first"
+      }),
+      columnHelper.accessor("created_at", {
+        header: "Created",
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Tooltip,
             {
-              control: form.control,
-              orderId: preview.id,
-              preview
+              content: getFullDate({ date: getValue(), includeTime: true }),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Input,
-                {
-                  type: "search",
-                  placeholder: "Search items",
-                  value: searchValue,
-                  onChange: (e) => onSearchValueChange(e.target.value)
-                }
-              ) }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Choose a shipping profile" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile will be shown here." })
-              ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Thumbnail,
-                        {
-                          thumbnail: item.thumbnail,
-                          alt: item.product_title ?? void 0
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            ui.Text,
-                            {
-                              size: "small",
-                              weight: "plus",
-                              leading: "compact",
-                              children: item.product_title
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            ui.Text,
-                            {
-                              size: "small",
-                              leading: "compact",
-                              className: "text-ui-fg-subtle",
-                              children: [
-                                "(",
-                                item.variant_title,
-                                ")"
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Text,
-                          {
-                            size: "small",
-                            leading: "compact",
-                            className: "text-ui-fg-subtle",
-                            children: item.variant_sku
-                          }
-                        )
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      ui.Text,
-                      {
-                        size: "small",
-                        leading: "compact",
-                        className: "text-ui-fg-subtle",
-                        children: [
-                          item.quantity,
-                          "x"
-                        ]
-                      }
-                    )
-                  ]
-                },
-                item.id
-              )) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
-                  'No items found for "',
-                  query,
-                  '".'
-                ] })
-              ] }) })
-            ] })
-          ] })
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isSubmitting, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Oldest first",
+        sortDescLabel: "Newest first"
+      })
+    ];
+  }, []);
 };
-const ShippingProfileField = ({
-  control,
-  shippingProfiles
-}) => {
-  const shippingProfileOptions = shippingProfiles.map((profile) => ({
-    label: profile.name,
-    value: profile.id
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Form$2.Field,
+const schema$3 = z.object({
+  notify: z.boolean()
+});
+const SalesChannel = () => {
+  const { id } = reactRouterDom.useParams();
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
     {
-      control,
-      name: "shipping_profile_id",
-      render: ({ field: { onChange, ref, ...field } }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping Profile" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping profile to add shipping for." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Select,
-            {
-              ...field,
-              onValueChange: onChange,
-              disabled: shippingProfileOptions.length <= 1,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder: "Select a shipping profile" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: shippingProfileOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: option.value, children: option.label }, option.value)) })
-              ]
-            }
-          ) })
-        ] }) });
-      }
-    }
-  );
-};
-const LocationField = ({ control }) => {
-  const locations = useComboboxData({
-    queryKey: ["locations"],
-    queryFn: async (params) => {
-      return await sdk.admin.stockLocation.list(params);
+      fields: "+sales_channel_id"
     },
-    getOptions: (data) => {
-      return data.stock_locations.map((location) => ({
-        label: location.name,
-        value: location.id
-      }));
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Form$2.Field,
     {
-      control,
-      name: "location_id",
-      render: ({ field }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Combobox,
-            {
-              options: locations.options,
-              fetchNextPage: locations.fetchNextPage,
-              isFetchingNextPage: locations.isFetchingNextPage,
-              searchValue: locations.searchValue,
-              onSearchValueChange: locations.onSearchValueChange,
-              placeholder: "Select location",
-              ...field
-            }
-          ) })
-        ] }) });
-      }
+      enabled: !!id
     }
   );
+  if (isError) {
+    throw error;
+  }
+  const ready = draft_order && !isPending;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
+    ] }),
+    ready && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
+  ] });
 };
-const ShippingOptionField = ({
-  orderId,
-  preview,
-  control
-}) => {
-  var _a, _b;
-  const locationId = reactHookForm.useWatch({ control, name: "location_id" });
-  const shippingProfileId = reactHookForm.useWatch({ control, name: "shipping_profile_id" });
-  const shippingOptions = useComboboxData({
-    queryKey: ["shipping_options"],
+const SalesChannelForm = ({ order }) => {
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      sales_channel_id: order.sales_channel_id || void 0,
+      notify: false
+    },
+    resolver: zod.zodResolver(schema$2)
+  });
+  const salesChannels = useComboboxData({
     queryFn: async (params) => {
-      return await sdk.admin.shippingOption.list({
-        ...params,
-        stock_location_id: locationId,
-        shipping_profile_id: shippingProfileId
-      });
+      return await sdk.admin.salesChannel.list(params);
     },
+    queryKey: ["sales-channels"],
     getOptions: (data) => {
-      return data.shipping_options.map((option) => ({
-        label: option.name,
-        value: option.id
+      return data.sales_channels.map((salesChannel) => ({
+        label: salesChannel.name,
+        value: salesChannel.id
       }));
     },
-    enabled: !!locationId && !!shippingProfileId,
-    defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
+    defaultValue: order.sales_channel_id || void 0
   });
-  const { mutateAsync: addShippingMethod, isPending } = useOrderEditAddShippingMethod(orderId);
-  const onShippingOptionChange = async (value) => {
-    if (!value) {
-      return;
-    }
-    await addShippingMethod(
-      {
-        shipping_option_id: value
-      },
-      {
-        onError: (e) => {
-          ui.toast.error(e.message);
-        }
-      }
-    );
-  };
-  const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", children: "Shipping option" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "Choose the shipping option to use." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ConditionalTooltip,
-      {
-        content: tooltipContent,
-        showTooltip: !locationId || !shippingProfileId,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-          Combobox,
-          {
-            options: shippingOptions.options,
-            fetchNextPage: shippingOptions.fetchNextPage,
-            isFetchingNextPage: shippingOptions.isFetchingNextPage,
-            searchValue: shippingOptions.searchValue,
-            onSearchValueChange: shippingOptions.onSearchValueChange,
-            placeholder: "Select shipping option",
-            onChange: onShippingOptionChange,
-            value: ((_b = preview.shipping_methods[0]) == null ? void 0 : _b.shipping_option_id) || void 0,
-            disabled: !locationId || !shippingProfileId || isPending
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Form$2.Field,
+        {
+          control: form.control,
+          name: "sales_channel_id",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                Combobox,
+                {
+                  options: salesChannels.options,
+                  fetchNextPage: salesChannels.fetchNextPage,
+                  isFetchingNextPage: salesChannels.isFetchingNextPage,
+                  searchValue: salesChannels.searchValue,
+                  onSearchValueChange: salesChannels.onSearchValueChange,
+                  placeholder: "Select sales channel",
+                  ...field
+                }
+              ) })
+            ] });
           }
-        ) })
-      }
-    )
-  ] });
-};
-const LOCAL_STORAGE_KEY = "draft_order_shipping";
-const getLocalStorageShippingInformation = () => {
-  const shippingInformation = localStorage.getItem(LOCAL_STORAGE_KEY);
-  return shippingInformation ? JSON.parse(shippingInformation) : null;
-};
-const updateLocalStorageShippingInformation = (shipping) => {
-  const shippingInformation = getLocalStorageShippingInformation();
-  if (!shippingInformation) {
-    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(shipping));
-    return;
-  }
-  localStorage.setItem(
-    LOCAL_STORAGE_KEY,
-    JSON.stringify({
-      ...shippingInformation,
-      ...shipping
-    })
-  );
-};
-function clearLocalStorageShippingInformation() {
-  localStorage.removeItem(LOCAL_STORAGE_KEY);
-}
-const schema$1 = z.object({
-  shipping_profile_id: z.string(),
-  location_id: z.string()
-});
-function NumberInput({
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  className,
-  disabled,
-  ...props
-}) {
-  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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: ui.clx(
-        "inline-flex h-7 rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
-        "[&:has(input:focus)]:shadow-borders-interactive-with-active",
-        className
+        }
       ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "number",
-            value,
-            onChange: handleChange,
-            min,
-            max,
-            step,
-            className: ui.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__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            className: ui.clx(
-              "size-7 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"
-            ),
-            type: "button",
-            onClick: handleDecrement,
-            disabled: min !== void 0 && value <= min || disabled,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, {}),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            className: ui.clx(
-              "size-7 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"
-            ),
-            type: "button",
-            onClick: handleIncrement,
-            disabled: max !== void 0 && value >= max || disabled,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Increase by ${step}` })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
-const productVariantsQueryKeys = {
-  list: (query) => [
-    PRODUCT_VARIANTS_QUERY_KEY,
-    query ? query : void 0
-  ]
-};
-const useProductVariants = (query, options) => {
-  const { data, ...rest } = reactQuery.useQuery({
-    queryKey: productVariantsQueryKeys.list(query),
-    queryFn: async () => await sdk.admin.productVariant.list(query),
-    ...options
-  });
-  return { ...data, ...rest };
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwitchBlock,
+        {
+          label: "Send notification",
+          description: "Notify the customer that the sales channel has been updated.",
+          control: form.control,
+          name: "notify"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
+    ] }) })
+  ] }) });
 };
-const STACKED_MODAL_ID = "items_stacked_modal";
-const Items = () => {
+const schema$2 = z.object({
+  sales_channel_id: z.string().min(1),
+  notify: z.boolean().optional()
+});
+const Shipping = () => {
   const { id } = reactRouterDom.useParams();
+  const [searchParams] = reactRouterDom.useSearchParams();
+  const shippingProfileId = searchParams.get("shipping_profile_id");
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+items.variant.options.*,+currency_code"
+  });
   const {
     order: preview,
     isPending: isPreviewPending,
@@ -10714,44 +10232,87 @@ const Items = () => {
     error: previewError
   } = useOrderPreview(id);
   useInitiateOrderEdit({ preview });
-  const { draft_order, isPending, isError, error } = useDraftOrder(
-    id,
-    {
-      fields: "currency_code"
-    },
-    {
-      enabled: !!id
-    }
-  );
   const { onCancel } = useCancelOrderEdit({ preview });
+  const onClose = async () => {
+    const res = await onCancel();
+    if (res) {
+      clearLocalStorageShippingInformation();
+    }
+    return res;
+  };
   if (isError) {
     throw error;
   }
   if (isPreviewError) {
     throw previewError;
   }
-  const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: ready && /* @__PURE__ */ jsxRuntime.jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) });
+  const ready = order && !isPending && preview && !isPreviewPending;
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose, children: ready && /* @__PURE__ */ jsxRuntime.jsx(
+    ShippingForm,
+    {
+      order,
+      preview,
+      selectedShippingProfileId: shippingProfileId
+    }
+  ) });
 };
-const ItemsForm = ({ preview, currencyCode }) => {
-  var _a;
+const ShippingForm = ({
+  order,
+  preview,
+  selectedShippingProfileId
+}) => {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const { handleSuccess } = useRouteModal();
   const { searchValue, onSearchValueChange, query } = useDebouncedSearch();
+  const uniqueShippingProfiles = getUniqueShippingProfiles(order.items);
+  const navigate = reactRouterDom.useNavigate();
+  const { handleSuccess } = useRouteModal();
+  const { mutateAsync: confirmOrderEdit } = useOrderEditConfirm(preview.id);
+  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const shippingInformation = getLocalStorageShippingInformation();
   const form = reactHookForm.useForm({
     defaultValues: {
-      notify: false
+      shipping_profile_id: selectedShippingProfileId ? selectedShippingProfileId : uniqueShippingProfiles.length <= 1 ? uniqueShippingProfiles[0].id : (shippingInformation == null ? void 0 : shippingInformation.shipping_profile_id) || "",
+      location_id: (shippingInformation == null ? void 0 : shippingInformation.location_id) || ""
     },
-    resolver: zod.zodResolver(schema)
+    resolver: zod.zodResolver(schema$1)
   });
-  const { mutateAsync: confirmOrderEdit } = useOrderEditConfirm(preview.id);
-  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
-  const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
-  const matches = React.useMemo(() => {
-    return matchSorter.matchSorter(preview.items, query, {
+  const shippingProfileId = reactHookForm.useWatch({
+    control: form.control,
+    name: "shipping_profile_id"
+  });
+  const locationId = reactHookForm.useWatch({
+    control: form.control,
+    name: "location_id"
+  });
+  React.useEffect(() => {
+    updateLocalStorageShippingInformation({
+      shipping_profile_id: shippingProfileId,
+      location_id: locationId
+    });
+  }, [shippingProfileId, locationId]);
+  const items = React.useMemo(() => {
+    var _a;
+    return (_a = order.items) == null ? void 0 : _a.filter(
+      (item) => {
+        var _a2, _b, _c;
+        return ((_c = (_b = (_a2 = item.variant) == null ? void 0 : _a2.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
+      }
+    );
+  }, [order.items, shippingProfileId]);
+  const itemCount = (items == null ? void 0 : items.reduce((acc, item) => acc + item.quantity, 0)) || 0;
+  const matches = React.useMemo(() => {
+    return matchSorter.matchSorter(items, query, {
       keys: ["product_title", "variant_title", "variant_sku"]
     });
-  }, [preview.items, query]);
+  }, [items, query]);
+  if (selectedShippingProfileId && !uniqueShippingProfiles.find(
+    (profile) => profile.id === selectedShippingProfileId
+  )) {
+    ui.toast.error(
+      `Unable to find a shipping profile with the provided ID: ${selectedShippingProfileId}`
+    );
+    navigate("..");
+  }
   const onSubmit = form.handleSubmit(async (_data) => {
     setIsSubmitting(true);
     let requestSucceeded = false;
@@ -10786,144 +10347,131 @@ const ItemsForm = ({ preview, currencyCode }) => {
       onSubmit,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal, { id: STACKED_MODAL_ID, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Items" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order." }) })
+        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for this order." }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ShippingProfileField,
+            {
+              control: form.control,
+              shippingProfiles: uniqueShippingProfiles
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(LocationField, { control: form.control }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ShippingOptionField,
+            {
+              control: form.control,
+              orderId: preview.id,
+              preview
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Input,
+                {
+                  type: "search",
+                  placeholder: "Search items",
+                  value: searchValue,
+                  onChange: (e) => onSearchValueChange(e.target.value)
+                }
+              ) }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Input,
-                    {
-                      type: "search",
-                      placeholder: "Search items",
-                      value: searchValue,
-                      onChange: (e) => onSearchValueChange(e.target.value)
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "secondary", children: "Add items" }) })
-                ] })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3 px-4 py-2 text-ui-fg-muted", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Price" }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          Thumbnail,
-                          {
-                            thumbnail: item.thumbnail,
-                            alt: item.product_title ?? void 0
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              ui.Text,
-                              {
-                                size: "small",
-                                weight: "plus",
-                                leading: "compact",
-                                children: item.product_title
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsxs(
-                              ui.Text,
-                              {
-                                size: "small",
-                                leading: "compact",
-                                className: "text-ui-fg-subtle",
-                                children: [
-                                  "(",
-                                  item.variant_title,
-                                  ")"
-                                ]
-                              }
-                            )
-                          ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Choose a shipping profile" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile will be shown here." })
+              ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Thumbnail,
+                        {
+                          thumbnail: item.thumbnail,
+                          alt: item.product_title ?? void 0
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.Text,
+                            {
+                              size: "small",
+                              weight: "plus",
+                              leading: "compact",
+                              children: item.product_title
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
                             ui.Text,
                             {
                               size: "small",
                               leading: "compact",
                               className: "text-ui-fg-subtle",
-                              children: item.variant_sku
+                              children: [
+                                "(",
+                                item.variant_title,
+                                ")"
+                              ]
                             }
                           )
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(QuantityInput, { orderId: preview.id, item }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        UnitPriceInput,
-                        {
-                          orderId: preview.id,
-                          item,
-                          currencyCode
-                        }
-                      )
-                    ]
-                  },
-                  item.id
-                )) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
-                    'No items found for "',
-                    query,
-                    '".'
-                  ] })
-                ] }) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                ui.Text,
-                {
-                  size: "small",
-                  leading: "compact",
-                  className: "text-ui-fg-subtle",
-                  children: [
-                    itemCount,
-                    " ",
-                    itemCount === 1 ? "item" : "items"
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Text,
+                          {
+                            size: "small",
+                            leading: "compact",
+                            className: "text-ui-fg-subtle",
+                            children: item.variant_sku
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Text,
+                      {
+                        size: "small",
+                        leading: "compact",
+                        className: "text-ui-fg-subtle",
+                        children: [
+                          item.quantity,
+                          "x"
+                        ]
+                      }
+                    )
                   ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SwitchBlock,
-              {
-                label: "Send notification",
-                description: "Notify the customer that the items have been updated.",
-                control: form.control,
-                name: "notify"
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2 justify-end", children: [
+                },
+                item.id
+              )) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
+                  'No items found for "',
+                  query,
+                  '".'
+                ] })
+              ] }) })
+            ] })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isSubmitting, children: "Save" })
         ] }) })
@@ -10931,320 +10479,747 @@ const ItemsForm = ({ preview, currencyCode }) => {
     }
   ) });
 };
-const UnitPriceInput = ({
-  orderId,
-  item,
-  currencyCode
+const ShippingProfileField = ({
+  control,
+  shippingProfiles
 }) => {
-  const [unitPrice, setUnitPrice] = React.useState(item.unit_price);
-  const [isEditing, setIsEditing] = React.useState(false);
-  const actionId = React.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 } = useOrderEditUpdateActionItem(orderId);
-  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useOrderEditUpdateOriginalItem(orderId);
-  const onSubmit = React.useCallback(async () => {
-    if (unitPrice === item.unit_price) {
-      setIsEditing(false);
-      return;
+  const shippingProfileOptions = shippingProfiles.map((profile) => ({
+    label: profile.name,
+    value: profile.id
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "shipping_profile_id",
+      render: ({ field: { onChange, ref, ...field } }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping Profile" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping profile to add shipping for." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Select,
+            {
+              ...field,
+              onValueChange: onChange,
+              disabled: shippingProfileOptions.length <= 1,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder: "Select a shipping profile" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: shippingProfileOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          ) })
+        ] }) });
+      }
     }
-    if (!actionId) {
-      await updateOriginalItem(
-        {
-          item_id: item.id,
-          quantity: item.quantity,
-          unit_price: unitPrice
-        },
-        {
-          onSuccess: () => {
-            setIsEditing(false);
-          },
-          onError: (e) => {
-            ui.toast.error(e.message);
-          }
-        }
-      );
+  );
+};
+const LocationField = ({ control }) => {
+  const locations = useComboboxData({
+    queryKey: ["locations"],
+    queryFn: async (params) => {
+      return await sdk.admin.stockLocation.list(params);
+    },
+    getOptions: (data) => {
+      return data.stock_locations.map((location) => ({
+        label: location.name,
+        value: location.id
+      }));
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "location_id",
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Combobox,
+            {
+              options: locations.options,
+              fetchNextPage: locations.fetchNextPage,
+              isFetchingNextPage: locations.isFetchingNextPage,
+              searchValue: locations.searchValue,
+              onSearchValueChange: locations.onSearchValueChange,
+              placeholder: "Select location",
+              ...field
+            }
+          ) })
+        ] }) });
+      }
+    }
+  );
+};
+const ShippingOptionField = ({
+  orderId,
+  preview,
+  control
+}) => {
+  var _a, _b;
+  const locationId = reactHookForm.useWatch({ control, name: "location_id" });
+  const shippingProfileId = reactHookForm.useWatch({ control, name: "shipping_profile_id" });
+  const shippingOptions = useComboboxData({
+    queryKey: ["shipping_options"],
+    queryFn: async (params) => {
+      return await sdk.admin.shippingOption.list({
+        ...params,
+        stock_location_id: locationId,
+        shipping_profile_id: shippingProfileId
+      });
+    },
+    getOptions: (data) => {
+      return data.shipping_options.map((option) => ({
+        label: option.name,
+        value: option.id
+      }));
+    },
+    enabled: !!locationId && !!shippingProfileId,
+    defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
+  });
+  const { mutateAsync: addShippingMethod, isPending } = useOrderEditAddShippingMethod(orderId);
+  const onShippingOptionChange = async (value) => {
+    if (!value) {
       return;
     }
-    await updateActionItem(
+    await addShippingMethod(
       {
-        action_id: actionId,
-        unit_price: unitPrice
+        shipping_option_id: value
       },
       {
-        onSuccess: () => {
-          setIsEditing(false);
-        },
         onError: (e) => {
           ui.toast.error(e.message);
         }
       }
     );
-  }, [item, actionId, updateActionItem, updateOriginalItem, unitPrice]);
-  const onChange = React.useCallback((e) => {
-    const value = e.target.value;
-    if (value === "") {
-      setUnitPrice(null);
-    }
-    const unitPrice2 = parseFloat(value);
-    if (isNaN(unitPrice2)) {
-      return;
-    }
-    setUnitPrice(unitPrice2);
-  }, []);
-  const isLoading = isUpdatingActionItem || isUpdatingOriginalItem;
-  return isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Input,
-      {
-        size: "small",
-        type: "number",
-        value: unitPrice || "",
-        onChange
-      }
-    ),
+  };
+  const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", children: "Shipping option" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "Choose the shipping option to use." })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      ui.IconButton,
+      ConditionalTooltip,
       {
-        className: "shrink-0",
-        type: "button",
-        size: "small",
-        onClick: onSubmit,
-        isLoading,
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
+        content: tooltipContent,
+        showTooltip: !locationId || !shippingProfileId,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Combobox,
+          {
+            options: shippingOptions.options,
+            fetchNextPage: shippingOptions.fetchNextPage,
+            isFetchingNextPage: shippingOptions.isFetchingNextPage,
+            searchValue: shippingOptions.searchValue,
+            onSearchValueChange: shippingOptions.onSearchValueChange,
+            placeholder: "Select shipping option",
+            onChange: onShippingOptionChange,
+            value: ((_b = preview.shipping_methods[0]) == null ? void 0 : _b.shipping_option_id) || void 0,
+            disabled: !locationId || !shippingProfileId || isPending
+          }
+        ) })
       }
     )
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { type: "button", size: "small", onClick: () => setIsEditing(true), children: /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {}) })
   ] });
 };
-const QuantityInput = ({ orderId, item }) => {
-  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useOrderEditUpdateActionItem(orderId);
-  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useOrderEditUpdateOriginalItem(orderId);
-  const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useOrderEditRemoveActionItem(orderId);
-  const onChange = React.useCallback(
-    async (quantity) => {
-      var _a, _b;
-      if (quantity === item.quantity) {
-        return;
-      }
-      const actionId = (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
-      if (actionId) {
-        if (quantity === 0) {
-          await removeActionItem(actionId, {
-            onError: (e) => {
-              ui.toast.error(e.message);
-            }
-          });
-          return;
+const LOCAL_STORAGE_KEY = "draft_order_shipping";
+const getLocalStorageShippingInformation = () => {
+  const shippingInformation = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return shippingInformation ? JSON.parse(shippingInformation) : null;
+};
+const updateLocalStorageShippingInformation = (shipping) => {
+  const shippingInformation = getLocalStorageShippingInformation();
+  if (!shippingInformation) {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(shipping));
+    return;
+  }
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY,
+    JSON.stringify({
+      ...shippingInformation,
+      ...shipping
+    })
+  );
+};
+function clearLocalStorageShippingInformation() {
+  localStorage.removeItem(LOCAL_STORAGE_KEY);
+}
+const schema$1 = z.object({
+  shipping_profile_id: z.string(),
+  location_id: z.string()
+});
+const ShippingAddress = () => {
+  const { id } = reactRouterDom.useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+shipping_address"
+  });
+  if (isError) {
+    throw error;
+  }
+  const isReady = !isPending && !!order;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
+  ] });
+};
+const ShippingAddressForm = ({ order }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
+      last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
+      company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
+      address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
+      address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
+      city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
+      province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
+      country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
+      postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
+      phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? "",
+      notify: false
+    },
+    resolver: zod.zodResolver(schema)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        shipping_address: {
+          first_name: data.first_name,
+          last_name: data.last_name,
+          company: data.company,
+          address_1: data.address_1,
+          address_2: data.address_2,
+          city: data.city,
+          province: data.province,
+          country_code: data.country_code,
+          postal_code: data.postal_code,
+          phone: data.phone
         }
-        await updateActionItem(
-          {
-            action_id: actionId,
-            quantity
-          },
-          {
-            onError: (e) => {
-              ui.toast.error(e.message);
-            }
-          }
-        );
-        return;
-      }
-      await updateOriginalItem(
-        {
-          item_id: item.id,
-          quantity
+      },
+      {
+        onSuccess: () => {
+          handleSuccess();
         },
-        {
-          onError: (e) => {
-            ui.toast.error(e.message);
-          }
+        onError: (error) => {
+          ui.toast.error(error.message);
         }
-      );
-    },
-    [item, updateActionItem, updateOriginalItem, removeActionItem]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    NumberInput,
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
     {
-      value: item.quantity,
-      onChange,
-      disabled: isUpdatingActionItem || isUpdatingOriginalItem || isRemovingActionItem
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "country_code",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Form$2.Field,
+                {
+                  control: form.control,
+                  name: "first_name",
+                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Form$2.Field,
+                {
+                  control: form.control,
+                  name: "last_name",
+                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "company",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "address_1",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "address_2",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Form$2.Field,
+                {
+                  control: form.control,
+                  name: "postal_code",
+                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Form$2.Field,
+                {
+                  control: form.control,
+                  name: "city",
+                  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "province",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "phone",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SwitchBlock,
+            {
+              control: form.control,
+              name: "notify",
+              label: "Notify customer",
+              description: "Notify the customer of the new shipping address."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
     }
-  );
+  ) });
 };
-const VARIANT_PREFIX = "items";
-const LIMIT = 50;
-const ExistingItemsForm = ({ orderId, items }) => {
-  const { setIsOpen } = useStackedModal();
-  const [rowSelection, setRowSelection] = React.useState(
-    items.reduce((acc, item) => {
-      acc[item.variant_id] = true;
-      return acc;
-    }, {})
-  );
-  React.useEffect(() => {
-    setRowSelection(
-      items.reduce((acc, item) => {
-        acc[item.variant_id] = true;
-        return acc;
-      }, {})
+const schema = addressSchema.extend({
+  notify: z.boolean().optional()
+});
+const InlineTip = React.forwardRef(
+  ({ variant = "tip", label, className, children, ...props }, ref) => {
+    const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: ui.clx(
+          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "presentation",
+              className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
+                "bg-ui-tag-orange-icon": variant === "warning"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
+              labelValue,
+              ":"
+            ] }),
+            " ",
+            children
+          ] })
+        ]
+      }
     );
-  }, [items]);
-  const queryParams = useQueryParams(["q", "order"], VARIANT_PREFIX);
-  const { variants, count, isPending, isError, error } = useProductVariants(
-    {
-      ...queryParams,
-      limit: LIMIT
+  }
+);
+InlineTip.displayName = "InlineTip";
+const MetadataFieldSchema = z.object({
+  key: z.string(),
+  disabled: z.boolean().optional(),
+  value: z.any()
+});
+const MetadataSchema = z.object({
+  metadata: z.array(MetadataFieldSchema)
+});
+const Metadata = () => {
+  const { id } = reactRouterDom.useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "metadata"
+  });
+  if (isError) {
+    throw error;
+  }
+  const isReady = !isPending && !!order;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
+    ] }),
+    !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
+  ] });
+};
+const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
+const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
+const MetadataForm = ({ orderId, metadata }) => {
+  const { handleSuccess } = useRouteModal();
+  const hasUneditableRows = getHasUneditableRows(metadata);
+  const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      metadata: getDefaultValues(metadata)
     },
-    {
-      placeholderData: reactQuery.keepPreviousData
-    }
-  );
-  const columns = useColumns();
-  const { mutateAsync } = useOrderEditAddItems(orderId);
-  const onSubmit = async () => {
-    const ids = Object.keys(rowSelection).filter(
-      (id) => !items.find((i) => i.variant_id === id)
-    );
+    resolver: zod.zodResolver(MetadataSchema)
+  });
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const parsedData = parseValues(data);
     await mutateAsync(
       {
-        items: ids.map((id) => ({
-          variant_id: id,
-          quantity: 1
-        }))
+        metadata: parsedData
       },
       {
         onSuccess: () => {
-          setRowSelection({});
-          setIsOpen(STACKED_MODAL_ID, false);
+          ui.toast.success("Metadata updated");
+          handleSuccess();
         },
-        onError: (e) => {
-          ui.toast.error(e.message);
+        onError: (error) => {
+          ui.toast.error(error.message);
         }
       }
     );
-  };
-  if (isError) {
-    throw error;
+  });
+  const { fields, insert, remove } = reactHookForm.useFieldArray({
+    control: form.control,
+    name: "metadata"
+  });
+  function deleteRow(index) {
+    remove(index);
+    if (fields.length === 1) {
+      insert(0, {
+        key: "",
+        value: "",
+        disabled: false
+      });
+    }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    StackedFocusModal.Content,
+  function insertRow(index, position) {
+    insert(index + (position === "above" ? 0 : 1), {
+      key: "",
+      value: "",
+      disabled: false
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
     {
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-        const searchInput = document.querySelector(
-          "[data-modal-id='modal-search-input']"
-        );
-        if (searchInput) {
-          searchInput.focus();
-        }
-      },
+      onSubmit: handleSubmit,
+      className: "flex flex-1 flex-col overflow-hidden",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Header, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Product Variants" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Choose which product variants to add to the order." }) })
+        /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
+            ] }),
+            fields.map((field, index) => {
+              const isDisabled = field.disabled || false;
+              let placeholder = "-";
+              if (typeof field.value === "object") {
+                placeholder = "{ ... }";
+              }
+              if (Array.isArray(field.value)) {
+                placeholder = "[ ... ]";
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ConditionalTooltip,
+                {
+                  showTooltip: isDisabled,
+                  content: "This row is disabled because it contains non-primitive data.",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: ui.clx("grid grid-cols-2 divide-x", {
+                          "overflow-hidden rounded-b-lg": index === fields.length - 1
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Form$2.Field,
+                            {
+                              control: form.control,
+                              name: `metadata.${index}.key`,
+                              render: ({ field: field2 }) => {
+                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  GridInput,
+                                  {
+                                    "aria-labelledby": METADATA_KEY_LABEL_ID,
+                                    ...field2,
+                                    disabled: isDisabled,
+                                    placeholder: "Key"
+                                  }
+                                ) }) });
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Form$2.Field,
+                            {
+                              control: form.control,
+                              name: `metadata.${index}.value`,
+                              render: ({ field: { value, ...field2 } }) => {
+                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  GridInput,
+                                  {
+                                    "aria-labelledby": METADATA_VALUE_LABEL_ID,
+                                    ...field2,
+                                    value: isDisabled ? placeholder : value,
+                                    disabled: isDisabled,
+                                    placeholder: "Value"
+                                  }
+                                ) }) });
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.DropdownMenu.Trigger,
+                        {
+                          className: ui.clx(
+                            "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
+                            {
+                              hidden: isDisabled
+                            }
+                          ),
+                          disabled: isDisabled,
+                          asChild: true,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => insertRow(index, "above"),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
+                              "Insert row above"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => insertRow(index, "below"),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
+                              "Insert row below"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => deleteRow(index),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
+                              "Delete row"
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                },
+                field.id
+              );
+            })
+          ] }),
+          hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-          DataTable,
-          {
-            data: variants,
-            columns,
-            isLoading: isPending,
-            getRowId: (row) => row.id,
-            rowCount: count,
-            prefix: VARIANT_PREFIX,
-            layout: "fill",
-            rowSelection: {
-              state: rowSelection,
-              onRowSelectionChange: setRowSelection,
-              enableRowSelection: (row) => {
-                return !items.find((i) => i.variant_id === row.original.id);
-              }
-            },
-            autoFocusSearch: true
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2 justify-end", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
         ] }) })
       ]
     }
+  ) });
+};
+const GridInput = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      ...props,
+      autoComplete: "off",
+      className: ui.clx(
+        "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
+        className
+      )
+    }
   );
+});
+GridInput.displayName = "MetadataForm.GridInput";
+const PlaceholderInner = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
+    ] }) })
+  ] });
 };
-const columnHelper = ui.createDataTableColumnHelper();
-const useColumns = () => {
-  return React.useMemo(() => {
+const EDITABLE_TYPES = ["string", "number", "boolean"];
+function getDefaultValues(metadata) {
+  if (!metadata || !Object.keys(metadata).length) {
     return [
-      columnHelper.select(),
-      columnHelper.accessor("product.title", {
-        header: "Product",
-        cell: ({ row }) => {
-          var _a, _b, _c;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Thumbnail,
-              {
-                thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
-                alt: (_b = row.original.product) == null ? void 0 : _b.title
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            ui.Tooltip,
-            {
-              content: getFullDate({ date: getValue(), includeTime: true }),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: "Oldest first",
-        sortDescLabel: "Newest first"
-      }),
-      columnHelper.accessor("created_at", {
-        header: "Created",
-        cell: ({ getValue }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Tooltip,
-            {
-              content: getFullDate({ date: getValue(), includeTime: true }),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: "Oldest first",
-        sortDescLabel: "Newest first"
-      })
+      {
+        key: "",
+        value: "",
+        disabled: false
+      }
     ];
-  }, []);
-};
-const schema = z.object({
-  notify: z.boolean()
-});
+  }
+  return Object.entries(metadata).map(([key, value]) => {
+    if (!EDITABLE_TYPES.includes(typeof value)) {
+      return {
+        key,
+        value,
+        disabled: true
+      };
+    }
+    let stringValue = value;
+    if (typeof value !== "string") {
+      stringValue = JSON.stringify(value);
+    }
+    return {
+      key,
+      value: stringValue,
+      original_key: key
+    };
+  });
+}
+function parseValues(values) {
+  const metadata = values.metadata;
+  const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
+  if (isEmpty) {
+    return null;
+  }
+  const update = {};
+  metadata.forEach((field) => {
+    let key = field.key;
+    let value = field.value;
+    const disabled = field.disabled;
+    if (!key || !value) {
+      return;
+    }
+    if (disabled) {
+      update[key] = value;
+      return;
+    }
+    key = key.trim();
+    value = value.trim();
+    if (value === "true") {
+      update[key] = true;
+    } else if (value === "false") {
+      update[key] = false;
+    } else {
+      const parsedNumber = parseFloat(value);
+      if (!isNaN(parsedNumber)) {
+        update[key] = parsedNumber;
+      } else {
+        update[key] = value;
+      }
+    }
+  });
+  return update;
+}
+function getHasUneditableRows(metadata) {
+  if (!metadata) {
+    return false;
+  }
+  return Object.values(metadata).some(
+    (value) => !EDITABLE_TYPES.includes(typeof value)
+  );
+}
 const widgetModule = { widgets: [] };
 const routeModule = {
   routes: [
@@ -11263,40 +11238,40 @@ const routeModule = {
       path: "/draft-orders/:id",
       children: [
         {
-          Component: Email,
-          path: "/draft-orders/:id/email"
+          Component: BillingAddress,
+          path: "/draft-orders/:id/billing-address"
         },
         {
           Component: CustomItems,
           path: "/draft-orders/:id/custom-items"
         },
         {
-          Component: BillingAddress,
-          path: "/draft-orders/:id/billing-address"
-        },
-        {
-          Component: Metadata,
-          path: "/draft-orders/:id/metadata"
+          Component: Email,
+          path: "/draft-orders/:id/email"
         },
         {
           Component: Promotions,
           path: "/draft-orders/:id/promotions"
         },
         {
-          Component: SalesChannel,
-          path: "/draft-orders/:id/sales-channel"
+          Component: Items,
+          path: "/draft-orders/:id/items"
         },
         {
-          Component: ShippingAddress,
-          path: "/draft-orders/:id/shipping-address"
+          Component: SalesChannel,
+          path: "/draft-orders/:id/sales-channel"
         },
         {
           Component: Shipping,
           path: "/draft-orders/:id/shipping"
         },
         {
-          Component: Items,
-          path: "/draft-orders/:id/items"
+          Component: ShippingAddress,
+          path: "/draft-orders/:id/shipping-address"
+        },
+        {
+          Component: Metadata,
+          path: "/draft-orders/:id/metadata"
         }
       ]
     }