@medusajs/draft-order 2.11.0 → 2.11.1-snapshot-20251021083840

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

@@ -9571,27 +9571,6 @@ const ID = () => {
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
   ] });
 };
-const CustomItems = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
-  ] });
-};
-const CustomItemsForm = () => {
-  const form = reactHookForm.useForm({
-    resolver: zod.zodResolver(schema$5)
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
-    ] }) })
-  ] }) });
-};
-const schema$5 = objectType({
-  email: stringType().email()
-});
 const BillingAddress = () => {
   const { id } = reactRouterDom.useParams();
   const { order, isPending, isError, error } = useOrder(id, {
@@ -9624,7 +9603,7 @@ const BillingAddressForm = ({ order }) => {
       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$4)
+    resolver: zod.zodResolver(schema$5)
   });
   const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
   const { handleSuccess } = useRouteModal();
@@ -9781,7 +9760,96 @@ const BillingAddressForm = ({ order }) => {
     }
   ) });
 };
-const schema$4 = addressSchema;
+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" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
+  ] });
+};
+const CustomItemsForm = () => {
+  const form = reactHookForm.useForm({
+    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, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
+    ] }) })
+  ] }) });
+};
+const schema$4 = objectType({
+  email: stringType().email()
+});
+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 },
+      {
+        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,
@@ -10756,10 +10824,54 @@ const customItemSchema = objectType({
   quantity: numberType(),
   unit_price: unionType([numberType(), stringType()])
 });
-const Email = () => {
+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: "+email"
+    fields: "metadata"
   });
   if (isError) {
     throw error;
@@ -10767,26 +10879,33 @@ const Email = () => {
   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" }) })
+      /* @__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(EmailForm, { order })
+    !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
   ] });
 };
-const EmailForm = ({ order }) => {
+const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
+const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
+const MetadataForm = ({ orderId, metadata }) => {
+  const { handleSuccess } = useRouteModal();
+  const hasUneditableRows = getHasUneditableRows(metadata);
+  const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
   const form = reactHookForm.useForm({
     defaultValues: {
-      email: order.email ?? ""
+      metadata: getDefaultValues(metadata)
     },
-    resolver: zod.zodResolver(schema$3)
+    resolver: zod.zodResolver(MetadataSchema)
   });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const parsedData = parseValues(data);
     await mutateAsync(
-      { email: data.email },
+      {
+        metadata: parsedData
+      },
       {
         onSuccess: () => {
+          ui.toast.success("Metadata updated");
           handleSuccess();
         },
         onError: (error) => {
@@ -10795,182 +10914,307 @@ const EmailForm = ({ order }) => {
       }
     );
   });
+  const { fields, insert, remove } = reactHookForm.useFieldArray({
+    control: form.control,
+    name: "metadata"
+  });
+  function deleteRow(index) {
+    remove(index);
+    if (fields.length === 1) {
+      insert(0, {
+        key: "",
+        value: "",
+        disabled: false
+      });
+    }
+  }
+  function insertRow(index, position) {
+    insert(index + (position === "above" ? 0 : 1), {
+      key: "",
+      value: "",
+      disabled: false
+    });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
     KeyboundForm,
     {
+      onSubmit: handleSubmit,
       className: "flex flex-1 flex-col overflow-hidden",
-      onSubmit,
       children: [
-        /* @__PURE__ */ jsxRuntime.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 SalesChannel = () => {
-  const { id } = reactRouterDom.useParams();
-  const { draft_order, isPending, isError, error } = useDraftOrder(
-    id,
-    {
-      fields: "+sales_channel_id"
-    },
-    {
-      enabled: !!id
-    }
-  );
-  if (isError) {
-    throw error;
-  }
-  const ISrEADY = !!draft_order && !isPending;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
-    ] }),
-    ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
-  ] });
-};
-const SalesChannelForm = ({ order }) => {
-  const form = reactHookForm.useForm({
-    defaultValues: {
-      sales_channel_id: order.sales_channel_id || ""
-    },
-    resolver: zod.zodResolver(schema$2)
-  });
-  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      {
-        sales_channel_id: data.sales_channel_id
-      },
-      {
-        onSuccess: () => {
-          ui.toast.success("Sales channel updated");
-          handleSuccess();
-        },
-        onError: (error) => {
-          ui.toast.error(error.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    KeyboundForm,
-    {
-      className: "flex flex-1 flex-col overflow-hidden",
-      onSubmit,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.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 SalesChannelField = ({ control, order }) => {
-  const salesChannels = useComboboxData({
-    queryFn: async (params) => {
-      return await sdk.admin.salesChannel.list(params);
-    },
-    queryKey: ["sales-channels"],
-    getOptions: (data) => {
-      return data.sales_channels.map((salesChannel) => ({
-        label: salesChannel.name,
-        value: salesChannel.id
-      }));
-    },
-    defaultValue: order.sales_channel_id || void 0
-  });
+const GridInput = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Form$2.Field,
+    "input",
     {
-      control,
-      name: "sales_channel_id",
-      render: ({ field }) => {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Combobox,
-            {
-              options: salesChannels.options,
-              fetchNextPage: salesChannels.fetchNextPage,
-              isFetchingNextPage: salesChannels.isFetchingNextPage,
-              searchValue: salesChannels.searchValue,
-              onSearchValueChange: salesChannels.onSearchValueChange,
-              placeholder: "Select sales channel",
-              ...field
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-        ] });
-      }
+      ref,
+      ...props,
+      autoComplete: "off",
+      className: ui.clx(
+        "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
+        className
+      )
     }
   );
-};
-const schema$2 = objectType({
-  sales_channel_id: stringType().min(1)
 });
-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 })
+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 PromotionForm = ({ preview }) => {
-  const { items, shipping_methods } = preview;
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
+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);
@@ -11207,6 +11451,112 @@ function getPromotionIds(items, shippingMethods) {
   }
   return Array.from(promotionIds);
 }
+const SalesChannel = () => {
+  const { id } = reactRouterDom.useParams();
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
+    {
+      fields: "+sales_channel_id"
+    },
+    {
+      enabled: !!id
+    }
+  );
+  if (isError) {
+    throw error;
+  }
+  const ISrEADY = !!draft_order && !isPending;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
+    ] }),
+    ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
+  ] });
+};
+const SalesChannelForm = ({ order }) => {
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      sales_channel_id: order.sales_channel_id || ""
+    },
+    resolver: zod.zodResolver(schema$2)
+  });
+  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        sales_channel_id: data.sales_channel_id
+      },
+      {
+        onSuccess: () => {
+          ui.toast.success("Sales channel updated");
+          handleSuccess();
+        },
+        onError: (error) => {
+          ui.toast.error(error.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
+    {
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const SalesChannelField = ({ control, order }) => {
+  const salesChannels = useComboboxData({
+    queryFn: async (params) => {
+      return await sdk.admin.salesChannel.list(params);
+    },
+    queryKey: ["sales-channels"],
+    getOptions: (data) => {
+      return data.sales_channels.map((salesChannel) => ({
+        label: salesChannel.name,
+        value: salesChannel.id
+      }));
+    },
+    defaultValue: order.sales_channel_id || void 0
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form$2.Field,
+    {
+      control,
+      name: "sales_channel_id",
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Combobox,
+            {
+              options: salesChannels.options,
+              fetchNextPage: salesChannels.fetchNextPage,
+              isFetchingNextPage: salesChannels.isFetchingNextPage,
+              searchValue: salesChannels.searchValue,
+              onSearchValueChange: salesChannels.onSearchValueChange,
+              placeholder: "Select sales channel",
+              ...field
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+        ] });
+      }
+    }
+  );
+};
+const schema$2 = objectType({
+  sales_channel_id: stringType().min(1)
+});
 const STACKED_FOCUS_MODAL_ID = "shipping-form";
 const Shipping = () => {
   var _a;
@@ -12554,495 +12904,145 @@ const Illustration = () => {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
-          {
-            width: "12",
-            height: "3",
-            rx: "1.5",
-            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
-            fill: "#A1A1AA"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
-            fill: "#52525B"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
-            stroke: "#A1A1AA",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M146.894 101.198L139.51 101.155L139.486 105.365",
-            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 = objectType({
-  customer_id: stringType().min(1)
-});
-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 })
-  ] });
-};
-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(
-      {
-        metadata: parsedData
-      },
-      {
-        onSuccess: () => {
-          ui.toast.success("Metadata updated");
-          handleSuccess();
-        },
-        onError: (error) => {
-          ui.toast.error(error.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,
-    {
-      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" })
-        ] }) })
+          "rect",
+          {
+            width: "12",
+            height: "3",
+            rx: "1.5",
+            transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
+            fill: "#A1A1AA"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
+            fill: "#52525B"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
+            stroke: "#A1A1AA",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M146.894 101.198L139.51 101.155L139.486 105.365",
+            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 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 schema = objectType({
+  customer_id: stringType().min(1)
+});
 const widgetModule = { widgets: [] };
 const routeModule = {
   routes: [
@@ -13063,30 +13063,34 @@ const routeModule = {
       handle,
       loader,
       children: [
-        {
-          Component: CustomItems,
-          path: "/draft-orders/:id/custom-items"
-        },
         {
           Component: BillingAddress,
           path: "/draft-orders/:id/billing-address"
         },
         {
-          Component: Items,
-          path: "/draft-orders/:id/items"
+          Component: CustomItems,
+          path: "/draft-orders/:id/custom-items"
         },
         {
           Component: Email,
           path: "/draft-orders/:id/email"
         },
         {
-          Component: SalesChannel,
-          path: "/draft-orders/:id/sales-channel"
+          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"
+        },
         {
           Component: Shipping,
           path: "/draft-orders/:id/shipping"
@@ -13098,10 +13102,6 @@ const routeModule = {
         {
           Component: TransferOwnership,
           path: "/draft-orders/:id/transfer-ownership"
-        },
-        {
-          Component: Metadata,
-          path: "/draft-orders/:id/metadata"
         }
       ]
     }