@medusajs/draft-order 2.10.4-preview-20251010210154 → 2.10.4-preview-20251011030926

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