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