@medusajs/draft-order 2.10.0-snapshot-20250828141006 → 2.10.0-snapshot-20250828141936
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 +16 -16
|
@@ -10807,356 +10807,6 @@ const customItemSchema = objectType({
|
|
|
10807
10807
|
quantity: numberType(),
|
|
10808
10808
|
unit_price: unionType([numberType(), stringType()])
|
|
10809
10809
|
});
|
|
10810
|
-
const InlineTip = forwardRef(
|
|
10811
|
-
({ variant = "tip", label, className, children, ...props }, ref) => {
|
|
10812
|
-
const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
|
|
10813
|
-
return /* @__PURE__ */ jsxs(
|
|
10814
|
-
"div",
|
|
10815
|
-
{
|
|
10816
|
-
ref,
|
|
10817
|
-
className: clx(
|
|
10818
|
-
"bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
|
|
10819
|
-
className
|
|
10820
|
-
),
|
|
10821
|
-
...props,
|
|
10822
|
-
children: [
|
|
10823
|
-
/* @__PURE__ */ jsx(
|
|
10824
|
-
"div",
|
|
10825
|
-
{
|
|
10826
|
-
role: "presentation",
|
|
10827
|
-
className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
|
|
10828
|
-
"bg-ui-tag-orange-icon": variant === "warning"
|
|
10829
|
-
})
|
|
10830
|
-
}
|
|
10831
|
-
),
|
|
10832
|
-
/* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
|
|
10833
|
-
/* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
|
|
10834
|
-
labelValue,
|
|
10835
|
-
":"
|
|
10836
|
-
] }),
|
|
10837
|
-
" ",
|
|
10838
|
-
children
|
|
10839
|
-
] })
|
|
10840
|
-
]
|
|
10841
|
-
}
|
|
10842
|
-
);
|
|
10843
|
-
}
|
|
10844
|
-
);
|
|
10845
|
-
InlineTip.displayName = "InlineTip";
|
|
10846
|
-
const MetadataFieldSchema = objectType({
|
|
10847
|
-
key: stringType(),
|
|
10848
|
-
disabled: booleanType().optional(),
|
|
10849
|
-
value: anyType()
|
|
10850
|
-
});
|
|
10851
|
-
const MetadataSchema = objectType({
|
|
10852
|
-
metadata: arrayType(MetadataFieldSchema)
|
|
10853
|
-
});
|
|
10854
|
-
const Metadata = () => {
|
|
10855
|
-
const { id } = useParams();
|
|
10856
|
-
const { order, isPending, isError, error } = useOrder(id, {
|
|
10857
|
-
fields: "metadata"
|
|
10858
|
-
});
|
|
10859
|
-
if (isError) {
|
|
10860
|
-
throw error;
|
|
10861
|
-
}
|
|
10862
|
-
const isReady = !isPending && !!order;
|
|
10863
|
-
return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
|
|
10864
|
-
/* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
|
|
10865
|
-
/* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
|
|
10866
|
-
/* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
|
|
10867
|
-
] }),
|
|
10868
|
-
!isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
|
|
10869
|
-
] });
|
|
10870
|
-
};
|
|
10871
|
-
const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
|
|
10872
|
-
const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
|
|
10873
|
-
const MetadataForm = ({ orderId, metadata }) => {
|
|
10874
|
-
const { handleSuccess } = useRouteModal();
|
|
10875
|
-
const hasUneditableRows = getHasUneditableRows(metadata);
|
|
10876
|
-
const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
|
|
10877
|
-
const form = useForm({
|
|
10878
|
-
defaultValues: {
|
|
10879
|
-
metadata: getDefaultValues(metadata)
|
|
10880
|
-
},
|
|
10881
|
-
resolver: zodResolver(MetadataSchema)
|
|
10882
|
-
});
|
|
10883
|
-
const handleSubmit = form.handleSubmit(async (data) => {
|
|
10884
|
-
const parsedData = parseValues(data);
|
|
10885
|
-
await mutateAsync(
|
|
10886
|
-
{
|
|
10887
|
-
metadata: parsedData
|
|
10888
|
-
},
|
|
10889
|
-
{
|
|
10890
|
-
onSuccess: () => {
|
|
10891
|
-
toast.success("Metadata updated");
|
|
10892
|
-
handleSuccess();
|
|
10893
|
-
},
|
|
10894
|
-
onError: (error) => {
|
|
10895
|
-
toast.error(error.message);
|
|
10896
|
-
}
|
|
10897
|
-
}
|
|
10898
|
-
);
|
|
10899
|
-
});
|
|
10900
|
-
const { fields, insert, remove } = useFieldArray({
|
|
10901
|
-
control: form.control,
|
|
10902
|
-
name: "metadata"
|
|
10903
|
-
});
|
|
10904
|
-
function deleteRow(index) {
|
|
10905
|
-
remove(index);
|
|
10906
|
-
if (fields.length === 1) {
|
|
10907
|
-
insert(0, {
|
|
10908
|
-
key: "",
|
|
10909
|
-
value: "",
|
|
10910
|
-
disabled: false
|
|
10911
|
-
});
|
|
10912
|
-
}
|
|
10913
|
-
}
|
|
10914
|
-
function insertRow(index, position) {
|
|
10915
|
-
insert(index + (position === "above" ? 0 : 1), {
|
|
10916
|
-
key: "",
|
|
10917
|
-
value: "",
|
|
10918
|
-
disabled: false
|
|
10919
|
-
});
|
|
10920
|
-
}
|
|
10921
|
-
return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
|
|
10922
|
-
KeyboundForm,
|
|
10923
|
-
{
|
|
10924
|
-
onSubmit: handleSubmit,
|
|
10925
|
-
className: "flex flex-1 flex-col overflow-hidden",
|
|
10926
|
-
children: [
|
|
10927
|
-
/* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
|
|
10928
|
-
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
|
|
10929
|
-
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
|
|
10930
|
-
/* @__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" }) }),
|
|
10931
|
-
/* @__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" }) })
|
|
10932
|
-
] }),
|
|
10933
|
-
fields.map((field, index) => {
|
|
10934
|
-
const isDisabled = field.disabled || false;
|
|
10935
|
-
let placeholder = "-";
|
|
10936
|
-
if (typeof field.value === "object") {
|
|
10937
|
-
placeholder = "{ ... }";
|
|
10938
|
-
}
|
|
10939
|
-
if (Array.isArray(field.value)) {
|
|
10940
|
-
placeholder = "[ ... ]";
|
|
10941
|
-
}
|
|
10942
|
-
return /* @__PURE__ */ jsx(
|
|
10943
|
-
ConditionalTooltip,
|
|
10944
|
-
{
|
|
10945
|
-
showTooltip: isDisabled,
|
|
10946
|
-
content: "This row is disabled because it contains non-primitive data.",
|
|
10947
|
-
children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
|
|
10948
|
-
/* @__PURE__ */ jsxs(
|
|
10949
|
-
"div",
|
|
10950
|
-
{
|
|
10951
|
-
className: clx("grid grid-cols-2 divide-x", {
|
|
10952
|
-
"overflow-hidden rounded-b-lg": index === fields.length - 1
|
|
10953
|
-
}),
|
|
10954
|
-
children: [
|
|
10955
|
-
/* @__PURE__ */ jsx(
|
|
10956
|
-
Form$2.Field,
|
|
10957
|
-
{
|
|
10958
|
-
control: form.control,
|
|
10959
|
-
name: `metadata.${index}.key`,
|
|
10960
|
-
render: ({ field: field2 }) => {
|
|
10961
|
-
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
10962
|
-
GridInput,
|
|
10963
|
-
{
|
|
10964
|
-
"aria-labelledby": METADATA_KEY_LABEL_ID,
|
|
10965
|
-
...field2,
|
|
10966
|
-
disabled: isDisabled,
|
|
10967
|
-
placeholder: "Key"
|
|
10968
|
-
}
|
|
10969
|
-
) }) });
|
|
10970
|
-
}
|
|
10971
|
-
}
|
|
10972
|
-
),
|
|
10973
|
-
/* @__PURE__ */ jsx(
|
|
10974
|
-
Form$2.Field,
|
|
10975
|
-
{
|
|
10976
|
-
control: form.control,
|
|
10977
|
-
name: `metadata.${index}.value`,
|
|
10978
|
-
render: ({ field: { value, ...field2 } }) => {
|
|
10979
|
-
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
10980
|
-
GridInput,
|
|
10981
|
-
{
|
|
10982
|
-
"aria-labelledby": METADATA_VALUE_LABEL_ID,
|
|
10983
|
-
...field2,
|
|
10984
|
-
value: isDisabled ? placeholder : value,
|
|
10985
|
-
disabled: isDisabled,
|
|
10986
|
-
placeholder: "Value"
|
|
10987
|
-
}
|
|
10988
|
-
) }) });
|
|
10989
|
-
}
|
|
10990
|
-
}
|
|
10991
|
-
)
|
|
10992
|
-
]
|
|
10993
|
-
}
|
|
10994
|
-
),
|
|
10995
|
-
/* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
10996
|
-
/* @__PURE__ */ jsx(
|
|
10997
|
-
DropdownMenu.Trigger,
|
|
10998
|
-
{
|
|
10999
|
-
className: clx(
|
|
11000
|
-
"invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
|
|
11001
|
-
{
|
|
11002
|
-
hidden: isDisabled
|
|
11003
|
-
}
|
|
11004
|
-
),
|
|
11005
|
-
disabled: isDisabled,
|
|
11006
|
-
asChild: true,
|
|
11007
|
-
children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
|
|
11008
|
-
}
|
|
11009
|
-
),
|
|
11010
|
-
/* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
|
|
11011
|
-
/* @__PURE__ */ jsxs(
|
|
11012
|
-
DropdownMenu.Item,
|
|
11013
|
-
{
|
|
11014
|
-
className: "gap-x-2",
|
|
11015
|
-
onClick: () => insertRow(index, "above"),
|
|
11016
|
-
children: [
|
|
11017
|
-
/* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
|
|
11018
|
-
"Insert row above"
|
|
11019
|
-
]
|
|
11020
|
-
}
|
|
11021
|
-
),
|
|
11022
|
-
/* @__PURE__ */ jsxs(
|
|
11023
|
-
DropdownMenu.Item,
|
|
11024
|
-
{
|
|
11025
|
-
className: "gap-x-2",
|
|
11026
|
-
onClick: () => insertRow(index, "below"),
|
|
11027
|
-
children: [
|
|
11028
|
-
/* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
|
|
11029
|
-
"Insert row below"
|
|
11030
|
-
]
|
|
11031
|
-
}
|
|
11032
|
-
),
|
|
11033
|
-
/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
|
|
11034
|
-
/* @__PURE__ */ jsxs(
|
|
11035
|
-
DropdownMenu.Item,
|
|
11036
|
-
{
|
|
11037
|
-
className: "gap-x-2",
|
|
11038
|
-
onClick: () => deleteRow(index),
|
|
11039
|
-
children: [
|
|
11040
|
-
/* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
|
|
11041
|
-
"Delete row"
|
|
11042
|
-
]
|
|
11043
|
-
}
|
|
11044
|
-
)
|
|
11045
|
-
] })
|
|
11046
|
-
] })
|
|
11047
|
-
] })
|
|
11048
|
-
},
|
|
11049
|
-
field.id
|
|
11050
|
-
);
|
|
11051
|
-
})
|
|
11052
|
-
] }),
|
|
11053
|
-
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." })
|
|
11054
|
-
] }),
|
|
11055
|
-
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
11056
|
-
/* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
|
|
11057
|
-
/* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
|
|
11058
|
-
] }) })
|
|
11059
|
-
]
|
|
11060
|
-
}
|
|
11061
|
-
) });
|
|
11062
|
-
};
|
|
11063
|
-
const GridInput = forwardRef(({ className, ...props }, ref) => {
|
|
11064
|
-
return /* @__PURE__ */ jsx(
|
|
11065
|
-
"input",
|
|
11066
|
-
{
|
|
11067
|
-
ref,
|
|
11068
|
-
...props,
|
|
11069
|
-
autoComplete: "off",
|
|
11070
|
-
className: clx(
|
|
11071
|
-
"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",
|
|
11072
|
-
className
|
|
11073
|
-
)
|
|
11074
|
-
}
|
|
11075
|
-
);
|
|
11076
|
-
});
|
|
11077
|
-
GridInput.displayName = "MetadataForm.GridInput";
|
|
11078
|
-
const PlaceholderInner = () => {
|
|
11079
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
|
|
11080
|
-
/* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
|
|
11081
|
-
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
11082
|
-
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
|
|
11083
|
-
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
|
|
11084
|
-
] }) })
|
|
11085
|
-
] });
|
|
11086
|
-
};
|
|
11087
|
-
const EDITABLE_TYPES = ["string", "number", "boolean"];
|
|
11088
|
-
function getDefaultValues(metadata) {
|
|
11089
|
-
if (!metadata || !Object.keys(metadata).length) {
|
|
11090
|
-
return [
|
|
11091
|
-
{
|
|
11092
|
-
key: "",
|
|
11093
|
-
value: "",
|
|
11094
|
-
disabled: false
|
|
11095
|
-
}
|
|
11096
|
-
];
|
|
11097
|
-
}
|
|
11098
|
-
return Object.entries(metadata).map(([key, value]) => {
|
|
11099
|
-
if (!EDITABLE_TYPES.includes(typeof value)) {
|
|
11100
|
-
return {
|
|
11101
|
-
key,
|
|
11102
|
-
value,
|
|
11103
|
-
disabled: true
|
|
11104
|
-
};
|
|
11105
|
-
}
|
|
11106
|
-
let stringValue = value;
|
|
11107
|
-
if (typeof value !== "string") {
|
|
11108
|
-
stringValue = JSON.stringify(value);
|
|
11109
|
-
}
|
|
11110
|
-
return {
|
|
11111
|
-
key,
|
|
11112
|
-
value: stringValue,
|
|
11113
|
-
original_key: key
|
|
11114
|
-
};
|
|
11115
|
-
});
|
|
11116
|
-
}
|
|
11117
|
-
function parseValues(values) {
|
|
11118
|
-
const metadata = values.metadata;
|
|
11119
|
-
const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
|
|
11120
|
-
if (isEmpty) {
|
|
11121
|
-
return null;
|
|
11122
|
-
}
|
|
11123
|
-
const update = {};
|
|
11124
|
-
metadata.forEach((field) => {
|
|
11125
|
-
let key = field.key;
|
|
11126
|
-
let value = field.value;
|
|
11127
|
-
const disabled = field.disabled;
|
|
11128
|
-
if (!key || !value) {
|
|
11129
|
-
return;
|
|
11130
|
-
}
|
|
11131
|
-
if (disabled) {
|
|
11132
|
-
update[key] = value;
|
|
11133
|
-
return;
|
|
11134
|
-
}
|
|
11135
|
-
key = key.trim();
|
|
11136
|
-
value = value.trim();
|
|
11137
|
-
if (value === "true") {
|
|
11138
|
-
update[key] = true;
|
|
11139
|
-
} else if (value === "false") {
|
|
11140
|
-
update[key] = false;
|
|
11141
|
-
} else {
|
|
11142
|
-
const parsedNumber = parseFloat(value);
|
|
11143
|
-
if (!isNaN(parsedNumber)) {
|
|
11144
|
-
update[key] = parsedNumber;
|
|
11145
|
-
} else {
|
|
11146
|
-
update[key] = value;
|
|
11147
|
-
}
|
|
11148
|
-
}
|
|
11149
|
-
});
|
|
11150
|
-
return update;
|
|
11151
|
-
}
|
|
11152
|
-
function getHasUneditableRows(metadata) {
|
|
11153
|
-
if (!metadata) {
|
|
11154
|
-
return false;
|
|
11155
|
-
}
|
|
11156
|
-
return Object.values(metadata).some(
|
|
11157
|
-
(value) => !EDITABLE_TYPES.includes(typeof value)
|
|
11158
|
-
);
|
|
11159
|
-
}
|
|
11160
10810
|
const PROMOTION_QUERY_KEY = "promotions";
|
|
11161
10811
|
const promotionsQueryKeys = {
|
|
11162
10812
|
list: (query2) => [
|
|
@@ -13021,11 +12671,361 @@ const Illustration = () => {
|
|
|
13021
12671
|
] })
|
|
13022
12672
|
]
|
|
13023
12673
|
}
|
|
13024
|
-
);
|
|
12674
|
+
);
|
|
12675
|
+
};
|
|
12676
|
+
const schema = objectType({
|
|
12677
|
+
customer_id: stringType().min(1)
|
|
12678
|
+
});
|
|
12679
|
+
const InlineTip = forwardRef(
|
|
12680
|
+
({ variant = "tip", label, className, children, ...props }, ref) => {
|
|
12681
|
+
const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
|
|
12682
|
+
return /* @__PURE__ */ jsxs(
|
|
12683
|
+
"div",
|
|
12684
|
+
{
|
|
12685
|
+
ref,
|
|
12686
|
+
className: clx(
|
|
12687
|
+
"bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
|
|
12688
|
+
className
|
|
12689
|
+
),
|
|
12690
|
+
...props,
|
|
12691
|
+
children: [
|
|
12692
|
+
/* @__PURE__ */ jsx(
|
|
12693
|
+
"div",
|
|
12694
|
+
{
|
|
12695
|
+
role: "presentation",
|
|
12696
|
+
className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
|
|
12697
|
+
"bg-ui-tag-orange-icon": variant === "warning"
|
|
12698
|
+
})
|
|
12699
|
+
}
|
|
12700
|
+
),
|
|
12701
|
+
/* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
|
|
12702
|
+
/* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
|
|
12703
|
+
labelValue,
|
|
12704
|
+
":"
|
|
12705
|
+
] }),
|
|
12706
|
+
" ",
|
|
12707
|
+
children
|
|
12708
|
+
] })
|
|
12709
|
+
]
|
|
12710
|
+
}
|
|
12711
|
+
);
|
|
12712
|
+
}
|
|
12713
|
+
);
|
|
12714
|
+
InlineTip.displayName = "InlineTip";
|
|
12715
|
+
const MetadataFieldSchema = objectType({
|
|
12716
|
+
key: stringType(),
|
|
12717
|
+
disabled: booleanType().optional(),
|
|
12718
|
+
value: anyType()
|
|
12719
|
+
});
|
|
12720
|
+
const MetadataSchema = objectType({
|
|
12721
|
+
metadata: arrayType(MetadataFieldSchema)
|
|
12722
|
+
});
|
|
12723
|
+
const Metadata = () => {
|
|
12724
|
+
const { id } = useParams();
|
|
12725
|
+
const { order, isPending, isError, error } = useOrder(id, {
|
|
12726
|
+
fields: "metadata"
|
|
12727
|
+
});
|
|
12728
|
+
if (isError) {
|
|
12729
|
+
throw error;
|
|
12730
|
+
}
|
|
12731
|
+
const isReady = !isPending && !!order;
|
|
12732
|
+
return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
|
|
12733
|
+
/* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
|
|
12734
|
+
/* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
|
|
12735
|
+
/* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
|
|
12736
|
+
] }),
|
|
12737
|
+
!isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
|
|
12738
|
+
] });
|
|
12739
|
+
};
|
|
12740
|
+
const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
|
|
12741
|
+
const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
|
|
12742
|
+
const MetadataForm = ({ orderId, metadata }) => {
|
|
12743
|
+
const { handleSuccess } = useRouteModal();
|
|
12744
|
+
const hasUneditableRows = getHasUneditableRows(metadata);
|
|
12745
|
+
const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
|
|
12746
|
+
const form = useForm({
|
|
12747
|
+
defaultValues: {
|
|
12748
|
+
metadata: getDefaultValues(metadata)
|
|
12749
|
+
},
|
|
12750
|
+
resolver: zodResolver(MetadataSchema)
|
|
12751
|
+
});
|
|
12752
|
+
const handleSubmit = form.handleSubmit(async (data) => {
|
|
12753
|
+
const parsedData = parseValues(data);
|
|
12754
|
+
await mutateAsync(
|
|
12755
|
+
{
|
|
12756
|
+
metadata: parsedData
|
|
12757
|
+
},
|
|
12758
|
+
{
|
|
12759
|
+
onSuccess: () => {
|
|
12760
|
+
toast.success("Metadata updated");
|
|
12761
|
+
handleSuccess();
|
|
12762
|
+
},
|
|
12763
|
+
onError: (error) => {
|
|
12764
|
+
toast.error(error.message);
|
|
12765
|
+
}
|
|
12766
|
+
}
|
|
12767
|
+
);
|
|
12768
|
+
});
|
|
12769
|
+
const { fields, insert, remove } = useFieldArray({
|
|
12770
|
+
control: form.control,
|
|
12771
|
+
name: "metadata"
|
|
12772
|
+
});
|
|
12773
|
+
function deleteRow(index) {
|
|
12774
|
+
remove(index);
|
|
12775
|
+
if (fields.length === 1) {
|
|
12776
|
+
insert(0, {
|
|
12777
|
+
key: "",
|
|
12778
|
+
value: "",
|
|
12779
|
+
disabled: false
|
|
12780
|
+
});
|
|
12781
|
+
}
|
|
12782
|
+
}
|
|
12783
|
+
function insertRow(index, position) {
|
|
12784
|
+
insert(index + (position === "above" ? 0 : 1), {
|
|
12785
|
+
key: "",
|
|
12786
|
+
value: "",
|
|
12787
|
+
disabled: false
|
|
12788
|
+
});
|
|
12789
|
+
}
|
|
12790
|
+
return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
|
|
12791
|
+
KeyboundForm,
|
|
12792
|
+
{
|
|
12793
|
+
onSubmit: handleSubmit,
|
|
12794
|
+
className: "flex flex-1 flex-col overflow-hidden",
|
|
12795
|
+
children: [
|
|
12796
|
+
/* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
|
|
12797
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
|
|
12798
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
|
|
12799
|
+
/* @__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" }) }),
|
|
12800
|
+
/* @__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" }) })
|
|
12801
|
+
] }),
|
|
12802
|
+
fields.map((field, index) => {
|
|
12803
|
+
const isDisabled = field.disabled || false;
|
|
12804
|
+
let placeholder = "-";
|
|
12805
|
+
if (typeof field.value === "object") {
|
|
12806
|
+
placeholder = "{ ... }";
|
|
12807
|
+
}
|
|
12808
|
+
if (Array.isArray(field.value)) {
|
|
12809
|
+
placeholder = "[ ... ]";
|
|
12810
|
+
}
|
|
12811
|
+
return /* @__PURE__ */ jsx(
|
|
12812
|
+
ConditionalTooltip,
|
|
12813
|
+
{
|
|
12814
|
+
showTooltip: isDisabled,
|
|
12815
|
+
content: "This row is disabled because it contains non-primitive data.",
|
|
12816
|
+
children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
|
|
12817
|
+
/* @__PURE__ */ jsxs(
|
|
12818
|
+
"div",
|
|
12819
|
+
{
|
|
12820
|
+
className: clx("grid grid-cols-2 divide-x", {
|
|
12821
|
+
"overflow-hidden rounded-b-lg": index === fields.length - 1
|
|
12822
|
+
}),
|
|
12823
|
+
children: [
|
|
12824
|
+
/* @__PURE__ */ jsx(
|
|
12825
|
+
Form$2.Field,
|
|
12826
|
+
{
|
|
12827
|
+
control: form.control,
|
|
12828
|
+
name: `metadata.${index}.key`,
|
|
12829
|
+
render: ({ field: field2 }) => {
|
|
12830
|
+
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
12831
|
+
GridInput,
|
|
12832
|
+
{
|
|
12833
|
+
"aria-labelledby": METADATA_KEY_LABEL_ID,
|
|
12834
|
+
...field2,
|
|
12835
|
+
disabled: isDisabled,
|
|
12836
|
+
placeholder: "Key"
|
|
12837
|
+
}
|
|
12838
|
+
) }) });
|
|
12839
|
+
}
|
|
12840
|
+
}
|
|
12841
|
+
),
|
|
12842
|
+
/* @__PURE__ */ jsx(
|
|
12843
|
+
Form$2.Field,
|
|
12844
|
+
{
|
|
12845
|
+
control: form.control,
|
|
12846
|
+
name: `metadata.${index}.value`,
|
|
12847
|
+
render: ({ field: { value, ...field2 } }) => {
|
|
12848
|
+
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
12849
|
+
GridInput,
|
|
12850
|
+
{
|
|
12851
|
+
"aria-labelledby": METADATA_VALUE_LABEL_ID,
|
|
12852
|
+
...field2,
|
|
12853
|
+
value: isDisabled ? placeholder : value,
|
|
12854
|
+
disabled: isDisabled,
|
|
12855
|
+
placeholder: "Value"
|
|
12856
|
+
}
|
|
12857
|
+
) }) });
|
|
12858
|
+
}
|
|
12859
|
+
}
|
|
12860
|
+
)
|
|
12861
|
+
]
|
|
12862
|
+
}
|
|
12863
|
+
),
|
|
12864
|
+
/* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
12865
|
+
/* @__PURE__ */ jsx(
|
|
12866
|
+
DropdownMenu.Trigger,
|
|
12867
|
+
{
|
|
12868
|
+
className: clx(
|
|
12869
|
+
"invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
|
|
12870
|
+
{
|
|
12871
|
+
hidden: isDisabled
|
|
12872
|
+
}
|
|
12873
|
+
),
|
|
12874
|
+
disabled: isDisabled,
|
|
12875
|
+
asChild: true,
|
|
12876
|
+
children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
|
|
12877
|
+
}
|
|
12878
|
+
),
|
|
12879
|
+
/* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
|
|
12880
|
+
/* @__PURE__ */ jsxs(
|
|
12881
|
+
DropdownMenu.Item,
|
|
12882
|
+
{
|
|
12883
|
+
className: "gap-x-2",
|
|
12884
|
+
onClick: () => insertRow(index, "above"),
|
|
12885
|
+
children: [
|
|
12886
|
+
/* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
|
|
12887
|
+
"Insert row above"
|
|
12888
|
+
]
|
|
12889
|
+
}
|
|
12890
|
+
),
|
|
12891
|
+
/* @__PURE__ */ jsxs(
|
|
12892
|
+
DropdownMenu.Item,
|
|
12893
|
+
{
|
|
12894
|
+
className: "gap-x-2",
|
|
12895
|
+
onClick: () => insertRow(index, "below"),
|
|
12896
|
+
children: [
|
|
12897
|
+
/* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
|
|
12898
|
+
"Insert row below"
|
|
12899
|
+
]
|
|
12900
|
+
}
|
|
12901
|
+
),
|
|
12902
|
+
/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
|
|
12903
|
+
/* @__PURE__ */ jsxs(
|
|
12904
|
+
DropdownMenu.Item,
|
|
12905
|
+
{
|
|
12906
|
+
className: "gap-x-2",
|
|
12907
|
+
onClick: () => deleteRow(index),
|
|
12908
|
+
children: [
|
|
12909
|
+
/* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
|
|
12910
|
+
"Delete row"
|
|
12911
|
+
]
|
|
12912
|
+
}
|
|
12913
|
+
)
|
|
12914
|
+
] })
|
|
12915
|
+
] })
|
|
12916
|
+
] })
|
|
12917
|
+
},
|
|
12918
|
+
field.id
|
|
12919
|
+
);
|
|
12920
|
+
})
|
|
12921
|
+
] }),
|
|
12922
|
+
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." })
|
|
12923
|
+
] }),
|
|
12924
|
+
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
12925
|
+
/* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
|
|
12926
|
+
/* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
|
|
12927
|
+
] }) })
|
|
12928
|
+
]
|
|
12929
|
+
}
|
|
12930
|
+
) });
|
|
13025
12931
|
};
|
|
13026
|
-
const
|
|
13027
|
-
|
|
12932
|
+
const GridInput = forwardRef(({ className, ...props }, ref) => {
|
|
12933
|
+
return /* @__PURE__ */ jsx(
|
|
12934
|
+
"input",
|
|
12935
|
+
{
|
|
12936
|
+
ref,
|
|
12937
|
+
...props,
|
|
12938
|
+
autoComplete: "off",
|
|
12939
|
+
className: clx(
|
|
12940
|
+
"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",
|
|
12941
|
+
className
|
|
12942
|
+
)
|
|
12943
|
+
}
|
|
12944
|
+
);
|
|
13028
12945
|
});
|
|
12946
|
+
GridInput.displayName = "MetadataForm.GridInput";
|
|
12947
|
+
const PlaceholderInner = () => {
|
|
12948
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
|
|
12949
|
+
/* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
|
|
12950
|
+
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
12951
|
+
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
|
|
12952
|
+
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
|
|
12953
|
+
] }) })
|
|
12954
|
+
] });
|
|
12955
|
+
};
|
|
12956
|
+
const EDITABLE_TYPES = ["string", "number", "boolean"];
|
|
12957
|
+
function getDefaultValues(metadata) {
|
|
12958
|
+
if (!metadata || !Object.keys(metadata).length) {
|
|
12959
|
+
return [
|
|
12960
|
+
{
|
|
12961
|
+
key: "",
|
|
12962
|
+
value: "",
|
|
12963
|
+
disabled: false
|
|
12964
|
+
}
|
|
12965
|
+
];
|
|
12966
|
+
}
|
|
12967
|
+
return Object.entries(metadata).map(([key, value]) => {
|
|
12968
|
+
if (!EDITABLE_TYPES.includes(typeof value)) {
|
|
12969
|
+
return {
|
|
12970
|
+
key,
|
|
12971
|
+
value,
|
|
12972
|
+
disabled: true
|
|
12973
|
+
};
|
|
12974
|
+
}
|
|
12975
|
+
let stringValue = value;
|
|
12976
|
+
if (typeof value !== "string") {
|
|
12977
|
+
stringValue = JSON.stringify(value);
|
|
12978
|
+
}
|
|
12979
|
+
return {
|
|
12980
|
+
key,
|
|
12981
|
+
value: stringValue,
|
|
12982
|
+
original_key: key
|
|
12983
|
+
};
|
|
12984
|
+
});
|
|
12985
|
+
}
|
|
12986
|
+
function parseValues(values) {
|
|
12987
|
+
const metadata = values.metadata;
|
|
12988
|
+
const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
|
|
12989
|
+
if (isEmpty) {
|
|
12990
|
+
return null;
|
|
12991
|
+
}
|
|
12992
|
+
const update = {};
|
|
12993
|
+
metadata.forEach((field) => {
|
|
12994
|
+
let key = field.key;
|
|
12995
|
+
let value = field.value;
|
|
12996
|
+
const disabled = field.disabled;
|
|
12997
|
+
if (!key || !value) {
|
|
12998
|
+
return;
|
|
12999
|
+
}
|
|
13000
|
+
if (disabled) {
|
|
13001
|
+
update[key] = value;
|
|
13002
|
+
return;
|
|
13003
|
+
}
|
|
13004
|
+
key = key.trim();
|
|
13005
|
+
value = value.trim();
|
|
13006
|
+
if (value === "true") {
|
|
13007
|
+
update[key] = true;
|
|
13008
|
+
} else if (value === "false") {
|
|
13009
|
+
update[key] = false;
|
|
13010
|
+
} else {
|
|
13011
|
+
const parsedNumber = parseFloat(value);
|
|
13012
|
+
if (!isNaN(parsedNumber)) {
|
|
13013
|
+
update[key] = parsedNumber;
|
|
13014
|
+
} else {
|
|
13015
|
+
update[key] = value;
|
|
13016
|
+
}
|
|
13017
|
+
}
|
|
13018
|
+
});
|
|
13019
|
+
return update;
|
|
13020
|
+
}
|
|
13021
|
+
function getHasUneditableRows(metadata) {
|
|
13022
|
+
if (!metadata) {
|
|
13023
|
+
return false;
|
|
13024
|
+
}
|
|
13025
|
+
return Object.values(metadata).some(
|
|
13026
|
+
(value) => !EDITABLE_TYPES.includes(typeof value)
|
|
13027
|
+
);
|
|
13028
|
+
}
|
|
13029
13029
|
const widgetModule = { widgets: [] };
|
|
13030
13030
|
const routeModule = {
|
|
13031
13031
|
routes: [
|
|
@@ -13062,10 +13062,6 @@ const routeModule = {
|
|
|
13062
13062
|
Component: Items,
|
|
13063
13063
|
path: "/draft-orders/:id/items"
|
|
13064
13064
|
},
|
|
13065
|
-
{
|
|
13066
|
-
Component: Metadata,
|
|
13067
|
-
path: "/draft-orders/:id/metadata"
|
|
13068
|
-
},
|
|
13069
13065
|
{
|
|
13070
13066
|
Component: Promotions,
|
|
13071
13067
|
path: "/draft-orders/:id/promotions"
|
|
@@ -13085,6 +13081,10 @@ const routeModule = {
|
|
|
13085
13081
|
{
|
|
13086
13082
|
Component: TransferOwnership,
|
|
13087
13083
|
path: "/draft-orders/:id/transfer-ownership"
|
|
13084
|
+
},
|
|
13085
|
+
{
|
|
13086
|
+
Component: Metadata,
|
|
13087
|
+
path: "/draft-orders/:id/metadata"
|
|
13088
13088
|
}
|
|
13089
13089
|
]
|
|
13090
13090
|
}
|