@medusajs/draft-order 3.0.0-preview-20251202120138 → 3.0.0-preview-20251202150141

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.
@@ -9776,74 +9776,6 @@ const CustomItemsForm = () => {
9776
9776
  const schema$4 = objectType({
9777
9777
  email: stringType().email()
9778
9778
  });
9779
- const Email = () => {
9780
- const { id } = useParams();
9781
- const { order, isPending, isError, error } = useOrder(id, {
9782
- fields: "+email"
9783
- });
9784
- if (isError) {
9785
- throw error;
9786
- }
9787
- const isReady = !isPending && !!order;
9788
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9789
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9790
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
9791
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9792
- ] }),
9793
- isReady && /* @__PURE__ */ jsx(EmailForm, { order })
9794
- ] });
9795
- };
9796
- const EmailForm = ({ order }) => {
9797
- const form = useForm({
9798
- defaultValues: {
9799
- email: order.email ?? ""
9800
- },
9801
- resolver: zodResolver(schema$3)
9802
- });
9803
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9804
- const { handleSuccess } = useRouteModal();
9805
- const onSubmit = form.handleSubmit(async (data) => {
9806
- await mutateAsync(
9807
- { email: data.email },
9808
- {
9809
- onSuccess: () => {
9810
- handleSuccess();
9811
- },
9812
- onError: (error) => {
9813
- toast.error(error.message);
9814
- }
9815
- }
9816
- );
9817
- });
9818
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9819
- KeyboundForm,
9820
- {
9821
- className: "flex flex-1 flex-col overflow-hidden",
9822
- onSubmit,
9823
- children: [
9824
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
9825
- Form$2.Field,
9826
- {
9827
- control: form.control,
9828
- name: "email",
9829
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9830
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
9831
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9832
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9833
- ] })
9834
- }
9835
- ) }),
9836
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9837
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9838
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9839
- ] }) })
9840
- ]
9841
- }
9842
- ) });
9843
- };
9844
- const schema$3 = objectType({
9845
- email: stringType().email()
9846
- });
9847
9779
  const NumberInput = forwardRef(
9848
9780
  ({
9849
9781
  value,
@@ -10818,54 +10750,10 @@ const customItemSchema = objectType({
10818
10750
  quantity: numberType(),
10819
10751
  unit_price: unionType([numberType(), stringType()])
10820
10752
  });
10821
- const InlineTip = forwardRef(
10822
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10823
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10824
- return /* @__PURE__ */ jsxs(
10825
- "div",
10826
- {
10827
- ref,
10828
- className: clx(
10829
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10830
- className
10831
- ),
10832
- ...props,
10833
- children: [
10834
- /* @__PURE__ */ jsx(
10835
- "div",
10836
- {
10837
- role: "presentation",
10838
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10839
- "bg-ui-tag-orange-icon": variant === "warning"
10840
- })
10841
- }
10842
- ),
10843
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10844
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10845
- labelValue,
10846
- ":"
10847
- ] }),
10848
- " ",
10849
- children
10850
- ] })
10851
- ]
10852
- }
10853
- );
10854
- }
10855
- );
10856
- InlineTip.displayName = "InlineTip";
10857
- const MetadataFieldSchema = objectType({
10858
- key: stringType(),
10859
- disabled: booleanType().optional(),
10860
- value: anyType()
10861
- });
10862
- const MetadataSchema = objectType({
10863
- metadata: arrayType(MetadataFieldSchema)
10864
- });
10865
- const Metadata = () => {
10753
+ const Email = () => {
10866
10754
  const { id } = useParams();
10867
10755
  const { order, isPending, isError, error } = useOrder(id, {
10868
- fields: "metadata"
10756
+ fields: "+email"
10869
10757
  });
10870
10758
  if (isError) {
10871
10759
  throw error;
@@ -10873,33 +10761,26 @@ const Metadata = () => {
10873
10761
  const isReady = !isPending && !!order;
10874
10762
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10875
10763
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10876
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10877
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10764
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
10765
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10878
10766
  ] }),
10879
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10767
+ isReady && /* @__PURE__ */ jsx(EmailForm, { order })
10880
10768
  ] });
10881
10769
  };
10882
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10883
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10884
- const MetadataForm = ({ orderId, metadata }) => {
10885
- const { handleSuccess } = useRouteModal();
10886
- const hasUneditableRows = getHasUneditableRows(metadata);
10887
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10770
+ const EmailForm = ({ order }) => {
10888
10771
  const form = useForm({
10889
10772
  defaultValues: {
10890
- metadata: getDefaultValues(metadata)
10773
+ email: order.email ?? ""
10891
10774
  },
10892
- resolver: zodResolver(MetadataSchema)
10775
+ resolver: zodResolver(schema$3)
10893
10776
  });
10894
- const handleSubmit = form.handleSubmit(async (data) => {
10895
- const parsedData = parseValues(data);
10777
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10778
+ const { handleSuccess } = useRouteModal();
10779
+ const onSubmit = form.handleSubmit(async (data) => {
10896
10780
  await mutateAsync(
10897
- {
10898
- metadata: parsedData
10899
- },
10781
+ { email: data.email },
10900
10782
  {
10901
10783
  onSuccess: () => {
10902
- toast.success("Metadata updated");
10903
10784
  handleSuccess();
10904
10785
  },
10905
10786
  onError: (error) => {
@@ -10908,266 +10789,35 @@ const MetadataForm = ({ orderId, metadata }) => {
10908
10789
  }
10909
10790
  );
10910
10791
  });
10911
- const { fields, insert, remove } = useFieldArray({
10912
- control: form.control,
10913
- name: "metadata"
10914
- });
10915
- function deleteRow(index) {
10916
- remove(index);
10917
- if (fields.length === 1) {
10918
- insert(0, {
10919
- key: "",
10920
- value: "",
10921
- disabled: false
10922
- });
10923
- }
10924
- }
10925
- function insertRow(index, position) {
10926
- insert(index + (position === "above" ? 0 : 1), {
10927
- key: "",
10928
- value: "",
10929
- disabled: false
10930
- });
10931
- }
10932
10792
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10933
10793
  KeyboundForm,
10934
10794
  {
10935
- onSubmit: handleSubmit,
10936
10795
  className: "flex flex-1 flex-col overflow-hidden",
10796
+ onSubmit,
10937
10797
  children: [
10938
- /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10939
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10940
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10941
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10942
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10943
- ] }),
10944
- fields.map((field, index) => {
10945
- const isDisabled = field.disabled || false;
10946
- let placeholder = "-";
10947
- if (typeof field.value === "object") {
10948
- placeholder = "{ ... }";
10949
- }
10950
- if (Array.isArray(field.value)) {
10951
- placeholder = "[ ... ]";
10952
- }
10953
- return /* @__PURE__ */ jsx(
10954
- ConditionalTooltip,
10955
- {
10956
- showTooltip: isDisabled,
10957
- content: "This row is disabled because it contains non-primitive data.",
10958
- children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
10959
- /* @__PURE__ */ jsxs(
10960
- "div",
10961
- {
10962
- className: clx("grid grid-cols-2 divide-x", {
10963
- "overflow-hidden rounded-b-lg": index === fields.length - 1
10964
- }),
10965
- children: [
10966
- /* @__PURE__ */ jsx(
10967
- Form$2.Field,
10968
- {
10969
- control: form.control,
10970
- name: `metadata.${index}.key`,
10971
- render: ({ field: field2 }) => {
10972
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10973
- GridInput,
10974
- {
10975
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10976
- ...field2,
10977
- disabled: isDisabled,
10978
- placeholder: "Key"
10979
- }
10980
- ) }) });
10981
- }
10982
- }
10983
- ),
10984
- /* @__PURE__ */ jsx(
10985
- Form$2.Field,
10986
- {
10987
- control: form.control,
10988
- name: `metadata.${index}.value`,
10989
- render: ({ field: { value, ...field2 } }) => {
10990
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10991
- GridInput,
10992
- {
10993
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
10994
- ...field2,
10995
- value: isDisabled ? placeholder : value,
10996
- disabled: isDisabled,
10997
- placeholder: "Value"
10998
- }
10999
- ) }) });
11000
- }
11001
- }
11002
- )
11003
- ]
11004
- }
11005
- ),
11006
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
11007
- /* @__PURE__ */ jsx(
11008
- DropdownMenu.Trigger,
11009
- {
11010
- className: clx(
11011
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11012
- {
11013
- hidden: isDisabled
11014
- }
11015
- ),
11016
- disabled: isDisabled,
11017
- asChild: true,
11018
- children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
11019
- }
11020
- ),
11021
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
11022
- /* @__PURE__ */ jsxs(
11023
- DropdownMenu.Item,
11024
- {
11025
- className: "gap-x-2",
11026
- onClick: () => insertRow(index, "above"),
11027
- children: [
11028
- /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
11029
- "Insert row above"
11030
- ]
11031
- }
11032
- ),
11033
- /* @__PURE__ */ jsxs(
11034
- DropdownMenu.Item,
11035
- {
11036
- className: "gap-x-2",
11037
- onClick: () => insertRow(index, "below"),
11038
- children: [
11039
- /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
11040
- "Insert row below"
11041
- ]
11042
- }
11043
- ),
11044
- /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
11045
- /* @__PURE__ */ jsxs(
11046
- DropdownMenu.Item,
11047
- {
11048
- className: "gap-x-2",
11049
- onClick: () => deleteRow(index),
11050
- children: [
11051
- /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
11052
- "Delete row"
11053
- ]
11054
- }
11055
- )
11056
- ] })
11057
- ] })
11058
- ] })
11059
- },
11060
- field.id
11061
- );
11062
- })
11063
- ] }),
11064
- hasUneditableRows && /* @__PURE__ */ 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." })
11065
- ] }),
11066
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11067
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10798
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
10799
+ Form$2.Field,
10800
+ {
10801
+ control: form.control,
10802
+ name: "email",
10803
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
10804
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
10805
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
10806
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10807
+ ] })
10808
+ }
10809
+ ) }),
10810
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10811
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11068
10812
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11069
10813
  ] }) })
11070
10814
  ]
11071
10815
  }
11072
10816
  ) });
11073
10817
  };
11074
- const GridInput = forwardRef(({ className, ...props }, ref) => {
11075
- return /* @__PURE__ */ jsx(
11076
- "input",
11077
- {
11078
- ref,
11079
- ...props,
11080
- autoComplete: "off",
11081
- className: clx(
11082
- "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",
11083
- className
11084
- )
11085
- }
11086
- );
10818
+ const schema$3 = objectType({
10819
+ email: stringType().email()
11087
10820
  });
11088
- GridInput.displayName = "MetadataForm.GridInput";
11089
- const PlaceholderInner = () => {
11090
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11091
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11092
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11093
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
11094
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
11095
- ] }) })
11096
- ] });
11097
- };
11098
- const EDITABLE_TYPES = ["string", "number", "boolean"];
11099
- function getDefaultValues(metadata) {
11100
- if (!metadata || !Object.keys(metadata).length) {
11101
- return [
11102
- {
11103
- key: "",
11104
- value: "",
11105
- disabled: false
11106
- }
11107
- ];
11108
- }
11109
- return Object.entries(metadata).map(([key, value]) => {
11110
- if (!EDITABLE_TYPES.includes(typeof value)) {
11111
- return {
11112
- key,
11113
- value,
11114
- disabled: true
11115
- };
11116
- }
11117
- let stringValue = value;
11118
- if (typeof value !== "string") {
11119
- stringValue = JSON.stringify(value);
11120
- }
11121
- return {
11122
- key,
11123
- value: stringValue,
11124
- original_key: key
11125
- };
11126
- });
11127
- }
11128
- function parseValues(values) {
11129
- const metadata = values.metadata;
11130
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11131
- if (isEmpty) {
11132
- return null;
11133
- }
11134
- const update = {};
11135
- metadata.forEach((field) => {
11136
- let key = field.key;
11137
- let value = field.value;
11138
- const disabled = field.disabled;
11139
- if (!key || !value) {
11140
- return;
11141
- }
11142
- if (disabled) {
11143
- update[key] = value;
11144
- return;
11145
- }
11146
- key = key.trim();
11147
- value = value.trim();
11148
- if (value === "true") {
11149
- update[key] = true;
11150
- } else if (value === "false") {
11151
- update[key] = false;
11152
- } else {
11153
- const parsedNumber = parseFloat(value);
11154
- if (!isNaN(parsedNumber)) {
11155
- update[key] = parsedNumber;
11156
- } else {
11157
- update[key] = value;
11158
- }
11159
- }
11160
- });
11161
- return update;
11162
- }
11163
- function getHasUneditableRows(metadata) {
11164
- if (!metadata) {
11165
- return false;
11166
- }
11167
- return Object.values(metadata).some(
11168
- (value) => !EDITABLE_TYPES.includes(typeof value)
11169
- );
11170
- }
11171
10821
  const PROMOTION_QUERY_KEY = "promotions";
11172
10822
  const promotionsQueryKeys = {
11173
10823
  list: (query2) => [
@@ -11445,46 +11095,88 @@ function getPromotionIds(items, shippingMethods) {
11445
11095
  }
11446
11096
  return Array.from(promotionIds);
11447
11097
  }
11448
- const SalesChannel = () => {
11098
+ const InlineTip = forwardRef(
11099
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
11100
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11101
+ return /* @__PURE__ */ jsxs(
11102
+ "div",
11103
+ {
11104
+ ref,
11105
+ className: clx(
11106
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11107
+ className
11108
+ ),
11109
+ ...props,
11110
+ children: [
11111
+ /* @__PURE__ */ jsx(
11112
+ "div",
11113
+ {
11114
+ role: "presentation",
11115
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11116
+ "bg-ui-tag-orange-icon": variant === "warning"
11117
+ })
11118
+ }
11119
+ ),
11120
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
11121
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11122
+ labelValue,
11123
+ ":"
11124
+ ] }),
11125
+ " ",
11126
+ children
11127
+ ] })
11128
+ ]
11129
+ }
11130
+ );
11131
+ }
11132
+ );
11133
+ InlineTip.displayName = "InlineTip";
11134
+ const MetadataFieldSchema = objectType({
11135
+ key: stringType(),
11136
+ disabled: booleanType().optional(),
11137
+ value: anyType()
11138
+ });
11139
+ const MetadataSchema = objectType({
11140
+ metadata: arrayType(MetadataFieldSchema)
11141
+ });
11142
+ const Metadata = () => {
11449
11143
  const { id } = useParams();
11450
- const { draft_order, isPending, isError, error } = useDraftOrder(
11451
- id,
11452
- {
11453
- fields: "+sales_channel_id"
11454
- },
11455
- {
11456
- enabled: !!id
11457
- }
11458
- );
11144
+ const { order, isPending, isError, error } = useOrder(id, {
11145
+ fields: "metadata"
11146
+ });
11459
11147
  if (isError) {
11460
11148
  throw error;
11461
11149
  }
11462
- const ISrEADY = !!draft_order && !isPending;
11150
+ const isReady = !isPending && !!order;
11463
11151
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11464
11152
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11465
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11466
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11153
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
11154
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11467
11155
  ] }),
11468
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11156
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11469
11157
  ] });
11470
11158
  };
11471
- const SalesChannelForm = ({ order }) => {
11159
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11160
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11161
+ const MetadataForm = ({ orderId, metadata }) => {
11162
+ const { handleSuccess } = useRouteModal();
11163
+ const hasUneditableRows = getHasUneditableRows(metadata);
11164
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11472
11165
  const form = useForm({
11473
11166
  defaultValues: {
11474
- sales_channel_id: order.sales_channel_id || ""
11167
+ metadata: getDefaultValues(metadata)
11475
11168
  },
11476
- resolver: zodResolver(schema$2)
11169
+ resolver: zodResolver(MetadataSchema)
11477
11170
  });
11478
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11479
- const { handleSuccess } = useRouteModal();
11480
- const onSubmit = form.handleSubmit(async (data) => {
11171
+ const handleSubmit = form.handleSubmit(async (data) => {
11172
+ const parsedData = parseValues(data);
11481
11173
  await mutateAsync(
11482
11174
  {
11483
- sales_channel_id: data.sales_channel_id
11175
+ metadata: parsedData
11484
11176
  },
11485
11177
  {
11486
11178
  onSuccess: () => {
11487
- toast.success("Sales channel updated");
11179
+ toast.success("Metadata updated");
11488
11180
  handleSuccess();
11489
11181
  },
11490
11182
  onError: (error) => {
@@ -11493,24 +11185,332 @@ const SalesChannelForm = ({ order }) => {
11493
11185
  }
11494
11186
  );
11495
11187
  });
11496
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11497
- KeyboundForm,
11498
- {
11499
- className: "flex flex-1 flex-col overflow-hidden",
11500
- onSubmit,
11501
- children: [
11502
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11503
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11504
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11505
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11506
- ] }) })
11507
- ]
11508
- }
11509
- ) });
11510
- };
11511
- const SalesChannelField = ({ control, order }) => {
11512
- const salesChannels = useComboboxData({
11513
- queryFn: async (params) => {
11188
+ const { fields, insert, remove } = useFieldArray({
11189
+ control: form.control,
11190
+ name: "metadata"
11191
+ });
11192
+ function deleteRow(index) {
11193
+ remove(index);
11194
+ if (fields.length === 1) {
11195
+ insert(0, {
11196
+ key: "",
11197
+ value: "",
11198
+ disabled: false
11199
+ });
11200
+ }
11201
+ }
11202
+ function insertRow(index, position) {
11203
+ insert(index + (position === "above" ? 0 : 1), {
11204
+ key: "",
11205
+ value: "",
11206
+ disabled: false
11207
+ });
11208
+ }
11209
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11210
+ KeyboundForm,
11211
+ {
11212
+ onSubmit: handleSubmit,
11213
+ className: "flex flex-1 flex-col overflow-hidden",
11214
+ children: [
11215
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
11216
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
11217
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
11218
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
11219
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
11220
+ ] }),
11221
+ fields.map((field, index) => {
11222
+ const isDisabled = field.disabled || false;
11223
+ let placeholder = "-";
11224
+ if (typeof field.value === "object") {
11225
+ placeholder = "{ ... }";
11226
+ }
11227
+ if (Array.isArray(field.value)) {
11228
+ placeholder = "[ ... ]";
11229
+ }
11230
+ return /* @__PURE__ */ jsx(
11231
+ ConditionalTooltip,
11232
+ {
11233
+ showTooltip: isDisabled,
11234
+ content: "This row is disabled because it contains non-primitive data.",
11235
+ children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
11236
+ /* @__PURE__ */ jsxs(
11237
+ "div",
11238
+ {
11239
+ className: clx("grid grid-cols-2 divide-x", {
11240
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
11241
+ }),
11242
+ children: [
11243
+ /* @__PURE__ */ jsx(
11244
+ Form$2.Field,
11245
+ {
11246
+ control: form.control,
11247
+ name: `metadata.${index}.key`,
11248
+ render: ({ field: field2 }) => {
11249
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11250
+ GridInput,
11251
+ {
11252
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
11253
+ ...field2,
11254
+ disabled: isDisabled,
11255
+ placeholder: "Key"
11256
+ }
11257
+ ) }) });
11258
+ }
11259
+ }
11260
+ ),
11261
+ /* @__PURE__ */ jsx(
11262
+ Form$2.Field,
11263
+ {
11264
+ control: form.control,
11265
+ name: `metadata.${index}.value`,
11266
+ render: ({ field: { value, ...field2 } }) => {
11267
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11268
+ GridInput,
11269
+ {
11270
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
11271
+ ...field2,
11272
+ value: isDisabled ? placeholder : value,
11273
+ disabled: isDisabled,
11274
+ placeholder: "Value"
11275
+ }
11276
+ ) }) });
11277
+ }
11278
+ }
11279
+ )
11280
+ ]
11281
+ }
11282
+ ),
11283
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
11284
+ /* @__PURE__ */ jsx(
11285
+ DropdownMenu.Trigger,
11286
+ {
11287
+ className: clx(
11288
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11289
+ {
11290
+ hidden: isDisabled
11291
+ }
11292
+ ),
11293
+ disabled: isDisabled,
11294
+ asChild: true,
11295
+ children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
11296
+ }
11297
+ ),
11298
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
11299
+ /* @__PURE__ */ jsxs(
11300
+ DropdownMenu.Item,
11301
+ {
11302
+ className: "gap-x-2",
11303
+ onClick: () => insertRow(index, "above"),
11304
+ children: [
11305
+ /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
11306
+ "Insert row above"
11307
+ ]
11308
+ }
11309
+ ),
11310
+ /* @__PURE__ */ jsxs(
11311
+ DropdownMenu.Item,
11312
+ {
11313
+ className: "gap-x-2",
11314
+ onClick: () => insertRow(index, "below"),
11315
+ children: [
11316
+ /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
11317
+ "Insert row below"
11318
+ ]
11319
+ }
11320
+ ),
11321
+ /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
11322
+ /* @__PURE__ */ jsxs(
11323
+ DropdownMenu.Item,
11324
+ {
11325
+ className: "gap-x-2",
11326
+ onClick: () => deleteRow(index),
11327
+ children: [
11328
+ /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
11329
+ "Delete row"
11330
+ ]
11331
+ }
11332
+ )
11333
+ ] })
11334
+ ] })
11335
+ ] })
11336
+ },
11337
+ field.id
11338
+ );
11339
+ })
11340
+ ] }),
11341
+ hasUneditableRows && /* @__PURE__ */ 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." })
11342
+ ] }),
11343
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11344
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11345
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11346
+ ] }) })
11347
+ ]
11348
+ }
11349
+ ) });
11350
+ };
11351
+ const GridInput = forwardRef(({ className, ...props }, ref) => {
11352
+ return /* @__PURE__ */ jsx(
11353
+ "input",
11354
+ {
11355
+ ref,
11356
+ ...props,
11357
+ autoComplete: "off",
11358
+ className: clx(
11359
+ "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",
11360
+ className
11361
+ )
11362
+ }
11363
+ );
11364
+ });
11365
+ GridInput.displayName = "MetadataForm.GridInput";
11366
+ const PlaceholderInner = () => {
11367
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11368
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11369
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11370
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
11371
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
11372
+ ] }) })
11373
+ ] });
11374
+ };
11375
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11376
+ function getDefaultValues(metadata) {
11377
+ if (!metadata || !Object.keys(metadata).length) {
11378
+ return [
11379
+ {
11380
+ key: "",
11381
+ value: "",
11382
+ disabled: false
11383
+ }
11384
+ ];
11385
+ }
11386
+ return Object.entries(metadata).map(([key, value]) => {
11387
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11388
+ return {
11389
+ key,
11390
+ value,
11391
+ disabled: true
11392
+ };
11393
+ }
11394
+ let stringValue = value;
11395
+ if (typeof value !== "string") {
11396
+ stringValue = JSON.stringify(value);
11397
+ }
11398
+ return {
11399
+ key,
11400
+ value: stringValue,
11401
+ original_key: key
11402
+ };
11403
+ });
11404
+ }
11405
+ function parseValues(values) {
11406
+ const metadata = values.metadata;
11407
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11408
+ if (isEmpty) {
11409
+ return null;
11410
+ }
11411
+ const update = {};
11412
+ metadata.forEach((field) => {
11413
+ let key = field.key;
11414
+ let value = field.value;
11415
+ const disabled = field.disabled;
11416
+ if (!key || !value) {
11417
+ return;
11418
+ }
11419
+ if (disabled) {
11420
+ update[key] = value;
11421
+ return;
11422
+ }
11423
+ key = key.trim();
11424
+ value = value.trim();
11425
+ if (value === "true") {
11426
+ update[key] = true;
11427
+ } else if (value === "false") {
11428
+ update[key] = false;
11429
+ } else {
11430
+ const parsedNumber = parseFloat(value);
11431
+ if (!isNaN(parsedNumber)) {
11432
+ update[key] = parsedNumber;
11433
+ } else {
11434
+ update[key] = value;
11435
+ }
11436
+ }
11437
+ });
11438
+ return update;
11439
+ }
11440
+ function getHasUneditableRows(metadata) {
11441
+ if (!metadata) {
11442
+ return false;
11443
+ }
11444
+ return Object.values(metadata).some(
11445
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11446
+ );
11447
+ }
11448
+ const SalesChannel = () => {
11449
+ const { id } = useParams();
11450
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11451
+ id,
11452
+ {
11453
+ fields: "+sales_channel_id"
11454
+ },
11455
+ {
11456
+ enabled: !!id
11457
+ }
11458
+ );
11459
+ if (isError) {
11460
+ throw error;
11461
+ }
11462
+ const ISrEADY = !!draft_order && !isPending;
11463
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11464
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11465
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11466
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11467
+ ] }),
11468
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11469
+ ] });
11470
+ };
11471
+ const SalesChannelForm = ({ order }) => {
11472
+ const form = useForm({
11473
+ defaultValues: {
11474
+ sales_channel_id: order.sales_channel_id || ""
11475
+ },
11476
+ resolver: zodResolver(schema$2)
11477
+ });
11478
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11479
+ const { handleSuccess } = useRouteModal();
11480
+ const onSubmit = form.handleSubmit(async (data) => {
11481
+ await mutateAsync(
11482
+ {
11483
+ sales_channel_id: data.sales_channel_id
11484
+ },
11485
+ {
11486
+ onSuccess: () => {
11487
+ toast.success("Sales channel updated");
11488
+ handleSuccess();
11489
+ },
11490
+ onError: (error) => {
11491
+ toast.error(error.message);
11492
+ }
11493
+ }
11494
+ );
11495
+ });
11496
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11497
+ KeyboundForm,
11498
+ {
11499
+ className: "flex flex-1 flex-col overflow-hidden",
11500
+ onSubmit,
11501
+ children: [
11502
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11503
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11504
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11505
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11506
+ ] }) })
11507
+ ]
11508
+ }
11509
+ ) });
11510
+ };
11511
+ const SalesChannelField = ({ control, order }) => {
11512
+ const salesChannels = useComboboxData({
11513
+ queryFn: async (params) => {
11514
11514
  return await sdk.admin.salesChannel.list(params);
11515
11515
  },
11516
11516
  queryKey: ["sales-channels"],
@@ -11533,24 +11533,227 @@ const SalesChannelField = ({ control, order }) => {
11533
11533
  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11534
11534
  Combobox,
11535
11535
  {
11536
- options: salesChannels.options,
11537
- fetchNextPage: salesChannels.fetchNextPage,
11538
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11539
- searchValue: salesChannels.searchValue,
11540
- onSearchValueChange: salesChannels.onSearchValueChange,
11541
- placeholder: "Select sales channel",
11542
- ...field
11536
+ options: salesChannels.options,
11537
+ fetchNextPage: salesChannels.fetchNextPage,
11538
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11539
+ searchValue: salesChannels.searchValue,
11540
+ onSearchValueChange: salesChannels.onSearchValueChange,
11541
+ placeholder: "Select sales channel",
11542
+ ...field
11543
+ }
11544
+ ) }),
11545
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11546
+ ] });
11547
+ }
11548
+ }
11549
+ );
11550
+ };
11551
+ const schema$2 = objectType({
11552
+ sales_channel_id: stringType().min(1)
11553
+ });
11554
+ const ShippingAddress = () => {
11555
+ const { id } = useParams();
11556
+ const { order, isPending, isError, error } = useOrder(id, {
11557
+ fields: "+shipping_address"
11558
+ });
11559
+ if (isError) {
11560
+ throw error;
11561
+ }
11562
+ const isReady = !isPending && !!order;
11563
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11564
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11565
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11566
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11567
+ ] }),
11568
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11569
+ ] });
11570
+ };
11571
+ const ShippingAddressForm = ({ order }) => {
11572
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11573
+ const form = useForm({
11574
+ defaultValues: {
11575
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11576
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11577
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11578
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11579
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11580
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11581
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11582
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11583
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11584
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11585
+ },
11586
+ resolver: zodResolver(schema$1)
11587
+ });
11588
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11589
+ const { handleSuccess } = useRouteModal();
11590
+ const onSubmit = form.handleSubmit(async (data) => {
11591
+ await mutateAsync(
11592
+ {
11593
+ shipping_address: {
11594
+ first_name: data.first_name,
11595
+ last_name: data.last_name,
11596
+ company: data.company,
11597
+ address_1: data.address_1,
11598
+ address_2: data.address_2,
11599
+ city: data.city,
11600
+ province: data.province,
11601
+ country_code: data.country_code,
11602
+ postal_code: data.postal_code,
11603
+ phone: data.phone
11604
+ }
11605
+ },
11606
+ {
11607
+ onSuccess: () => {
11608
+ handleSuccess();
11609
+ },
11610
+ onError: (error) => {
11611
+ toast.error(error.message);
11612
+ }
11613
+ }
11614
+ );
11615
+ });
11616
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11617
+ KeyboundForm,
11618
+ {
11619
+ className: "flex flex-1 flex-col overflow-hidden",
11620
+ onSubmit,
11621
+ children: [
11622
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
11623
+ /* @__PURE__ */ jsx(
11624
+ Form$2.Field,
11625
+ {
11626
+ control: form.control,
11627
+ name: "country_code",
11628
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11629
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11630
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11631
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11632
+ ] })
11633
+ }
11634
+ ),
11635
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11636
+ /* @__PURE__ */ jsx(
11637
+ Form$2.Field,
11638
+ {
11639
+ control: form.control,
11640
+ name: "first_name",
11641
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11642
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11643
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11644
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11645
+ ] })
11646
+ }
11647
+ ),
11648
+ /* @__PURE__ */ jsx(
11649
+ Form$2.Field,
11650
+ {
11651
+ control: form.control,
11652
+ name: "last_name",
11653
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11654
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11655
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11656
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11657
+ ] })
11658
+ }
11659
+ )
11660
+ ] }),
11661
+ /* @__PURE__ */ jsx(
11662
+ Form$2.Field,
11663
+ {
11664
+ control: form.control,
11665
+ name: "company",
11666
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11667
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11668
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11669
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11670
+ ] })
11671
+ }
11672
+ ),
11673
+ /* @__PURE__ */ jsx(
11674
+ Form$2.Field,
11675
+ {
11676
+ control: form.control,
11677
+ name: "address_1",
11678
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11679
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11680
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11681
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11682
+ ] })
11683
+ }
11684
+ ),
11685
+ /* @__PURE__ */ jsx(
11686
+ Form$2.Field,
11687
+ {
11688
+ control: form.control,
11689
+ name: "address_2",
11690
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11691
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11692
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11693
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11694
+ ] })
11695
+ }
11696
+ ),
11697
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11698
+ /* @__PURE__ */ jsx(
11699
+ Form$2.Field,
11700
+ {
11701
+ control: form.control,
11702
+ name: "postal_code",
11703
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11704
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11705
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11706
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11707
+ ] })
11708
+ }
11709
+ ),
11710
+ /* @__PURE__ */ jsx(
11711
+ Form$2.Field,
11712
+ {
11713
+ control: form.control,
11714
+ name: "city",
11715
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11716
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11717
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11718
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11719
+ ] })
11720
+ }
11721
+ )
11722
+ ] }),
11723
+ /* @__PURE__ */ jsx(
11724
+ Form$2.Field,
11725
+ {
11726
+ control: form.control,
11727
+ name: "province",
11728
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11729
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11730
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11731
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11732
+ ] })
11733
+ }
11734
+ ),
11735
+ /* @__PURE__ */ jsx(
11736
+ Form$2.Field,
11737
+ {
11738
+ control: form.control,
11739
+ name: "phone",
11740
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11741
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11742
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11743
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11744
+ ] })
11543
11745
  }
11544
- ) }),
11545
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11546
- ] });
11547
- }
11746
+ )
11747
+ ] }) }),
11748
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11749
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11750
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11751
+ ] }) })
11752
+ ]
11548
11753
  }
11549
- );
11754
+ ) });
11550
11755
  };
11551
- const schema$2 = objectType({
11552
- sales_channel_id: stringType().min(1)
11553
- });
11756
+ const schema$1 = addressSchema;
11554
11757
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11555
11758
  const Shipping = () => {
11556
11759
  var _a;
@@ -12358,209 +12561,6 @@ const CustomAmountField = ({
12358
12561
  }
12359
12562
  );
12360
12563
  };
12361
- const ShippingAddress = () => {
12362
- const { id } = useParams();
12363
- const { order, isPending, isError, error } = useOrder(id, {
12364
- fields: "+shipping_address"
12365
- });
12366
- if (isError) {
12367
- throw error;
12368
- }
12369
- const isReady = !isPending && !!order;
12370
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12371
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12372
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12373
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12374
- ] }),
12375
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12376
- ] });
12377
- };
12378
- const ShippingAddressForm = ({ order }) => {
12379
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12380
- const form = useForm({
12381
- defaultValues: {
12382
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12383
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12384
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12385
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12386
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12387
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12388
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12389
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12390
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12391
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12392
- },
12393
- resolver: zodResolver(schema$1)
12394
- });
12395
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12396
- const { handleSuccess } = useRouteModal();
12397
- const onSubmit = form.handleSubmit(async (data) => {
12398
- await mutateAsync(
12399
- {
12400
- shipping_address: {
12401
- first_name: data.first_name,
12402
- last_name: data.last_name,
12403
- company: data.company,
12404
- address_1: data.address_1,
12405
- address_2: data.address_2,
12406
- city: data.city,
12407
- province: data.province,
12408
- country_code: data.country_code,
12409
- postal_code: data.postal_code,
12410
- phone: data.phone
12411
- }
12412
- },
12413
- {
12414
- onSuccess: () => {
12415
- handleSuccess();
12416
- },
12417
- onError: (error) => {
12418
- toast.error(error.message);
12419
- }
12420
- }
12421
- );
12422
- });
12423
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12424
- KeyboundForm,
12425
- {
12426
- className: "flex flex-1 flex-col overflow-hidden",
12427
- onSubmit,
12428
- children: [
12429
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12430
- /* @__PURE__ */ jsx(
12431
- Form$2.Field,
12432
- {
12433
- control: form.control,
12434
- name: "country_code",
12435
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12436
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12437
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12438
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12439
- ] })
12440
- }
12441
- ),
12442
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12443
- /* @__PURE__ */ jsx(
12444
- Form$2.Field,
12445
- {
12446
- control: form.control,
12447
- name: "first_name",
12448
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12449
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12450
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12451
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12452
- ] })
12453
- }
12454
- ),
12455
- /* @__PURE__ */ jsx(
12456
- Form$2.Field,
12457
- {
12458
- control: form.control,
12459
- name: "last_name",
12460
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12461
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12462
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12463
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12464
- ] })
12465
- }
12466
- )
12467
- ] }),
12468
- /* @__PURE__ */ jsx(
12469
- Form$2.Field,
12470
- {
12471
- control: form.control,
12472
- name: "company",
12473
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12474
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12475
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12476
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12477
- ] })
12478
- }
12479
- ),
12480
- /* @__PURE__ */ jsx(
12481
- Form$2.Field,
12482
- {
12483
- control: form.control,
12484
- name: "address_1",
12485
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12486
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12487
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12488
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12489
- ] })
12490
- }
12491
- ),
12492
- /* @__PURE__ */ jsx(
12493
- Form$2.Field,
12494
- {
12495
- control: form.control,
12496
- name: "address_2",
12497
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12498
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12499
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12500
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12501
- ] })
12502
- }
12503
- ),
12504
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12505
- /* @__PURE__ */ jsx(
12506
- Form$2.Field,
12507
- {
12508
- control: form.control,
12509
- name: "postal_code",
12510
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12511
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12512
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12513
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12514
- ] })
12515
- }
12516
- ),
12517
- /* @__PURE__ */ jsx(
12518
- Form$2.Field,
12519
- {
12520
- control: form.control,
12521
- name: "city",
12522
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12523
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12524
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12525
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12526
- ] })
12527
- }
12528
- )
12529
- ] }),
12530
- /* @__PURE__ */ jsx(
12531
- Form$2.Field,
12532
- {
12533
- control: form.control,
12534
- name: "province",
12535
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12536
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12537
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12538
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12539
- ] })
12540
- }
12541
- ),
12542
- /* @__PURE__ */ jsx(
12543
- Form$2.Field,
12544
- {
12545
- control: form.control,
12546
- name: "phone",
12547
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12548
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12549
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12550
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12551
- ] })
12552
- }
12553
- )
12554
- ] }) }),
12555
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12556
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12557
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12558
- ] }) })
12559
- ]
12560
- }
12561
- ) });
12562
- };
12563
- const schema$1 = addressSchema;
12564
12564
  const TransferOwnership = () => {
12565
12565
  const { id } = useParams();
12566
12566
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -13065,34 +13065,34 @@ const routeModule = {
13065
13065
  Component: CustomItems,
13066
13066
  path: "/draft-orders/:id/custom-items"
13067
13067
  },
13068
- {
13069
- Component: Email,
13070
- path: "/draft-orders/:id/email"
13071
- },
13072
13068
  {
13073
13069
  Component: Items,
13074
13070
  path: "/draft-orders/:id/items"
13075
13071
  },
13076
13072
  {
13077
- Component: Metadata,
13078
- path: "/draft-orders/:id/metadata"
13073
+ Component: Email,
13074
+ path: "/draft-orders/:id/email"
13079
13075
  },
13080
13076
  {
13081
13077
  Component: Promotions,
13082
13078
  path: "/draft-orders/:id/promotions"
13083
13079
  },
13084
13080
  {
13085
- Component: SalesChannel,
13086
- path: "/draft-orders/:id/sales-channel"
13081
+ Component: Metadata,
13082
+ path: "/draft-orders/:id/metadata"
13087
13083
  },
13088
13084
  {
13089
- Component: Shipping,
13090
- path: "/draft-orders/:id/shipping"
13085
+ Component: SalesChannel,
13086
+ path: "/draft-orders/:id/sales-channel"
13091
13087
  },
13092
13088
  {
13093
13089
  Component: ShippingAddress,
13094
13090
  path: "/draft-orders/:id/shipping-address"
13095
13091
  },
13092
+ {
13093
+ Component: Shipping,
13094
+ path: "/draft-orders/:id/shipping"
13095
+ },
13096
13096
  {
13097
13097
  Component: TransferOwnership,
13098
13098
  path: "/draft-orders/:id/transfer-ownership"