@medusajs/draft-order 3.0.0-snapshot-20251202134037 → 3.0.0-snapshot-20251202223100

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.
@@ -10825,632 +10825,632 @@ const customItemSchema = objectType({
10825
10825
  quantity: numberType(),
10826
10826
  unit_price: unionType([numberType(), stringType()])
10827
10827
  });
10828
- const InlineTip = React.forwardRef(
10829
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10830
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10831
- return /* @__PURE__ */ jsxRuntime.jsxs(
10832
- "div",
10833
- {
10834
- ref,
10835
- className: ui.clx(
10836
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10837
- className
10838
- ),
10839
- ...props,
10840
- children: [
10841
- /* @__PURE__ */ jsxRuntime.jsx(
10842
- "div",
10843
- {
10844
- role: "presentation",
10845
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10846
- "bg-ui-tag-orange-icon": variant === "warning"
10847
- })
10848
- }
10849
- ),
10850
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10851
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10852
- labelValue,
10853
- ":"
10854
- ] }),
10855
- " ",
10856
- children
10857
- ] })
10858
- ]
10859
- }
10860
- );
10861
- }
10862
- );
10863
- InlineTip.displayName = "InlineTip";
10864
- const MetadataFieldSchema = objectType({
10865
- key: stringType(),
10866
- disabled: booleanType().optional(),
10867
- value: anyType()
10868
- });
10869
- const MetadataSchema = objectType({
10870
- metadata: arrayType(MetadataFieldSchema)
10871
- });
10872
- const Metadata = () => {
10873
- const { id } = reactRouterDom.useParams();
10874
- const { order, isPending, isError, error } = useOrder(id, {
10875
- fields: "metadata"
10828
+ const PROMOTION_QUERY_KEY = "promotions";
10829
+ const promotionsQueryKeys = {
10830
+ list: (query2) => [
10831
+ PROMOTION_QUERY_KEY,
10832
+ query2 ? query2 : void 0
10833
+ ],
10834
+ detail: (id, query2) => [
10835
+ PROMOTION_QUERY_KEY,
10836
+ id,
10837
+ query2 ? query2 : void 0
10838
+ ]
10839
+ };
10840
+ const usePromotions = (query2, options) => {
10841
+ const { data, ...rest } = reactQuery.useQuery({
10842
+ queryKey: promotionsQueryKeys.list(query2),
10843
+ queryFn: async () => sdk.admin.promotion.list(query2),
10844
+ ...options
10876
10845
  });
10877
- if (isError) {
10878
- throw error;
10846
+ return { ...data, ...rest };
10847
+ };
10848
+ const Promotions = () => {
10849
+ const { id } = reactRouterDom.useParams();
10850
+ const {
10851
+ order: preview,
10852
+ isError: isPreviewError,
10853
+ error: previewError
10854
+ } = useOrderPreview(id, void 0);
10855
+ useInitiateOrderEdit({ preview });
10856
+ const { onCancel } = useCancelOrderEdit({ preview });
10857
+ if (isPreviewError) {
10858
+ throw previewError;
10879
10859
  }
10880
- const isReady = !isPending && !!order;
10881
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10882
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10883
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10884
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10885
- ] }),
10886
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10860
+ const isReady = !!preview;
10861
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
10862
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
10863
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
10887
10864
  ] });
10888
10865
  };
10889
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10890
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10891
- const MetadataForm = ({ orderId, metadata }) => {
10866
+ const PromotionForm = ({ preview }) => {
10867
+ const { items, shipping_methods } = preview;
10868
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
10869
+ const [comboboxValue, setComboboxValue] = React.useState("");
10892
10870
  const { handleSuccess } = useRouteModal();
10893
- const hasUneditableRows = getHasUneditableRows(metadata);
10894
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10895
- const form = reactHookForm.useForm({
10896
- defaultValues: {
10897
- metadata: getDefaultValues(metadata)
10871
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10872
+ const promoIds = getPromotionIds(items, shipping_methods);
10873
+ const { promotions, isPending, isError, error } = usePromotions(
10874
+ {
10875
+ id: promoIds
10898
10876
  },
10899
- resolver: zod.zodResolver(MetadataSchema)
10877
+ {
10878
+ enabled: !!promoIds.length
10879
+ }
10880
+ );
10881
+ const comboboxData = useComboboxData({
10882
+ queryKey: ["promotions", "combobox", promoIds],
10883
+ queryFn: async (params) => {
10884
+ return await sdk.admin.promotion.list({
10885
+ ...params,
10886
+ id: {
10887
+ $nin: promoIds
10888
+ }
10889
+ });
10890
+ },
10891
+ getOptions: (data) => {
10892
+ return data.promotions.map((promotion) => ({
10893
+ label: promotion.code,
10894
+ value: promotion.code
10895
+ }));
10896
+ }
10900
10897
  });
10901
- const handleSubmit = form.handleSubmit(async (data) => {
10902
- const parsedData = parseValues(data);
10903
- await mutateAsync(
10898
+ const add = async (value) => {
10899
+ if (!value) {
10900
+ return;
10901
+ }
10902
+ addPromotions(
10904
10903
  {
10905
- metadata: parsedData
10904
+ promo_codes: [value]
10906
10905
  },
10907
10906
  {
10908
- onSuccess: () => {
10909
- ui.toast.success("Metadata updated");
10910
- handleSuccess();
10907
+ onError: (e) => {
10908
+ ui.toast.error(e.message);
10909
+ comboboxData.onSearchValueChange("");
10910
+ setComboboxValue("");
10911
10911
  },
10912
- onError: (error) => {
10913
- ui.toast.error(error.message);
10912
+ onSuccess: () => {
10913
+ comboboxData.onSearchValueChange("");
10914
+ setComboboxValue("");
10914
10915
  }
10915
10916
  }
10916
10917
  );
10917
- });
10918
- const { fields, insert, remove } = reactHookForm.useFieldArray({
10919
- control: form.control,
10920
- name: "metadata"
10921
- });
10922
- function deleteRow(index) {
10923
- remove(index);
10924
- if (fields.length === 1) {
10925
- insert(0, {
10926
- key: "",
10927
- value: "",
10928
- disabled: false
10929
- });
10918
+ };
10919
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10920
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10921
+ const onSubmit = async () => {
10922
+ setIsSubmitting(true);
10923
+ let requestSucceeded = false;
10924
+ await requestOrderEdit(void 0, {
10925
+ onError: (e) => {
10926
+ ui.toast.error(e.message);
10927
+ },
10928
+ onSuccess: () => {
10929
+ requestSucceeded = true;
10930
+ }
10931
+ });
10932
+ if (!requestSucceeded) {
10933
+ setIsSubmitting(false);
10934
+ return;
10930
10935
  }
10931
- }
10932
- function insertRow(index, position) {
10933
- insert(index + (position === "above" ? 0 : 1), {
10934
- key: "",
10935
- value: "",
10936
- disabled: false
10936
+ await confirmOrderEdit(void 0, {
10937
+ onError: (e) => {
10938
+ ui.toast.error(e.message);
10939
+ },
10940
+ onSuccess: () => {
10941
+ handleSuccess();
10942
+ },
10943
+ onSettled: () => {
10944
+ setIsSubmitting(false);
10945
+ }
10937
10946
  });
10947
+ };
10948
+ if (isError) {
10949
+ throw error;
10938
10950
  }
10939
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10940
- KeyboundForm,
10941
- {
10942
- onSubmit: handleSubmit,
10943
- className: "flex flex-1 flex-col overflow-hidden",
10944
- children: [
10945
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10946
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10947
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10948
- /* @__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" }) }),
10949
- /* @__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" }) })
10950
- ] }),
10951
- fields.map((field, index) => {
10952
- const isDisabled = field.disabled || false;
10953
- let placeholder = "-";
10954
- if (typeof field.value === "object") {
10955
- placeholder = "{ ... }";
10956
- }
10957
- if (Array.isArray(field.value)) {
10958
- placeholder = "[ ... ]";
10959
- }
10960
- return /* @__PURE__ */ jsxRuntime.jsx(
10961
- ConditionalTooltip,
10962
- {
10963
- showTooltip: isDisabled,
10964
- content: "This row is disabled because it contains non-primitive data.",
10965
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
10966
- /* @__PURE__ */ jsxRuntime.jsxs(
10967
- "div",
10968
- {
10969
- className: ui.clx("grid grid-cols-2 divide-x", {
10970
- "overflow-hidden rounded-b-lg": index === fields.length - 1
10971
- }),
10972
- children: [
10973
- /* @__PURE__ */ jsxRuntime.jsx(
10974
- Form$2.Field,
10975
- {
10976
- control: form.control,
10977
- name: `metadata.${index}.key`,
10978
- render: ({ field: field2 }) => {
10979
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10980
- GridInput,
10981
- {
10982
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10983
- ...field2,
10984
- disabled: isDisabled,
10985
- placeholder: "Key"
10986
- }
10987
- ) }) });
10988
- }
10989
- }
10990
- ),
10991
- /* @__PURE__ */ jsxRuntime.jsx(
10992
- Form$2.Field,
10993
- {
10994
- control: form.control,
10995
- name: `metadata.${index}.value`,
10996
- render: ({ field: { value, ...field2 } }) => {
10997
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10998
- GridInput,
10999
- {
11000
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
11001
- ...field2,
11002
- value: isDisabled ? placeholder : value,
11003
- disabled: isDisabled,
11004
- placeholder: "Value"
11005
- }
11006
- ) }) });
11007
- }
11008
- }
11009
- )
11010
- ]
11011
- }
11012
- ),
11013
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
11014
- /* @__PURE__ */ jsxRuntime.jsx(
11015
- ui.DropdownMenu.Trigger,
11016
- {
11017
- className: ui.clx(
11018
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11019
- {
11020
- hidden: isDisabled
11021
- }
11022
- ),
11023
- disabled: isDisabled,
11024
- asChild: true,
11025
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
11026
- }
11027
- ),
11028
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
11029
- /* @__PURE__ */ jsxRuntime.jsxs(
11030
- ui.DropdownMenu.Item,
11031
- {
11032
- className: "gap-x-2",
11033
- onClick: () => insertRow(index, "above"),
11034
- children: [
11035
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
11036
- "Insert row above"
11037
- ]
11038
- }
11039
- ),
11040
- /* @__PURE__ */ jsxRuntime.jsxs(
11041
- ui.DropdownMenu.Item,
11042
- {
11043
- className: "gap-x-2",
11044
- onClick: () => insertRow(index, "below"),
11045
- children: [
11046
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
11047
- "Insert row below"
11048
- ]
11049
- }
11050
- ),
11051
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
11052
- /* @__PURE__ */ jsxRuntime.jsxs(
11053
- ui.DropdownMenu.Item,
11054
- {
11055
- className: "gap-x-2",
11056
- onClick: () => deleteRow(index),
11057
- children: [
11058
- /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
11059
- "Delete row"
11060
- ]
11061
- }
11062
- )
11063
- ] })
11064
- ] })
11065
- ] })
11066
- },
11067
- field.id
11068
- );
11069
- })
11070
- ] }),
11071
- 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." })
10951
+ return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
10952
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
10953
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
10954
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
10955
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
10956
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11072
10957
  ] }),
11073
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11074
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11075
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11076
- ] }) })
11077
- ]
11078
- }
11079
- ) });
11080
- };
11081
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11082
- return /* @__PURE__ */ jsxRuntime.jsx(
11083
- "input",
11084
- {
11085
- ref,
11086
- ...props,
11087
- autoComplete: "off",
11088
- className: ui.clx(
11089
- "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",
11090
- className
10958
+ /* @__PURE__ */ jsxRuntime.jsx(
10959
+ Combobox,
10960
+ {
10961
+ id: "promotion-combobox",
10962
+ "aria-describedby": "promotion-combobox-hint",
10963
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
10964
+ fetchNextPage: comboboxData.fetchNextPage,
10965
+ options: comboboxData.options,
10966
+ onSearchValueChange: comboboxData.onSearchValueChange,
10967
+ searchValue: comboboxData.searchValue,
10968
+ disabled: comboboxData.disabled || isAddingPromotions,
10969
+ onChange: add,
10970
+ value: comboboxValue
10971
+ }
10972
+ )
10973
+ ] }),
10974
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10975
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
10976
+ PromotionItem,
10977
+ {
10978
+ promotion,
10979
+ orderId: preview.id,
10980
+ isLoading: isPending
10981
+ },
10982
+ promotion.id
10983
+ )) })
10984
+ ] }) }),
10985
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10986
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10987
+ /* @__PURE__ */ jsxRuntime.jsx(
10988
+ ui.Button,
10989
+ {
10990
+ size: "small",
10991
+ type: "submit",
10992
+ isLoading: isSubmitting || isAddingPromotions,
10993
+ children: "Save"
10994
+ }
11091
10995
  )
11092
- }
11093
- );
11094
- });
11095
- GridInput.displayName = "MetadataForm.GridInput";
11096
- const PlaceholderInner = () => {
11097
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11098
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11099
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11100
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11101
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11102
10996
  ] }) })
11103
10997
  ] });
11104
10998
  };
11105
- const EDITABLE_TYPES = ["string", "number", "boolean"];
11106
- function getDefaultValues(metadata) {
11107
- if (!metadata || !Object.keys(metadata).length) {
11108
- return [
10999
+ const PromotionItem = ({
11000
+ promotion,
11001
+ orderId,
11002
+ isLoading
11003
+ }) => {
11004
+ var _a;
11005
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11006
+ const onRemove = async () => {
11007
+ removePromotions(
11109
11008
  {
11110
- key: "",
11111
- value: "",
11112
- disabled: false
11009
+ promo_codes: [promotion.code]
11010
+ },
11011
+ {
11012
+ onError: (e) => {
11013
+ ui.toast.error(e.message);
11014
+ }
11113
11015
  }
11114
- ];
11016
+ );
11017
+ };
11018
+ const displayValue = getDisplayValue(promotion);
11019
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11020
+ "div",
11021
+ {
11022
+ className: ui.clx(
11023
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11024
+ {
11025
+ "animate-pulse": isLoading
11026
+ }
11027
+ ),
11028
+ children: [
11029
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11030
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11031
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11032
+ displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11033
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11034
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11035
+ ] }),
11036
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11037
+ ] })
11038
+ ] }),
11039
+ /* @__PURE__ */ jsxRuntime.jsx(
11040
+ ui.IconButton,
11041
+ {
11042
+ size: "small",
11043
+ type: "button",
11044
+ variant: "transparent",
11045
+ onClick: onRemove,
11046
+ isLoading: isPending || isLoading,
11047
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
11048
+ }
11049
+ )
11050
+ ]
11051
+ },
11052
+ promotion.id
11053
+ );
11054
+ };
11055
+ function getDisplayValue(promotion) {
11056
+ var _a, _b, _c, _d;
11057
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11058
+ if (!value) {
11059
+ return null;
11115
11060
  }
11116
- return Object.entries(metadata).map(([key, value]) => {
11117
- if (!EDITABLE_TYPES.includes(typeof value)) {
11118
- return {
11119
- key,
11120
- value,
11121
- disabled: true
11122
- };
11123
- }
11124
- let stringValue = value;
11125
- if (typeof value !== "string") {
11126
- stringValue = JSON.stringify(value);
11061
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11062
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11063
+ if (!currency) {
11064
+ return null;
11127
11065
  }
11128
- return {
11129
- key,
11130
- value: stringValue,
11131
- original_key: key
11132
- };
11133
- });
11066
+ return getLocaleAmount(value, currency);
11067
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11068
+ return formatPercentage(value);
11069
+ }
11070
+ return null;
11134
11071
  }
11135
- function parseValues(values) {
11136
- const metadata = values.metadata;
11137
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11138
- if (isEmpty) {
11139
- return null;
11072
+ const formatter = new Intl.NumberFormat([], {
11073
+ style: "percent",
11074
+ minimumFractionDigits: 2
11075
+ });
11076
+ const formatPercentage = (value, isPercentageValue = false) => {
11077
+ let val = value || 0;
11078
+ if (!isPercentageValue) {
11079
+ val = val / 100;
11140
11080
  }
11141
- const update = {};
11142
- metadata.forEach((field) => {
11143
- let key = field.key;
11144
- let value = field.value;
11145
- const disabled = field.disabled;
11146
- if (!key || !value) {
11147
- return;
11148
- }
11149
- if (disabled) {
11150
- update[key] = value;
11151
- return;
11081
+ return formatter.format(val);
11082
+ };
11083
+ function getPromotionIds(items, shippingMethods) {
11084
+ const promotionIds = /* @__PURE__ */ new Set();
11085
+ for (const item of items) {
11086
+ if (item.adjustments) {
11087
+ for (const adjustment of item.adjustments) {
11088
+ if (adjustment.promotion_id) {
11089
+ promotionIds.add(adjustment.promotion_id);
11090
+ }
11091
+ }
11152
11092
  }
11153
- key = key.trim();
11154
- value = value.trim();
11155
- if (value === "true") {
11156
- update[key] = true;
11157
- } else if (value === "false") {
11158
- update[key] = false;
11159
- } else {
11160
- const parsedNumber = parseFloat(value);
11161
- if (!isNaN(parsedNumber)) {
11162
- update[key] = parsedNumber;
11163
- } else {
11164
- update[key] = value;
11093
+ }
11094
+ for (const shippingMethod of shippingMethods) {
11095
+ if (shippingMethod.adjustments) {
11096
+ for (const adjustment of shippingMethod.adjustments) {
11097
+ if (adjustment.promotion_id) {
11098
+ promotionIds.add(adjustment.promotion_id);
11099
+ }
11165
11100
  }
11166
11101
  }
11167
- });
11168
- return update;
11169
- }
11170
- function getHasUneditableRows(metadata) {
11171
- if (!metadata) {
11172
- return false;
11173
11102
  }
11174
- return Object.values(metadata).some(
11175
- (value) => !EDITABLE_TYPES.includes(typeof value)
11176
- );
11103
+ return Array.from(promotionIds);
11177
11104
  }
11178
- const PROMOTION_QUERY_KEY = "promotions";
11179
- const promotionsQueryKeys = {
11180
- list: (query2) => [
11181
- PROMOTION_QUERY_KEY,
11182
- query2 ? query2 : void 0
11183
- ],
11184
- detail: (id, query2) => [
11185
- PROMOTION_QUERY_KEY,
11186
- id,
11187
- query2 ? query2 : void 0
11188
- ]
11189
- };
11190
- const usePromotions = (query2, options) => {
11191
- const { data, ...rest } = reactQuery.useQuery({
11192
- queryKey: promotionsQueryKeys.list(query2),
11193
- queryFn: async () => sdk.admin.promotion.list(query2),
11194
- ...options
11195
- });
11196
- return { ...data, ...rest };
11197
- };
11198
- const Promotions = () => {
11105
+ const InlineTip = React.forwardRef(
11106
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
11107
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11108
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11109
+ "div",
11110
+ {
11111
+ ref,
11112
+ className: ui.clx(
11113
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11114
+ className
11115
+ ),
11116
+ ...props,
11117
+ children: [
11118
+ /* @__PURE__ */ jsxRuntime.jsx(
11119
+ "div",
11120
+ {
11121
+ role: "presentation",
11122
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11123
+ "bg-ui-tag-orange-icon": variant === "warning"
11124
+ })
11125
+ }
11126
+ ),
11127
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
11128
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11129
+ labelValue,
11130
+ ":"
11131
+ ] }),
11132
+ " ",
11133
+ children
11134
+ ] })
11135
+ ]
11136
+ }
11137
+ );
11138
+ }
11139
+ );
11140
+ InlineTip.displayName = "InlineTip";
11141
+ const MetadataFieldSchema = objectType({
11142
+ key: stringType(),
11143
+ disabled: booleanType().optional(),
11144
+ value: anyType()
11145
+ });
11146
+ const MetadataSchema = objectType({
11147
+ metadata: arrayType(MetadataFieldSchema)
11148
+ });
11149
+ const Metadata = () => {
11199
11150
  const { id } = reactRouterDom.useParams();
11200
- const {
11201
- order: preview,
11202
- isError: isPreviewError,
11203
- error: previewError
11204
- } = useOrderPreview(id, void 0);
11205
- useInitiateOrderEdit({ preview });
11206
- const { onCancel } = useCancelOrderEdit({ preview });
11207
- if (isPreviewError) {
11208
- throw previewError;
11151
+ const { order, isPending, isError, error } = useOrder(id, {
11152
+ fields: "metadata"
11153
+ });
11154
+ if (isError) {
11155
+ throw error;
11209
11156
  }
11210
- const isReady = !!preview;
11211
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
11212
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
11213
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
11157
+ const isReady = !isPending && !!order;
11158
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11159
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11160
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
11161
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11162
+ ] }),
11163
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11214
11164
  ] });
11215
11165
  };
11216
- const PromotionForm = ({ preview }) => {
11217
- const { items, shipping_methods } = preview;
11218
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11219
- const [comboboxValue, setComboboxValue] = React.useState("");
11166
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11167
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11168
+ const MetadataForm = ({ orderId, metadata }) => {
11220
11169
  const { handleSuccess } = useRouteModal();
11221
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11222
- const promoIds = getPromotionIds(items, shipping_methods);
11223
- const { promotions, isPending, isError, error } = usePromotions(
11224
- {
11225
- id: promoIds
11226
- },
11227
- {
11228
- enabled: !!promoIds.length
11229
- }
11230
- );
11231
- const comboboxData = useComboboxData({
11232
- queryKey: ["promotions", "combobox", promoIds],
11233
- queryFn: async (params) => {
11234
- return await sdk.admin.promotion.list({
11235
- ...params,
11236
- id: {
11237
- $nin: promoIds
11238
- }
11239
- });
11170
+ const hasUneditableRows = getHasUneditableRows(metadata);
11171
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11172
+ const form = reactHookForm.useForm({
11173
+ defaultValues: {
11174
+ metadata: getDefaultValues(metadata)
11240
11175
  },
11241
- getOptions: (data) => {
11242
- return data.promotions.map((promotion) => ({
11243
- label: promotion.code,
11244
- value: promotion.code
11245
- }));
11246
- }
11176
+ resolver: zod.zodResolver(MetadataSchema)
11247
11177
  });
11248
- const add = async (value) => {
11249
- if (!value) {
11250
- return;
11251
- }
11252
- addPromotions(
11178
+ const handleSubmit = form.handleSubmit(async (data) => {
11179
+ const parsedData = parseValues(data);
11180
+ await mutateAsync(
11253
11181
  {
11254
- promo_codes: [value]
11182
+ metadata: parsedData
11255
11183
  },
11256
11184
  {
11257
- onError: (e) => {
11258
- ui.toast.error(e.message);
11259
- comboboxData.onSearchValueChange("");
11260
- setComboboxValue("");
11261
- },
11262
11185
  onSuccess: () => {
11263
- comboboxData.onSearchValueChange("");
11264
- setComboboxValue("");
11186
+ ui.toast.success("Metadata updated");
11187
+ handleSuccess();
11188
+ },
11189
+ onError: (error) => {
11190
+ ui.toast.error(error.message);
11265
11191
  }
11266
11192
  }
11267
11193
  );
11268
- };
11269
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11270
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11271
- const onSubmit = async () => {
11272
- setIsSubmitting(true);
11273
- let requestSucceeded = false;
11274
- await requestOrderEdit(void 0, {
11275
- onError: (e) => {
11276
- ui.toast.error(e.message);
11277
- },
11278
- onSuccess: () => {
11279
- requestSucceeded = true;
11280
- }
11281
- });
11282
- if (!requestSucceeded) {
11283
- setIsSubmitting(false);
11284
- return;
11194
+ });
11195
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
11196
+ control: form.control,
11197
+ name: "metadata"
11198
+ });
11199
+ function deleteRow(index) {
11200
+ remove(index);
11201
+ if (fields.length === 1) {
11202
+ insert(0, {
11203
+ key: "",
11204
+ value: "",
11205
+ disabled: false
11206
+ });
11285
11207
  }
11286
- await confirmOrderEdit(void 0, {
11287
- onError: (e) => {
11288
- ui.toast.error(e.message);
11289
- },
11290
- onSuccess: () => {
11291
- handleSuccess();
11292
- },
11293
- onSettled: () => {
11294
- setIsSubmitting(false);
11295
- }
11208
+ }
11209
+ function insertRow(index, position) {
11210
+ insert(index + (position === "above" ? 0 : 1), {
11211
+ key: "",
11212
+ value: "",
11213
+ disabled: false
11296
11214
  });
11297
- };
11298
- if (isError) {
11299
- throw error;
11300
11215
  }
11301
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11302
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
11303
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
11304
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11305
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11306
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11216
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11217
+ KeyboundForm,
11218
+ {
11219
+ onSubmit: handleSubmit,
11220
+ className: "flex flex-1 flex-col overflow-hidden",
11221
+ children: [
11222
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
11223
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
11224
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
11225
+ /* @__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" }) }),
11226
+ /* @__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" }) })
11227
+ ] }),
11228
+ fields.map((field, index) => {
11229
+ const isDisabled = field.disabled || false;
11230
+ let placeholder = "-";
11231
+ if (typeof field.value === "object") {
11232
+ placeholder = "{ ... }";
11233
+ }
11234
+ if (Array.isArray(field.value)) {
11235
+ placeholder = "[ ... ]";
11236
+ }
11237
+ return /* @__PURE__ */ jsxRuntime.jsx(
11238
+ ConditionalTooltip,
11239
+ {
11240
+ showTooltip: isDisabled,
11241
+ content: "This row is disabled because it contains non-primitive data.",
11242
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
11243
+ /* @__PURE__ */ jsxRuntime.jsxs(
11244
+ "div",
11245
+ {
11246
+ className: ui.clx("grid grid-cols-2 divide-x", {
11247
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
11248
+ }),
11249
+ children: [
11250
+ /* @__PURE__ */ jsxRuntime.jsx(
11251
+ Form$2.Field,
11252
+ {
11253
+ control: form.control,
11254
+ name: `metadata.${index}.key`,
11255
+ render: ({ field: field2 }) => {
11256
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11257
+ GridInput,
11258
+ {
11259
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
11260
+ ...field2,
11261
+ disabled: isDisabled,
11262
+ placeholder: "Key"
11263
+ }
11264
+ ) }) });
11265
+ }
11266
+ }
11267
+ ),
11268
+ /* @__PURE__ */ jsxRuntime.jsx(
11269
+ Form$2.Field,
11270
+ {
11271
+ control: form.control,
11272
+ name: `metadata.${index}.value`,
11273
+ render: ({ field: { value, ...field2 } }) => {
11274
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11275
+ GridInput,
11276
+ {
11277
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
11278
+ ...field2,
11279
+ value: isDisabled ? placeholder : value,
11280
+ disabled: isDisabled,
11281
+ placeholder: "Value"
11282
+ }
11283
+ ) }) });
11284
+ }
11285
+ }
11286
+ )
11287
+ ]
11288
+ }
11289
+ ),
11290
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
11291
+ /* @__PURE__ */ jsxRuntime.jsx(
11292
+ ui.DropdownMenu.Trigger,
11293
+ {
11294
+ className: ui.clx(
11295
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11296
+ {
11297
+ hidden: isDisabled
11298
+ }
11299
+ ),
11300
+ disabled: isDisabled,
11301
+ asChild: true,
11302
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
11303
+ }
11304
+ ),
11305
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
11306
+ /* @__PURE__ */ jsxRuntime.jsxs(
11307
+ ui.DropdownMenu.Item,
11308
+ {
11309
+ className: "gap-x-2",
11310
+ onClick: () => insertRow(index, "above"),
11311
+ children: [
11312
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
11313
+ "Insert row above"
11314
+ ]
11315
+ }
11316
+ ),
11317
+ /* @__PURE__ */ jsxRuntime.jsxs(
11318
+ ui.DropdownMenu.Item,
11319
+ {
11320
+ className: "gap-x-2",
11321
+ onClick: () => insertRow(index, "below"),
11322
+ children: [
11323
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
11324
+ "Insert row below"
11325
+ ]
11326
+ }
11327
+ ),
11328
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
11329
+ /* @__PURE__ */ jsxRuntime.jsxs(
11330
+ ui.DropdownMenu.Item,
11331
+ {
11332
+ className: "gap-x-2",
11333
+ onClick: () => deleteRow(index),
11334
+ children: [
11335
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
11336
+ "Delete row"
11337
+ ]
11338
+ }
11339
+ )
11340
+ ] })
11341
+ ] })
11342
+ ] })
11343
+ },
11344
+ field.id
11345
+ );
11346
+ })
11347
+ ] }),
11348
+ 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." })
11307
11349
  ] }),
11308
- /* @__PURE__ */ jsxRuntime.jsx(
11309
- Combobox,
11310
- {
11311
- id: "promotion-combobox",
11312
- "aria-describedby": "promotion-combobox-hint",
11313
- isFetchingNextPage: comboboxData.isFetchingNextPage,
11314
- fetchNextPage: comboboxData.fetchNextPage,
11315
- options: comboboxData.options,
11316
- onSearchValueChange: comboboxData.onSearchValueChange,
11317
- searchValue: comboboxData.searchValue,
11318
- disabled: comboboxData.disabled || isAddingPromotions,
11319
- onChange: add,
11320
- value: comboboxValue
11321
- }
11322
- )
11323
- ] }),
11324
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11325
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
11326
- PromotionItem,
11327
- {
11328
- promotion,
11329
- orderId: preview.id,
11330
- isLoading: isPending
11331
- },
11332
- promotion.id
11333
- )) })
11334
- ] }) }),
11335
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11336
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11337
- /* @__PURE__ */ jsxRuntime.jsx(
11338
- ui.Button,
11339
- {
11340
- size: "small",
11341
- type: "submit",
11342
- isLoading: isSubmitting || isAddingPromotions,
11343
- children: "Save"
11344
- }
11350
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11351
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11352
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11353
+ ] }) })
11354
+ ]
11355
+ }
11356
+ ) });
11357
+ };
11358
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11359
+ return /* @__PURE__ */ jsxRuntime.jsx(
11360
+ "input",
11361
+ {
11362
+ ref,
11363
+ ...props,
11364
+ autoComplete: "off",
11365
+ className: ui.clx(
11366
+ "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",
11367
+ className
11345
11368
  )
11369
+ }
11370
+ );
11371
+ });
11372
+ GridInput.displayName = "MetadataForm.GridInput";
11373
+ const PlaceholderInner = () => {
11374
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11375
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11376
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11377
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11378
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11346
11379
  ] }) })
11347
11380
  ] });
11348
11381
  };
11349
- const PromotionItem = ({
11350
- promotion,
11351
- orderId,
11352
- isLoading
11353
- }) => {
11354
- var _a;
11355
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11356
- const onRemove = async () => {
11357
- removePromotions(
11358
- {
11359
- promo_codes: [promotion.code]
11360
- },
11382
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11383
+ function getDefaultValues(metadata) {
11384
+ if (!metadata || !Object.keys(metadata).length) {
11385
+ return [
11361
11386
  {
11362
- onError: (e) => {
11363
- ui.toast.error(e.message);
11364
- }
11387
+ key: "",
11388
+ value: "",
11389
+ disabled: false
11365
11390
  }
11366
- );
11367
- };
11368
- const displayValue = getDisplayValue(promotion);
11369
- return /* @__PURE__ */ jsxRuntime.jsxs(
11370
- "div",
11371
- {
11372
- className: ui.clx(
11373
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11374
- {
11375
- "animate-pulse": isLoading
11376
- }
11377
- ),
11378
- children: [
11379
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11380
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11381
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11382
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11383
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11384
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11385
- ] }),
11386
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11387
- ] })
11388
- ] }),
11389
- /* @__PURE__ */ jsxRuntime.jsx(
11390
- ui.IconButton,
11391
- {
11392
- size: "small",
11393
- type: "button",
11394
- variant: "transparent",
11395
- onClick: onRemove,
11396
- isLoading: isPending || isLoading,
11397
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
11398
- }
11399
- )
11400
- ]
11401
- },
11402
- promotion.id
11403
- );
11404
- };
11405
- function getDisplayValue(promotion) {
11406
- var _a, _b, _c, _d;
11407
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11408
- if (!value) {
11409
- return null;
11391
+ ];
11410
11392
  }
11411
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11412
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11413
- if (!currency) {
11414
- return null;
11393
+ return Object.entries(metadata).map(([key, value]) => {
11394
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11395
+ return {
11396
+ key,
11397
+ value,
11398
+ disabled: true
11399
+ };
11415
11400
  }
11416
- return getLocaleAmount(value, currency);
11417
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11418
- return formatPercentage(value);
11419
- }
11420
- return null;
11401
+ let stringValue = value;
11402
+ if (typeof value !== "string") {
11403
+ stringValue = JSON.stringify(value);
11404
+ }
11405
+ return {
11406
+ key,
11407
+ value: stringValue,
11408
+ original_key: key
11409
+ };
11410
+ });
11421
11411
  }
11422
- const formatter = new Intl.NumberFormat([], {
11423
- style: "percent",
11424
- minimumFractionDigits: 2
11425
- });
11426
- const formatPercentage = (value, isPercentageValue = false) => {
11427
- let val = value || 0;
11428
- if (!isPercentageValue) {
11429
- val = val / 100;
11412
+ function parseValues(values) {
11413
+ const metadata = values.metadata;
11414
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11415
+ if (isEmpty) {
11416
+ return null;
11430
11417
  }
11431
- return formatter.format(val);
11432
- };
11433
- function getPromotionIds(items, shippingMethods) {
11434
- const promotionIds = /* @__PURE__ */ new Set();
11435
- for (const item of items) {
11436
- if (item.adjustments) {
11437
- for (const adjustment of item.adjustments) {
11438
- if (adjustment.promotion_id) {
11439
- promotionIds.add(adjustment.promotion_id);
11440
- }
11441
- }
11418
+ const update = {};
11419
+ metadata.forEach((field) => {
11420
+ let key = field.key;
11421
+ let value = field.value;
11422
+ const disabled = field.disabled;
11423
+ if (!key || !value) {
11424
+ return;
11442
11425
  }
11443
- }
11444
- for (const shippingMethod of shippingMethods) {
11445
- if (shippingMethod.adjustments) {
11446
- for (const adjustment of shippingMethod.adjustments) {
11447
- if (adjustment.promotion_id) {
11448
- promotionIds.add(adjustment.promotion_id);
11449
- }
11426
+ if (disabled) {
11427
+ update[key] = value;
11428
+ return;
11429
+ }
11430
+ key = key.trim();
11431
+ value = value.trim();
11432
+ if (value === "true") {
11433
+ update[key] = true;
11434
+ } else if (value === "false") {
11435
+ update[key] = false;
11436
+ } else {
11437
+ const parsedNumber = parseFloat(value);
11438
+ if (!isNaN(parsedNumber)) {
11439
+ update[key] = parsedNumber;
11440
+ } else {
11441
+ update[key] = value;
11450
11442
  }
11451
11443
  }
11444
+ });
11445
+ return update;
11446
+ }
11447
+ function getHasUneditableRows(metadata) {
11448
+ if (!metadata) {
11449
+ return false;
11452
11450
  }
11453
- return Array.from(promotionIds);
11451
+ return Object.values(metadata).some(
11452
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11453
+ );
11454
11454
  }
11455
11455
  const SalesChannel = () => {
11456
11456
  const { id } = reactRouterDom.useParams();
@@ -13080,14 +13080,14 @@ const routeModule = {
13080
13080
  Component: Items,
13081
13081
  path: "/draft-orders/:id/items"
13082
13082
  },
13083
- {
13084
- Component: Metadata,
13085
- path: "/draft-orders/:id/metadata"
13086
- },
13087
13083
  {
13088
13084
  Component: Promotions,
13089
13085
  path: "/draft-orders/:id/promotions"
13090
13086
  },
13087
+ {
13088
+ Component: Metadata,
13089
+ path: "/draft-orders/:id/metadata"
13090
+ },
13091
13091
  {
13092
13092
  Component: SalesChannel,
13093
13093
  path: "/draft-orders/:id/sales-channel"