@medusajs/draft-order 2.11.4-preview-20251118000304 → 2.11.4-preview-20251118060137

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.
@@ -9830,6 +9830,27 @@ const EmailForm = ({ order }) => {
9830
9830
  const schema$4 = objectType({
9831
9831
  email: stringType().email()
9832
9832
  });
9833
+ const CustomItems = () => {
9834
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9835
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9836
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9837
+ ] });
9838
+ };
9839
+ const CustomItemsForm = () => {
9840
+ const form = reactHookForm.useForm({
9841
+ resolver: zod.zodResolver(schema$3)
9842
+ });
9843
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9844
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9845
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9846
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9847
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9848
+ ] }) })
9849
+ ] }) });
9850
+ };
9851
+ const schema$3 = objectType({
9852
+ email: stringType().email()
9853
+ });
9833
9854
  const NumberInput = React.forwardRef(
9834
9855
  ({
9835
9856
  value,
@@ -10804,166 +10825,495 @@ const customItemSchema = objectType({
10804
10825
  quantity: numberType(),
10805
10826
  unit_price: unionType([numberType(), stringType()])
10806
10827
  });
10807
- const CustomItems = () => {
10808
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10809
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
10810
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
10811
- ] });
10812
- };
10813
- const CustomItemsForm = () => {
10814
- const form = reactHookForm.useForm({
10815
- resolver: zod.zodResolver(schema$3)
10816
- });
10817
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
10818
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
10819
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10820
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10821
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
10822
- ] }) })
10823
- ] }) });
10824
- };
10825
- const schema$3 = objectType({
10826
- email: stringType().email()
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()
10827
10868
  });
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
10845
- });
10846
- return { ...data, ...rest };
10847
- };
10848
- const Promotions = () => {
10869
+ const MetadataSchema = objectType({
10870
+ metadata: arrayType(MetadataFieldSchema)
10871
+ });
10872
+ const Metadata = () => {
10849
10873
  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;
10874
+ const { order, isPending, isError, error } = useOrder(id, {
10875
+ fields: "metadata"
10876
+ });
10877
+ if (isError) {
10878
+ throw error;
10859
10879
  }
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 })
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 })
10864
10887
  ] });
10865
10888
  };
10866
- const PromotionForm = ({ preview }) => {
10867
- const { items, shipping_methods } = preview;
10868
- const [isSubmitting, setIsSubmitting] = React.useState(false);
10869
- const [comboboxValue, setComboboxValue] = React.useState("");
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 }) => {
10870
10892
  const { handleSuccess } = useRouteModal();
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
10876
- },
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
- });
10893
+ const hasUneditableRows = getHasUneditableRows(metadata);
10894
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10895
+ const form = reactHookForm.useForm({
10896
+ defaultValues: {
10897
+ metadata: getDefaultValues(metadata)
10890
10898
  },
10891
- getOptions: (data) => {
10892
- return data.promotions.map((promotion) => ({
10893
- label: promotion.code,
10894
- value: promotion.code
10895
- }));
10896
- }
10899
+ resolver: zod.zodResolver(MetadataSchema)
10897
10900
  });
10898
- const add = async (value) => {
10899
- if (!value) {
10900
- return;
10901
- }
10902
- addPromotions(
10901
+ const handleSubmit = form.handleSubmit(async (data) => {
10902
+ const parsedData = parseValues(data);
10903
+ await mutateAsync(
10903
10904
  {
10904
- promo_codes: [value]
10905
+ metadata: parsedData
10905
10906
  },
10906
10907
  {
10907
- onError: (e) => {
10908
- ui.toast.error(e.message);
10909
- comboboxData.onSearchValueChange("");
10910
- setComboboxValue("");
10911
- },
10912
10908
  onSuccess: () => {
10913
- comboboxData.onSearchValueChange("");
10914
- setComboboxValue("");
10909
+ ui.toast.success("Metadata updated");
10910
+ handleSuccess();
10911
+ },
10912
+ onError: (error) => {
10913
+ ui.toast.error(error.message);
10915
10914
  }
10916
10915
  }
10917
10916
  );
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;
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
+ });
10935
10930
  }
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
- }
10931
+ }
10932
+ function insertRow(index, position) {
10933
+ insert(index + (position === "above" ? 0 : 1), {
10934
+ key: "",
10935
+ value: "",
10936
+ disabled: false
10946
10937
  });
10947
- };
10948
- if (isError) {
10949
- throw error;
10950
10938
  }
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." })
10957
- ] }),
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,
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." })
11072
+ ] }),
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
11091
+ )
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
+ ] }) })
11103
+ ] });
11104
+ };
11105
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11106
+ function getDefaultValues(metadata) {
11107
+ if (!metadata || !Object.keys(metadata).length) {
11108
+ return [
11109
+ {
11110
+ key: "",
11111
+ value: "",
11112
+ disabled: false
11113
+ }
11114
+ ];
11115
+ }
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);
11127
+ }
11128
+ return {
11129
+ key,
11130
+ value: stringValue,
11131
+ original_key: key
11132
+ };
11133
+ });
11134
+ }
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;
11140
+ }
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;
11152
+ }
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;
11165
+ }
11166
+ }
11167
+ });
11168
+ return update;
11169
+ }
11170
+ function getHasUneditableRows(metadata) {
11171
+ if (!metadata) {
11172
+ return false;
11173
+ }
11174
+ return Object.values(metadata).some(
11175
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11176
+ );
11177
+ }
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 = () => {
11199
+ 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;
11209
+ }
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 })
11214
+ ] });
11215
+ };
11216
+ const PromotionForm = ({ preview }) => {
11217
+ const { items, shipping_methods } = preview;
11218
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11219
+ const [comboboxValue, setComboboxValue] = React.useState("");
11220
+ 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
+ });
11240
+ },
11241
+ getOptions: (data) => {
11242
+ return data.promotions.map((promotion) => ({
11243
+ label: promotion.code,
11244
+ value: promotion.code
11245
+ }));
11246
+ }
11247
+ });
11248
+ const add = async (value) => {
11249
+ if (!value) {
11250
+ return;
11251
+ }
11252
+ addPromotions(
11253
+ {
11254
+ promo_codes: [value]
11255
+ },
11256
+ {
11257
+ onError: (e) => {
11258
+ ui.toast.error(e.message);
11259
+ comboboxData.onSearchValueChange("");
11260
+ setComboboxValue("");
11261
+ },
11262
+ onSuccess: () => {
11263
+ comboboxData.onSearchValueChange("");
11264
+ setComboboxValue("");
11265
+ }
11266
+ }
11267
+ );
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;
11285
+ }
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
+ }
11296
+ });
11297
+ };
11298
+ if (isError) {
11299
+ throw error;
11300
+ }
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." })
11307
+ ] }),
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,
10967
11317
  searchValue: comboboxData.searchValue,
10968
11318
  disabled: comboboxData.disabled || isAddingPromotions,
10969
11319
  onChange: add,
@@ -11102,88 +11452,46 @@ function getPromotionIds(items, shippingMethods) {
11102
11452
  }
11103
11453
  return Array.from(promotionIds);
11104
11454
  }
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 = () => {
11455
+ const SalesChannel = () => {
11150
11456
  const { id } = reactRouterDom.useParams();
11151
- const { order, isPending, isError, error } = useOrder(id, {
11152
- fields: "metadata"
11153
- });
11457
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11458
+ id,
11459
+ {
11460
+ fields: "+sales_channel_id"
11461
+ },
11462
+ {
11463
+ enabled: !!id
11464
+ }
11465
+ );
11154
11466
  if (isError) {
11155
11467
  throw error;
11156
11468
  }
11157
- const isReady = !isPending && !!order;
11469
+ const ISrEADY = !!draft_order && !isPending;
11158
11470
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11159
11471
  /* @__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." }) })
11472
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11473
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11162
11474
  ] }),
11163
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11475
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11164
11476
  ] });
11165
11477
  };
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 }) => {
11169
- const { handleSuccess } = useRouteModal();
11170
- const hasUneditableRows = getHasUneditableRows(metadata);
11171
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11478
+ const SalesChannelForm = ({ order }) => {
11172
11479
  const form = reactHookForm.useForm({
11173
11480
  defaultValues: {
11174
- metadata: getDefaultValues(metadata)
11481
+ sales_channel_id: order.sales_channel_id || ""
11175
11482
  },
11176
- resolver: zod.zodResolver(MetadataSchema)
11483
+ resolver: zod.zodResolver(schema$2)
11177
11484
  });
11178
- const handleSubmit = form.handleSubmit(async (data) => {
11179
- const parsedData = parseValues(data);
11485
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11486
+ const { handleSuccess } = useRouteModal();
11487
+ const onSubmit = form.handleSubmit(async (data) => {
11180
11488
  await mutateAsync(
11181
11489
  {
11182
- metadata: parsedData
11490
+ sales_channel_id: data.sales_channel_id
11183
11491
  },
11184
11492
  {
11185
11493
  onSuccess: () => {
11186
- ui.toast.success("Metadata updated");
11494
+ ui.toast.success("Sales channel updated");
11187
11495
  handleSuccess();
11188
11496
  },
11189
11497
  onError: (error) => {
@@ -11192,266 +11500,64 @@ const MetadataForm = ({ orderId, metadata }) => {
11192
11500
  }
11193
11501
  );
11194
11502
  });
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
- });
11207
- }
11208
- }
11209
- function insertRow(index, position) {
11210
- insert(index + (position === "above" ? 0 : 1), {
11211
- key: "",
11212
- value: "",
11213
- disabled: false
11214
- });
11215
- }
11216
11503
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11217
11504
  KeyboundForm,
11218
11505
  {
11219
- onSubmit: handleSubmit,
11220
11506
  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." })
11349
- ] }),
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" }) }),
11507
+ onSubmit,
11508
+ children: [
11509
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11510
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11511
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11352
11512
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11353
11513
  ] }) })
11354
11514
  ]
11355
11515
  }
11356
11516
  ) });
11357
11517
  };
11358
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11518
+ const SalesChannelField = ({ control, order }) => {
11519
+ const salesChannels = useComboboxData({
11520
+ queryFn: async (params) => {
11521
+ return await sdk.admin.salesChannel.list(params);
11522
+ },
11523
+ queryKey: ["sales-channels"],
11524
+ getOptions: (data) => {
11525
+ return data.sales_channels.map((salesChannel) => ({
11526
+ label: salesChannel.name,
11527
+ value: salesChannel.id
11528
+ }));
11529
+ },
11530
+ defaultValue: order.sales_channel_id || void 0
11531
+ });
11359
11532
  return /* @__PURE__ */ jsxRuntime.jsx(
11360
- "input",
11533
+ Form$2.Field,
11361
11534
  {
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
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" })
11379
- ] }) })
11380
- ] });
11381
- };
11382
- const EDITABLE_TYPES = ["string", "number", "boolean"];
11383
- function getDefaultValues(metadata) {
11384
- if (!metadata || !Object.keys(metadata).length) {
11385
- return [
11386
- {
11387
- key: "",
11388
- value: "",
11389
- disabled: false
11390
- }
11391
- ];
11392
- }
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
- };
11400
- }
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
- });
11411
- }
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;
11417
- }
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;
11425
- }
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;
11535
+ control,
11536
+ name: "sales_channel_id",
11537
+ render: ({ field }) => {
11538
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11539
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11540
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11541
+ Combobox,
11542
+ {
11543
+ options: salesChannels.options,
11544
+ fetchNextPage: salesChannels.fetchNextPage,
11545
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11546
+ searchValue: salesChannels.searchValue,
11547
+ onSearchValueChange: salesChannels.onSearchValueChange,
11548
+ placeholder: "Select sales channel",
11549
+ ...field
11550
+ }
11551
+ ) }),
11552
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11553
+ ] });
11442
11554
  }
11443
11555
  }
11444
- });
11445
- return update;
11446
- }
11447
- function getHasUneditableRows(metadata) {
11448
- if (!metadata) {
11449
- return false;
11450
- }
11451
- return Object.values(metadata).some(
11452
- (value) => !EDITABLE_TYPES.includes(typeof value)
11453
11556
  );
11454
- }
11557
+ };
11558
+ const schema$2 = objectType({
11559
+ sales_channel_id: stringType().min(1)
11560
+ });
11455
11561
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11456
11562
  const Shipping = () => {
11457
11563
  var _a;
@@ -12259,112 +12365,6 @@ const CustomAmountField = ({
12259
12365
  }
12260
12366
  );
12261
12367
  };
12262
- const SalesChannel = () => {
12263
- const { id } = reactRouterDom.useParams();
12264
- const { draft_order, isPending, isError, error } = useDraftOrder(
12265
- id,
12266
- {
12267
- fields: "+sales_channel_id"
12268
- },
12269
- {
12270
- enabled: !!id
12271
- }
12272
- );
12273
- if (isError) {
12274
- throw error;
12275
- }
12276
- const ISrEADY = !!draft_order && !isPending;
12277
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12278
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12279
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
12280
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12281
- ] }),
12282
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
12283
- ] });
12284
- };
12285
- const SalesChannelForm = ({ order }) => {
12286
- const form = reactHookForm.useForm({
12287
- defaultValues: {
12288
- sales_channel_id: order.sales_channel_id || ""
12289
- },
12290
- resolver: zod.zodResolver(schema$2)
12291
- });
12292
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12293
- const { handleSuccess } = useRouteModal();
12294
- const onSubmit = form.handleSubmit(async (data) => {
12295
- await mutateAsync(
12296
- {
12297
- sales_channel_id: data.sales_channel_id
12298
- },
12299
- {
12300
- onSuccess: () => {
12301
- ui.toast.success("Sales channel updated");
12302
- handleSuccess();
12303
- },
12304
- onError: (error) => {
12305
- ui.toast.error(error.message);
12306
- }
12307
- }
12308
- );
12309
- });
12310
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12311
- KeyboundForm,
12312
- {
12313
- className: "flex flex-1 flex-col overflow-hidden",
12314
- onSubmit,
12315
- children: [
12316
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
12317
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12318
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12319
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12320
- ] }) })
12321
- ]
12322
- }
12323
- ) });
12324
- };
12325
- const SalesChannelField = ({ control, order }) => {
12326
- const salesChannels = useComboboxData({
12327
- queryFn: async (params) => {
12328
- return await sdk.admin.salesChannel.list(params);
12329
- },
12330
- queryKey: ["sales-channels"],
12331
- getOptions: (data) => {
12332
- return data.sales_channels.map((salesChannel) => ({
12333
- label: salesChannel.name,
12334
- value: salesChannel.id
12335
- }));
12336
- },
12337
- defaultValue: order.sales_channel_id || void 0
12338
- });
12339
- return /* @__PURE__ */ jsxRuntime.jsx(
12340
- Form$2.Field,
12341
- {
12342
- control,
12343
- name: "sales_channel_id",
12344
- render: ({ field }) => {
12345
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12346
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
12347
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12348
- Combobox,
12349
- {
12350
- options: salesChannels.options,
12351
- fetchNextPage: salesChannels.fetchNextPage,
12352
- isFetchingNextPage: salesChannels.isFetchingNextPage,
12353
- searchValue: salesChannels.searchValue,
12354
- onSearchValueChange: salesChannels.onSearchValueChange,
12355
- placeholder: "Select sales channel",
12356
- ...field
12357
- }
12358
- ) }),
12359
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12360
- ] });
12361
- }
12362
- }
12363
- );
12364
- };
12365
- const schema$2 = objectType({
12366
- sales_channel_id: stringType().min(1)
12367
- });
12368
12368
  const ShippingAddress = () => {
12369
12369
  const { id } = reactRouterDom.useParams();
12370
12370
  const { order, isPending, isError, error } = useOrder(id, {
@@ -13072,30 +13072,30 @@ const routeModule = {
13072
13072
  Component: Email,
13073
13073
  path: "/draft-orders/:id/email"
13074
13074
  },
13075
- {
13076
- Component: Items,
13077
- path: "/draft-orders/:id/items"
13078
- },
13079
13075
  {
13080
13076
  Component: CustomItems,
13081
13077
  path: "/draft-orders/:id/custom-items"
13082
13078
  },
13083
13079
  {
13084
- Component: Promotions,
13085
- path: "/draft-orders/:id/promotions"
13080
+ Component: Items,
13081
+ path: "/draft-orders/:id/items"
13086
13082
  },
13087
13083
  {
13088
13084
  Component: Metadata,
13089
13085
  path: "/draft-orders/:id/metadata"
13090
13086
  },
13091
13087
  {
13092
- Component: Shipping,
13093
- path: "/draft-orders/:id/shipping"
13088
+ Component: Promotions,
13089
+ path: "/draft-orders/:id/promotions"
13094
13090
  },
13095
13091
  {
13096
13092
  Component: SalesChannel,
13097
13093
  path: "/draft-orders/:id/sales-channel"
13098
13094
  },
13095
+ {
13096
+ Component: Shipping,
13097
+ path: "/draft-orders/:id/shipping"
13098
+ },
13099
13099
  {
13100
13100
  Component: ShippingAddress,
13101
13101
  path: "/draft-orders/:id/shipping-address"