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

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.
@@ -9762,27 +9762,6 @@ const BillingAddressForm = ({ order }) => {
9762
9762
  ) });
9763
9763
  };
9764
9764
  const schema$5 = addressSchema;
9765
- const CustomItems = () => {
9766
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9767
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9768
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9769
- ] });
9770
- };
9771
- const CustomItemsForm = () => {
9772
- const form = reactHookForm.useForm({
9773
- resolver: zod.zodResolver(schema$4)
9774
- });
9775
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9776
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9777
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9778
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9779
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9780
- ] }) })
9781
- ] }) });
9782
- };
9783
- const schema$4 = objectType({
9784
- email: stringType().email()
9785
- });
9786
9765
  const Email = () => {
9787
9766
  const { id } = reactRouterDom.useParams();
9788
9767
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9805,7 +9784,7 @@ const EmailForm = ({ order }) => {
9805
9784
  defaultValues: {
9806
9785
  email: order.email ?? ""
9807
9786
  },
9808
- resolver: zod.zodResolver(schema$3)
9787
+ resolver: zod.zodResolver(schema$4)
9809
9788
  });
9810
9789
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9811
9790
  const { handleSuccess } = useRouteModal();
@@ -9848,7 +9827,7 @@ const EmailForm = ({ order }) => {
9848
9827
  }
9849
9828
  ) });
9850
9829
  };
9851
- const schema$3 = objectType({
9830
+ const schema$4 = objectType({
9852
9831
  email: stringType().email()
9853
9832
  });
9854
9833
  const NumberInput = React.forwardRef(
@@ -10825,478 +10804,149 @@ const customItemSchema = objectType({
10825
10804
  quantity: numberType(),
10826
10805
  unit_price: unionType([numberType(), stringType()])
10827
10806
  });
10828
- const InlineTip = React.forwardRef(
10829
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10830
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10831
- return /* @__PURE__ */ jsxRuntime.jsxs(
10832
- "div",
10833
- {
10834
- ref,
10835
- className: ui.clx(
10836
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10837
- className
10838
- ),
10839
- ...props,
10840
- children: [
10841
- /* @__PURE__ */ jsxRuntime.jsx(
10842
- "div",
10843
- {
10844
- role: "presentation",
10845
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10846
- "bg-ui-tag-orange-icon": variant === "warning"
10847
- })
10848
- }
10849
- ),
10850
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10851
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10852
- labelValue,
10853
- ":"
10854
- ] }),
10855
- " ",
10856
- children
10857
- ] })
10858
- ]
10859
- }
10860
- );
10861
- }
10862
- );
10863
- InlineTip.displayName = "InlineTip";
10864
- const MetadataFieldSchema = objectType({
10865
- key: stringType(),
10866
- disabled: booleanType().optional(),
10867
- value: anyType()
10868
- });
10869
- const MetadataSchema = objectType({
10870
- metadata: arrayType(MetadataFieldSchema)
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()
10871
10827
  });
10872
- const Metadata = () => {
10873
- const { id } = reactRouterDom.useParams();
10874
- const { order, isPending, isError, error } = useOrder(id, {
10875
- fields: "metadata"
10828
+ const PROMOTION_QUERY_KEY = "promotions";
10829
+ const promotionsQueryKeys = {
10830
+ list: (query2) => [
10831
+ PROMOTION_QUERY_KEY,
10832
+ query2 ? query2 : void 0
10833
+ ],
10834
+ detail: (id, query2) => [
10835
+ PROMOTION_QUERY_KEY,
10836
+ id,
10837
+ query2 ? query2 : void 0
10838
+ ]
10839
+ };
10840
+ const usePromotions = (query2, options) => {
10841
+ const { data, ...rest } = reactQuery.useQuery({
10842
+ queryKey: promotionsQueryKeys.list(query2),
10843
+ queryFn: async () => sdk.admin.promotion.list(query2),
10844
+ ...options
10876
10845
  });
10877
- if (isError) {
10878
- throw error;
10846
+ return { ...data, ...rest };
10847
+ };
10848
+ const Promotions = () => {
10849
+ const { id } = reactRouterDom.useParams();
10850
+ const {
10851
+ order: preview,
10852
+ isError: isPreviewError,
10853
+ error: previewError
10854
+ } = useOrderPreview(id, void 0);
10855
+ useInitiateOrderEdit({ preview });
10856
+ const { onCancel } = useCancelOrderEdit({ preview });
10857
+ if (isPreviewError) {
10858
+ throw previewError;
10879
10859
  }
10880
- const isReady = !isPending && !!order;
10881
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10882
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10883
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10884
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10885
- ] }),
10886
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10860
+ const isReady = !!preview;
10861
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
10862
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
10863
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
10887
10864
  ] });
10888
10865
  };
10889
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10890
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10891
- const MetadataForm = ({ orderId, metadata }) => {
10866
+ const PromotionForm = ({ preview }) => {
10867
+ const { items, shipping_methods } = preview;
10868
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
10869
+ const [comboboxValue, setComboboxValue] = React.useState("");
10892
10870
  const { handleSuccess } = useRouteModal();
10893
- const hasUneditableRows = getHasUneditableRows(metadata);
10894
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10895
- const form = reactHookForm.useForm({
10896
- defaultValues: {
10897
- metadata: getDefaultValues(metadata)
10871
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10872
+ const promoIds = getPromotionIds(items, shipping_methods);
10873
+ const { promotions, isPending, isError, error } = usePromotions(
10874
+ {
10875
+ id: promoIds
10898
10876
  },
10899
- resolver: zod.zodResolver(MetadataSchema)
10877
+ {
10878
+ enabled: !!promoIds.length
10879
+ }
10880
+ );
10881
+ const comboboxData = useComboboxData({
10882
+ queryKey: ["promotions", "combobox", promoIds],
10883
+ queryFn: async (params) => {
10884
+ return await sdk.admin.promotion.list({
10885
+ ...params,
10886
+ id: {
10887
+ $nin: promoIds
10888
+ }
10889
+ });
10890
+ },
10891
+ getOptions: (data) => {
10892
+ return data.promotions.map((promotion) => ({
10893
+ label: promotion.code,
10894
+ value: promotion.code
10895
+ }));
10896
+ }
10900
10897
  });
10901
- const handleSubmit = form.handleSubmit(async (data) => {
10902
- const parsedData = parseValues(data);
10903
- await mutateAsync(
10898
+ const add = async (value) => {
10899
+ if (!value) {
10900
+ return;
10901
+ }
10902
+ addPromotions(
10904
10903
  {
10905
- metadata: parsedData
10904
+ promo_codes: [value]
10906
10905
  },
10907
10906
  {
10908
- onSuccess: () => {
10909
- ui.toast.success("Metadata updated");
10910
- handleSuccess();
10907
+ onError: (e) => {
10908
+ ui.toast.error(e.message);
10909
+ comboboxData.onSearchValueChange("");
10910
+ setComboboxValue("");
10911
10911
  },
10912
- onError: (error) => {
10913
- ui.toast.error(error.message);
10912
+ onSuccess: () => {
10913
+ comboboxData.onSearchValueChange("");
10914
+ setComboboxValue("");
10914
10915
  }
10915
10916
  }
10916
10917
  );
10917
- });
10918
- const { fields, insert, remove } = reactHookForm.useFieldArray({
10919
- control: form.control,
10920
- name: "metadata"
10921
- });
10922
- function deleteRow(index) {
10923
- remove(index);
10924
- if (fields.length === 1) {
10925
- insert(0, {
10926
- key: "",
10927
- value: "",
10928
- disabled: false
10929
- });
10918
+ };
10919
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10920
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10921
+ const onSubmit = async () => {
10922
+ setIsSubmitting(true);
10923
+ let requestSucceeded = false;
10924
+ await requestOrderEdit(void 0, {
10925
+ onError: (e) => {
10926
+ ui.toast.error(e.message);
10927
+ },
10928
+ onSuccess: () => {
10929
+ requestSucceeded = true;
10930
+ }
10931
+ });
10932
+ if (!requestSucceeded) {
10933
+ setIsSubmitting(false);
10934
+ return;
10930
10935
  }
10931
- }
10932
- function insertRow(index, position) {
10933
- insert(index + (position === "above" ? 0 : 1), {
10934
- key: "",
10935
- value: "",
10936
- disabled: false
10936
+ await confirmOrderEdit(void 0, {
10937
+ onError: (e) => {
10938
+ ui.toast.error(e.message);
10939
+ },
10940
+ onSuccess: () => {
10941
+ handleSuccess();
10942
+ },
10943
+ onSettled: () => {
10944
+ setIsSubmitting(false);
10945
+ }
10937
10946
  });
10938
- }
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;
10947
+ };
10948
+ if (isError) {
10949
+ throw error;
11300
10950
  }
11301
10951
  return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11302
10952
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
@@ -11448,50 +11098,92 @@ function getPromotionIds(items, shippingMethods) {
11448
11098
  promotionIds.add(adjustment.promotion_id);
11449
11099
  }
11450
11100
  }
11451
- }
11101
+ }
11102
+ }
11103
+ return Array.from(promotionIds);
11104
+ }
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
+ );
11452
11138
  }
11453
- return Array.from(promotionIds);
11454
- }
11455
- const SalesChannel = () => {
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 = () => {
11456
11150
  const { id } = reactRouterDom.useParams();
11457
- const { draft_order, isPending, isError, error } = useDraftOrder(
11458
- id,
11459
- {
11460
- fields: "+sales_channel_id"
11461
- },
11462
- {
11463
- enabled: !!id
11464
- }
11465
- );
11151
+ const { order, isPending, isError, error } = useOrder(id, {
11152
+ fields: "metadata"
11153
+ });
11466
11154
  if (isError) {
11467
11155
  throw error;
11468
11156
  }
11469
- const ISrEADY = !!draft_order && !isPending;
11157
+ const isReady = !isPending && !!order;
11470
11158
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11471
11159
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
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" }) })
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." }) })
11474
11162
  ] }),
11475
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11163
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11476
11164
  ] });
11477
11165
  };
11478
- const SalesChannelForm = ({ order }) => {
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);
11479
11172
  const form = reactHookForm.useForm({
11480
11173
  defaultValues: {
11481
- sales_channel_id: order.sales_channel_id || ""
11174
+ metadata: getDefaultValues(metadata)
11482
11175
  },
11483
- resolver: zod.zodResolver(schema$2)
11176
+ resolver: zod.zodResolver(MetadataSchema)
11484
11177
  });
11485
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11486
- const { handleSuccess } = useRouteModal();
11487
- const onSubmit = form.handleSubmit(async (data) => {
11178
+ const handleSubmit = form.handleSubmit(async (data) => {
11179
+ const parsedData = parseValues(data);
11488
11180
  await mutateAsync(
11489
11181
  {
11490
- sales_channel_id: data.sales_channel_id
11182
+ metadata: parsedData
11491
11183
  },
11492
11184
  {
11493
11185
  onSuccess: () => {
11494
- ui.toast.success("Sales channel updated");
11186
+ ui.toast.success("Metadata updated");
11495
11187
  handleSuccess();
11496
11188
  },
11497
11189
  onError: (error) => {
@@ -11500,64 +11192,266 @@ const SalesChannelForm = ({ order }) => {
11500
11192
  }
11501
11193
  );
11502
11194
  });
11195
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
11196
+ control: form.control,
11197
+ name: "metadata"
11198
+ });
11199
+ function deleteRow(index) {
11200
+ remove(index);
11201
+ if (fields.length === 1) {
11202
+ insert(0, {
11203
+ key: "",
11204
+ value: "",
11205
+ disabled: false
11206
+ });
11207
+ }
11208
+ }
11209
+ function insertRow(index, position) {
11210
+ insert(index + (position === "above" ? 0 : 1), {
11211
+ key: "",
11212
+ value: "",
11213
+ disabled: false
11214
+ });
11215
+ }
11503
11216
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11504
11217
  KeyboundForm,
11505
11218
  {
11219
+ onSubmit: handleSubmit,
11506
11220
  className: "flex flex-1 flex-col overflow-hidden",
11507
- onSubmit,
11508
11221
  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" }) }),
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" }) }),
11512
11352
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11513
11353
  ] }) })
11514
11354
  ]
11515
11355
  }
11516
11356
  ) });
11517
11357
  };
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
11358
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11359
+ return /* @__PURE__ */ jsxRuntime.jsx(
11360
+ "input",
11361
+ {
11362
+ ref,
11363
+ ...props,
11364
+ autoComplete: "off",
11365
+ className: ui.clx(
11366
+ "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
11367
+ className
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
+ };
11531
11410
  });
11532
- return /* @__PURE__ */ jsxRuntime.jsx(
11533
- Form$2.Field,
11534
- {
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
- ] });
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;
11554
11442
  }
11555
11443
  }
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)
11556
11453
  );
11557
- };
11558
- const schema$2 = objectType({
11559
- sales_channel_id: stringType().min(1)
11560
- });
11454
+ }
11561
11455
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11562
11456
  const Shipping = () => {
11563
11457
  var _a;
@@ -12283,88 +12177,397 @@ const ShippingOptionField = ({
12283
12177
  });
12284
12178
  },
12285
12179
  getOptions: (data) => {
12286
- return data.shipping_options.map((option) => {
12287
- var _a2;
12288
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12289
- (r) => r.attribute === "is_return" && r.value === "true"
12290
- )) {
12291
- return void 0;
12292
- }
12293
- return {
12294
- label: option.name,
12295
- value: option.id
12296
- };
12297
- }).filter(Boolean);
12180
+ return data.shipping_options.map((option) => {
12181
+ var _a2;
12182
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12183
+ (r) => r.attribute === "is_return" && r.value === "true"
12184
+ )) {
12185
+ return void 0;
12186
+ }
12187
+ return {
12188
+ label: option.name,
12189
+ value: option.id
12190
+ };
12191
+ }).filter(Boolean);
12192
+ },
12193
+ enabled: !!locationId && !!shippingProfileId,
12194
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12195
+ });
12196
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12197
+ return /* @__PURE__ */ jsxRuntime.jsx(
12198
+ Form$2.Field,
12199
+ {
12200
+ control,
12201
+ name: "shipping_option_id",
12202
+ render: ({ field }) => {
12203
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12204
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12205
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12206
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12207
+ ] }),
12208
+ /* @__PURE__ */ jsxRuntime.jsx(
12209
+ ConditionalTooltip,
12210
+ {
12211
+ content: tooltipContent,
12212
+ showTooltip: !locationId || !shippingProfileId,
12213
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12214
+ Combobox,
12215
+ {
12216
+ options: shippingOptions.options,
12217
+ fetchNextPage: shippingOptions.fetchNextPage,
12218
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12219
+ searchValue: shippingOptions.searchValue,
12220
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12221
+ placeholder: "Select shipping option",
12222
+ ...field,
12223
+ disabled: !locationId || !shippingProfileId
12224
+ }
12225
+ ) }) })
12226
+ }
12227
+ )
12228
+ ] }) });
12229
+ }
12230
+ }
12231
+ );
12232
+ };
12233
+ const CustomAmountField = ({
12234
+ control,
12235
+ currencyCode
12236
+ }) => {
12237
+ return /* @__PURE__ */ jsxRuntime.jsx(
12238
+ Form$2.Field,
12239
+ {
12240
+ control,
12241
+ name: "custom_amount",
12242
+ render: ({ field: { onChange, ...field } }) => {
12243
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12244
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12245
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12246
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12247
+ ] }),
12248
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12249
+ ui.CurrencyInput,
12250
+ {
12251
+ ...field,
12252
+ onValueChange: (value) => onChange(value),
12253
+ symbol: getNativeSymbol(currencyCode),
12254
+ code: currencyCode
12255
+ }
12256
+ ) })
12257
+ ] });
12258
+ }
12259
+ }
12260
+ );
12261
+ };
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
+ }));
12298
12336
  },
12299
- enabled: !!locationId && !!shippingProfileId,
12300
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12337
+ defaultValue: order.sales_channel_id || void 0
12301
12338
  });
12302
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12303
12339
  return /* @__PURE__ */ jsxRuntime.jsx(
12304
12340
  Form$2.Field,
12305
12341
  {
12306
12342
  control,
12307
- name: "shipping_option_id",
12343
+ name: "sales_channel_id",
12308
12344
  render: ({ field }) => {
12309
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12310
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12311
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12312
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12313
- ] }),
12314
- /* @__PURE__ */ jsxRuntime.jsx(
12315
- ConditionalTooltip,
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,
12316
12349
  {
12317
- content: tooltipContent,
12318
- showTooltip: !locationId || !shippingProfileId,
12319
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12320
- Combobox,
12321
- {
12322
- options: shippingOptions.options,
12323
- fetchNextPage: shippingOptions.fetchNextPage,
12324
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12325
- searchValue: shippingOptions.searchValue,
12326
- onSearchValueChange: shippingOptions.onSearchValueChange,
12327
- placeholder: "Select shipping option",
12328
- ...field,
12329
- disabled: !locationId || !shippingProfileId
12330
- }
12331
- ) }) })
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
12332
12357
  }
12333
- )
12334
- ] }) });
12358
+ ) }),
12359
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12360
+ ] });
12335
12361
  }
12336
12362
  }
12337
12363
  );
12338
12364
  };
12339
- const CustomAmountField = ({
12340
- control,
12341
- currencyCode
12342
- }) => {
12343
- return /* @__PURE__ */ jsxRuntime.jsx(
12344
- Form$2.Field,
12365
+ const schema$2 = objectType({
12366
+ sales_channel_id: stringType().min(1)
12367
+ });
12368
+ const ShippingAddress = () => {
12369
+ const { id } = reactRouterDom.useParams();
12370
+ const { order, isPending, isError, error } = useOrder(id, {
12371
+ fields: "+shipping_address"
12372
+ });
12373
+ if (isError) {
12374
+ throw error;
12375
+ }
12376
+ const isReady = !isPending && !!order;
12377
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12378
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12379
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12380
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12381
+ ] }),
12382
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12383
+ ] });
12384
+ };
12385
+ const ShippingAddressForm = ({ order }) => {
12386
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12387
+ const form = reactHookForm.useForm({
12388
+ defaultValues: {
12389
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12390
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12391
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12392
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12393
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12394
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12395
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12396
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12397
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12398
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12399
+ },
12400
+ resolver: zod.zodResolver(schema$1)
12401
+ });
12402
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12403
+ const { handleSuccess } = useRouteModal();
12404
+ const onSubmit = form.handleSubmit(async (data) => {
12405
+ await mutateAsync(
12406
+ {
12407
+ shipping_address: {
12408
+ first_name: data.first_name,
12409
+ last_name: data.last_name,
12410
+ company: data.company,
12411
+ address_1: data.address_1,
12412
+ address_2: data.address_2,
12413
+ city: data.city,
12414
+ province: data.province,
12415
+ country_code: data.country_code,
12416
+ postal_code: data.postal_code,
12417
+ phone: data.phone
12418
+ }
12419
+ },
12420
+ {
12421
+ onSuccess: () => {
12422
+ handleSuccess();
12423
+ },
12424
+ onError: (error) => {
12425
+ ui.toast.error(error.message);
12426
+ }
12427
+ }
12428
+ );
12429
+ });
12430
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12431
+ KeyboundForm,
12345
12432
  {
12346
- control,
12347
- name: "custom_amount",
12348
- render: ({ field: { onChange, ...field } }) => {
12349
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12350
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12351
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12352
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12433
+ className: "flex flex-1 flex-col overflow-hidden",
12434
+ onSubmit,
12435
+ children: [
12436
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12437
+ /* @__PURE__ */ jsxRuntime.jsx(
12438
+ Form$2.Field,
12439
+ {
12440
+ control: form.control,
12441
+ name: "country_code",
12442
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12443
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12444
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12445
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12446
+ ] })
12447
+ }
12448
+ ),
12449
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12450
+ /* @__PURE__ */ jsxRuntime.jsx(
12451
+ Form$2.Field,
12452
+ {
12453
+ control: form.control,
12454
+ name: "first_name",
12455
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12456
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12457
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12458
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12459
+ ] })
12460
+ }
12461
+ ),
12462
+ /* @__PURE__ */ jsxRuntime.jsx(
12463
+ Form$2.Field,
12464
+ {
12465
+ control: form.control,
12466
+ name: "last_name",
12467
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12468
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12469
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12470
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12471
+ ] })
12472
+ }
12473
+ )
12353
12474
  ] }),
12354
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12355
- ui.CurrencyInput,
12475
+ /* @__PURE__ */ jsxRuntime.jsx(
12476
+ Form$2.Field,
12477
+ {
12478
+ control: form.control,
12479
+ name: "company",
12480
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12481
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12482
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12483
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12484
+ ] })
12485
+ }
12486
+ ),
12487
+ /* @__PURE__ */ jsxRuntime.jsx(
12488
+ Form$2.Field,
12489
+ {
12490
+ control: form.control,
12491
+ name: "address_1",
12492
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12493
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12494
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12495
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12496
+ ] })
12497
+ }
12498
+ ),
12499
+ /* @__PURE__ */ jsxRuntime.jsx(
12500
+ Form$2.Field,
12501
+ {
12502
+ control: form.control,
12503
+ name: "address_2",
12504
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12505
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12506
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12507
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12508
+ ] })
12509
+ }
12510
+ ),
12511
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12512
+ /* @__PURE__ */ jsxRuntime.jsx(
12513
+ Form$2.Field,
12514
+ {
12515
+ control: form.control,
12516
+ name: "postal_code",
12517
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12518
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12519
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12520
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12521
+ ] })
12522
+ }
12523
+ ),
12524
+ /* @__PURE__ */ jsxRuntime.jsx(
12525
+ Form$2.Field,
12526
+ {
12527
+ control: form.control,
12528
+ name: "city",
12529
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12530
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12531
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12532
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12533
+ ] })
12534
+ }
12535
+ )
12536
+ ] }),
12537
+ /* @__PURE__ */ jsxRuntime.jsx(
12538
+ Form$2.Field,
12539
+ {
12540
+ control: form.control,
12541
+ name: "province",
12542
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12543
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12544
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12545
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12546
+ ] })
12547
+ }
12548
+ ),
12549
+ /* @__PURE__ */ jsxRuntime.jsx(
12550
+ Form$2.Field,
12356
12551
  {
12357
- ...field,
12358
- onValueChange: (value) => onChange(value),
12359
- symbol: getNativeSymbol(currencyCode),
12360
- code: currencyCode
12552
+ control: form.control,
12553
+ name: "phone",
12554
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12555
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12556
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12557
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12558
+ ] })
12361
12559
  }
12362
- ) })
12363
- ] });
12364
- }
12560
+ )
12561
+ ] }) }),
12562
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12563
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12564
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12565
+ ] }) })
12566
+ ]
12365
12567
  }
12366
- );
12568
+ ) });
12367
12569
  };
12570
+ const schema$1 = addressSchema;
12368
12571
  const TransferOwnership = () => {
12369
12572
  const { id } = reactRouterDom.useParams();
12370
12573
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12388,7 +12591,7 @@ const TransferOwnershipForm = ({ order }) => {
12388
12591
  defaultValues: {
12389
12592
  customer_id: order.customer_id || ""
12390
12593
  },
12391
- resolver: zod.zodResolver(schema$1)
12594
+ resolver: zod.zodResolver(schema)
12392
12595
  });
12393
12596
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12394
12597
  const { handleSuccess } = useRouteModal();
@@ -12838,212 +13041,9 @@ const Illustration = () => {
12838
13041
  }
12839
13042
  );
12840
13043
  };
12841
- const schema$1 = objectType({
13044
+ const schema = objectType({
12842
13045
  customer_id: stringType().min(1)
12843
13046
  });
12844
- const ShippingAddress = () => {
12845
- const { id } = reactRouterDom.useParams();
12846
- const { order, isPending, isError, error } = useOrder(id, {
12847
- fields: "+shipping_address"
12848
- });
12849
- if (isError) {
12850
- throw error;
12851
- }
12852
- const isReady = !isPending && !!order;
12853
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12854
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12855
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12856
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12857
- ] }),
12858
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12859
- ] });
12860
- };
12861
- const ShippingAddressForm = ({ order }) => {
12862
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12863
- const form = reactHookForm.useForm({
12864
- defaultValues: {
12865
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12866
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12867
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12868
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12869
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12870
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12871
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12872
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12873
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12874
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12875
- },
12876
- resolver: zod.zodResolver(schema)
12877
- });
12878
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12879
- const { handleSuccess } = useRouteModal();
12880
- const onSubmit = form.handleSubmit(async (data) => {
12881
- await mutateAsync(
12882
- {
12883
- shipping_address: {
12884
- first_name: data.first_name,
12885
- last_name: data.last_name,
12886
- company: data.company,
12887
- address_1: data.address_1,
12888
- address_2: data.address_2,
12889
- city: data.city,
12890
- province: data.province,
12891
- country_code: data.country_code,
12892
- postal_code: data.postal_code,
12893
- phone: data.phone
12894
- }
12895
- },
12896
- {
12897
- onSuccess: () => {
12898
- handleSuccess();
12899
- },
12900
- onError: (error) => {
12901
- ui.toast.error(error.message);
12902
- }
12903
- }
12904
- );
12905
- });
12906
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12907
- KeyboundForm,
12908
- {
12909
- className: "flex flex-1 flex-col overflow-hidden",
12910
- onSubmit,
12911
- children: [
12912
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12913
- /* @__PURE__ */ jsxRuntime.jsx(
12914
- Form$2.Field,
12915
- {
12916
- control: form.control,
12917
- name: "country_code",
12918
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12919
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12920
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12921
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12922
- ] })
12923
- }
12924
- ),
12925
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12926
- /* @__PURE__ */ jsxRuntime.jsx(
12927
- Form$2.Field,
12928
- {
12929
- control: form.control,
12930
- name: "first_name",
12931
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12932
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12933
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12934
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12935
- ] })
12936
- }
12937
- ),
12938
- /* @__PURE__ */ jsxRuntime.jsx(
12939
- Form$2.Field,
12940
- {
12941
- control: form.control,
12942
- name: "last_name",
12943
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12944
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12945
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12946
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12947
- ] })
12948
- }
12949
- )
12950
- ] }),
12951
- /* @__PURE__ */ jsxRuntime.jsx(
12952
- Form$2.Field,
12953
- {
12954
- control: form.control,
12955
- name: "company",
12956
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12957
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12958
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12959
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12960
- ] })
12961
- }
12962
- ),
12963
- /* @__PURE__ */ jsxRuntime.jsx(
12964
- Form$2.Field,
12965
- {
12966
- control: form.control,
12967
- name: "address_1",
12968
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12969
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12970
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12971
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12972
- ] })
12973
- }
12974
- ),
12975
- /* @__PURE__ */ jsxRuntime.jsx(
12976
- Form$2.Field,
12977
- {
12978
- control: form.control,
12979
- name: "address_2",
12980
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12981
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12982
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12983
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12984
- ] })
12985
- }
12986
- ),
12987
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12988
- /* @__PURE__ */ jsxRuntime.jsx(
12989
- Form$2.Field,
12990
- {
12991
- control: form.control,
12992
- name: "postal_code",
12993
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12994
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12995
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12996
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12997
- ] })
12998
- }
12999
- ),
13000
- /* @__PURE__ */ jsxRuntime.jsx(
13001
- Form$2.Field,
13002
- {
13003
- control: form.control,
13004
- name: "city",
13005
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13006
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13007
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13008
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13009
- ] })
13010
- }
13011
- )
13012
- ] }),
13013
- /* @__PURE__ */ jsxRuntime.jsx(
13014
- Form$2.Field,
13015
- {
13016
- control: form.control,
13017
- name: "province",
13018
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13019
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13020
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13021
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13022
- ] })
13023
- }
13024
- ),
13025
- /* @__PURE__ */ jsxRuntime.jsx(
13026
- Form$2.Field,
13027
- {
13028
- control: form.control,
13029
- name: "phone",
13030
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13031
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13032
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13033
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13034
- ] })
13035
- }
13036
- )
13037
- ] }) }),
13038
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13039
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13040
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13041
- ] }) })
13042
- ]
13043
- }
13044
- ) });
13045
- };
13046
- const schema = addressSchema;
13047
13047
  const widgetModule = { widgets: [] };
13048
13048
  const routeModule = {
13049
13049
  routes: [
@@ -13068,10 +13068,6 @@ const routeModule = {
13068
13068
  Component: BillingAddress,
13069
13069
  path: "/draft-orders/:id/billing-address"
13070
13070
  },
13071
- {
13072
- Component: CustomItems,
13073
- path: "/draft-orders/:id/custom-items"
13074
- },
13075
13071
  {
13076
13072
  Component: Email,
13077
13073
  path: "/draft-orders/:id/email"
@@ -13081,28 +13077,32 @@ const routeModule = {
13081
13077
  path: "/draft-orders/:id/items"
13082
13078
  },
13083
13079
  {
13084
- Component: Metadata,
13085
- path: "/draft-orders/:id/metadata"
13080
+ Component: CustomItems,
13081
+ path: "/draft-orders/:id/custom-items"
13086
13082
  },
13087
13083
  {
13088
13084
  Component: Promotions,
13089
13085
  path: "/draft-orders/:id/promotions"
13090
13086
  },
13091
13087
  {
13092
- Component: SalesChannel,
13093
- path: "/draft-orders/:id/sales-channel"
13088
+ Component: Metadata,
13089
+ path: "/draft-orders/:id/metadata"
13094
13090
  },
13095
13091
  {
13096
13092
  Component: Shipping,
13097
13093
  path: "/draft-orders/:id/shipping"
13098
13094
  },
13099
13095
  {
13100
- Component: TransferOwnership,
13101
- path: "/draft-orders/:id/transfer-ownership"
13096
+ Component: SalesChannel,
13097
+ path: "/draft-orders/:id/sales-channel"
13102
13098
  },
13103
13099
  {
13104
13100
  Component: ShippingAddress,
13105
13101
  path: "/draft-orders/:id/shipping-address"
13102
+ },
13103
+ {
13104
+ Component: TransferOwnership,
13105
+ path: "/draft-orders/:id/transfer-ownership"
13106
13106
  }
13107
13107
  ]
13108
13108
  }