@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.
- package/.medusa/server/src/admin/index.js +357 -357
- package/.medusa/server/src/admin/index.mjs +357 -357
- package/package.json +18 -18
|
@@ -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
|
|
9472
|
-
|
|
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
|
}
|