@medusajs/draft-order 2.11.3-preview-20251031120214 → 2.11.3-preview-20251031180155

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

@@ -14,14 +14,15 @@ const reactHookForm = require("react-hook-form");
 const radixUi = require("radix-ui");
 const react = require("@ariakit/react");
 const matchSorter = require("match-sorter");
-const debounce = require("lodash/debounce");
+const debounce = require("lodash.debounce");
 const Primitive = require("@uiw/react-json-view");
-const lodash = require("lodash");
+const isEqual = require("lodash.isequal");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
 const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
 const Primitive__default = /* @__PURE__ */ _interopDefault(Primitive);
+const isEqual__default = /* @__PURE__ */ _interopDefault(isEqual);
 function useQueryParams(keys, prefix) {
   const [params] = reactRouterDom.useSearchParams();
   const result = {};
@@ -9571,6 +9572,196 @@ const ID = () => {
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
   ] });
 };
+const BillingAddress = () => {
+  const { id } = reactRouterDom.useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+billing_address"
+  });
+  if (isError) {
+    throw error;
+  }
+  const isReady = !isPending && !!order;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
+  ] });
+};
+const BillingAddressForm = ({ order }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const form = reactHookForm.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) ?? ""
+    },
+    resolver: zod.zodResolver(schema$5)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      { billing_address: data },
+      {
+        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.jsxs("div", { className: "flex flex-col gap-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "country_code",
+              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "first_name",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "last_name",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "company",
+              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "address_1",
+              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "address_2",
+              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "postal_code",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Form$2.Field,
+              {
+                control: form.control,
+                name: "city",
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "province",
+              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "phone",
+              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+              ] })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const schema$5 = addressSchema;
 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" }) }) }),
@@ -9579,7 +9770,7 @@ const CustomItems = () => {
 };
 const CustomItemsForm = () => {
   const form = reactHookForm.useForm({
-    resolver: zod.zodResolver(schema$5)
+    resolver: zod.zodResolver(schema$4)
   });
   return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
@@ -9589,45 +9780,113 @@ const CustomItemsForm = () => {
     ] }) })
   ] }) });
 };
-const schema$5 = objectType({
+const schema$4 = objectType({
   email: stringType().email()
 });
-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",
+const Email = () => {
+  const { id } = reactRouterDom.useParams();
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+email"
+  });
+  if (isError) {
+    throw error;
+  }
+  const isReady = !isPending && !!order;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
+  ] });
+};
+const EmailForm = ({ order }) => {
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      email: order.email ?? ""
+    },
+    resolver: zod.zodResolver(schema$3)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      { email: data.email },
       {
-        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",
+        onSuccess: () => {
+          handleSuccess();
+        },
+        onError: (error) => {
+          ui.toast.error(error.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
+    {
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Form$2.Field,
+          {
+            control: form.control,
+            name: "email",
+            render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const schema$3 = objectType({
+  email: stringType().email()
+});
+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"
@@ -10566,116 +10825,466 @@ const customItemSchema = objectType({
   quantity: numberType(),
   unit_price: unionType([numberType(), stringType()])
 });
-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 InlineTip = React.forwardRef(
+  ({ variant = "tip", label, className, children, ...props }, ref) => {
+    const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: ui.clx(
+          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "presentation",
+              className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
+                "bg-ui-tag-orange-icon": variant === "warning"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
+              labelValue,
+              ":"
+            ] }),
+            " ",
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+InlineTip.displayName = "InlineTip";
+const MetadataFieldSchema = objectType({
+  key: stringType(),
+  disabled: booleanType().optional(),
+  value: anyType()
+});
+const MetadataSchema = objectType({
+  metadata: arrayType(MetadataFieldSchema)
+});
+const Metadata = () => {
   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 { order, isPending, isError, error } = useOrder(id, {
+    fields: "metadata"
+  });
+  if (isError) {
+    throw error;
   }
-  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 isReady = !isPending && !!order;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
+    ] }),
+    !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
   ] });
 };
-const PromotionForm = ({ preview }) => {
-  const { items, shipping_methods } = preview;
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [comboboxValue, setComboboxValue] = React.useState("");
+const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
+const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
+const MetadataForm = ({ orderId, metadata }) => {
   const { handleSuccess } = useRouteModal();
-  const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
-  const promoIds = getPromotionIds(items, shipping_methods);
-  const { promotions, isPending, isError, error } = usePromotions(
-    {
-      id: promoIds
-    },
-    {
-      enabled: !!promoIds.length
-    }
-  );
-  const comboboxData = useComboboxData({
-    queryKey: ["promotions", "combobox", promoIds],
-    queryFn: async (params) => {
-      return await sdk.admin.promotion.list({
-        ...params,
-        id: {
-          $nin: promoIds
-        }
-      });
+  const hasUneditableRows = getHasUneditableRows(metadata);
+  const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      metadata: getDefaultValues(metadata)
     },
-    getOptions: (data) => {
-      return data.promotions.map((promotion) => ({
-        label: promotion.code,
-        value: promotion.code
-      }));
-    }
+    resolver: zod.zodResolver(MetadataSchema)
   });
-  const add = async (value) => {
-    if (!value) {
-      return;
-    }
-    addPromotions(
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const parsedData = parseValues(data);
+    await mutateAsync(
       {
-        promo_codes: [value]
+        metadata: parsedData
       },
       {
-        onError: (e) => {
-          ui.toast.error(e.message);
-          comboboxData.onSearchValueChange("");
-          setComboboxValue("");
-        },
         onSuccess: () => {
-          comboboxData.onSearchValueChange("");
-          setComboboxValue("");
+          ui.toast.success("Metadata updated");
+          handleSuccess();
+        },
+        onError: (error) => {
+          ui.toast.error(error.message);
         }
       }
     );
-  };
-  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;
+  });
+  const { fields, insert, remove } = reactHookForm.useFieldArray({
+    control: form.control,
+    name: "metadata"
+  });
+  function deleteRow(index) {
+    remove(index);
+    if (fields.length === 1) {
+      insert(0, {
+        key: "",
+        value: "",
+        disabled: false
+      });
     }
-    await confirmOrderEdit(void 0, {
-      onError: (e) => {
+  }
+  function insertRow(index, position) {
+    insert(index + (position === "above" ? 0 : 1), {
+      key: "",
+      value: "",
+      disabled: false
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex flex-1 flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
+            ] }),
+            fields.map((field, index) => {
+              const isDisabled = field.disabled || false;
+              let placeholder = "-";
+              if (typeof field.value === "object") {
+                placeholder = "{ ... }";
+              }
+              if (Array.isArray(field.value)) {
+                placeholder = "[ ... ]";
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ConditionalTooltip,
+                {
+                  showTooltip: isDisabled,
+                  content: "This row is disabled because it contains non-primitive data.",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: ui.clx("grid grid-cols-2 divide-x", {
+                          "overflow-hidden rounded-b-lg": index === fields.length - 1
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Form$2.Field,
+                            {
+                              control: form.control,
+                              name: `metadata.${index}.key`,
+                              render: ({ field: field2 }) => {
+                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  GridInput,
+                                  {
+                                    "aria-labelledby": METADATA_KEY_LABEL_ID,
+                                    ...field2,
+                                    disabled: isDisabled,
+                                    placeholder: "Key"
+                                  }
+                                ) }) });
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Form$2.Field,
+                            {
+                              control: form.control,
+                              name: `metadata.${index}.value`,
+                              render: ({ field: { value, ...field2 } }) => {
+                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  GridInput,
+                                  {
+                                    "aria-labelledby": METADATA_VALUE_LABEL_ID,
+                                    ...field2,
+                                    value: isDisabled ? placeholder : value,
+                                    disabled: isDisabled,
+                                    placeholder: "Value"
+                                  }
+                                ) }) });
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.DropdownMenu.Trigger,
+                        {
+                          className: ui.clx(
+                            "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
+                            {
+                              hidden: isDisabled
+                            }
+                          ),
+                          disabled: isDisabled,
+                          asChild: true,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => insertRow(index, "above"),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
+                              "Insert row above"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => insertRow(index, "below"),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
+                              "Insert row below"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.DropdownMenu.Item,
+                          {
+                            className: "gap-x-2",
+                            onClick: () => deleteRow(index),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
+                              "Delete row"
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                },
+                field.id
+              );
+            })
+          ] }),
+          hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const GridInput = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      ...props,
+      autoComplete: "off",
+      className: ui.clx(
+        "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
+        className
+      )
+    }
+  );
+});
+GridInput.displayName = "MetadataForm.GridInput";
+const PlaceholderInner = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
+    ] }) })
+  ] });
+};
+const 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 promoIds = getPromotionIds(items, shipping_methods);
+  const { promotions, isPending, isError, error } = usePromotions(
+    {
+      id: promoIds
+    },
+    {
+      enabled: !!promoIds.length
+    }
+  );
+  const comboboxData = useComboboxData({
+    queryKey: ["promotions", "combobox", promoIds],
+    queryFn: async (params) => {
+      return await sdk.admin.promotion.list({
+        ...params,
+        id: {
+          $nin: promoIds
+        }
+      });
+    },
+    getOptions: (data) => {
+      return data.promotions.map((promotion) => ({
+        label: promotion.code,
+        value: promotion.code
+      }));
+    }
+  });
+  const 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: () => {
@@ -10705,493 +11314,143 @@ const PromotionForm = ({ preview }) => {
             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(
-      {
-        promo_codes: [promotion.code]
-      },
-      {
-        onError: (e) => {
-          ui.toast.error(e.message);
-        }
-      }
-    );
-  };
-  const displayValue = getDisplayValue(promotion);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: ui.clx(
-        "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
-        {
-          "animate-pulse": isLoading
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", 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 getPromotionIds(items, shippingMethods) {
-  const promotionIds = /* @__PURE__ */ new Set();
-  for (const item of items) {
-    if (item.adjustments) {
-      for (const adjustment of item.adjustments) {
-        if (adjustment.promotion_id) {
-          promotionIds.add(adjustment.promotion_id);
-        }
-      }
-    }
-  }
-  for (const shippingMethod of shippingMethods) {
-    if (shippingMethod.adjustments) {
-      for (const adjustment of shippingMethod.adjustments) {
-        if (adjustment.promotion_id) {
-          promotionIds.add(adjustment.promotion_id);
-        }
-      }
-    }
-  }
-  return Array.from(promotionIds);
-}
-const InlineTip = React.forwardRef(
-  ({ variant = "tip", label, className, children, ...props }, ref) => {
-    const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: ui.clx(
-          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              role: "presentation",
-              className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
-                "bg-ui-tag-orange-icon": variant === "warning"
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
-              labelValue,
-              ":"
-            ] }),
-            " ",
-            children
-          ] })
-        ]
-      }
-    );
-  }
-);
-InlineTip.displayName = "InlineTip";
-const MetadataFieldSchema = objectType({
-  key: stringType(),
-  disabled: booleanType().optional(),
-  value: anyType()
-});
-const MetadataSchema = objectType({
-  metadata: arrayType(MetadataFieldSchema)
-});
-const Metadata = () => {
-  const { id } = reactRouterDom.useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "metadata"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!order;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
-    ] }),
-    !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
+            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 METADATA_KEY_LABEL_ID = "metadata-form-key-label";
-const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
-const MetadataForm = ({ orderId, metadata }) => {
-  const { handleSuccess } = useRouteModal();
-  const hasUneditableRows = getHasUneditableRows(metadata);
-  const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      metadata: getDefaultValues(metadata)
-    },
-    resolver: zod.zodResolver(MetadataSchema)
-  });
-  const handleSubmit = form.handleSubmit(async (data) => {
-    const parsedData = parseValues(data);
-    await mutateAsync(
+const PromotionItem = ({
+  promotion,
+  orderId,
+  isLoading
+}) => {
+  var _a;
+  const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
+  const onRemove = async () => {
+    removePromotions(
       {
-        metadata: parsedData
+        promo_codes: [promotion.code]
       },
       {
-        onSuccess: () => {
-          ui.toast.success("Metadata updated");
-          handleSuccess();
-        },
-        onError: (error) => {
-          ui.toast.error(error.message);
+        onError: (e) => {
+          ui.toast.error(e.message);
         }
       }
     );
-  });
-  const { fields, insert, remove } = reactHookForm.useFieldArray({
-    control: form.control,
-    name: "metadata"
-  });
-  function deleteRow(index) {
-    remove(index);
-    if (fields.length === 1) {
-      insert(0, {
-        key: "",
-        value: "",
-        disabled: false
-      });
-    }
-  }
-  function insertRow(index, position) {
-    insert(index + (position === "above" ? 0 : 1), {
-      key: "",
-      value: "",
-      disabled: false
-    });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    KeyboundForm,
+  };
+  const displayValue = getDisplayValue(promotion);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      onSubmit: handleSubmit,
-      className: "flex flex-1 flex-col overflow-hidden",
+      className: ui.clx(
+        "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
+        {
+          "animate-pulse": isLoading
+        }
+      ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", 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: "·" })
             ] }),
-            fields.map((field, index) => {
-              const isDisabled = field.disabled || false;
-              let placeholder = "-";
-              if (typeof field.value === "object") {
-                placeholder = "{ ... }";
-              }
-              if (Array.isArray(field.value)) {
-                placeholder = "[ ... ]";
-              }
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                ConditionalTooltip,
-                {
-                  showTooltip: isDisabled,
-                  content: "This row is disabled because it contains non-primitive data.",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        className: ui.clx("grid grid-cols-2 divide-x", {
-                          "overflow-hidden rounded-b-lg": index === fields.length - 1
-                        }),
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            Form$2.Field,
-                            {
-                              control: form.control,
-                              name: `metadata.${index}.key`,
-                              render: ({ field: field2 }) => {
-                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  GridInput,
-                                  {
-                                    "aria-labelledby": METADATA_KEY_LABEL_ID,
-                                    ...field2,
-                                    disabled: isDisabled,
-                                    placeholder: "Key"
-                                  }
-                                ) }) });
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            Form$2.Field,
-                            {
-                              control: form.control,
-                              name: `metadata.${index}.value`,
-                              render: ({ field: { value, ...field2 } }) => {
-                                return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  GridInput,
-                                  {
-                                    "aria-labelledby": METADATA_VALUE_LABEL_ID,
-                                    ...field2,
-                                    value: isDisabled ? placeholder : value,
-                                    disabled: isDisabled,
-                                    placeholder: "Value"
-                                  }
-                                ) }) });
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.DropdownMenu.Trigger,
-                        {
-                          className: ui.clx(
-                            "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
-                            {
-                              hidden: isDisabled
-                            }
-                          ),
-                          disabled: isDisabled,
-                          asChild: true,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          ui.DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => insertRow(index, "above"),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
-                              "Insert row above"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          ui.DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => insertRow(index, "below"),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
-                              "Insert row below"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          ui.DropdownMenu.Item,
-                          {
-                            className: "gap-x-2",
-                            onClick: () => deleteRow(index),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
-                              "Delete row"
-                            ]
-                          }
-                        )
-                      ] })
-                    ] })
-                  ] })
-                },
-                field.id
-              );
-            })
-          ] }),
-          hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const GridInput = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      ref,
-      ...props,
-      autoComplete: "off",
-      className: ui.clx(
-        "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
-        className
-      )
-    }
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.IconButton,
+          {
+            size: "small",
+            type: "button",
+            variant: "transparent",
+            onClick: onRemove,
+            isLoading: isPending || isLoading,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
+          }
+        )
+      ]
+    },
+    promotion.id
   );
-});
-GridInput.displayName = "MetadataForm.GridInput";
-const PlaceholderInner = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
-    ] }) })
-  ] });
 };
-const EDITABLE_TYPES = ["string", "number", "boolean"];
-function getDefaultValues(metadata) {
-  if (!metadata || !Object.keys(metadata).length) {
-    return [
-      {
-        key: "",
-        value: "",
-        disabled: false
-      }
-    ];
+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 getPromotionIds(items, shippingMethods) {
+  const promotionIds = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (item.adjustments) {
+      for (const adjustment of item.adjustments) {
+        if (adjustment.promotion_id) {
+          promotionIds.add(adjustment.promotion_id);
+        }
+      }
     }
-    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.promotion_id) {
+          promotionIds.add(adjustment.promotion_id);
+        }
       }
     }
-  });
-  return update;
-}
-function getHasUneditableRows(metadata) {
-  if (!metadata) {
-    return false;
   }
-  return Object.values(metadata).some(
-    (value) => !EDITABLE_TYPES.includes(typeof value)
-  );
+  return Array.from(promotionIds);
 }
 const SalesChannel = () => {
   const { id } = reactRouterDom.useParams();
@@ -11221,7 +11480,7 @@ const SalesChannelForm = ({ order }) => {
     defaultValues: {
       sales_channel_id: order.sales_channel_id || ""
     },
-    resolver: zod.zodResolver(schema$4)
+    resolver: zod.zodResolver(schema$2)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -11296,7 +11555,7 @@ const SalesChannelField = ({ control, order }) => {
     }
   );
 };
-const schema$4 = objectType({
+const schema$2 = objectType({
   sales_channel_id: stringType().min(1)
 });
 const STACKED_FOCUS_MODAL_ID = "shipping-form";
@@ -11324,7 +11583,7 @@ const Shipping = () => {
   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.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-6 py-16", 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." }) })
     ] }) }) }),
@@ -11411,14 +11670,14 @@ const ShippingForm = ({ preview, order }) => {
   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.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: "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(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               ui.Text,
               {
@@ -11460,8 +11719,8 @@ const ShippingForm = ({ preview, order }) => {
                 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.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                         ui.IconButton,
                         {
@@ -11469,12 +11728,12 @@ const ShippingForm = ({ preview, order }) => {
                           variant: "transparent",
                           className: "group/trigger",
                           disabled: !hasItems,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
+                          children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
                         }
                       ) }),
                       !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("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             ui.Text,
                             {
@@ -11498,7 +11757,7 @@ const ShippingForm = ({ preview, order }) => {
                             }
                           )
                         ] })
-                      ] }) : /* @__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.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           ui.Tooltip,
                           {
@@ -11515,7 +11774,7 @@ const ShippingForm = ({ preview, order }) => {
                             children: /* @__PURE__ */ jsxRuntime.jsxs(
                               ui.Badge,
                               {
-                                className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
+                                className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
                                 size: "xsmall",
                                 children: [
                                   /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
@@ -11540,7 +11799,7 @@ const ShippingForm = ({ preview, order }) => {
                             children: /* @__PURE__ */ jsxRuntime.jsxs(
                               ui.Badge,
                               {
-                                className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
+                                className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
                                 size: "xsmall",
                                 children: [
                                   /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
@@ -11553,7 +11812,7 @@ const ShippingForm = ({ preview, order }) => {
                         /* @__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",
+                            className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
                             size: "xsmall",
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
@@ -11624,17 +11883,17 @@ const ShippingForm = ({ preview, order }) => {
                         /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
-                            className: "px-3 flex items-center gap-x-3",
+                            className: "flex items-center gap-x-3 px-3",
                             children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-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(
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
                                   ui.Text,
                                   {
                                     size: "small",
@@ -11771,7 +12030,7 @@ const ShippingProfileForm = ({
     isPending: isUpdatingShippingMethod
   } = useDraftOrderUpdateShippingMethod(order.id);
   const onSubmit = form.handleSubmit(async (values) => {
-    if (lodash.isEqual(values, form.formState.defaultValues)) {
+    if (isEqual__default.default(values, form.formState.defaultValues)) {
       setIsOpen(STACKED_FOCUS_MODAL_ID, false);
       return;
     }
@@ -11815,7 +12074,7 @@ const ShippingProfileForm = ({
       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.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-6 py-16", 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." }) })
@@ -11888,14 +12147,14 @@ const ItemsPreview = ({ order, shippingProfileId }) => {
       /* @__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.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", 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",
+          className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -11948,7 +12207,7 @@ const ItemsPreview = ({ order, shippingProfileId }) => {
           ]
         },
         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.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
         /* @__PURE__ */ 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 "',
@@ -12138,7 +12397,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$3)
+    resolver: zod.zodResolver(schema$1)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -12308,7 +12567,7 @@ const ShippingAddressForm = ({ order }) => {
     }
   ) });
 };
-const schema$3 = addressSchema;
+const schema$1 = addressSchema;
 const TransferOwnership = () => {
   const { id } = reactRouterDom.useParams();
   const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12332,7 +12591,7 @@ const TransferOwnershipForm = ({ order }) => {
     defaultValues: {
       customer_id: order.customer_id || ""
     },
-    resolver: zod.zodResolver(schema$2)
+    resolver: zod.zodResolver(schema)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -12719,330 +12978,72 @@ const Illustration = () => {
             stroke: "#A1A1AA",
             strokeWidth: "1.5",
             strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "rect",
-            {
-              width: "12",
-              height: "12",
-              fill: "white",
-              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "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$2 = objectType({
-  customer_id: stringType().min(1)
-});
-const Email = () => {
-  const { id } = reactRouterDom.useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+email"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!order;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
-  ] });
-};
-const EmailForm = ({ order }) => {
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      email: order.email ?? ""
-    },
-    resolver: zod.zodResolver(schema$1)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      { email: data.email },
-      {
-        onSuccess: () => {
-          handleSuccess();
-        },
-        onError: (error) => {
-          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, {})
-            ] })
+            strokeLinejoin: "round"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const schema$1 = objectType({
-  email: stringType().email()
-});
-const BillingAddress = () => {
-  const { id } = reactRouterDom.useParams();
-  const { order, isPending, isError, error } = useOrder(id, {
-    fields: "+billing_address"
-  });
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!order;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
-  ] });
-};
-const BillingAddressForm = ({ order }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const form = reactHookForm.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) ?? ""
-    },
-    resolver: zod.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) => {
-          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.jsxs("div", { className: "flex flex-col gap-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
+        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              control: form.control,
-              name: "country_code",
-              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-              ] })
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "first_name",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "last_name",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              control: form.control,
-              name: "company",
-              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-              ] })
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              control: form.control,
-              name: "address_1",
-              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-              ] })
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              control: form.control,
-              name: "address_2",
-              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-              ] })
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "postal_code",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Form$2.Field,
-              {
-                control: form.control,
-                name: "city",
-                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              control: form.control,
-              name: "province",
-              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-              ] })
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
             {
-              control: form.control,
-              name: "phone",
-              render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-              ] })
+              width: "12",
+              height: "12",
+              fill: "white",
+              transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
             }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
+          ) })
+        ] })
       ]
     }
-  ) });
+  );
 };
-const schema = addressSchema;
+const schema = objectType({
+  customer_id: stringType().min(1)
+});
 const widgetModule = { widgets: [] };
 const routeModule = {
   routes: [
@@ -13063,22 +13064,30 @@ const routeModule = {
       handle,
       loader,
       children: [
+        {
+          Component: BillingAddress,
+          path: "/draft-orders/:id/billing-address"
+        },
         {
           Component: CustomItems,
           path: "/draft-orders/:id/custom-items"
         },
         {
-          Component: Items,
-          path: "/draft-orders/:id/items"
+          Component: Email,
+          path: "/draft-orders/:id/email"
         },
         {
-          Component: Promotions,
-          path: "/draft-orders/:id/promotions"
+          Component: Items,
+          path: "/draft-orders/:id/items"
         },
         {
           Component: Metadata,
           path: "/draft-orders/:id/metadata"
         },
+        {
+          Component: Promotions,
+          path: "/draft-orders/:id/promotions"
+        },
         {
           Component: SalesChannel,
           path: "/draft-orders/:id/sales-channel"
@@ -13094,14 +13103,6 @@ const routeModule = {
         {
           Component: TransferOwnership,
           path: "/draft-orders/:id/transfer-ownership"
-        },
-        {
-          Component: Email,
-          path: "/draft-orders/:id/email"
-        },
-        {
-          Component: BillingAddress,
-          path: "/draft-orders/:id/billing-address"
         }
       ]
     }