@medusajs/draft-order 2.10.4-snapshot-20251007075945 → 2.10.4-snapshot-20251007081528

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

@@ -9567,10 +9567,31 @@ const ID = () => {
     /* @__PURE__ */ jsx(Outlet, {})
   ] });
 };
-const BillingAddress = () => {
+const CustomItems = () => {
+  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
+    /* @__PURE__ */ jsx(CustomItemsForm, {})
+  ] });
+};
+const CustomItemsForm = () => {
+  const form = useForm({
+    resolver: zodResolver(schema$5)
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
+    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
+    ] }) })
+  ] }) });
+};
+const schema$5 = objectType({
+  email: stringType().email()
+});
+const Email = () => {
   const { id } = useParams();
   const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+billing_address"
+    fields: "+email"
   });
   if (isError) {
     throw error;
@@ -9578,34 +9599,24 @@ const BillingAddress = () => {
   const isReady = !isPending && !!order;
   return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
     /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
-      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
     ] }),
-    isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
+    isReady && /* @__PURE__ */ jsx(EmailForm, { order })
   ] });
 };
-const BillingAddressForm = ({ order }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+const EmailForm = ({ order }) => {
   const form = useForm({
     defaultValues: {
-      first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
-      last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
-      company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
-      address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
-      address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
-      city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
-      province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
-      country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
-      postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
-      phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
+      email: order.email ?? ""
     },
-    resolver: zodResolver(schema$5)
+    resolver: zodResolver(schema$4)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
   const onSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(
-      { billing_address: data },
+      { email: data.email },
       {
         onSuccess: () => {
           handleSuccess();
@@ -9622,132 +9633,18 @@ const BillingAddressForm = ({ order }) => {
       className: "flex flex-1 flex-col overflow-hidden",
       onSubmit,
       children: [
-        /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
-          /* @__PURE__ */ jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "country_code",
-              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
-                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
-                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "first_name",
-                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
-                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "last_name",
-                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
-                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "company",
-              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
-                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "address_1",
-              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
-                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "address_2",
-              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
-                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "postal_code",
-                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
-                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "city",
-                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
-                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "province",
-              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
-                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "phone",
-              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
-                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-              ] })
-            }
-          )
-        ] }) }),
+        /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
+          Form$2.Field,
+          {
+            control: form.control,
+            name: "email",
+            render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+              /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
+              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+            ] })
+          }
+        ) }),
         /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
           /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
           /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
@@ -9756,25 +9653,6 @@ const BillingAddressForm = ({ order }) => {
     }
   ) });
 };
-const schema$5 = addressSchema;
-const CustomItems = () => {
-  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
-    /* @__PURE__ */ jsx(CustomItemsForm, {})
-  ] });
-};
-const CustomItemsForm = () => {
-  const form = useForm({
-    resolver: zodResolver(schema$4)
-  });
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
-    /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
-    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
-    ] }) })
-  ] }) });
-};
 const schema$4 = objectType({
   email: stringType().email()
 });
@@ -11688,624 +11566,80 @@ const ShippingAddressForm = ({ order }) => {
   ) });
 };
 const schema$2 = addressSchema;
-const TransferOwnership = () => {
+const STACKED_FOCUS_MODAL_ID = "shipping-form";
+const Shipping = () => {
+  var _a;
   const { id } = useParams();
-  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
-    fields: "id,customer_id,customer.*"
+  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;
   }
-  const isReady = !isPending && !!draft_order;
-  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Transfer Ownership" }) }),
-      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsx(TransferOwnershipForm, { order: draft_order })
-  ] });
+  if (isPreviewError) {
+    throw previewError;
+  }
+  const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
+  const isReady = preview && !isPreviewPending && order && !isPending;
+  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
+      /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
+      /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
+  ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
+  ] }) });
 };
-const TransferOwnershipForm = ({ order }) => {
-  var _a, _b;
-  const form = useForm({
-    defaultValues: {
-      customer_id: order.customer_id || ""
-    },
-    resolver: zodResolver(schema$1)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
-  const currentCustomer = order.customer ? {
-    label: name ? `${name} (${order.customer.email})` : order.customer.email,
-    value: order.customer.id
-  } : null;
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      { customer_id: data.customer_id },
-      {
-        onSuccess: () => {
-          toast.success("Customer updated");
-          handleSuccess();
-        },
-        onError: (error) => {
-          toast.error(error.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
-    KeyboundForm,
+const ShippingForm = ({ preview, order }) => {
+  var _a;
+  const { setIsOpen } = useStackedModal();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [data, setData] = useState(null);
+  const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
+  const { shipping_options } = useShippingOptions(
     {
-      className: "flex flex-1 flex-col overflow-hidden",
-      onSubmit,
-      children: [
-        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsx(Illustration, {}) }),
-          currentCustomer && /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
-              /* @__PURE__ */ jsx(Hint$1, { children: "The customer that is currently associated with this draft order." })
-            ] }),
-            /* @__PURE__ */ jsxs(Select, { disabled: true, value: currentCustomer.value, children: [
-              /* @__PURE__ */ jsx(Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
-              /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            CustomerField,
-            {
-              control: form.control,
-              currentCustomerId: order.customer_id
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const CustomerField = ({ control, currentCustomerId }) => {
-  const customers = useComboboxData({
-    queryFn: async (params) => {
-      return await sdk.admin.customer.list({
-        ...params,
-        id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
-      });
+      id: appliedShippingOptionIds,
+      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
     },
-    queryKey: ["customers"],
-    getOptions: (data) => {
-      return data.customers.map((customer) => {
-        const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
-        return {
-          label: name ? `${name} (${customer.email})` : customer.email,
-          value: customer.id
-        };
-      });
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    Form$2.Field,
     {
-      name: "customer_id",
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Form$2.Label, { children: "New customer" }),
-          /* @__PURE__ */ jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
-        ] }),
-        /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-          Combobox,
-          {
-            options: customers.options,
-            fetchNextPage: customers.fetchNextPage,
-            isFetchingNextPage: customers.isFetchingNextPage,
-            searchValue: customers.searchValue,
-            onSearchValueChange: customers.onSearchValueChange,
-            placeholder: "Select customer",
-            ...field
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-      ] })
+      enabled: appliedShippingOptionIds.length > 0
     }
   );
-};
-const Illustration = () => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "280",
-      height: "180",
-      viewBox: "0 0 280 180",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.00428286",
-            y: "-0.742904",
-            width: "33.5",
-            height: "65.5",
-            rx: "6.75",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
-            fill: "#D4D4D8",
-            stroke: "#52525B",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.00428286",
-            y: "-0.742904",
-            width: "33.5",
-            height: "65.5",
-            rx: "6.75",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
-            fill: "white",
-            stroke: "#52525B",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M180.579 107.142L179.126 107.959",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "0.88",
-            d: "M182.305 109.546L180.257 109.534",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "0.75",
-            d: "M180.551 111.93L179.108 111.096",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "0.63",
-            d: "M176.347 112.897L176.354 111.73",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "0.5",
-            d: "M172.153 111.881L173.606 111.064",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "0.38",
-            d: "M170.428 109.478L172.476 109.489",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "0.25",
-            d: "M172.181 107.094L173.624 107.928",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "0.13",
-            d: "M176.386 106.126L176.379 107.294",
-            stroke: "#52525B",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
-            fill: "#D4D4D8"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.00428286",
-            y: "-0.742904",
-            width: "33.5",
-            height: "65.5",
-            rx: "6.75",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
-            fill: "#D4D4D8",
-            stroke: "#52525B",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "0.00428286",
-            y: "-0.742904",
-            width: "33.5",
-            height: "65.5",
-            rx: "6.75",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
-            fill: "white",
-            stroke: "#52525B",
-            strokeWidth: "1.5"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
-            fill: "#D4D4D8"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "17",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
-            fill: "#D4D4D8"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
-            fill: "#D4D4D8"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
-            fill: "#A1A1AA"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "17",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
-            fill: "#A1A1AA"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
-            fill: "#A1A1AA"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
-            fill: "#52525B"
-          }
-        ),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M146.894 101.198L139.51 101.155L139.486 105.365",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
-            }
-          ) }),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-};
-const schema$1 = objectType({
-  customer_id: stringType().min(1)
-});
-const Email = () => {
-  const { id } = useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+email"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!order;
-  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
-      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsx(EmailForm, { order })
-  ] });
-};
-const EmailForm = ({ order }) => {
-  const form = useForm({
-    defaultValues: {
-      email: order.email ?? ""
-    },
-    resolver: zodResolver(schema)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const uniqueShippingProfiles = useMemo(() => {
+    const profiles = /* @__PURE__ */ new Map();
+    getUniqueShippingProfiles(order.items).forEach((profile) => {
+      profiles.set(profile.id, profile);
+    });
+    shipping_options == null ? void 0 : shipping_options.forEach((option) => {
+      profiles.set(option.shipping_profile_id, option.shipping_profile);
+    });
+    return Array.from(profiles.values());
+  }, [order.items, shipping_options]);
   const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      { email: data.email },
-      {
-        onSuccess: () => {
-          handleSuccess();
-        },
-        onError: (error) => {
-          toast.error(error.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
-    KeyboundForm,
-    {
-      className: "flex flex-1 flex-col overflow-hidden",
-      onSubmit,
-      children: [
-        /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
-          Form$2.Field,
-          {
-            control: form.control,
-            name: "email",
-            render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
-              /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
-              /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-              /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const schema = objectType({
-  email: stringType().email()
-});
-const STACKED_FOCUS_MODAL_ID = "shipping-form";
-const Shipping = () => {
-  var _a;
-  const { id } = useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
-  });
-  const {
-    order: preview,
-    isPending: isPreviewPending,
-    isError: isPreviewError,
-    error: previewError
-  } = useOrderPreview(id);
-  useInitiateOrderEdit({ preview });
-  const { onCancel } = useCancelOrderEdit({ preview });
-  if (isError) {
-    throw error;
-  }
-  if (isPreviewError) {
-    throw previewError;
-  }
-  const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
-  const isReady = preview && !isPreviewPending && order && !isPending;
-  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
-    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
-      /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
-      /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
-  ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
-    /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
-  ] }) });
-};
-const ShippingForm = ({ preview, order }) => {
-  var _a;
-  const { setIsOpen } = useStackedModal();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [data, setData] = useState(null);
-  const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
-  const { shipping_options } = useShippingOptions(
-    {
-      id: appliedShippingOptionIds,
-      fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
-    },
-    {
-      enabled: appliedShippingOptionIds.length > 0
-    }
-  );
-  const uniqueShippingProfiles = useMemo(() => {
-    const profiles = /* @__PURE__ */ new Map();
-    getUniqueShippingProfiles(order.items).forEach((profile) => {
-      profiles.set(profile.id, profile);
-    });
-    shipping_options == null ? void 0 : shipping_options.forEach((option) => {
-      profiles.set(option.shipping_profile_id, option.shipping_profile);
-    });
-    return Array.from(profiles.values());
-  }, [order.items, shipping_options]);
-  const { handleSuccess } = useRouteModal();
-  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
-  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
-  const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
-  const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
-  const onSubmit = async () => {
-    setIsSubmitting(true);
-    let requestSucceeded = false;
-    await requestOrderEdit(void 0, {
-      onError: (e) => {
-        toast.error(`Failed to request order edit: ${e.message}`);
-      },
-      onSuccess: () => {
-        requestSucceeded = true;
+  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
+  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
+  const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
+  const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
+  const onSubmit = async () => {
+    setIsSubmitting(true);
+    let requestSucceeded = false;
+    await requestOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(`Failed to request order edit: ${e.message}`);
+      },
+      onSuccess: () => {
+        requestSucceeded = true;
       }
     });
     if (!requestSucceeded) {
@@ -12757,288 +12091,954 @@ const ShippingProfileForm = ({
           /* @__PURE__ */ jsx(
             LocationField,
             {
-              control: form.control,
-              setValue: form.setValue
+              control: form.control,
+              setValue: form.setValue
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsx(
+            ShippingOptionField,
+            {
+              shippingProfileId: data.shippingProfileId,
+              preview,
+              control: form.control
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsx(
+            CustomAmountField,
+            {
+              control: form.control,
+              currencyCode: order.currency_code
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsx(
+            ItemsPreview,
+            {
+              order,
+              shippingProfileId: data.shippingProfileId
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              type: "submit",
+              isLoading: isPending || isUpdatingShippingMethod,
+              children: data.shippingMethod ? "Update" : "Add"
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) }) });
+};
+const shippingMethodSchema = objectType({
+  location_id: stringType(),
+  shipping_option_id: stringType(),
+  custom_amount: unionType([numberType(), stringType()]).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__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
+      /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+              /* @__PURE__ */ jsx(
+                Thumbnail,
+                {
+                  thumbnail: item.thumbnail,
+                  alt: item.product_title ?? void 0
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
+                  /* @__PURE__ */ jsxs(
+                    Text,
+                    {
+                      size: "small",
+                      leading: "compact",
+                      className: "text-ui-fg-subtle",
+                      children: [
+                        "(",
+                        item.variant_title,
+                        ")"
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "small",
+                    leading: "compact",
+                    className: "text-ui-fg-subtle",
+                    children: item.variant_sku
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Text,
+              {
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: [
+                  item.quantity,
+                  "x"
+                ]
+              }
+            )
+          ]
+        },
+        item.id
+      )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
+        /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
+          'No items found for "',
+          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__ */ jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "location_id",
+      render: ({ field: { onChange, ...field } }) => {
+        return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
+            /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
+          ] }),
+          /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ 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 ShippingOptionField = ({
+  shippingProfileId,
+  preview,
+  control
+}) => {
+  var _a;
+  const locationId = 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
+      });
+    },
+    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
+  });
+  const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
+  return /* @__PURE__ */ jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "shipping_option_id",
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
+            /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ConditionalTooltip,
+            {
+              content: tooltipContent,
+              showTooltip: !locationId || !shippingProfileId,
+              children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ 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__ */ jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "custom_amount",
+      render: ({ field: { onChange, ...field } }) => {
+        return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
+            /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
+          ] }),
+          /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+            CurrencyInput,
+            {
+              ...field,
+              onValueChange: (value) => onChange(value),
+              symbol: getNativeSymbol(currencyCode),
+              code: currencyCode
+            }
+          ) })
+        ] });
+      }
+    }
+  );
+};
+const TransferOwnership = () => {
+  const { id } = useParams();
+  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
+    fields: "id,customer_id,customer.*"
+  });
+  if (isError) {
+    throw error;
+  }
+  const isReady = !isPending && !!draft_order;
+  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Transfer Ownership" }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsx(TransferOwnershipForm, { order: draft_order })
+  ] });
+};
+const TransferOwnershipForm = ({ order }) => {
+  var _a, _b;
+  const form = useForm({
+    defaultValues: {
+      customer_id: order.customer_id || ""
+    },
+    resolver: zodResolver(schema$1)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
+  const currentCustomer = order.customer ? {
+    label: name ? `${name} (${order.customer.email})` : order.customer.email,
+    value: order.customer.id
+  } : null;
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      { customer_id: data.customer_id },
+      {
+        onSuccess: () => {
+          toast.success("Customer updated");
+          handleSuccess();
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsx(Illustration, {}) }),
+          currentCustomer && /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
+              /* @__PURE__ */ jsx(Hint$1, { children: "The customer that is currently associated with this draft order." })
+            ] }),
+            /* @__PURE__ */ jsxs(Select, { disabled: true, value: currentCustomer.value, children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+              /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            CustomerField,
+            {
+              control: form.control,
+              currentCustomerId: order.customer_id
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const CustomerField = ({ control, currentCustomerId }) => {
+  const customers = useComboboxData({
+    queryFn: async (params) => {
+      return await sdk.admin.customer.list({
+        ...params,
+        id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
+      });
+    },
+    queryKey: ["customers"],
+    getOptions: (data) => {
+      return data.customers.map((customer) => {
+        const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
+        return {
+          label: name ? `${name} (${customer.email})` : customer.email,
+          value: customer.id
+        };
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Form$2.Field,
+    {
+      name: "customer_id",
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(Form$2.Label, { children: "New customer" }),
+          /* @__PURE__ */ jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
+        ] }),
+        /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            options: customers.options,
+            fetchNextPage: customers.fetchNextPage,
+            isFetchingNextPage: customers.isFetchingNextPage,
+            searchValue: customers.searchValue,
+            onSearchValueChange: customers.onSearchValueChange,
+            placeholder: "Select customer",
+            ...field
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+      ] })
+    }
+  );
+};
+const Illustration = () => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "280",
+      height: "180",
+      viewBox: "0 0 280 180",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "0.00428286",
+            y: "-0.742904",
+            width: "33.5",
+            height: "65.5",
+            rx: "6.75",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
+            fill: "#D4D4D8",
+            stroke: "#52525B",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "0.00428286",
+            y: "-0.742904",
+            width: "33.5",
+            height: "65.5",
+            rx: "6.75",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
+            fill: "white",
+            stroke: "#52525B",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M180.579 107.142L179.126 107.959",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.88",
+            d: "M182.305 109.546L180.257 109.534",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.75",
+            d: "M180.551 111.93L179.108 111.096",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.63",
+            d: "M176.347 112.897L176.354 111.73",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.5",
+            d: "M172.153 111.881L173.606 111.064",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.38",
+            d: "M170.428 109.478L172.476 109.489",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.25",
+            d: "M172.181 107.094L173.624 107.928",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            opacity: "0.13",
+            d: "M176.386 106.126L176.379 107.294",
+            stroke: "#52525B",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
+            fill: "#D4D4D8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "0.00428286",
+            y: "-0.742904",
+            width: "33.5",
+            height: "65.5",
+            rx: "6.75",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
+            fill: "#D4D4D8",
+            stroke: "#52525B",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "0.00428286",
+            y: "-0.742904",
+            width: "33.5",
+            height: "65.5",
+            rx: "6.75",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
+            fill: "white",
+            stroke: "#52525B",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
+            fill: "#D4D4D8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "17",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
+            fill: "#D4D4D8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
+            fill: "#D4D4D8"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
+            fill: "#A1A1AA"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "17",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
+            fill: "#A1A1AA"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
+            fill: "#A1A1AA"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
+            fill: "#52525B"
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M146.894 101.198L139.51 101.155L139.486 105.365",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
             }
-          ),
-          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsx(
-            ShippingOptionField,
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
             {
-              shippingProfileId: data.shippingProfileId,
-              preview,
-              control: form.control
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
             }
-          ),
-          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsx(
-            CustomAmountField,
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
             {
-              control: form.control,
-              currencyCode: order.currency_code
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
             }
-          ),
-          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
-          /* @__PURE__ */ jsx(
-            ItemsPreview,
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
             {
-              order,
-              shippingProfileId: data.shippingProfileId
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
             }
-          )
-        ] }) }) }),
-        /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx(
-            Button,
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
             {
-              size: "small",
-              type: "submit",
-              isLoading: isPending || isUpdatingShippingMethod,
-              children: data.shippingMethod ? "Update" : "Add"
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
             }
-          )
-        ] }) })
-      ]
-    }
-  ) }) });
-};
-const shippingMethodSchema = objectType({
-  location_id: stringType(),
-  shipping_option_id: stringType(),
-  custom_amount: unionType([numberType(), stringType()]).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__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
-      /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
-              /* @__PURE__ */ jsx(
-                Thumbnail,
-                {
-                  thumbnail: item.thumbnail,
-                  alt: item.product_title ?? void 0
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
-                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
-                  /* @__PURE__ */ jsxs(
-                    Text,
-                    {
-                      size: "small",
-                      leading: "compact",
-                      className: "text-ui-fg-subtle",
-                      children: [
-                        "(",
-                        item.variant_title,
-                        ")"
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    size: "small",
-                    leading: "compact",
-                    className: "text-ui-fg-subtle",
-                    children: item.variant_sku
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              Text,
-              {
-                size: "small",
-                leading: "compact",
-                className: "text-ui-fg-subtle",
-                children: [
-                  item.quantity,
-                  "x"
-                ]
-              }
-            )
-          ]
-        },
-        item.id
-      )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
-        /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
-        /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
-          'No items found for "',
-          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__ */ jsx(
-    Form$2.Field,
-    {
-      control,
-      name: "location_id",
-      render: ({ field: { onChange, ...field } }) => {
-        return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
-            /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
-          ] }),
-          /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-            Combobox,
+          ) }),
+          /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
+            "rect",
             {
-              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
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
             }
           ) })
-        ] }) });
-      }
+        ] })
+      ]
     }
   );
 };
-const ShippingOptionField = ({
-  shippingProfileId,
-  preview,
-  control
-}) => {
-  var _a;
-  const locationId = 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
-      });
+const schema$1 = objectType({
+  customer_id: stringType().min(1)
+});
+const BillingAddress = () => {
+  const { id } = useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+billing_address"
+  });
+  if (isError) {
+    throw error;
+  }
+  const isReady = !isPending && !!order;
+  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
+  ] });
+};
+const BillingAddressForm = ({ order }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const form = useForm({
+    defaultValues: {
+      first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
+      last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
+      company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
+      address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
+      address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
+      city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
+      province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
+      country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
+      postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
+      phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
     },
-    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;
+    resolver: zodResolver(schema)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      { billing_address: data },
+      {
+        onSuccess: () => {
+          handleSuccess();
+        },
+        onError: (error) => {
+          toast.error(error.message);
         }
-        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
+      }
+    );
   });
-  const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
-  return /* @__PURE__ */ jsx(
-    Form$2.Field,
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
     {
-      control,
-      name: "shipping_option_id",
-      render: ({ field }) => {
-        return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
-            /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
+          /* @__PURE__ */ jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "country_code",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
+                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
+                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "first_name",
+                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
+                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "last_name",
+                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
+                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx(
-            ConditionalTooltip,
+            Form$2.Field,
             {
-              content: tooltipContent,
-              showTooltip: !locationId || !shippingProfileId,
-              children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ 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
-                }
-              ) }) })
+              control: form.control,
+              name: "company",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
+                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+              ] })
             }
-          )
-        ] }) });
-      }
-    }
-  );
-};
-const CustomAmountField = ({
-  control,
-  currencyCode
-}) => {
-  return /* @__PURE__ */ jsx(
-    Form$2.Field,
-    {
-      control,
-      name: "custom_amount",
-      render: ({ field: { onChange, ...field } }) => {
-        return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
-            /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
+          ),
+          /* @__PURE__ */ jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "address_1",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
+                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "address_2",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
+                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "postal_code",
+                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
+                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "city",
+                render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
+                  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                  /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
-            CurrencyInput,
+          /* @__PURE__ */ jsx(
+            Form$2.Field,
             {
-              ...field,
-              onValueChange: (value) => onChange(value),
-              symbol: getNativeSymbol(currencyCode),
-              code: currencyCode
+              control: form.control,
+              name: "province",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
+                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+              ] })
             }
-          ) })
-        ] });
-      }
+          ),
+          /* @__PURE__ */ jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "phone",
+              render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
+                /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
     }
-  );
+  ) });
 };
+const schema = addressSchema;
 const widgetModule = { widgets: [] };
 const routeModule = {
   routes: [
@@ -13059,14 +13059,14 @@ const routeModule = {
       handle,
       loader,
       children: [
-        {
-          Component: BillingAddress,
-          path: "/draft-orders/:id/billing-address"
-        },
         {
           Component: CustomItems,
           path: "/draft-orders/:id/custom-items"
         },
+        {
+          Component: Email,
+          path: "/draft-orders/:id/email"
+        },
         {
           Component: Items,
           path: "/draft-orders/:id/items"
@@ -13088,16 +13088,16 @@ const routeModule = {
           path: "/draft-orders/:id/shipping-address"
         },
         {
-          Component: TransferOwnership,
-          path: "/draft-orders/:id/transfer-ownership"
+          Component: Shipping,
+          path: "/draft-orders/:id/shipping"
         },
         {
-          Component: Email,
-          path: "/draft-orders/:id/email"
+          Component: TransferOwnership,
+          path: "/draft-orders/:id/transfer-ownership"
         },
         {
-          Component: Shipping,
-          path: "/draft-orders/:id/shipping"
+          Component: BillingAddress,
+          path: "/draft-orders/:id/billing-address"
         }
       ]
     }