@medusajs/draft-order 2.20.0 → 2.20.2-preview-20260904091918

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7650,356 +7650,6 @@ const SalesChannelField = ({ control, order }) => {
7650
7650
  const schema$2 = z.object({
7651
7651
  sales_channel_id: z.string().min(1)
7652
7652
  });
7653
- const InlineTip = forwardRef(
7654
- ({ variant = "tip", label, className, children, ...props }, ref) => {
7655
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
7656
- return /* @__PURE__ */ jsxs(
7657
- "div",
7658
- {
7659
- ref,
7660
- className: clx(
7661
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
7662
- className
7663
- ),
7664
- ...props,
7665
- children: [
7666
- /* @__PURE__ */ jsx(
7667
- "div",
7668
- {
7669
- role: "presentation",
7670
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
7671
- "bg-ui-tag-orange-icon": variant === "warning"
7672
- })
7673
- }
7674
- ),
7675
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
7676
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
7677
- labelValue,
7678
- ":"
7679
- ] }),
7680
- " ",
7681
- children
7682
- ] })
7683
- ]
7684
- }
7685
- );
7686
- }
7687
- );
7688
- InlineTip.displayName = "InlineTip";
7689
- const MetadataFieldSchema = z.object({
7690
- key: z.string(),
7691
- disabled: z.boolean().optional(),
7692
- value: z.any()
7693
- });
7694
- const MetadataSchema = z.object({
7695
- metadata: z.array(MetadataFieldSchema)
7696
- });
7697
- const Metadata = () => {
7698
- const { id } = useParams();
7699
- const { order, isPending, isError, error } = useOrder(id, {
7700
- fields: "metadata"
7701
- });
7702
- if (isError) {
7703
- throw error;
7704
- }
7705
- const isReady = !isPending && !!order;
7706
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
7707
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
7708
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
7709
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
7710
- ] }),
7711
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order?.metadata })
7712
- ] });
7713
- };
7714
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
7715
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
7716
- const MetadataForm = ({ orderId, metadata }) => {
7717
- const { handleSuccess } = useRouteModal();
7718
- const hasUneditableRows = getHasUneditableRows(metadata);
7719
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
7720
- const form = useForm({
7721
- defaultValues: {
7722
- metadata: getDefaultValues(metadata)
7723
- },
7724
- resolver: zodResolver(MetadataSchema)
7725
- });
7726
- const handleSubmit = form.handleSubmit(async (data) => {
7727
- const parsedData = parseValues(data);
7728
- await mutateAsync(
7729
- {
7730
- metadata: parsedData
7731
- },
7732
- {
7733
- onSuccess: () => {
7734
- toast.success("Metadata updated");
7735
- handleSuccess();
7736
- },
7737
- onError: (error) => {
7738
- toast.error(error.message);
7739
- }
7740
- }
7741
- );
7742
- });
7743
- const { fields, insert, remove } = useFieldArray({
7744
- control: form.control,
7745
- name: "metadata"
7746
- });
7747
- function deleteRow(index) {
7748
- remove(index);
7749
- if (fields.length === 1) {
7750
- insert(0, {
7751
- key: "",
7752
- value: "",
7753
- disabled: false
7754
- });
7755
- }
7756
- }
7757
- function insertRow(index, position) {
7758
- insert(index + (position === "above" ? 0 : 1), {
7759
- key: "",
7760
- value: "",
7761
- disabled: false
7762
- });
7763
- }
7764
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
7765
- KeyboundForm,
7766
- {
7767
- onSubmit: handleSubmit,
7768
- className: "flex flex-1 flex-col overflow-hidden",
7769
- children: [
7770
- /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
7771
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
7772
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
7773
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
7774
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
7775
- ] }),
7776
- fields.map((field, index) => {
7777
- const isDisabled = field.disabled || false;
7778
- let placeholder = "-";
7779
- if (typeof field.value === "object") {
7780
- placeholder = "{ ... }";
7781
- }
7782
- if (Array.isArray(field.value)) {
7783
- placeholder = "[ ... ]";
7784
- }
7785
- return /* @__PURE__ */ jsx(
7786
- ConditionalTooltip,
7787
- {
7788
- showTooltip: isDisabled,
7789
- content: "This row is disabled because it contains non-primitive data.",
7790
- children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
7791
- /* @__PURE__ */ jsxs(
7792
- "div",
7793
- {
7794
- className: clx("grid grid-cols-2 divide-x", {
7795
- "overflow-hidden rounded-b-lg": index === fields.length - 1
7796
- }),
7797
- children: [
7798
- /* @__PURE__ */ jsx(
7799
- Form$2.Field,
7800
- {
7801
- control: form.control,
7802
- name: `metadata.${index}.key`,
7803
- render: ({ field: field2 }) => {
7804
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
7805
- GridInput,
7806
- {
7807
- "aria-labelledby": METADATA_KEY_LABEL_ID,
7808
- ...field2,
7809
- disabled: isDisabled,
7810
- placeholder: "Key"
7811
- }
7812
- ) }) });
7813
- }
7814
- }
7815
- ),
7816
- /* @__PURE__ */ jsx(
7817
- Form$2.Field,
7818
- {
7819
- control: form.control,
7820
- name: `metadata.${index}.value`,
7821
- render: ({ field: { value, ...field2 } }) => {
7822
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
7823
- GridInput,
7824
- {
7825
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
7826
- ...field2,
7827
- value: isDisabled ? placeholder : value,
7828
- disabled: isDisabled,
7829
- placeholder: "Value"
7830
- }
7831
- ) }) });
7832
- }
7833
- }
7834
- )
7835
- ]
7836
- }
7837
- ),
7838
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
7839
- /* @__PURE__ */ jsx(
7840
- DropdownMenu.Trigger,
7841
- {
7842
- className: clx(
7843
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
7844
- {
7845
- hidden: isDisabled
7846
- }
7847
- ),
7848
- disabled: isDisabled,
7849
- asChild: true,
7850
- children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
7851
- }
7852
- ),
7853
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
7854
- /* @__PURE__ */ jsxs(
7855
- DropdownMenu.Item,
7856
- {
7857
- className: "gap-x-2",
7858
- onClick: () => insertRow(index, "above"),
7859
- children: [
7860
- /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
7861
- "Insert row above"
7862
- ]
7863
- }
7864
- ),
7865
- /* @__PURE__ */ jsxs(
7866
- DropdownMenu.Item,
7867
- {
7868
- className: "gap-x-2",
7869
- onClick: () => insertRow(index, "below"),
7870
- children: [
7871
- /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
7872
- "Insert row below"
7873
- ]
7874
- }
7875
- ),
7876
- /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
7877
- /* @__PURE__ */ jsxs(
7878
- DropdownMenu.Item,
7879
- {
7880
- className: "gap-x-2",
7881
- onClick: () => deleteRow(index),
7882
- children: [
7883
- /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
7884
- "Delete row"
7885
- ]
7886
- }
7887
- )
7888
- ] })
7889
- ] })
7890
- ] })
7891
- },
7892
- field.id
7893
- );
7894
- })
7895
- ] }),
7896
- hasUneditableRows && /* @__PURE__ */ 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." })
7897
- ] }),
7898
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
7899
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
7900
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
7901
- ] }) })
7902
- ]
7903
- }
7904
- ) });
7905
- };
7906
- const GridInput = forwardRef(({ className, ...props }, ref) => {
7907
- return /* @__PURE__ */ jsx(
7908
- "input",
7909
- {
7910
- ref,
7911
- ...props,
7912
- autoComplete: "off",
7913
- className: clx(
7914
- "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",
7915
- className
7916
- )
7917
- }
7918
- );
7919
- });
7920
- GridInput.displayName = "MetadataForm.GridInput";
7921
- const PlaceholderInner = () => {
7922
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
7923
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
7924
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
7925
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
7926
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
7927
- ] }) })
7928
- ] });
7929
- };
7930
- const EDITABLE_TYPES = ["string", "number", "boolean"];
7931
- function getDefaultValues(metadata) {
7932
- if (!metadata || !Object.keys(metadata).length) {
7933
- return [
7934
- {
7935
- key: "",
7936
- value: "",
7937
- disabled: false
7938
- }
7939
- ];
7940
- }
7941
- return Object.entries(metadata).map(([key, value]) => {
7942
- if (!EDITABLE_TYPES.includes(typeof value)) {
7943
- return {
7944
- key,
7945
- value,
7946
- disabled: true
7947
- };
7948
- }
7949
- let stringValue = value;
7950
- if (typeof value !== "string") {
7951
- stringValue = JSON.stringify(value);
7952
- }
7953
- return {
7954
- key,
7955
- value: stringValue,
7956
- original_key: key
7957
- };
7958
- });
7959
- }
7960
- function parseValues(values) {
7961
- const metadata = values.metadata;
7962
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
7963
- if (isEmpty) {
7964
- return null;
7965
- }
7966
- const update = {};
7967
- metadata.forEach((field) => {
7968
- let key = field.key;
7969
- let value = field.value;
7970
- const disabled = field.disabled;
7971
- if (!key || !value) {
7972
- return;
7973
- }
7974
- if (disabled) {
7975
- update[key] = value;
7976
- return;
7977
- }
7978
- key = key.trim();
7979
- value = value.trim();
7980
- if (value === "true") {
7981
- update[key] = true;
7982
- } else if (value === "false") {
7983
- update[key] = false;
7984
- } else {
7985
- const parsedNumber = parseFloat(value);
7986
- if (!isNaN(parsedNumber)) {
7987
- update[key] = parsedNumber;
7988
- } else {
7989
- update[key] = value;
7990
- }
7991
- }
7992
- });
7993
- return update;
7994
- }
7995
- function getHasUneditableRows(metadata) {
7996
- if (!metadata) {
7997
- return false;
7998
- }
7999
- return Object.values(metadata).some(
8000
- (value) => !EDITABLE_TYPES.includes(typeof value)
8001
- );
8002
- }
8003
7653
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
8004
7654
  const Shipping = () => {
8005
7655
  const { id } = useParams();
@@ -9466,11 +9116,361 @@ const Illustration = () => {
9466
9116
  ] })
9467
9117
  ]
9468
9118
  }
9469
- );
9119
+ );
9120
+ };
9121
+ const schema = z.object({
9122
+ customer_id: z.string().min(1)
9123
+ });
9124
+ const InlineTip = forwardRef(
9125
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
9126
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9127
+ return /* @__PURE__ */ jsxs(
9128
+ "div",
9129
+ {
9130
+ ref,
9131
+ className: clx(
9132
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9133
+ className
9134
+ ),
9135
+ ...props,
9136
+ children: [
9137
+ /* @__PURE__ */ jsx(
9138
+ "div",
9139
+ {
9140
+ role: "presentation",
9141
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9142
+ "bg-ui-tag-orange-icon": variant === "warning"
9143
+ })
9144
+ }
9145
+ ),
9146
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
9147
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9148
+ labelValue,
9149
+ ":"
9150
+ ] }),
9151
+ " ",
9152
+ children
9153
+ ] })
9154
+ ]
9155
+ }
9156
+ );
9157
+ }
9158
+ );
9159
+ InlineTip.displayName = "InlineTip";
9160
+ const MetadataFieldSchema = z.object({
9161
+ key: z.string(),
9162
+ disabled: z.boolean().optional(),
9163
+ value: z.any()
9164
+ });
9165
+ const MetadataSchema = z.object({
9166
+ metadata: z.array(MetadataFieldSchema)
9167
+ });
9168
+ const Metadata = () => {
9169
+ const { id } = useParams();
9170
+ const { order, isPending, isError, error } = useOrder(id, {
9171
+ fields: "metadata"
9172
+ });
9173
+ if (isError) {
9174
+ throw error;
9175
+ }
9176
+ const isReady = !isPending && !!order;
9177
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9178
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9179
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
9180
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9181
+ ] }),
9182
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order?.metadata })
9183
+ ] });
9184
+ };
9185
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9186
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9187
+ const MetadataForm = ({ orderId, metadata }) => {
9188
+ const { handleSuccess } = useRouteModal();
9189
+ const hasUneditableRows = getHasUneditableRows(metadata);
9190
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
9191
+ const form = useForm({
9192
+ defaultValues: {
9193
+ metadata: getDefaultValues(metadata)
9194
+ },
9195
+ resolver: zodResolver(MetadataSchema)
9196
+ });
9197
+ const handleSubmit = form.handleSubmit(async (data) => {
9198
+ const parsedData = parseValues(data);
9199
+ await mutateAsync(
9200
+ {
9201
+ metadata: parsedData
9202
+ },
9203
+ {
9204
+ onSuccess: () => {
9205
+ toast.success("Metadata updated");
9206
+ handleSuccess();
9207
+ },
9208
+ onError: (error) => {
9209
+ toast.error(error.message);
9210
+ }
9211
+ }
9212
+ );
9213
+ });
9214
+ const { fields, insert, remove } = useFieldArray({
9215
+ control: form.control,
9216
+ name: "metadata"
9217
+ });
9218
+ function deleteRow(index) {
9219
+ remove(index);
9220
+ if (fields.length === 1) {
9221
+ insert(0, {
9222
+ key: "",
9223
+ value: "",
9224
+ disabled: false
9225
+ });
9226
+ }
9227
+ }
9228
+ function insertRow(index, position) {
9229
+ insert(index + (position === "above" ? 0 : 1), {
9230
+ key: "",
9231
+ value: "",
9232
+ disabled: false
9233
+ });
9234
+ }
9235
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9236
+ KeyboundForm,
9237
+ {
9238
+ onSubmit: handleSubmit,
9239
+ className: "flex flex-1 flex-col overflow-hidden",
9240
+ children: [
9241
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
9242
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
9243
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
9244
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
9245
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
9246
+ ] }),
9247
+ fields.map((field, index) => {
9248
+ const isDisabled = field.disabled || false;
9249
+ let placeholder = "-";
9250
+ if (typeof field.value === "object") {
9251
+ placeholder = "{ ... }";
9252
+ }
9253
+ if (Array.isArray(field.value)) {
9254
+ placeholder = "[ ... ]";
9255
+ }
9256
+ return /* @__PURE__ */ jsx(
9257
+ ConditionalTooltip,
9258
+ {
9259
+ showTooltip: isDisabled,
9260
+ content: "This row is disabled because it contains non-primitive data.",
9261
+ children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
9262
+ /* @__PURE__ */ jsxs(
9263
+ "div",
9264
+ {
9265
+ className: clx("grid grid-cols-2 divide-x", {
9266
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
9267
+ }),
9268
+ children: [
9269
+ /* @__PURE__ */ jsx(
9270
+ Form$2.Field,
9271
+ {
9272
+ control: form.control,
9273
+ name: `metadata.${index}.key`,
9274
+ render: ({ field: field2 }) => {
9275
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
9276
+ GridInput,
9277
+ {
9278
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
9279
+ ...field2,
9280
+ disabled: isDisabled,
9281
+ placeholder: "Key"
9282
+ }
9283
+ ) }) });
9284
+ }
9285
+ }
9286
+ ),
9287
+ /* @__PURE__ */ jsx(
9288
+ Form$2.Field,
9289
+ {
9290
+ control: form.control,
9291
+ name: `metadata.${index}.value`,
9292
+ render: ({ field: { value, ...field2 } }) => {
9293
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
9294
+ GridInput,
9295
+ {
9296
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
9297
+ ...field2,
9298
+ value: isDisabled ? placeholder : value,
9299
+ disabled: isDisabled,
9300
+ placeholder: "Value"
9301
+ }
9302
+ ) }) });
9303
+ }
9304
+ }
9305
+ )
9306
+ ]
9307
+ }
9308
+ ),
9309
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
9310
+ /* @__PURE__ */ jsx(
9311
+ DropdownMenu.Trigger,
9312
+ {
9313
+ className: clx(
9314
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
9315
+ {
9316
+ hidden: isDisabled
9317
+ }
9318
+ ),
9319
+ disabled: isDisabled,
9320
+ asChild: true,
9321
+ children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
9322
+ }
9323
+ ),
9324
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
9325
+ /* @__PURE__ */ jsxs(
9326
+ DropdownMenu.Item,
9327
+ {
9328
+ className: "gap-x-2",
9329
+ onClick: () => insertRow(index, "above"),
9330
+ children: [
9331
+ /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
9332
+ "Insert row above"
9333
+ ]
9334
+ }
9335
+ ),
9336
+ /* @__PURE__ */ jsxs(
9337
+ DropdownMenu.Item,
9338
+ {
9339
+ className: "gap-x-2",
9340
+ onClick: () => insertRow(index, "below"),
9341
+ children: [
9342
+ /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
9343
+ "Insert row below"
9344
+ ]
9345
+ }
9346
+ ),
9347
+ /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
9348
+ /* @__PURE__ */ jsxs(
9349
+ DropdownMenu.Item,
9350
+ {
9351
+ className: "gap-x-2",
9352
+ onClick: () => deleteRow(index),
9353
+ children: [
9354
+ /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
9355
+ "Delete row"
9356
+ ]
9357
+ }
9358
+ )
9359
+ ] })
9360
+ ] })
9361
+ ] })
9362
+ },
9363
+ field.id
9364
+ );
9365
+ })
9366
+ ] }),
9367
+ hasUneditableRows && /* @__PURE__ */ 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." })
9368
+ ] }),
9369
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9370
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
9371
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9372
+ ] }) })
9373
+ ]
9374
+ }
9375
+ ) });
9470
9376
  };
9471
- const schema = z.object({
9472
- customer_id: z.string().min(1)
9377
+ const GridInput = forwardRef(({ className, ...props }, ref) => {
9378
+ return /* @__PURE__ */ jsx(
9379
+ "input",
9380
+ {
9381
+ ref,
9382
+ ...props,
9383
+ autoComplete: "off",
9384
+ className: clx(
9385
+ "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",
9386
+ className
9387
+ )
9388
+ }
9389
+ );
9473
9390
  });
9391
+ GridInput.displayName = "MetadataForm.GridInput";
9392
+ const PlaceholderInner = () => {
9393
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
9394
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
9395
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9396
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
9397
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
9398
+ ] }) })
9399
+ ] });
9400
+ };
9401
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
9402
+ function getDefaultValues(metadata) {
9403
+ if (!metadata || !Object.keys(metadata).length) {
9404
+ return [
9405
+ {
9406
+ key: "",
9407
+ value: "",
9408
+ disabled: false
9409
+ }
9410
+ ];
9411
+ }
9412
+ return Object.entries(metadata).map(([key, value]) => {
9413
+ if (!EDITABLE_TYPES.includes(typeof value)) {
9414
+ return {
9415
+ key,
9416
+ value,
9417
+ disabled: true
9418
+ };
9419
+ }
9420
+ let stringValue = value;
9421
+ if (typeof value !== "string") {
9422
+ stringValue = JSON.stringify(value);
9423
+ }
9424
+ return {
9425
+ key,
9426
+ value: stringValue,
9427
+ original_key: key
9428
+ };
9429
+ });
9430
+ }
9431
+ function parseValues(values) {
9432
+ const metadata = values.metadata;
9433
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
9434
+ if (isEmpty) {
9435
+ return null;
9436
+ }
9437
+ const update = {};
9438
+ metadata.forEach((field) => {
9439
+ let key = field.key;
9440
+ let value = field.value;
9441
+ const disabled = field.disabled;
9442
+ if (!key || !value) {
9443
+ return;
9444
+ }
9445
+ if (disabled) {
9446
+ update[key] = value;
9447
+ return;
9448
+ }
9449
+ key = key.trim();
9450
+ value = value.trim();
9451
+ if (value === "true") {
9452
+ update[key] = true;
9453
+ } else if (value === "false") {
9454
+ update[key] = false;
9455
+ } else {
9456
+ const parsedNumber = parseFloat(value);
9457
+ if (!isNaN(parsedNumber)) {
9458
+ update[key] = parsedNumber;
9459
+ } else {
9460
+ update[key] = value;
9461
+ }
9462
+ }
9463
+ });
9464
+ return update;
9465
+ }
9466
+ function getHasUneditableRows(metadata) {
9467
+ if (!metadata) {
9468
+ return false;
9469
+ }
9470
+ return Object.values(metadata).some(
9471
+ (value) => !EDITABLE_TYPES.includes(typeof value)
9472
+ );
9473
+ }
9474
9474
  const widgetModule = { widgets: [] };
9475
9475
  const routeModule = {
9476
9476
  routes: [
@@ -9515,10 +9515,6 @@ const routeModule = {
9515
9515
  Component: SalesChannel,
9516
9516
  path: "/draft-orders/:id/sales-channel"
9517
9517
  },
9518
- {
9519
- Component: Metadata,
9520
- path: "/draft-orders/:id/metadata"
9521
- },
9522
9518
  {
9523
9519
  Component: Shipping,
9524
9520
  path: "/draft-orders/:id/shipping"
@@ -9530,6 +9526,10 @@ const routeModule = {
9530
9526
  {
9531
9527
  Component: TransferOwnership,
9532
9528
  path: "/draft-orders/:id/transfer-ownership"
9529
+ },
9530
+ {
9531
+ Component: Metadata,
9532
+ path: "/draft-orders/:id/metadata"
9533
9533
  }
9534
9534
  ]
9535
9535
  }