@medusajs/draft-order 0.0.7 → 0.0.9

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

@@ -9902,90 +9902,148 @@ const BillingAddressForm = ({ order }) => {
   ) });
 };
 const schema$5 = addressSchema;
-const Email = () => {
-  const { id } = reactRouterDom.useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+email"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!order;
+const CustomItems = () => {
   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 })
+    /* @__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 EmailForm = ({ order }) => {
+const CustomItemsForm = () => {
   const form = reactHookForm.useForm({
-    defaultValues: {
-      email: order.email ?? ""
-    },
     resolver: zod.zodResolver(schema$4)
   });
-  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" })
-        ] }) })
-      ]
-    }
-  ) });
+  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$4 = z.object({
   email: z.string().email()
 });
-const PROMOTION_QUERY_KEY = "promotions";
-const promotionsQueryKeys = {
+const NumberInput = React.forwardRef(
+  ({
+    value,
+    onChange,
+    size = "base",
+    min = 0,
+    max = 100,
+    step = 1,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    const handleChange = (event) => {
+      const newValue = event.target.value === "" ? min : Number(event.target.value);
+      if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
+        onChange(newValue);
+      }
+    };
+    const handleIncrement = () => {
+      const newValue = value + step;
+      if (max === void 0 || newValue <= max) {
+        onChange(newValue);
+      }
+    };
+    const handleDecrement = () => {
+      const newValue = value - step;
+      if (min === void 0 || newValue >= min) {
+        onChange(newValue);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.clx(
+          "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
+          "[&:has(input:focus)]:shadow-borders-interactive-with-active",
+          {
+            "h-7": size === "small",
+            "h-8": size === "base"
+          },
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              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(
+                "flex items-center justify-center outline-none transition-fg",
+                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
+                "focus:bg-ui-bg-field-component-hover",
+                "hover:bg-ui-bg-field-component-hover",
+                {
+                  "size-7": size === "small",
+                  "size-8": size === "base"
+                }
+              ),
+              type: "button",
+              onClick: handleDecrement,
+              disabled: min !== void 0 && value <= min || disabled,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              className: ui.clx(
+                "flex items-center justify-center outline-none transition-fg",
+                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
+                "focus:bg-ui-bg-field-hover",
+                "hover:bg-ui-bg-field-hover",
+                {
+                  "size-7": size === "small",
+                  "size-8": size === "base"
+                }
+              ),
+              type: "button",
+              onClick: handleIncrement,
+              disabled: max !== void 0 && value >= max || disabled,
+              children: [
+                /* @__PURE__ */ 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: (query2) => [
-    PROMOTION_QUERY_KEY,
-    query2 ? query2 : void 0
-  ],
-  detail: (id, query2) => [
-    PROMOTION_QUERY_KEY,
-    id,
+    PRODUCT_VARIANTS_QUERY_KEY,
     query2 ? query2 : void 0
   ]
 };
-const usePromotions = (query2, options) => {
+const useProductVariants = (query2, options) => {
   const { data, ...rest } = reactQuery.useQuery({
-    queryKey: promotionsQueryKeys.list(query2),
-    queryFn: async () => sdk.admin.promotion.list(query2),
+    queryKey: productVariantsQueryKeys.list(query2),
+    queryFn: async () => await sdk.admin.productVariant.list(query2),
     ...options
   });
   return { ...data, ...rest };
@@ -10036,85 +10094,65 @@ const useInitiateOrderEdit = ({
     run();
   }, [preview, navigate, mutateAsync]);
 };
-const Promotions = () => {
+function convertNumber(value) {
+  return typeof value === "string" ? Number(value.replace(",", ".")) : value;
+}
+const STACKED_MODAL_ID = "items_stacked_modal";
+const Items = () => {
   const { id } = reactRouterDom.useParams();
   const {
     order: preview,
+    isPending: isPreviewPending,
     isError: isPreviewError,
     error: previewError
-  } = useOrderPreview(id, void 0);
+  } = useOrderPreview(id, void 0, {
+    placeholderData: reactQuery.keepPreviousData
+  });
   useInitiateOrderEdit({ preview });
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
+    {
+      fields: "currency_code"
+    },
+    {
+      enabled: !!id
+    }
+  );
   const { onCancel } = useCancelOrderEdit({ preview });
+  if (isError) {
+    throw error;
+  }
   if (isPreviewError) {
     throw previewError;
   }
-  const isReady = !!preview;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
-    isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
-  ] });
+  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 }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Items" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
+  ] }) });
 };
-const PromotionForm = ({ preview }) => {
-  const { items, shipping_methods } = preview;
+const ItemsForm = ({ preview, currencyCode }) => {
+  var _a;
   const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [comboboxValue, setComboboxValue] = React.useState("");
-  const { handleSuccess } = useRouteModal();
-  const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
-  const promoCodes = getPromotionCodes(items, shipping_methods);
-  const { promotions, isPending, isError, error } = usePromotions(
-    {
-      code: promoCodes
-    },
-    {
-      enabled: !!promoCodes.length
-    }
+  const [modalContent, setModalContent] = React.useState(
+    null
   );
-  const comboboxData = useComboboxData({
-    queryKey: ["promotions", "combobox", promoCodes],
-    queryFn: async (params) => {
-      return await sdk.admin.promotion.list({
-        ...params,
-        code: {
-          $nin: promoCodes
-        }
-      });
-    },
-    getOptions: (data) => {
-      return data.promotions.map((promotion) => ({
-        label: promotion.code,
-        value: promotion.code
-      }));
-    }
-  });
-  const add = async (value) => {
-    if (!value) {
-      return;
-    }
-    addPromotions(
-      {
-        promo_codes: [value]
-      },
-      {
-        onError: (e) => {
-          ui.toast.error(e.message);
-          comboboxData.onSearchValueChange("");
-          setComboboxValue("");
-        },
-        onSuccess: () => {
-          comboboxData.onSearchValueChange("");
-          setComboboxValue("");
-        }
-      }
-    );
-  };
+  const { handleSuccess } = useRouteModal();
+  const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
   const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
-  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
+  const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
+  const matches = React.useMemo(() => {
+    return matchSorter.matchSorter(preview.items, query2, {
+      keys: ["product_title", "variant_title", "variant_sku", "title"]
+    });
+  }, [preview.items, query2]);
   const onSubmit = async () => {
     setIsSubmitting(true);
     let requestSucceeded = false;
     await requestOrderEdit(void 0, {
       onError: (e) => {
-        ui.toast.error(e.message);
+        ui.toast.error(`Failed to request order edit: ${e.message}`);
       },
       onSuccess: () => {
         requestSucceeded = true;
@@ -10126,7 +10164,7 @@ const PromotionForm = ({ preview }) => {
     }
     await confirmOrderEdit(void 0, {
       onError: (e) => {
-        ui.toast.error(e.message);
+        ui.toast.error(`Failed to confirm order edit: ${e.message}`);
       },
       onSuccess: () => {
         handleSuccess();
@@ -10136,1079 +10174,903 @@ const PromotionForm = ({ preview }) => {
       }
     });
   };
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Combobox,
-          {
-            id: "promotion-combobox",
-            "aria-describedby": "promotion-combobox-hint",
-            isFetchingNextPage: comboboxData.isFetchingNextPage,
-            fetchNextPage: comboboxData.fetchNextPage,
-            options: comboboxData.options,
-            onSearchValueChange: comboboxData.onSearchValueChange,
-            searchValue: comboboxData.searchValue,
-            disabled: comboboxData.disabled || isAddingPromotions,
-            onChange: add,
-            value: comboboxValue
+  const onKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        if (modalContent || isSubmitting) {
+          return;
+        }
+        onSubmit();
+      }
+    },
+    [modalContent, isSubmitting, onSubmit]
+  );
+  React.useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", 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,
+        onOpenChangeCallback: (open) => {
+          if (!open) {
+            setModalContent(null);
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
-        PromotionItem,
-        {
-          promotion,
-          orderId: preview.id,
-          isLoading: isPending
         },
-        promotion.id
-      )) })
-    ] }) }),
-    /* @__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" }) }),
+        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.jsxs(ui.DropdownMenu, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}) }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        StackedModalTrigger$1,
+                        {
+                          type: "add-items",
+                          setModalContent
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        StackedModalTrigger$1,
+                        {
+                          type: "add-custom-item",
+                          setModalContent
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_1fr_1fr_28px] 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", {})
+                ] }) }),
+                /* @__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.jsx(
+                  Item,
+                  {
+                    item,
+                    preview,
+                    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 "',
+                    query2,
+                    '".'
+                  ] })
+                ] }) })
+              ] })
+            ] }),
+            /* @__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("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
+            ] })
+          ] }) }),
+          modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsxRuntime.jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsxRuntime.jsx(
+            CustomItemForm,
+            {
+              orderId: preview.id,
+              currencyCode
+            }
+          ) : null)
+        ]
+      }
+    ) }),
+    /* @__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 || isAddingPromotions,
+          type: "button",
+          onClick: onSubmit,
+          isLoading: isSubmitting,
           children: "Save"
         }
       )
     ] }) })
   ] });
 };
-const PromotionItem = ({
-  promotion,
-  orderId,
-  isLoading
-}) => {
-  var _a;
-  const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
-  const onRemove = async () => {
-    removePromotions(
-      {
-        promo_codes: [promotion.code]
-      },
-      {
-        onError: (e) => {
-          ui.toast.error(e.message);
-        }
-      }
-    );
-  };
-  const displayValue = getDisplayValue(promotion);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: ui.clx(
-        "px-3 py-2 rounded-lg bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between",
-        {
-          "animate-pulse": isLoading
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-ui-fg-subtle", children: [
-            displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.IconButton,
-          {
-            size: "small",
-            type: "button",
-            variant: "transparent",
-            onClick: onRemove,
-            isLoading: isPending || isLoading,
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
-          }
-        )
-      ]
-    },
-    promotion.id
-  );
-};
-function getDisplayValue(promotion) {
-  var _a, _b, _c, _d;
-  const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
-  if (!value) {
-    return null;
-  }
-  if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
-    const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
-    if (!currency) {
-      return null;
-    }
-    return getLocaleAmount(value, currency);
-  } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
-    return formatPercentage(value);
-  }
-  return null;
-}
-const formatter = new Intl.NumberFormat([], {
-  style: "percent",
-  minimumFractionDigits: 2
-});
-const formatPercentage = (value, isPercentageValue = false) => {
-  let val = value || 0;
-  if (!isPercentageValue) {
-    val = val / 100;
-  }
-  return formatter.format(val);
-};
-function getPromotionCodes(items, shippingMethods) {
-  const codes = /* @__PURE__ */ new Set();
-  for (const item of items) {
-    if (item.adjustments) {
-      for (const adjustment of item.adjustments) {
-        if (adjustment.code) {
-          codes.add(adjustment.code);
-        }
-      }
-    }
-  }
-  for (const shippingMethod of shippingMethods) {
-    if (shippingMethod.adjustments) {
-      for (const adjustment of shippingMethod.adjustments) {
-        if (adjustment.code) {
-          codes.add(adjustment.code);
-        }
-      }
-    }
-  }
-  return Array.from(codes);
-}
-const SalesChannel = () => {
-  const { id } = reactRouterDom.useParams();
-  const { draft_order, isPending, isError, error } = useDraftOrder(
-    id,
-    {
-      fields: "+sales_channel_id"
-    },
-    {
-      enabled: !!id
-    }
-  );
-  if (isError) {
-    throw error;
+const Item = ({ item, preview, currencyCode }) => {
+  if (item.variant_id) {
+    return /* @__PURE__ */ jsxRuntime.jsx(VariantItem, { item, preview, currencyCode });
   }
-  const ISrEADY = !!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" }) })
-    ] }),
-    ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(CustomItem, { item, preview, currencyCode });
 };
-const SalesChannelForm = ({ order }) => {
+const VariantItem = ({ item, preview, currencyCode }) => {
+  const [editing, setEditing] = React.useState(false);
   const form = reactHookForm.useForm({
     defaultValues: {
-      sales_channel_id: order.sales_channel_id || ""
+      quantity: item.quantity,
+      unit_price: item.unit_price
     },
-    resolver: zod.zodResolver(schema$3)
+    resolver: zod.zodResolver(variantItemSchema)
   });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
+  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 } = useDraftOrderUpdateActionItem(preview.id);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
+  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
   const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
+    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
+      setEditing(false);
+      return;
+    }
+    if (!actionId) {
+      await updateOriginalItem(
+        {
+          item_id: item.id,
+          quantity: data.quantity,
+          unit_price: convertNumber(data.unit_price)
+        },
+        {
+          onSuccess: () => {
+            setEditing(false);
+          },
+          onError: (e) => {
+            ui.toast.error(e.message);
+          }
+        }
+      );
+      return;
+    }
+    await updateActionItem(
       {
-        sales_channel_id: data.sales_channel_id
+        action_id: actionId,
+        quantity: data.quantity,
+        unit_price: convertNumber(data.unit_price)
       },
       {
         onSuccess: () => {
-          ui.toast.success("Sales channel updated");
-          handleSuccess();
+          setEditing(false);
         },
-        onError: (error) => {
-          ui.toast.error(error.message);
+        onError: (e) => {
+          ui.toast.error(e.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(SalesChannelField, { control: form.control, order }) }),
-        /* @__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 SalesChannelField = ({ control, order }) => {
-  const salesChannels = useComboboxData({
-    queryFn: async (params) => {
-      return await sdk.admin.salesChannel.list(params);
-    },
-    queryKey: ["sales-channels"],
-    getOptions: (data) => {
-      return data.sales_channels.map((salesChannel) => ({
-        label: salesChannel.name,
-        value: salesChannel.id
-      }));
-    },
-    defaultValue: order.sales_channel_id || void 0
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Form$2.Field,
-    {
-      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,
+  return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full", 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,
             {
-              options: salesChannels.options,
-              fetchNextPage: salesChannels.fetchNextPage,
-              isFetchingNextPage: salesChannels.isFetchingNextPage,
-              searchValue: salesChannels.searchValue,
-              onSearchValueChange: salesChannels.onSearchValueChange,
-              placeholder: "Select sales channel",
-              ...field
+              size: "small",
+              leading: "compact",
+              className: "text-ui-fg-subtle",
+              children: [
+                "(",
+                item.variant_title,
+                ")"
+              ]
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-        ] });
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            size: "small",
+            leading: "compact",
+            className: "text-ui-fg-subtle",
+            children: item.variant_sku
+          }
+        )
+      ] })
+    ] }),
+    editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "quantity",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
+        }
       }
-    }
-  );
-};
-const schema$3 = z.object({
-  sales_channel_id: z.string().min(1)
-});
-function convertNumber(value) {
-  return typeof value === "string" ? Number(value.replace(",", ".")) : value;
-}
-const STACKED_FOCUS_MODAL_ID = "shipping-form";
-const Shipping = () => {
-  var _a;
-  const { id } = reactRouterDom.useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
-  });
-  const {
-    order: preview,
-    isPending: isPreviewPending,
-    isError: isPreviewError,
-    error: previewError
-  } = useOrderPreview(id);
-  useInitiateOrderEdit({ preview });
-  const { onCancel } = useCancelOrderEdit({ preview });
-  if (isError) {
-    throw error;
-  }
-  if (isPreviewError) {
-    throw previewError;
-  }
-  const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
-  const isReady = preview && !isPreviewPending && order && !isPending;
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", 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.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: "This draft order currently has no items. Add items to the order before adding shipping." }) })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
-  ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
-  ] }) });
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }) }),
+    editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "unit_price",
+        render: ({ field: { onChange, ...field } }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.CurrencyInput,
+            {
+              ...field,
+              symbol: getNativeSymbol(currencyCode),
+              code: currencyCode,
+              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
+            }
+          ) }) });
+        }
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-end w-full", 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: editing ? onSubmit : () => {
+          setEditing(true);
+        },
+        disabled: isPending,
+        children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
+      }
+    )
+  ] }) }) });
 };
-const ShippingForm = ({ preview, order }) => {
-  var _a;
-  const { setIsOpen } = useStackedModal();
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [data, setData] = React.useState(null);
-  const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
-  const { shipping_options } = useShippingOptions(
-    {
-      id: appliedShippingOptionIds,
-      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
+const variantItemSchema = z.object({
+  quantity: z.number(),
+  unit_price: z.union([z.number(), z.string()])
+});
+const CustomItem = ({ item, preview, currencyCode }) => {
+  const [editing, setEditing] = React.useState(false);
+  const { quantity, unit_price, title } = item;
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      title,
+      quantity,
+      unit_price
     },
-    {
-      enabled: appliedShippingOptionIds.length > 0
-    }
-  );
-  const uniqueShippingProfiles = React.useMemo(() => {
-    const profiles = /* @__PURE__ */ new Map();
-    getUniqueShippingProfiles(order.items).forEach((profile) => {
-      profiles.set(profile.id, profile);
-    });
-    shipping_options == null ? void 0 : shipping_options.forEach((option) => {
-      profiles.set(option.shipping_profile_id, option.shipping_profile);
-    });
-    return Array.from(profiles.values());
-  }, [order.items, shipping_options]);
-  const { handleSuccess } = useRouteModal();
-  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
-  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
-  const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
-  const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
-  const onSubmit = async () => {
-    setIsSubmitting(true);
-    let requestSucceeded = false;
-    await requestOrderEdit(void 0, {
-      onError: (e) => {
-        ui.toast.error(`Failed to request order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        requestSucceeded = true;
-      }
+    resolver: zod.zodResolver(customItemSchema)
+  });
+  React.useEffect(() => {
+    form.reset({
+      title,
+      quantity,
+      unit_price
     });
-    if (!requestSucceeded) {
-      setIsSubmitting(false);
+  }, [form, title, quantity, unit_price]);
+  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 } = useDraftOrderUpdateActionItem(preview.id);
+  const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
+  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
+  const onSubmit = form.handleSubmit(async (data) => {
+    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
+      setEditing(false);
       return;
     }
-    await confirmOrderEdit(void 0, {
-      onError: (e) => {
-        ui.toast.error(`Failed to confirm order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        handleSuccess();
+    if (!actionId) {
+      await updateOriginalItem(
+        {
+          item_id: item.id,
+          quantity: data.quantity,
+          unit_price: convertNumber(data.unit_price)
+        },
+        {
+          onSuccess: () => {
+            setEditing(false);
+          },
+          onError: (e) => {
+            ui.toast.error(e.message);
+          }
+        }
+      );
+      return;
+    }
+    if (data.quantity === 0) {
+      await removeActionItem(actionId, {
+        onSuccess: () => {
+          setEditing(false);
+        },
+        onError: (e) => {
+          ui.toast.error(e.message);
+        }
+      });
+      return;
+    }
+    await updateActionItem(
+      {
+        action_id: actionId,
+        quantity: data.quantity,
+        unit_price: convertNumber(data.unit_price)
       },
-      onSettled: () => {
-        setIsSubmitting(false);
+      {
+        onSuccess: () => {
+          setEditing(false);
+        },
+        onError: (e) => {
+          ui.toast.error(e.message);
+        }
       }
-    });
-  };
-  const onKeydown = React.useCallback(
-    (e) => {
-      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-        if (data || isSubmitting) {
-          return;
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Thumbnail,
+        {
+          thumbnail: item.thumbnail,
+          alt: item.title ?? void 0
+        }
+      ),
+      editing ? /* @__PURE__ */ jsxRuntime.jsx(
+        Form$2.Field,
+        {
+          control: form.control,
+          name: "title",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }) });
+          }
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.title })
+    ] }),
+    editing ? /* @__PURE__ */ jsxRuntime.jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "quantity",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
         }
-        onSubmit();
       }
-    },
-    [data, isSubmitting, onSubmit]
-  );
-  React.useEffect(() => {
-    document.addEventListener("keydown", onKeydown);
-    return () => {
-      document.removeEventListener("keydown", onKeydown);
-    };
-  }, [onKeydown]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(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 the items in the order." }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text,
-              {
-                size: "xsmall",
-                weight: "plus",
-                className: "text-ui-fg-muted",
-                children: "Shipping profile"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text,
-              {
-                size: "xsmall",
-                weight: "plus",
-                className: "text-ui-fg-muted",
-                children: "Action"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
-            var _a2, _b, _c, _d, _e, _f, _g;
-            const items = getItemsWithShippingProfile(
-              profile.id,
-              order.items
-            );
-            const hasItems = items.length > 0;
-            const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
-              (option) => option.shipping_profile_id === profile.id
-            );
-            const shippingMethod = preview.shipping_methods.find(
-              (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
-            );
-            const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
-              (action) => action.action === "SHIPPING_ADD"
-            );
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              radixUi.Accordion.Item,
-              {
-                value: profile.id,
-                className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.IconButton,
-                        {
-                          size: "2xsmall",
-                          variant: "transparent",
-                          className: "group/trigger",
-                          disabled: !hasItems,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
-                        }
-                      ) }),
-                      !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            ui.Text,
-                            {
-                              size: "small",
-                              weight: "plus",
-                              leading: "compact",
-                              children: profile.name
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            ui.Text,
-                            {
-                              size: "small",
-                              leading: "compact",
-                              className: "text-ui-fg-subtle",
-                              children: [
-                                items.length,
-                                " ",
-                                pluralize(items.length, "items", "item")
-                              ]
-                            }
-                          )
-                        ] })
-                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Tooltip,
-                          {
-                            content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
-                              var _a3, _b2, _c2;
-                              return /* @__PURE__ */ jsxRuntime.jsx(
-                                "li",
-                                {
-                                  children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
-                                },
-                                item.id
-                              );
-                            }) }),
-                            children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              ui.Badge,
-                              {
-                                className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
-                                size: "xsmall",
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
-                                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
-                                    items.reduce(
-                                      (acc, item) => acc + item.quantity,
-                                      0
-                                    ),
-                                    "x",
-                                    " ",
-                                    pluralize(items.length, "items", "item")
-                                  ] })
-                                ]
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Tooltip,
-                          {
-                            content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
-                            children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              ui.Badge,
-                              {
-                                className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
-                                size: "xsmall",
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
-                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
-                                ]
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                          ui.Badge,
-                          {
-                            className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
-                            size: "xsmall",
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
-                            ]
-                          }
-                        ) })
-                      ] })
-                    ] }),
-                    shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
-                      ActionMenu,
-                      {
-                        groups: [
-                          {
-                            actions: [
-                              hasItems ? {
-                                label: "Edit shipping option",
-                                icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
-                                onClick: () => {
-                                  setIsOpen(
-                                    STACKED_FOCUS_MODAL_ID,
-                                    true
-                                  );
-                                  setData({
-                                    shippingProfileId: profile.id,
-                                    shippingOption,
-                                    shippingMethod
-                                  });
-                                }
-                              } : void 0,
-                              {
-                                label: "Remove shipping option",
-                                icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
-                                onClick: () => {
-                                  if (shippingMethod) {
-                                    if (addShippingMethodAction) {
-                                      removeActionShippingMethod(
-                                        addShippingMethodAction.id
-                                      );
-                                    } else {
-                                      removeShippingMethod(
-                                        shippingMethod.id
-                                      );
-                                    }
-                                  }
-                                }
-                              }
-                            ].filter(Boolean)
-                          }
-                        ]
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      StackedModalTrigger$1,
-                      {
-                        shippingProfileId: profile.id,
-                        shippingOption,
-                        shippingMethod,
-                        setData,
-                        children: "Add shipping option"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-                    items.map((item, idx) => {
-                      var _a3, _b2, _c2, _d2, _e2;
-                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          "div",
-                          {
-                            className: "px-3 flex items-center gap-x-3",
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                ui.Divider,
-                                {
-                                  variant: "dashed",
-                                  orientation: "vertical"
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                                  ui.Text,
-                                  {
-                                    size: "small",
-                                    leading: "compact",
-                                    className: "text-ui-fg-subtle",
-                                    children: [
-                                      item.quantity,
-                                      "x"
-                                    ]
-                                  }
-                                ) }),
-                                /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
-                                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                  /* @__PURE__ */ jsxRuntime.jsxs(
-                                    ui.Text,
-                                    {
-                                      size: "small",
-                                      leading: "compact",
-                                      weight: "plus",
-                                      children: [
-                                        (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
-                                        " (",
-                                        (_c2 = item.variant) == null ? void 0 : _c2.title,
-                                        ")"
-                                      ]
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    ui.Text,
-                                    {
-                                      size: "small",
-                                      leading: "compact",
-                                      className: "text-ui-fg-subtle",
-                                      children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
-                                    }
-                                  )
-                                ] })
-                              ] })
-                            ]
-                          },
-                          item.id
-                        ),
-                        idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
-                      ] }, item.id);
-                    })
-                  ] })
-                ]
-              },
-              profile.id
-            );
-          }) })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }),
+    editing ? /* @__PURE__ */ jsxRuntime.jsx(
+      Form$2.Field,
+      {
+        control: form.control,
+        name: "unit_price",
+        render: ({ field: { onChange, ...field } }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.CurrencyInput,
+            {
+              ...field,
+              symbol: getNativeSymbol(currencyCode),
+              code: currencyCode,
+              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
+            }
+          ) }) });
+        }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-end", 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: editing ? onSubmit : () => {
+          setEditing(true);
+        },
+        disabled: isPending,
+        children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
+      }
+    )
+  ] }) }) });
+};
+const StackedModalTrigger$1 = ({
+  type,
+  setModalContent
+}) => {
+  const { setIsOpen } = useStackedModal();
+  const onClick = React.useCallback(() => {
+    setModalContent(type);
+    setIsOpen(STACKED_MODAL_ID, true);
+  }, [setModalContent, setIsOpen, type]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
+};
+const VARIANT_PREFIX = "items";
+const LIMIT = 50;
+const ExistingItemsForm = ({ orderId, items }) => {
+  const { setIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = React.useState(
+    items.reduce((acc, item) => {
+      acc[item.variant_id] = true;
+      return acc;
+    }, {})
+  );
+  React.useEffect(() => {
+    setRowSelection(
+      items.reduce((acc, item) => {
+        if (item.variant_id) {
+          acc[item.variant_id] = true;
+        }
+        return acc;
+      }, {})
+    );
+  }, [items]);
+  const { q, order, offset } = useQueryParams(
+    ["q", "order", "offset"],
+    VARIANT_PREFIX
+  );
+  const { variants, count, isPending, isError, error } = useProductVariants(
+    {
+      q,
+      order,
+      offset: offset ? parseInt(offset) : void 0,
+      limit: LIMIT
+    },
+    {
+      placeholderData: reactQuery.keepPreviousData
+    }
+  );
+  const columns = useColumns();
+  const { mutateAsync } = useDraftOrderAddItems(orderId);
+  const onSubmit = async () => {
+    const ids = Object.keys(rowSelection).filter(
+      (id) => !items.find((i) => i.variant_id === id)
+    );
+    await mutateAsync(
+      {
+        items: ids.map((id) => ({
+          variant_id: id,
+          quantity: 1
+        }))
+      },
+      {
+        onSuccess: () => {
+          setRowSelection({});
+          setIsOpen(STACKED_MODAL_ID, false);
+        },
+        onError: (e) => {
+          ui.toast.error(e.message);
+        }
+      }
+    );
+  };
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StackedFocusModal.Content,
+    {
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+        const searchInput = document.querySelector(
+          "[data-modal-id='modal-search-input']"
+        );
+        if (searchInput) {
+          searchInput.focus();
+        }
+      },
+      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 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,
+            {
+              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"
+      })
+    ];
+  }, []);
+};
+const CustomItemForm = ({ orderId, currencyCode }) => {
+  const { setIsOpen } = useStackedModal();
+  const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      title: "",
+      quantity: 1,
+      unit_price: ""
+    },
+    resolver: zod.zodResolver(customItemSchema)
+  });
+  const onSubmit = form.handleSubmit(async (data) => {
+    await addItems(
+      {
+        items: [
+          {
+            title: data.title,
+            quantity: data.quantity,
+            unit_price: convertNumber(data.unit_price)
+          }
+        ]
+      },
+      {
+        onSuccess: () => {
+          setIsOpen(STACKED_MODAL_ID, false);
+        },
+        onError: (e) => {
+          ui.toast.error(e.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.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 px-2 py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        StackedFocusModal,
+        Form$2.Field,
         {
-          id: STACKED_FOCUS_MODAL_ID,
-          onOpenChangeCallback: (open) => {
-            if (!open) {
-              setData(null);
-            }
-            return open;
-          },
-          children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
+          control: form.control,
+          name: "title",
+          render: ({ field }) => /* @__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: "Title" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+            ] })
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Form$2.Field,
+        {
+          control: form.control,
+          name: "unit_price",
+          render: ({ field: { onChange, ...field } }) => /* @__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: "Unit price" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.CurrencyInput,
+                {
+                  symbol: getNativeSymbol(currencyCode),
+                  code: currencyCode,
+                  onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+            ] })
+          ] }) })
         }
-      )
-    ] }),
-    /* @__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.Divider, { variant: "dashed" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Button,
+        Form$2.Field,
         {
-          size: "small",
-          type: "button",
-          isLoading: isSubmitting,
-          onClick: onSubmit,
-          children: "Save"
+          control: form.control,
+          name: "quantity",
+          render: ({ field }) => /* @__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: "Quantity" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field, className: "w-full" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+            ] })
+          ] }) })
         }
       )
+    ] }) }) }),
+    /* @__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: "Add item" })
     ] }) })
-  ] });
+  ] }) }) });
 };
-const StackedModalTrigger$1 = ({
-  shippingProfileId,
-  shippingOption,
-  shippingMethod,
-  setData,
-  children
-}) => {
-  const { setIsOpen, getIsOpen } = useStackedModal();
-  const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
-  const onToggle = () => {
-    if (isOpen) {
-      setIsOpen(STACKED_FOCUS_MODAL_ID, false);
-      setData(null);
-    } else {
-      setIsOpen(STACKED_FOCUS_MODAL_ID, true);
-      setData({
-        shippingProfileId,
-        shippingOption,
-        shippingMethod
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Button,
-    {
-      size: "small",
-      variant: "secondary",
-      onClick: onToggle,
-      className: "text-ui-fg-primary shrink-0",
-      children
-    }
-  );
+const customItemSchema = z.object({
+  title: z.string().min(1),
+  quantity: z.number(),
+  unit_price: z.union([z.number(), z.string()])
+});
+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 ShippingProfileForm = ({
-  data,
-  order,
-  preview
-}) => {
-  var _a, _b, _c, _d, _e, _f;
-  const { setIsOpen } = useStackedModal();
+const EmailForm = ({ order }) => {
   const form = reactHookForm.useForm({
-    resolver: zod.zodResolver(shippingMethodSchema),
     defaultValues: {
-      location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
-      shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
-      custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
-    }
+      email: order.email ?? ""
+    },
+    resolver: zod.zodResolver(schema$3)
   });
-  const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
-  const {
-    mutateAsync: updateShippingMethod,
-    isPending: isUpdatingShippingMethod
-  } = useDraftOrderUpdateShippingMethod(order.id);
-  const onSubmit = form.handleSubmit(async (values) => {
-    if (lodash.isEqual(values, form.formState.defaultValues)) {
-      setIsOpen(STACKED_FOCUS_MODAL_ID, false);
-      return;
-    }
-    if (data.shippingMethod) {
-      await updateShippingMethod(
-        {
-          method_id: data.shippingMethod.id,
-          shipping_option_id: values.shipping_option_id,
-          custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
-        },
-        {
-          onError: (e) => {
-            ui.toast.error(e.message);
-          },
-          onSuccess: () => {
-            setIsOpen(STACKED_FOCUS_MODAL_ID, false);
-          }
-        }
-      );
-      return;
-    }
-    await addShippingMethod(
-      {
-        shipping_option_id: values.shipping_option_id,
-        custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
-      },
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      { email: data.email },
       {
-        onError: (e) => {
-          ui.toast.error(e.message);
-        },
         onSuccess: () => {
-          setIsOpen(STACKED_FOCUS_MODAL_ID, false);
+          handleSuccess();
+        },
+        onError: (error) => {
+          ui.toast.error(error.message);
         }
       }
     );
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
     KeyboundForm,
     {
-      className: "flex h-full flex-col overflow-hidden",
+      className: "flex flex-1 flex-col overflow-hidden",
       onSubmit,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.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: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            LocationField,
-            {
-              control: form.control,
-              setValue: form.setValue
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ShippingOptionField,
-            {
-              shippingProfileId: data.shippingProfileId,
-              preview,
-              control: form.control
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CustomAmountField,
-            {
-              control: form.control,
-              currencyCode: order.currency_code
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ItemsPreview,
-            {
-              order,
-              shippingProfileId: data.shippingProfileId
-            }
-          )
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", 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: "submit",
-              isLoading: isPending || isUpdatingShippingMethod,
-              children: data.shippingMethod ? "Update" : "Add"
-            }
-          )
+        /* @__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 shippingMethodSchema = z.object({
-  location_id: z.string(),
-  shipping_option_id: z.string(),
-  custom_amount: z.union([z.number(), z.string()]).optional()
+const schema$3 = z.object({
+  email: z.string().email()
 });
-const ItemsPreview = ({ order, shippingProfileId }) => {
-  const matches = order.items.filter(
-    (item) => {
-      var _a, _b, _c;
-      return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
+const SalesChannel = () => {
+  const { id } = reactRouterDom.useParams();
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
+    {
+      fields: "+sales_channel_id"
+    },
+    {
+      enabled: !!id
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("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.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: 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,
-          '".'
-        ] })
-      ] }) })
-    ] })
+  if (isError) {
+    throw error;
+  }
+  const ISrEADY = !!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" }) })
+    ] }),
+    ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
   ] });
 };
-const LocationField = ({ control, setValue }) => {
-  const locations = useComboboxData({
-    queryKey: ["locations"],
-    queryFn: async (params) => {
-      return await sdk.admin.stockLocation.list(params);
+const SalesChannelForm = ({ order }) => {
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      sales_channel_id: order.sales_channel_id || ""
     },
-    getOptions: (data) => {
-      return data.stock_locations.map((location) => ({
-        label: location.name,
-        value: location.id
-      }));
-    }
+    resolver: zod.zodResolver(schema$2)
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Form$2.Field,
-    {
-      control,
-      name: "location_id",
-      render: ({ field: { onChange, ...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",
-              onChange: (value) => {
-                setValue("shipping_option_id", "", {
-                  shouldDirty: true,
-                  shouldTouch: true
-                });
-                onChange(value);
-              },
-              ...field
-            }
-          ) })
-        ] }) });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        sales_channel_id: data.sales_channel_id
+      },
+      {
+        onSuccess: () => {
+          ui.toast.success("Sales channel updated");
+          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(SalesChannelField, { control: form.control, order }) }),
+        /* @__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 ShippingOptionField = ({
-  shippingProfileId,
-  preview,
-  control
-}) => {
-  var _a;
-  const locationId = reactHookForm.useWatch({ control, name: "location_id" });
-  const shippingOptions = useComboboxData({
-    queryKey: ["shipping_options", locationId, shippingProfileId],
+const SalesChannelField = ({ control, order }) => {
+  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) => {
-        var _a2;
-        if ((_a2 = option.rules) == null ? void 0 : _a2.find(
-          (r) => r.attribute === "is_return" && r.value === "true"
-        )) {
-          return void 0;
-        }
-        return {
-          label: option.name,
-          value: option.id
-        };
-      }).filter(Boolean);
+      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 tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Form$2.Field,
     {
       control,
-      name: "shipping_option_id",
+      name: "sales_channel_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", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Form$2.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(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                Combobox,
-                {
-                  options: shippingOptions.options,
-                  fetchNextPage: shippingOptions.fetchNextPage,
-                  isFetchingNextPage: shippingOptions.isFetchingNextPage,
-                  searchValue: shippingOptions.searchValue,
-                  onSearchValueChange: shippingOptions.onSearchValueChange,
-                  placeholder: "Select shipping option",
-                  ...field,
-                  disabled: !locationId || !shippingProfileId
-                }
-              ) }) })
-            }
-          )
-        ] }) });
-      }
-    }
-  );
-};
-const CustomAmountField = ({
-  control,
-  currencyCode
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Form$2.Field,
-    {
-      control,
-      name: "custom_amount",
-      render: ({ field: { onChange, ...field } }) => {
-        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(Form$2.Label, { optional: true, children: "Custom amount" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
-          ] }),
+        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(
-            ui.CurrencyInput,
-            {
-              ...field,
-              onValueChange: (value) => onChange(value),
-              symbol: getNativeSymbol(currencyCode),
-              code: currencyCode
+            Combobox,
+            {
+              options: salesChannels.options,
+              fetchNextPage: salesChannels.fetchNextPage,
+              isFetchingNextPage: salesChannels.isFetchingNextPage,
+              searchValue: salesChannels.searchValue,
+              onSearchValueChange: salesChannels.onSearchValueChange,
+              placeholder: "Select sales channel",
+              ...field
             }
-          ) })
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
         ] });
       }
     }
   );
 };
+const schema$2 = z.object({
+  sales_channel_id: z.string().min(1)
+});
 const InlineTip = React.forwardRef(
   ({ variant = "tip", label, className, children, ...props }, ref) => {
     const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
@@ -11486,78 +11348,355 @@ const PlaceholderInner = () => {
     ] }) })
   ] });
 };
-const EDITABLE_TYPES = ["string", "number", "boolean"];
-function getDefaultValues(metadata) {
-  if (!metadata || !Object.keys(metadata).length) {
-    return [
+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 PROMOTION_QUERY_KEY = "promotions";
+const promotionsQueryKeys = {
+  list: (query2) => [
+    PROMOTION_QUERY_KEY,
+    query2 ? query2 : void 0
+  ],
+  detail: (id, query2) => [
+    PROMOTION_QUERY_KEY,
+    id,
+    query2 ? query2 : void 0
+  ]
+};
+const usePromotions = (query2, options) => {
+  const { data, ...rest } = reactQuery.useQuery({
+    queryKey: promotionsQueryKeys.list(query2),
+    queryFn: async () => sdk.admin.promotion.list(query2),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+const Promotions = () => {
+  const { id } = reactRouterDom.useParams();
+  const {
+    order: preview,
+    isError: isPreviewError,
+    error: previewError
+  } = useOrderPreview(id, void 0);
+  useInitiateOrderEdit({ preview });
+  const { onCancel } = useCancelOrderEdit({ preview });
+  if (isPreviewError) {
+    throw previewError;
+  }
+  const isReady = !!preview;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
+    isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
+  ] });
+};
+const PromotionForm = ({ preview }) => {
+  const { items, shipping_methods } = preview;
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [comboboxValue, setComboboxValue] = React.useState("");
+  const { handleSuccess } = useRouteModal();
+  const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
+  const promoCodes = getPromotionCodes(items, shipping_methods);
+  const { promotions, isPending, isError, error } = usePromotions(
+    {
+      code: promoCodes
+    },
+    {
+      enabled: !!promoCodes.length
+    }
+  );
+  const comboboxData = useComboboxData({
+    queryKey: ["promotions", "combobox", promoCodes],
+    queryFn: async (params) => {
+      return await sdk.admin.promotion.list({
+        ...params,
+        code: {
+          $nin: promoCodes
+        }
+      });
+    },
+    getOptions: (data) => {
+      return data.promotions.map((promotion) => ({
+        label: promotion.code,
+        value: promotion.code
+      }));
+    }
+  });
+  const add = async (value) => {
+    if (!value) {
+      return;
+    }
+    addPromotions(
+      {
+        promo_codes: [value]
+      },
+      {
+        onError: (e) => {
+          ui.toast.error(e.message);
+          comboboxData.onSearchValueChange("");
+          setComboboxValue("");
+        },
+        onSuccess: () => {
+          comboboxData.onSearchValueChange("");
+          setComboboxValue("");
+        }
+      }
+    );
+  };
+  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
+  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const onSubmit = async () => {
+    setIsSubmitting(true);
+    let requestSucceeded = false;
+    await requestOrderEdit(void 0, {
+      onError: (e) => {
+        ui.toast.error(e.message);
+      },
+      onSuccess: () => {
+        requestSucceeded = true;
+      }
+    });
+    if (!requestSucceeded) {
+      setIsSubmitting(false);
+      return;
+    }
+    await confirmOrderEdit(void 0, {
+      onError: (e) => {
+        ui.toast.error(e.message);
+      },
+      onSuccess: () => {
+        handleSuccess();
+      },
+      onSettled: () => {
+        setIsSubmitting(false);
+      }
+    });
+  };
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Combobox,
+          {
+            id: "promotion-combobox",
+            "aria-describedby": "promotion-combobox-hint",
+            isFetchingNextPage: comboboxData.isFetchingNextPage,
+            fetchNextPage: comboboxData.fetchNextPage,
+            options: comboboxData.options,
+            onSearchValueChange: comboboxData.onSearchValueChange,
+            searchValue: comboboxData.searchValue,
+            disabled: comboboxData.disabled || isAddingPromotions,
+            onChange: add,
+            value: comboboxValue
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
+        PromotionItem,
+        {
+          promotion,
+          orderId: preview.id,
+          isLoading: isPending
+        },
+        promotion.id
+      )) })
+    ] }) }),
+    /* @__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: isSubmitting || isAddingPromotions,
+          children: "Save"
+        }
+      )
+    ] }) })
+  ] });
+};
+const PromotionItem = ({
+  promotion,
+  orderId,
+  isLoading
+}) => {
+  var _a;
+  const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
+  const onRemove = async () => {
+    removePromotions(
       {
-        key: "",
-        value: "",
-        disabled: false
+        promo_codes: [promotion.code]
+      },
+      {
+        onError: (e) => {
+          ui.toast.error(e.message);
+        }
       }
-    ];
+    );
+  };
+  const displayValue = getDisplayValue(promotion);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.clx(
+        "px-3 py-2 rounded-lg bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between",
+        {
+          "animate-pulse": isLoading
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-ui-fg-subtle", children: [
+            displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.IconButton,
+          {
+            size: "small",
+            type: "button",
+            variant: "transparent",
+            onClick: onRemove,
+            isLoading: isPending || isLoading,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
+          }
+        )
+      ]
+    },
+    promotion.id
+  );
+};
+function getDisplayValue(promotion) {
+  var _a, _b, _c, _d;
+  const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
+  if (!value) {
+    return null;
   }
-  return Object.entries(metadata).map(([key, value]) => {
-    if (!EDITABLE_TYPES.includes(typeof value)) {
-      return {
-        key,
-        value,
-        disabled: true
-      };
-    }
-    let stringValue = value;
-    if (typeof value !== "string") {
-      stringValue = JSON.stringify(value);
+  if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
+    const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
+    if (!currency) {
+      return null;
     }
-    return {
-      key,
-      value: stringValue,
-      original_key: key
-    };
-  });
+    return getLocaleAmount(value, currency);
+  } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
+    return formatPercentage(value);
+  }
+  return null;
 }
-function parseValues(values) {
-  const metadata = values.metadata;
-  const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
-  if (isEmpty) {
-    return null;
+const formatter = new Intl.NumberFormat([], {
+  style: "percent",
+  minimumFractionDigits: 2
+});
+const formatPercentage = (value, isPercentageValue = false) => {
+  let val = value || 0;
+  if (!isPercentageValue) {
+    val = val / 100;
   }
-  const update = {};
-  metadata.forEach((field) => {
-    let key = field.key;
-    let value = field.value;
-    const disabled = field.disabled;
-    if (!key || !value) {
-      return;
-    }
-    if (disabled) {
-      update[key] = value;
-      return;
+  return formatter.format(val);
+};
+function getPromotionCodes(items, shippingMethods) {
+  const codes = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (item.adjustments) {
+      for (const adjustment of item.adjustments) {
+        if (adjustment.code) {
+          codes.add(adjustment.code);
+        }
+      }
     }
-    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;
+  }
+  for (const shippingMethod of shippingMethods) {
+    if (shippingMethod.adjustments) {
+      for (const adjustment of shippingMethod.adjustments) {
+        if (adjustment.code) {
+          codes.add(adjustment.code);
+        }
       }
     }
-  });
-  return update;
-}
-function getHasUneditableRows(metadata) {
-  if (!metadata) {
-    return false;
   }
-  return Object.values(metadata).some(
-    (value) => !EDITABLE_TYPES.includes(typeof value)
-  );
+  return Array.from(codes);
 }
 const ShippingAddress = () => {
   const { id } = reactRouterDom.useParams();
@@ -11591,7 +11730,7 @@ const ShippingAddressForm = ({ order }) => {
       postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
       phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
     },
-    resolver: zod.zodResolver(schema$2)
+    resolver: zod.zodResolver(schema$1)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -11761,7 +11900,7 @@ const ShippingAddressForm = ({ order }) => {
     }
   ) });
 };
-const schema$2 = addressSchema;
+const schema$1 = addressSchema;
 const TransferOwnership = () => {
   const { id } = reactRouterDom.useParams();
   const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -11785,7 +11924,7 @@ const TransferOwnershipForm = ({ order }) => {
     defaultValues: {
       customer_id: order.customer_id || ""
     },
-    resolver: zod.zodResolver(schema$1)
+    resolver: zod.zodResolver(schema)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -12189,201 +12328,69 @@ const Illustration = () => {
             "rect",
             {
               width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-};
-const schema$1 = z.object({
-  customer_id: z.string().min(1)
-});
-const NumberInput = React.forwardRef(
-  ({
-    value,
-    onChange,
-    size = "base",
-    min = 0,
-    max = 100,
-    step = 1,
-    className,
-    disabled,
-    ...props
-  }, ref) => {
-    const handleChange = (event) => {
-      const newValue = event.target.value === "" ? min : Number(event.target.value);
-      if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
-        onChange(newValue);
-      }
-    };
-    const handleIncrement = () => {
-      const newValue = value + step;
-      if (max === void 0 || newValue <= max) {
-        onChange(newValue);
-      }
-    };
-    const handleDecrement = () => {
-      const newValue = value - step;
-      if (min === void 0 || newValue >= min) {
-        onChange(newValue);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: ui.clx(
-          "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
-          "[&:has(input:focus)]:shadow-borders-interactive-with-active",
-          {
-            "h-7": size === "small",
-            "h-8": size === "base"
-          },
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              ref,
-              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
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              className: ui.clx(
-                "flex items-center justify-center outline-none transition-fg",
-                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
-                "focus:bg-ui-bg-field-component-hover",
-                "hover:bg-ui-bg-field-component-hover",
-                {
-                  "size-7": size === "small",
-                  "size-8": size === "base"
-                }
-              ),
-              type: "button",
-              onClick: handleDecrement,
-              disabled: min !== void 0 && value <= min || disabled,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
-              ]
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              className: ui.clx(
-                "flex items-center justify-center outline-none transition-fg",
-                "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
-                "focus:bg-ui-bg-field-hover",
-                "hover:bg-ui-bg-field-hover",
-                {
-                  "size-7": size === "small",
-                  "size-8": size === "base"
-                }
-              ),
-              type: "button",
-              onClick: handleIncrement,
-              disabled: max !== void 0 && value >= max || disabled,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Increase by ${step}` })
-              ]
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
             }
-          )
-        ]
-      }
-    );
-  }
-);
-const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
-const productVariantsQueryKeys = {
-  list: (query2) => [
-    PRODUCT_VARIANTS_QUERY_KEY,
-    query2 ? query2 : void 0
-  ]
-};
-const useProductVariants = (query2, options) => {
-  const { data, ...rest } = reactQuery.useQuery({
-    queryKey: productVariantsQueryKeys.list(query2),
-    queryFn: async () => await sdk.admin.productVariant.list(query2),
-    ...options
-  });
-  return { ...data, ...rest };
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
 };
-const STACKED_MODAL_ID = "items_stacked_modal";
-const Items = () => {
+const schema = z.object({
+  customer_id: z.string().min(1)
+});
+const STACKED_FOCUS_MODAL_ID = "shipping-form";
+const Shipping = () => {
+  var _a;
   const { id } = reactRouterDom.useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
+  });
   const {
     order: preview,
     isPending: isPreviewPending,
     isError: isPreviewError,
     error: previewError
-  } = useOrderPreview(id, void 0, {
-    placeholderData: reactQuery.keepPreviousData
-  });
+  } = 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;
@@ -12391,28 +12398,50 @@ const Items = () => {
   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 }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Items" }) }),
+  const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
+  const isReady = preview && !isPreviewPending && order && !isPending;
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", 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.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: "This draft order currently has no items. Add items to the order before adding shipping." }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
+  ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
   ] }) });
 };
-const ItemsForm = ({ preview, currencyCode }) => {
+const ShippingForm = ({ preview, order }) => {
   var _a;
+  const { setIsOpen } = useStackedModal();
   const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [modalContent, setModalContent] = React.useState(
-    null
+  const [data, setData] = React.useState(null);
+  const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
+  const { shipping_options } = useShippingOptions(
+    {
+      id: appliedShippingOptionIds,
+      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
+    },
+    {
+      enabled: appliedShippingOptionIds.length > 0
+    }
   );
+  const uniqueShippingProfiles = React.useMemo(() => {
+    const profiles = /* @__PURE__ */ new Map();
+    getUniqueShippingProfiles(order.items).forEach((profile) => {
+      profiles.set(profile.id, profile);
+    });
+    shipping_options == null ? void 0 : shipping_options.forEach((option) => {
+      profiles.set(option.shipping_profile_id, option.shipping_profile);
+    });
+    return Array.from(profiles.values());
+  }, [order.items, shipping_options]);
   const { handleSuccess } = useRouteModal();
-  const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
   const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
   const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
-  const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
-  const matches = React.useMemo(() => {
-    return matchSorter.matchSorter(preview.items, query2, {
-      keys: ["product_title", "variant_title", "variant_sku", "title"]
-    });
-  }, [preview.items, query2]);
+  const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
+  const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
   const onSubmit = async () => {
     setIsSubmitting(true);
     let requestSucceeded = false;
@@ -12440,750 +12469,721 @@ const ItemsForm = ({ preview, currencyCode }) => {
       }
     });
   };
-  const onKeyDown = React.useCallback(
+  const onKeydown = React.useCallback(
     (e) => {
       if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-        if (modalContent || isSubmitting) {
+        if (data || isSubmitting) {
           return;
         }
         onSubmit();
       }
     },
-    [modalContent, isSubmitting, onSubmit]
+    [data, isSubmitting, onSubmit]
   );
   React.useEffect(() => {
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", onKeydown);
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("keydown", onKeydown);
     };
-  }, [onKeyDown]);
+  }, [onKeydown]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", 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,
-        onOpenChangeCallback: (open) => {
-          if (!open) {
-            setModalContent(null);
-          }
-        },
-        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.jsxs(ui.DropdownMenu, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}) }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        StackedModalTrigger,
-                        {
-                          type: "add-items",
-                          setModalContent
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        StackedModalTrigger,
+    /* @__PURE__ */ jsxRuntime.jsxs(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 the items in the order." }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                size: "xsmall",
+                weight: "plus",
+                className: "text-ui-fg-muted",
+                children: "Shipping profile"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                size: "xsmall",
+                weight: "plus",
+                className: "text-ui-fg-muted",
+                children: "Action"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
+            var _a2, _b, _c, _d, _e, _f, _g;
+            const items = getItemsWithShippingProfile(
+              profile.id,
+              order.items
+            );
+            const hasItems = items.length > 0;
+            const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
+              (option) => option.shipping_profile_id === profile.id
+            );
+            const shippingMethod = preview.shipping_methods.find(
+              (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
+            );
+            const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
+              (action) => action.action === "SHIPPING_ADD"
+            );
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              radixUi.Accordion.Item,
+              {
+                value: profile.id,
+                className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.IconButton,
                         {
-                          type: "add-custom-item",
-                          setModalContent
+                          size: "2xsmall",
+                          variant: "transparent",
+                          className: "group/trigger",
+                          disabled: !hasItems,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
                         }
-                      )
-                    ] })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_1fr_1fr_28px] 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", {})
-                ] }) }),
-                /* @__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.jsx(
-                  Item,
-                  {
-                    item,
-                    preview,
-                    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 "',
-                    query2,
-                    '".'
+                      ) }),
+                      !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.Text,
+                            {
+                              size: "small",
+                              weight: "plus",
+                              leading: "compact",
+                              children: profile.name
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            ui.Text,
+                            {
+                              size: "small",
+                              leading: "compact",
+                              className: "text-ui-fg-subtle",
+                              children: [
+                                items.length,
+                                " ",
+                                pluralize(items.length, "items", "item")
+                              ]
+                            }
+                          )
+                        ] })
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Tooltip,
+                          {
+                            content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
+                              var _a3, _b2, _c2;
+                              return /* @__PURE__ */ jsxRuntime.jsx(
+                                "li",
+                                {
+                                  children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
+                                },
+                                item.id
+                              );
+                            }) }),
+                            children: /* @__PURE__ */ jsxRuntime.jsxs(
+                              ui.Badge,
+                              {
+                                className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
+                                size: "xsmall",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
+                                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+                                    items.reduce(
+                                      (acc, item) => acc + item.quantity,
+                                      0
+                                    ),
+                                    "x",
+                                    " ",
+                                    pluralize(items.length, "items", "item")
+                                  ] })
+                                ]
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Tooltip,
+                          {
+                            content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
+                            children: /* @__PURE__ */ jsxRuntime.jsxs(
+                              ui.Badge,
+                              {
+                                className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
+                                size: "xsmall",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
+                                ]
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.Badge,
+                          {
+                            className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
+                            size: "xsmall",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
+                            ]
+                          }
+                        ) })
+                      ] })
+                    ] }),
+                    shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
+                      ActionMenu,
+                      {
+                        groups: [
+                          {
+                            actions: [
+                              hasItems ? {
+                                label: "Edit shipping option",
+                                icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
+                                onClick: () => {
+                                  setIsOpen(
+                                    STACKED_FOCUS_MODAL_ID,
+                                    true
+                                  );
+                                  setData({
+                                    shippingProfileId: profile.id,
+                                    shippingOption,
+                                    shippingMethod
+                                  });
+                                }
+                              } : void 0,
+                              {
+                                label: "Remove shipping option",
+                                icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+                                onClick: () => {
+                                  if (shippingMethod) {
+                                    if (addShippingMethodAction) {
+                                      removeActionShippingMethod(
+                                        addShippingMethodAction.id
+                                      );
+                                    } else {
+                                      removeShippingMethod(
+                                        shippingMethod.id
+                                      );
+                                    }
+                                  }
+                                }
+                              }
+                            ].filter(Boolean)
+                          }
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      StackedModalTrigger,
+                      {
+                        shippingProfileId: profile.id,
+                        shippingOption,
+                        shippingMethod,
+                        setData,
+                        children: "Add shipping option"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+                    items.map((item, idx) => {
+                      var _a3, _b2, _c2, _d2, _e2;
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            className: "px-3 flex items-center gap-x-3",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.Divider,
+                                {
+                                  variant: "dashed",
+                                  orientation: "vertical"
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                                  ui.Text,
+                                  {
+                                    size: "small",
+                                    leading: "compact",
+                                    className: "text-ui-fg-subtle",
+                                    children: [
+                                      item.quantity,
+                                      "x"
+                                    ]
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
+                                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs(
+                                    ui.Text,
+                                    {
+                                      size: "small",
+                                      leading: "compact",
+                                      weight: "plus",
+                                      children: [
+                                        (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
+                                        " (",
+                                        (_c2 = item.variant) == null ? void 0 : _c2.title,
+                                        ")"
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    ui.Text,
+                                    {
+                                      size: "small",
+                                      leading: "compact",
+                                      className: "text-ui-fg-subtle",
+                                      children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
+                                    }
+                                  )
+                                ] })
+                              ] })
+                            ]
+                          },
+                          item.id
+                        ),
+                        idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
+                      ] }, item.id);
+                    })
                   ] })
-                ] }) })
-              ] })
-            ] }),
-            /* @__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("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
-            ] })
-          ] }) }),
-          modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsxRuntime.jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsxRuntime.jsx(
-            CustomItemForm,
-            {
-              orderId: preview.id,
-              currencyCode
+                ]
+              },
+              profile.id
+            );
+          }) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StackedFocusModal,
+        {
+          id: STACKED_FOCUS_MODAL_ID,
+          onOpenChangeCallback: (open) => {
+            if (!open) {
+              setData(null);
             }
-          ) : null)
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2 justify-end", children: [
+            return open;
+          },
+          children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
+        }
+      )
+    ] }),
+    /* @__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: "button",
-          onClick: onSubmit,
           isLoading: isSubmitting,
+          onClick: onSubmit,
           children: "Save"
         }
       )
     ] }) })
   ] });
 };
-const Item = ({ item, preview, currencyCode }) => {
-  if (item.variant_id) {
-    return /* @__PURE__ */ jsxRuntime.jsx(VariantItem, { item, preview, currencyCode });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(CustomItem, { item, preview, currencyCode });
-};
-const VariantItem = ({ item, preview, currencyCode }) => {
-  const [editing, setEditing] = React.useState(false);
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      quantity: item.quantity,
-      unit_price: item.unit_price
-    },
-    resolver: zod.zodResolver(variantItemSchema)
-  });
-  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 } = useDraftOrderUpdateActionItem(preview.id);
-  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
-  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
-  const onSubmit = form.handleSubmit(async (data) => {
-    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
-      setEditing(false);
-      return;
+const StackedModalTrigger = ({
+  shippingProfileId,
+  shippingOption,
+  shippingMethod,
+  setData,
+  children
+}) => {
+  const { setIsOpen, getIsOpen } = useStackedModal();
+  const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
+  const onToggle = () => {
+    if (isOpen) {
+      setIsOpen(STACKED_FOCUS_MODAL_ID, false);
+      setData(null);
+    } else {
+      setIsOpen(STACKED_FOCUS_MODAL_ID, true);
+      setData({
+        shippingProfileId,
+        shippingOption,
+        shippingMethod
+      });
     }
-    if (!actionId) {
-      await updateOriginalItem(
-        {
-          item_id: item.id,
-          quantity: data.quantity,
-          unit_price: convertNumber(data.unit_price)
-        },
-        {
-          onSuccess: () => {
-            setEditing(false);
-          },
-          onError: (e) => {
-            ui.toast.error(e.message);
-          }
-        }
-      );
-      return;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      size: "small",
+      variant: "secondary",
+      onClick: onToggle,
+      className: "text-ui-fg-primary shrink-0",
+      children
     }
-    await updateActionItem(
-      {
-        action_id: actionId,
-        quantity: data.quantity,
-        unit_price: convertNumber(data.unit_price)
-      },
-      {
-        onSuccess: () => {
-          setEditing(false);
-        },
-        onError: (e) => {
-          ui.toast.error(e.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full", 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
-          }
-        )
-      ] })
-    ] }),
-    editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "quantity",
-        render: ({ field }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
-        }
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }) }),
-    editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "unit_price",
-        render: ({ field: { onChange, ...field } }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            ui.CurrencyInput,
-            {
-              ...field,
-              symbol: getNativeSymbol(currencyCode),
-              code: currencyCode,
-              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
-            }
-          ) }) });
-        }
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-end w-full", 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: editing ? onSubmit : () => {
-          setEditing(true);
-        },
-        disabled: isPending,
-        children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
-      }
-    )
-  ] }) }) });
+  );
 };
-const variantItemSchema = z.object({
-  quantity: z.number(),
-  unit_price: z.union([z.number(), z.string()])
-});
-const CustomItem = ({ item, preview, currencyCode }) => {
-  const [editing, setEditing] = React.useState(false);
-  const { quantity, unit_price, title } = item;
+const ShippingProfileForm = ({
+  data,
+  order,
+  preview
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { setIsOpen } = useStackedModal();
   const form = reactHookForm.useForm({
+    resolver: zod.zodResolver(shippingMethodSchema),
     defaultValues: {
-      title,
-      quantity,
-      unit_price
-    },
-    resolver: zod.zodResolver(customItemSchema)
+      location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
+      shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
+      custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
+    }
   });
-  React.useEffect(() => {
-    form.reset({
-      title,
-      quantity,
-      unit_price
-    });
-  }, [form, title, quantity, unit_price]);
-  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 } = useDraftOrderUpdateActionItem(preview.id);
-  const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
-  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
-  const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
-  const onSubmit = form.handleSubmit(async (data) => {
-    if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
-      setEditing(false);
+  const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
+  const {
+    mutateAsync: updateShippingMethod,
+    isPending: isUpdatingShippingMethod
+  } = useDraftOrderUpdateShippingMethod(order.id);
+  const onSubmit = form.handleSubmit(async (values) => {
+    if (lodash.isEqual(values, form.formState.defaultValues)) {
+      setIsOpen(STACKED_FOCUS_MODAL_ID, false);
       return;
     }
-    if (!actionId) {
-      await updateOriginalItem(
+    if (data.shippingMethod) {
+      await updateShippingMethod(
         {
-          item_id: item.id,
-          quantity: data.quantity,
-          unit_price: convertNumber(data.unit_price)
+          method_id: data.shippingMethod.id,
+          shipping_option_id: values.shipping_option_id,
+          custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
         },
         {
-          onSuccess: () => {
-            setEditing(false);
-          },
           onError: (e) => {
             ui.toast.error(e.message);
+          },
+          onSuccess: () => {
+            setIsOpen(STACKED_FOCUS_MODAL_ID, false);
           }
         }
       );
       return;
     }
-    if (data.quantity === 0) {
-      await removeActionItem(actionId, {
-        onSuccess: () => {
-          setEditing(false);
-        },
-        onError: (e) => {
-          ui.toast.error(e.message);
-        }
-      });
-      return;
-    }
-    await updateActionItem(
-      {
-        action_id: actionId,
-        quantity: data.quantity,
-        unit_price: convertNumber(data.unit_price)
-      },
-      {
-        onSuccess: () => {
-          setEditing(false);
-        },
-        onError: (e) => {
-          ui.toast.error(e.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_28px] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Thumbnail,
-        {
-          thumbnail: item.thumbnail,
-          alt: item.title ?? void 0
-        }
-      ),
-      editing ? /* @__PURE__ */ jsxRuntime.jsx(
-        Form$2.Field,
-        {
-          control: form.control,
-          name: "title",
-          render: ({ field }) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }) });
-          }
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.title })
-    ] }),
-    editing ? /* @__PURE__ */ jsxRuntime.jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "quantity",
-        render: ({ field }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
-        }
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }),
-    editing ? /* @__PURE__ */ jsxRuntime.jsx(
-      Form$2.Field,
-      {
-        control: form.control,
-        name: "unit_price",
-        render: ({ field: { onChange, ...field } }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            ui.CurrencyInput,
-            {
-              ...field,
-              symbol: getNativeSymbol(currencyCode),
-              code: currencyCode,
-              onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
-            }
-          ) }) });
-        }
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-end", 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: editing ? onSubmit : () => {
-          setEditing(true);
-        },
-        disabled: isPending,
-        children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
-      }
-    )
-  ] }) }) });
-};
-const StackedModalTrigger = ({
-  type,
-  setModalContent
-}) => {
-  const { setIsOpen } = useStackedModal();
-  const onClick = React.useCallback(() => {
-    setModalContent(type);
-    setIsOpen(STACKED_MODAL_ID, true);
-  }, [setModalContent, setIsOpen, type]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
-};
-const VARIANT_PREFIX = "items";
-const LIMIT = 50;
-const ExistingItemsForm = ({ orderId, items }) => {
-  const { setIsOpen } = useStackedModal();
-  const [rowSelection, setRowSelection] = React.useState(
-    items.reduce((acc, item) => {
-      acc[item.variant_id] = true;
-      return acc;
-    }, {})
-  );
-  React.useEffect(() => {
-    setRowSelection(
-      items.reduce((acc, item) => {
-        if (item.variant_id) {
-          acc[item.variant_id] = true;
-        }
-        return acc;
-      }, {})
-    );
-  }, [items]);
-  const { q, order, offset } = useQueryParams(
-    ["q", "order", "offset"],
-    VARIANT_PREFIX
-  );
-  const { variants, count, isPending, isError, error } = useProductVariants(
-    {
-      q,
-      order,
-      offset: offset ? parseInt(offset) : void 0,
-      limit: LIMIT
-    },
-    {
-      placeholderData: reactQuery.keepPreviousData
-    }
-  );
-  const columns = useColumns();
-  const { mutateAsync } = useDraftOrderAddItems(orderId);
-  const onSubmit = async () => {
-    const ids = Object.keys(rowSelection).filter(
-      (id) => !items.find((i) => i.variant_id === id)
-    );
-    await mutateAsync(
-      {
-        items: ids.map((id) => ({
-          variant_id: id,
-          quantity: 1
-        }))
-      },
+    await addShippingMethod(
       {
-        onSuccess: () => {
-          setRowSelection({});
-          setIsOpen(STACKED_MODAL_ID, false);
-        },
-        onError: (e) => {
-          ui.toast.error(e.message);
-        }
-      }
-    );
-  };
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    StackedFocusModal.Content,
-    {
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-        const searchInput = document.querySelector(
-          "[data-modal-id='modal-search-input']"
-        );
-        if (searchInput) {
-          searchInput.focus();
-        }
-      },
-      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 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: [
+        shipping_option_id: values.shipping_option_id,
+        custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
+      },
+      {
+        onError: (e) => {
+          ui.toast.error(e.message);
+        },
+        onSuccess: () => {
+          setIsOpen(STACKED_FOCUS_MODAL_ID, false);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
+    {
+      className: "flex h-full flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.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: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LocationField,
+            {
+              control: form.control,
+              setValue: form.setValue
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ShippingOptionField,
+            {
+              shippingProfileId: data.shippingProfileId,
+              preview,
+              control: form.control
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CustomAmountField,
+            {
+              control: form.control,
+              currencyCode: order.currency_code
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ItemsPreview,
+            {
+              order,
+              shippingProfileId: data.shippingProfileId
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", 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(
+            ui.Button,
+            {
+              size: "small",
+              type: "submit",
+              isLoading: isPending || isUpdatingShippingMethod,
+              children: data.shippingMethod ? "Update" : "Add"
+            }
+          )
         ] }) })
       ]
     }
-  );
+  ) }) });
 };
-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,
+const shippingMethodSchema = z.object({
+  location_id: z.string(),
+  shipping_option_id: z.string(),
+  custom_amount: z.union([z.number(), z.string()]).optional()
+});
+const ItemsPreview = ({ order, shippingProfileId }) => {
+  const matches = order.items.filter(
+    (item) => {
+      var _a, _b, _c;
+      return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("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.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: 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,
               {
-                thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
-                alt: (_b = row.original.product) == null ? void 0 : _b.title
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: [
+                  item.quantity,
+                  "x"
+                ]
               }
-            ),
-            /* @__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,
+        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,
+          '".'
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+const LocationField = ({ control, setValue }) => {
+  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: { onChange, ...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,
             {
-              content: getFullDate({ date: getValue(), includeTime: true }),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: "Oldest first",
-        sortDescLabel: "Newest first"
-      })
-    ];
-  }, []);
+              options: locations.options,
+              fetchNextPage: locations.fetchNextPage,
+              isFetchingNextPage: locations.isFetchingNextPage,
+              searchValue: locations.searchValue,
+              onSearchValueChange: locations.onSearchValueChange,
+              placeholder: "Select location",
+              onChange: (value) => {
+                setValue("shipping_option_id", "", {
+                  shouldDirty: true,
+                  shouldTouch: true
+                });
+                onChange(value);
+              },
+              ...field
+            }
+          ) })
+        ] }) });
+      }
+    }
+  );
 };
-const CustomItemForm = ({ orderId, currencyCode }) => {
-  const { setIsOpen } = useStackedModal();
-  const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      title: "",
-      quantity: 1,
-      unit_price: ""
+const ShippingOptionField = ({
+  shippingProfileId,
+  preview,
+  control
+}) => {
+  var _a;
+  const locationId = reactHookForm.useWatch({ control, name: "location_id" });
+  const shippingOptions = useComboboxData({
+    queryKey: ["shipping_options", locationId, shippingProfileId],
+    queryFn: async (params) => {
+      return await sdk.admin.shippingOption.list({
+        ...params,
+        stock_location_id: locationId,
+        shipping_profile_id: shippingProfileId
+      });
     },
-    resolver: zod.zodResolver(customItemSchema)
-  });
-  const onSubmit = form.handleSubmit(async (data) => {
-    await addItems(
-      {
-        items: [
-          {
-            title: data.title,
-            quantity: data.quantity,
-            unit_price: convertNumber(data.unit_price)
-          }
-        ]
-      },
-      {
-        onSuccess: () => {
-          setIsOpen(STACKED_MODAL_ID, false);
-        },
-        onError: (e) => {
-          ui.toast.error(e.message);
+    getOptions: (data) => {
+      return data.shipping_options.map((option) => {
+        var _a2;
+        if ((_a2 = option.rules) == null ? void 0 : _a2.find(
+          (r) => r.attribute === "is_return" && r.value === "true"
+        )) {
+          return void 0;
         }
-      }
-    );
+        return {
+          label: option.name,
+          value: option.id
+        };
+      }).filter(Boolean);
+    },
+    enabled: !!locationId && !!shippingProfileId,
+    defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.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 px-2 py-16", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Form$2.Field,
-        {
-          control: form.control,
-          name: "title",
-          render: ({ field }) => /* @__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: "Title" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-            ] })
-          ] }) })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Form$2.Field,
-        {
-          control: form.control,
-          name: "unit_price",
-          render: ({ field: { onChange, ...field } }) => /* @__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: "Unit price" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.CurrencyInput,
+  const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "shipping_option_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", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Form$2.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(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                Combobox,
                 {
-                  symbol: getNativeSymbol(currencyCode),
-                  code: currencyCode,
-                  onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
-                  ...field
+                  options: shippingOptions.options,
+                  fetchNextPage: shippingOptions.fetchNextPage,
+                  isFetchingNextPage: shippingOptions.isFetchingNextPage,
+                  searchValue: shippingOptions.searchValue,
+                  onSearchValueChange: shippingOptions.onSearchValueChange,
+                  placeholder: "Select shipping option",
+                  ...field,
+                  disabled: !locationId || !shippingProfileId
                 }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-            ] })
-          ] }) })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Form$2.Field,
-        {
-          control: form.control,
-          name: "quantity",
-          render: ({ field }) => /* @__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: "Quantity" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 w-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field, className: "w-full" }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-            ] })
-          ] }) })
-        }
-      )
-    ] }) }) }),
-    /* @__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: "Add item" })
-    ] }) })
-  ] }) }) });
-};
-const customItemSchema = z.object({
-  title: z.string().min(1),
-  quantity: z.number(),
-  unit_price: z.union([z.number(), z.string()])
-});
-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)
-  });
-  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 CustomAmountField = ({
+  control,
+  currencyCode
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "custom_amount",
+      render: ({ field: { onChange, ...field } }) => {
+        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(Form$2.Label, { optional: true, children: "Custom amount" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.CurrencyInput,
+            {
+              ...field,
+              onValueChange: (value) => onChange(value),
+              symbol: getNativeSymbol(currencyCode),
+              code: currencyCode
+            }
+          ) })
+        ] });
+      }
+    }
+  );
 };
-const schema = z.object({
-  email: z.string().email()
-});
 const widgetModule = { widgets: [] };
 const routeModule = {
   routes: [
@@ -13209,25 +13209,29 @@ const routeModule = {
           path: "/draft-orders/:id/billing-address"
         },
         {
-          Component: Email,
-          path: "/draft-orders/:id/email"
+          Component: CustomItems,
+          path: "/draft-orders/:id/custom-items"
         },
         {
-          Component: Promotions,
-          path: "/draft-orders/:id/promotions"
+          Component: Items,
+          path: "/draft-orders/:id/items"
         },
         {
-          Component: SalesChannel,
-          path: "/draft-orders/:id/sales-channel"
+          Component: Email,
+          path: "/draft-orders/:id/email"
         },
         {
-          Component: Shipping,
-          path: "/draft-orders/:id/shipping"
+          Component: SalesChannel,
+          path: "/draft-orders/:id/sales-channel"
         },
         {
           Component: Metadata,
           path: "/draft-orders/:id/metadata"
         },
+        {
+          Component: Promotions,
+          path: "/draft-orders/:id/promotions"
+        },
         {
           Component: ShippingAddress,
           path: "/draft-orders/:id/shipping-address"
@@ -13237,12 +13241,8 @@ const routeModule = {
           path: "/draft-orders/:id/transfer-ownership"
         },
         {
-          Component: Items,
-          path: "/draft-orders/:id/items"
-        },
-        {
-          Component: CustomItems,
-          path: "/draft-orders/:id/custom-items"
+          Component: Shipping,
+          path: "/draft-orders/:id/shipping"
         }
       ]
     }