@medusajs/draft-order 2.11.2-preview-20251029090152 → 2.11.2-preview-20251029180202

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.
@@ -10756,10 +10756,54 @@ const customItemSchema = objectType({
10756
10756
  quantity: numberType(),
10757
10757
  unit_price: unionType([numberType(), stringType()])
10758
10758
  });
10759
- const Email = () => {
10759
+ const InlineTip = React.forwardRef(
10760
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10761
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10762
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10763
+ "div",
10764
+ {
10765
+ ref,
10766
+ className: ui.clx(
10767
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10768
+ className
10769
+ ),
10770
+ ...props,
10771
+ children: [
10772
+ /* @__PURE__ */ jsxRuntime.jsx(
10773
+ "div",
10774
+ {
10775
+ role: "presentation",
10776
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10777
+ "bg-ui-tag-orange-icon": variant === "warning"
10778
+ })
10779
+ }
10780
+ ),
10781
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10782
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10783
+ labelValue,
10784
+ ":"
10785
+ ] }),
10786
+ " ",
10787
+ children
10788
+ ] })
10789
+ ]
10790
+ }
10791
+ );
10792
+ }
10793
+ );
10794
+ InlineTip.displayName = "InlineTip";
10795
+ const MetadataFieldSchema = objectType({
10796
+ key: stringType(),
10797
+ disabled: booleanType().optional(),
10798
+ value: anyType()
10799
+ });
10800
+ const MetadataSchema = objectType({
10801
+ metadata: arrayType(MetadataFieldSchema)
10802
+ });
10803
+ const Metadata = () => {
10760
10804
  const { id } = reactRouterDom.useParams();
10761
10805
  const { order, isPending, isError, error } = useOrder(id, {
10762
- fields: "+email"
10806
+ fields: "metadata"
10763
10807
  });
10764
10808
  if (isError) {
10765
10809
  throw error;
@@ -10767,26 +10811,33 @@ const Email = () => {
10767
10811
  const isReady = !isPending && !!order;
10768
10812
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10769
10813
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10770
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
10771
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10814
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10815
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10772
10816
  ] }),
10773
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
10817
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10774
10818
  ] });
10775
10819
  };
10776
- const EmailForm = ({ order }) => {
10820
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10821
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10822
+ const MetadataForm = ({ orderId, metadata }) => {
10823
+ const { handleSuccess } = useRouteModal();
10824
+ const hasUneditableRows = getHasUneditableRows(metadata);
10825
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10777
10826
  const form = reactHookForm.useForm({
10778
10827
  defaultValues: {
10779
- email: order.email ?? ""
10828
+ metadata: getDefaultValues(metadata)
10780
10829
  },
10781
- resolver: zod.zodResolver(schema$3)
10830
+ resolver: zod.zodResolver(MetadataSchema)
10782
10831
  });
10783
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10784
- const { handleSuccess } = useRouteModal();
10785
- const onSubmit = form.handleSubmit(async (data) => {
10832
+ const handleSubmit = form.handleSubmit(async (data) => {
10833
+ const parsedData = parseValues(data);
10786
10834
  await mutateAsync(
10787
- { email: data.email },
10835
+ {
10836
+ metadata: parsedData
10837
+ },
10788
10838
  {
10789
10839
  onSuccess: () => {
10840
+ ui.toast.success("Metadata updated");
10790
10841
  handleSuccess();
10791
10842
  },
10792
10843
  onError: (error) => {
@@ -10795,46 +10846,277 @@ const EmailForm = ({ order }) => {
10795
10846
  }
10796
10847
  );
10797
10848
  });
10849
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
10850
+ control: form.control,
10851
+ name: "metadata"
10852
+ });
10853
+ function deleteRow(index) {
10854
+ remove(index);
10855
+ if (fields.length === 1) {
10856
+ insert(0, {
10857
+ key: "",
10858
+ value: "",
10859
+ disabled: false
10860
+ });
10861
+ }
10862
+ }
10863
+ function insertRow(index, position) {
10864
+ insert(index + (position === "above" ? 0 : 1), {
10865
+ key: "",
10866
+ value: "",
10867
+ disabled: false
10868
+ });
10869
+ }
10798
10870
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10799
10871
  KeyboundForm,
10800
10872
  {
10873
+ onSubmit: handleSubmit,
10801
10874
  className: "flex flex-1 flex-col overflow-hidden",
10802
- onSubmit,
10803
10875
  children: [
10804
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
10805
- Form$2.Field,
10806
- {
10807
- control: form.control,
10808
- name: "email",
10809
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10810
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
10811
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10812
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10813
- ] })
10814
- }
10815
- ) }),
10816
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10817
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10876
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10877
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10878
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10879
+ /* @__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" }) }),
10880
+ /* @__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" }) })
10881
+ ] }),
10882
+ fields.map((field, index) => {
10883
+ const isDisabled = field.disabled || false;
10884
+ let placeholder = "-";
10885
+ if (typeof field.value === "object") {
10886
+ placeholder = "{ ... }";
10887
+ }
10888
+ if (Array.isArray(field.value)) {
10889
+ placeholder = "[ ... ]";
10890
+ }
10891
+ return /* @__PURE__ */ jsxRuntime.jsx(
10892
+ ConditionalTooltip,
10893
+ {
10894
+ showTooltip: isDisabled,
10895
+ content: "This row is disabled because it contains non-primitive data.",
10896
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
10897
+ /* @__PURE__ */ jsxRuntime.jsxs(
10898
+ "div",
10899
+ {
10900
+ className: ui.clx("grid grid-cols-2 divide-x", {
10901
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
10902
+ }),
10903
+ children: [
10904
+ /* @__PURE__ */ jsxRuntime.jsx(
10905
+ Form$2.Field,
10906
+ {
10907
+ control: form.control,
10908
+ name: `metadata.${index}.key`,
10909
+ render: ({ field: field2 }) => {
10910
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10911
+ GridInput,
10912
+ {
10913
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
10914
+ ...field2,
10915
+ disabled: isDisabled,
10916
+ placeholder: "Key"
10917
+ }
10918
+ ) }) });
10919
+ }
10920
+ }
10921
+ ),
10922
+ /* @__PURE__ */ jsxRuntime.jsx(
10923
+ Form$2.Field,
10924
+ {
10925
+ control: form.control,
10926
+ name: `metadata.${index}.value`,
10927
+ render: ({ field: { value, ...field2 } }) => {
10928
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10929
+ GridInput,
10930
+ {
10931
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
10932
+ ...field2,
10933
+ value: isDisabled ? placeholder : value,
10934
+ disabled: isDisabled,
10935
+ placeholder: "Value"
10936
+ }
10937
+ ) }) });
10938
+ }
10939
+ }
10940
+ )
10941
+ ]
10942
+ }
10943
+ ),
10944
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
10945
+ /* @__PURE__ */ jsxRuntime.jsx(
10946
+ ui.DropdownMenu.Trigger,
10947
+ {
10948
+ className: ui.clx(
10949
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
10950
+ {
10951
+ hidden: isDisabled
10952
+ }
10953
+ ),
10954
+ disabled: isDisabled,
10955
+ asChild: true,
10956
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
10957
+ }
10958
+ ),
10959
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
10960
+ /* @__PURE__ */ jsxRuntime.jsxs(
10961
+ ui.DropdownMenu.Item,
10962
+ {
10963
+ className: "gap-x-2",
10964
+ onClick: () => insertRow(index, "above"),
10965
+ children: [
10966
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
10967
+ "Insert row above"
10968
+ ]
10969
+ }
10970
+ ),
10971
+ /* @__PURE__ */ jsxRuntime.jsxs(
10972
+ ui.DropdownMenu.Item,
10973
+ {
10974
+ className: "gap-x-2",
10975
+ onClick: () => insertRow(index, "below"),
10976
+ children: [
10977
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
10978
+ "Insert row below"
10979
+ ]
10980
+ }
10981
+ ),
10982
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
10983
+ /* @__PURE__ */ jsxRuntime.jsxs(
10984
+ ui.DropdownMenu.Item,
10985
+ {
10986
+ className: "gap-x-2",
10987
+ onClick: () => deleteRow(index),
10988
+ children: [
10989
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
10990
+ "Delete row"
10991
+ ]
10992
+ }
10993
+ )
10994
+ ] })
10995
+ ] })
10996
+ ] })
10997
+ },
10998
+ field.id
10999
+ );
11000
+ })
11001
+ ] }),
11002
+ 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." })
11003
+ ] }),
11004
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11005
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10818
11006
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10819
11007
  ] }) })
10820
11008
  ]
10821
11009
  }
10822
11010
  ) });
10823
11011
  };
10824
- const schema$3 = objectType({
10825
- email: stringType().email()
10826
- });
10827
- const PROMOTION_QUERY_KEY = "promotions";
10828
- const promotionsQueryKeys = {
10829
- list: (query2) => [
10830
- PROMOTION_QUERY_KEY,
10831
- query2 ? query2 : void 0
10832
- ],
10833
- detail: (id, query2) => [
10834
- PROMOTION_QUERY_KEY,
10835
- id,
10836
- query2 ? query2 : void 0
10837
- ]
11012
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11013
+ return /* @__PURE__ */ jsxRuntime.jsx(
11014
+ "input",
11015
+ {
11016
+ ref,
11017
+ ...props,
11018
+ autoComplete: "off",
11019
+ className: ui.clx(
11020
+ "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",
11021
+ className
11022
+ )
11023
+ }
11024
+ );
11025
+ });
11026
+ GridInput.displayName = "MetadataForm.GridInput";
11027
+ const PlaceholderInner = () => {
11028
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11029
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11030
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11031
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11032
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11033
+ ] }) })
11034
+ ] });
11035
+ };
11036
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11037
+ function getDefaultValues(metadata) {
11038
+ if (!metadata || !Object.keys(metadata).length) {
11039
+ return [
11040
+ {
11041
+ key: "",
11042
+ value: "",
11043
+ disabled: false
11044
+ }
11045
+ ];
11046
+ }
11047
+ return Object.entries(metadata).map(([key, value]) => {
11048
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11049
+ return {
11050
+ key,
11051
+ value,
11052
+ disabled: true
11053
+ };
11054
+ }
11055
+ let stringValue = value;
11056
+ if (typeof value !== "string") {
11057
+ stringValue = JSON.stringify(value);
11058
+ }
11059
+ return {
11060
+ key,
11061
+ value: stringValue,
11062
+ original_key: key
11063
+ };
11064
+ });
11065
+ }
11066
+ function parseValues(values) {
11067
+ const metadata = values.metadata;
11068
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11069
+ if (isEmpty) {
11070
+ return null;
11071
+ }
11072
+ const update = {};
11073
+ metadata.forEach((field) => {
11074
+ let key = field.key;
11075
+ let value = field.value;
11076
+ const disabled = field.disabled;
11077
+ if (!key || !value) {
11078
+ return;
11079
+ }
11080
+ if (disabled) {
11081
+ update[key] = value;
11082
+ return;
11083
+ }
11084
+ key = key.trim();
11085
+ value = value.trim();
11086
+ if (value === "true") {
11087
+ update[key] = true;
11088
+ } else if (value === "false") {
11089
+ update[key] = false;
11090
+ } else {
11091
+ const parsedNumber = parseFloat(value);
11092
+ if (!isNaN(parsedNumber)) {
11093
+ update[key] = parsedNumber;
11094
+ } else {
11095
+ update[key] = value;
11096
+ }
11097
+ }
11098
+ });
11099
+ return update;
11100
+ }
11101
+ function getHasUneditableRows(metadata) {
11102
+ if (!metadata) {
11103
+ return false;
11104
+ }
11105
+ return Object.values(metadata).some(
11106
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11107
+ );
11108
+ }
11109
+ const PROMOTION_QUERY_KEY = "promotions";
11110
+ const promotionsQueryKeys = {
11111
+ list: (query2) => [
11112
+ PROMOTION_QUERY_KEY,
11113
+ query2 ? query2 : void 0
11114
+ ],
11115
+ detail: (id, query2) => [
11116
+ PROMOTION_QUERY_KEY,
11117
+ id,
11118
+ query2 ? query2 : void 0
11119
+ ]
10838
11120
  };
10839
11121
  const usePromotions = (query2, options) => {
10840
11122
  const { data, ...rest } = reactQuery.useQuery({
@@ -11101,88 +11383,46 @@ function getPromotionIds(items, shippingMethods) {
11101
11383
  }
11102
11384
  return Array.from(promotionIds);
11103
11385
  }
11104
- const InlineTip = React.forwardRef(
11105
- ({ variant = "tip", label, className, children, ...props }, ref) => {
11106
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11107
- return /* @__PURE__ */ jsxRuntime.jsxs(
11108
- "div",
11109
- {
11110
- ref,
11111
- className: ui.clx(
11112
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11113
- className
11114
- ),
11115
- ...props,
11116
- children: [
11117
- /* @__PURE__ */ jsxRuntime.jsx(
11118
- "div",
11119
- {
11120
- role: "presentation",
11121
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11122
- "bg-ui-tag-orange-icon": variant === "warning"
11123
- })
11124
- }
11125
- ),
11126
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
11127
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11128
- labelValue,
11129
- ":"
11130
- ] }),
11131
- " ",
11132
- children
11133
- ] })
11134
- ]
11135
- }
11136
- );
11137
- }
11138
- );
11139
- InlineTip.displayName = "InlineTip";
11140
- const MetadataFieldSchema = objectType({
11141
- key: stringType(),
11142
- disabled: booleanType().optional(),
11143
- value: anyType()
11144
- });
11145
- const MetadataSchema = objectType({
11146
- metadata: arrayType(MetadataFieldSchema)
11147
- });
11148
- const Metadata = () => {
11386
+ const SalesChannel = () => {
11149
11387
  const { id } = reactRouterDom.useParams();
11150
- const { order, isPending, isError, error } = useOrder(id, {
11151
- fields: "metadata"
11152
- });
11388
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11389
+ id,
11390
+ {
11391
+ fields: "+sales_channel_id"
11392
+ },
11393
+ {
11394
+ enabled: !!id
11395
+ }
11396
+ );
11153
11397
  if (isError) {
11154
11398
  throw error;
11155
11399
  }
11156
- const isReady = !isPending && !!order;
11400
+ const ISrEADY = !!draft_order && !isPending;
11157
11401
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11158
11402
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11159
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
11160
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11403
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11404
+ /* @__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" }) })
11161
11405
  ] }),
11162
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11406
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11163
11407
  ] });
11164
11408
  };
11165
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11166
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11167
- const MetadataForm = ({ orderId, metadata }) => {
11168
- const { handleSuccess } = useRouteModal();
11169
- const hasUneditableRows = getHasUneditableRows(metadata);
11170
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11409
+ const SalesChannelForm = ({ order }) => {
11171
11410
  const form = reactHookForm.useForm({
11172
11411
  defaultValues: {
11173
- metadata: getDefaultValues(metadata)
11412
+ sales_channel_id: order.sales_channel_id || ""
11174
11413
  },
11175
- resolver: zod.zodResolver(MetadataSchema)
11414
+ resolver: zod.zodResolver(schema$3)
11176
11415
  });
11177
- const handleSubmit = form.handleSubmit(async (data) => {
11178
- const parsedData = parseValues(data);
11416
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11417
+ const { handleSuccess } = useRouteModal();
11418
+ const onSubmit = form.handleSubmit(async (data) => {
11179
11419
  await mutateAsync(
11180
11420
  {
11181
- metadata: parsedData
11421
+ sales_channel_id: data.sales_channel_id
11182
11422
  },
11183
11423
  {
11184
11424
  onSuccess: () => {
11185
- ui.toast.success("Metadata updated");
11425
+ ui.toast.success("Sales channel updated");
11186
11426
  handleSuccess();
11187
11427
  },
11188
11428
  onError: (error) => {
@@ -11191,319 +11431,11 @@ const MetadataForm = ({ orderId, metadata }) => {
11191
11431
  }
11192
11432
  );
11193
11433
  });
11194
- const { fields, insert, remove } = reactHookForm.useFieldArray({
11195
- control: form.control,
11196
- name: "metadata"
11197
- });
11198
- function deleteRow(index) {
11199
- remove(index);
11200
- if (fields.length === 1) {
11201
- insert(0, {
11202
- key: "",
11203
- value: "",
11204
- disabled: false
11205
- });
11206
- }
11207
- }
11208
- function insertRow(index, position) {
11209
- insert(index + (position === "above" ? 0 : 1), {
11210
- key: "",
11211
- value: "",
11212
- disabled: false
11213
- });
11214
- }
11215
11434
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11216
11435
  KeyboundForm,
11217
11436
  {
11218
- onSubmit: handleSubmit,
11219
11437
  className: "flex flex-1 flex-col overflow-hidden",
11220
- children: [
11221
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
11222
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
11223
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
11224
- /* @__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" }) }),
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_VALUE_LABEL_ID, children: "Value" }) })
11226
- ] }),
11227
- fields.map((field, index) => {
11228
- const isDisabled = field.disabled || false;
11229
- let placeholder = "-";
11230
- if (typeof field.value === "object") {
11231
- placeholder = "{ ... }";
11232
- }
11233
- if (Array.isArray(field.value)) {
11234
- placeholder = "[ ... ]";
11235
- }
11236
- return /* @__PURE__ */ jsxRuntime.jsx(
11237
- ConditionalTooltip,
11238
- {
11239
- showTooltip: isDisabled,
11240
- content: "This row is disabled because it contains non-primitive data.",
11241
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
11242
- /* @__PURE__ */ jsxRuntime.jsxs(
11243
- "div",
11244
- {
11245
- className: ui.clx("grid grid-cols-2 divide-x", {
11246
- "overflow-hidden rounded-b-lg": index === fields.length - 1
11247
- }),
11248
- children: [
11249
- /* @__PURE__ */ jsxRuntime.jsx(
11250
- Form$2.Field,
11251
- {
11252
- control: form.control,
11253
- name: `metadata.${index}.key`,
11254
- render: ({ field: field2 }) => {
11255
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11256
- GridInput,
11257
- {
11258
- "aria-labelledby": METADATA_KEY_LABEL_ID,
11259
- ...field2,
11260
- disabled: isDisabled,
11261
- placeholder: "Key"
11262
- }
11263
- ) }) });
11264
- }
11265
- }
11266
- ),
11267
- /* @__PURE__ */ jsxRuntime.jsx(
11268
- Form$2.Field,
11269
- {
11270
- control: form.control,
11271
- name: `metadata.${index}.value`,
11272
- render: ({ field: { value, ...field2 } }) => {
11273
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11274
- GridInput,
11275
- {
11276
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
11277
- ...field2,
11278
- value: isDisabled ? placeholder : value,
11279
- disabled: isDisabled,
11280
- placeholder: "Value"
11281
- }
11282
- ) }) });
11283
- }
11284
- }
11285
- )
11286
- ]
11287
- }
11288
- ),
11289
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
11290
- /* @__PURE__ */ jsxRuntime.jsx(
11291
- ui.DropdownMenu.Trigger,
11292
- {
11293
- className: ui.clx(
11294
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11295
- {
11296
- hidden: isDisabled
11297
- }
11298
- ),
11299
- disabled: isDisabled,
11300
- asChild: true,
11301
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
11302
- }
11303
- ),
11304
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
11305
- /* @__PURE__ */ jsxRuntime.jsxs(
11306
- ui.DropdownMenu.Item,
11307
- {
11308
- className: "gap-x-2",
11309
- onClick: () => insertRow(index, "above"),
11310
- children: [
11311
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
11312
- "Insert row above"
11313
- ]
11314
- }
11315
- ),
11316
- /* @__PURE__ */ jsxRuntime.jsxs(
11317
- ui.DropdownMenu.Item,
11318
- {
11319
- className: "gap-x-2",
11320
- onClick: () => insertRow(index, "below"),
11321
- children: [
11322
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
11323
- "Insert row below"
11324
- ]
11325
- }
11326
- ),
11327
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
11328
- /* @__PURE__ */ jsxRuntime.jsxs(
11329
- ui.DropdownMenu.Item,
11330
- {
11331
- className: "gap-x-2",
11332
- onClick: () => deleteRow(index),
11333
- children: [
11334
- /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
11335
- "Delete row"
11336
- ]
11337
- }
11338
- )
11339
- ] })
11340
- ] })
11341
- ] })
11342
- },
11343
- field.id
11344
- );
11345
- })
11346
- ] }),
11347
- 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." })
11348
- ] }),
11349
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11350
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11351
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11352
- ] }) })
11353
- ]
11354
- }
11355
- ) });
11356
- };
11357
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11358
- return /* @__PURE__ */ jsxRuntime.jsx(
11359
- "input",
11360
- {
11361
- ref,
11362
- ...props,
11363
- autoComplete: "off",
11364
- className: ui.clx(
11365
- "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",
11366
- className
11367
- )
11368
- }
11369
- );
11370
- });
11371
- GridInput.displayName = "MetadataForm.GridInput";
11372
- const PlaceholderInner = () => {
11373
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11374
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11375
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11376
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11377
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11378
- ] }) })
11379
- ] });
11380
- };
11381
- const EDITABLE_TYPES = ["string", "number", "boolean"];
11382
- function getDefaultValues(metadata) {
11383
- if (!metadata || !Object.keys(metadata).length) {
11384
- return [
11385
- {
11386
- key: "",
11387
- value: "",
11388
- disabled: false
11389
- }
11390
- ];
11391
- }
11392
- return Object.entries(metadata).map(([key, value]) => {
11393
- if (!EDITABLE_TYPES.includes(typeof value)) {
11394
- return {
11395
- key,
11396
- value,
11397
- disabled: true
11398
- };
11399
- }
11400
- let stringValue = value;
11401
- if (typeof value !== "string") {
11402
- stringValue = JSON.stringify(value);
11403
- }
11404
- return {
11405
- key,
11406
- value: stringValue,
11407
- original_key: key
11408
- };
11409
- });
11410
- }
11411
- function parseValues(values) {
11412
- const metadata = values.metadata;
11413
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11414
- if (isEmpty) {
11415
- return null;
11416
- }
11417
- const update = {};
11418
- metadata.forEach((field) => {
11419
- let key = field.key;
11420
- let value = field.value;
11421
- const disabled = field.disabled;
11422
- if (!key || !value) {
11423
- return;
11424
- }
11425
- if (disabled) {
11426
- update[key] = value;
11427
- return;
11428
- }
11429
- key = key.trim();
11430
- value = value.trim();
11431
- if (value === "true") {
11432
- update[key] = true;
11433
- } else if (value === "false") {
11434
- update[key] = false;
11435
- } else {
11436
- const parsedNumber = parseFloat(value);
11437
- if (!isNaN(parsedNumber)) {
11438
- update[key] = parsedNumber;
11439
- } else {
11440
- update[key] = value;
11441
- }
11442
- }
11443
- });
11444
- return update;
11445
- }
11446
- function getHasUneditableRows(metadata) {
11447
- if (!metadata) {
11448
- return false;
11449
- }
11450
- return Object.values(metadata).some(
11451
- (value) => !EDITABLE_TYPES.includes(typeof value)
11452
- );
11453
- }
11454
- const SalesChannel = () => {
11455
- const { id } = reactRouterDom.useParams();
11456
- const { draft_order, isPending, isError, error } = useDraftOrder(
11457
- id,
11458
- {
11459
- fields: "+sales_channel_id"
11460
- },
11461
- {
11462
- enabled: !!id
11463
- }
11464
- );
11465
- if (isError) {
11466
- throw error;
11467
- }
11468
- const ISrEADY = !!draft_order && !isPending;
11469
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11470
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11471
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11472
- /* @__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" }) })
11473
- ] }),
11474
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11475
- ] });
11476
- };
11477
- const SalesChannelForm = ({ order }) => {
11478
- const form = reactHookForm.useForm({
11479
- defaultValues: {
11480
- sales_channel_id: order.sales_channel_id || ""
11481
- },
11482
- resolver: zod.zodResolver(schema$2)
11483
- });
11484
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11485
- const { handleSuccess } = useRouteModal();
11486
- const onSubmit = form.handleSubmit(async (data) => {
11487
- await mutateAsync(
11488
- {
11489
- sales_channel_id: data.sales_channel_id
11490
- },
11491
- {
11492
- onSuccess: () => {
11493
- ui.toast.success("Sales channel updated");
11494
- handleSuccess();
11495
- },
11496
- onError: (error) => {
11497
- ui.toast.error(error.message);
11498
- }
11499
- }
11500
- );
11501
- });
11502
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11503
- KeyboundForm,
11504
- {
11505
- className: "flex flex-1 flex-col overflow-hidden",
11506
- onSubmit,
11438
+ onSubmit,
11507
11439
  children: [
11508
11440
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11509
11441
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -11554,17 +11486,220 @@ const SalesChannelField = ({ control, order }) => {
11554
11486
  }
11555
11487
  );
11556
11488
  };
11557
- const schema$2 = objectType({
11489
+ const schema$3 = objectType({
11558
11490
  sales_channel_id: stringType().min(1)
11559
11491
  });
11560
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11561
- const Shipping = () => {
11562
- var _a;
11492
+ const ShippingAddress = () => {
11563
11493
  const { id } = reactRouterDom.useParams();
11564
11494
  const { order, isPending, isError, error } = useOrder(id, {
11565
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11495
+ fields: "+shipping_address"
11566
11496
  });
11567
- const {
11497
+ if (isError) {
11498
+ throw error;
11499
+ }
11500
+ const isReady = !isPending && !!order;
11501
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11502
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11503
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11504
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11505
+ ] }),
11506
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11507
+ ] });
11508
+ };
11509
+ const ShippingAddressForm = ({ order }) => {
11510
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11511
+ const form = reactHookForm.useForm({
11512
+ defaultValues: {
11513
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11514
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11515
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11516
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11517
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11518
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11519
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11520
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11521
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11522
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11523
+ },
11524
+ resolver: zod.zodResolver(schema$2)
11525
+ });
11526
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11527
+ const { handleSuccess } = useRouteModal();
11528
+ const onSubmit = form.handleSubmit(async (data) => {
11529
+ await mutateAsync(
11530
+ {
11531
+ shipping_address: {
11532
+ first_name: data.first_name,
11533
+ last_name: data.last_name,
11534
+ company: data.company,
11535
+ address_1: data.address_1,
11536
+ address_2: data.address_2,
11537
+ city: data.city,
11538
+ province: data.province,
11539
+ country_code: data.country_code,
11540
+ postal_code: data.postal_code,
11541
+ phone: data.phone
11542
+ }
11543
+ },
11544
+ {
11545
+ onSuccess: () => {
11546
+ handleSuccess();
11547
+ },
11548
+ onError: (error) => {
11549
+ ui.toast.error(error.message);
11550
+ }
11551
+ }
11552
+ );
11553
+ });
11554
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11555
+ KeyboundForm,
11556
+ {
11557
+ className: "flex flex-1 flex-col overflow-hidden",
11558
+ onSubmit,
11559
+ children: [
11560
+ /* @__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: [
11561
+ /* @__PURE__ */ jsxRuntime.jsx(
11562
+ Form$2.Field,
11563
+ {
11564
+ control: form.control,
11565
+ name: "country_code",
11566
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11567
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11568
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11569
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11570
+ ] })
11571
+ }
11572
+ ),
11573
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11574
+ /* @__PURE__ */ jsxRuntime.jsx(
11575
+ Form$2.Field,
11576
+ {
11577
+ control: form.control,
11578
+ name: "first_name",
11579
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11580
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11581
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11582
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11583
+ ] })
11584
+ }
11585
+ ),
11586
+ /* @__PURE__ */ jsxRuntime.jsx(
11587
+ Form$2.Field,
11588
+ {
11589
+ control: form.control,
11590
+ name: "last_name",
11591
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11592
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11593
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11594
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11595
+ ] })
11596
+ }
11597
+ )
11598
+ ] }),
11599
+ /* @__PURE__ */ jsxRuntime.jsx(
11600
+ Form$2.Field,
11601
+ {
11602
+ control: form.control,
11603
+ name: "company",
11604
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11605
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11606
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11607
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11608
+ ] })
11609
+ }
11610
+ ),
11611
+ /* @__PURE__ */ jsxRuntime.jsx(
11612
+ Form$2.Field,
11613
+ {
11614
+ control: form.control,
11615
+ name: "address_1",
11616
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11617
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11618
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11619
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11620
+ ] })
11621
+ }
11622
+ ),
11623
+ /* @__PURE__ */ jsxRuntime.jsx(
11624
+ Form$2.Field,
11625
+ {
11626
+ control: form.control,
11627
+ name: "address_2",
11628
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11629
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11630
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11631
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11632
+ ] })
11633
+ }
11634
+ ),
11635
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11636
+ /* @__PURE__ */ jsxRuntime.jsx(
11637
+ Form$2.Field,
11638
+ {
11639
+ control: form.control,
11640
+ name: "postal_code",
11641
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11642
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11643
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11644
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11645
+ ] })
11646
+ }
11647
+ ),
11648
+ /* @__PURE__ */ jsxRuntime.jsx(
11649
+ Form$2.Field,
11650
+ {
11651
+ control: form.control,
11652
+ name: "city",
11653
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11654
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11655
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11656
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11657
+ ] })
11658
+ }
11659
+ )
11660
+ ] }),
11661
+ /* @__PURE__ */ jsxRuntime.jsx(
11662
+ Form$2.Field,
11663
+ {
11664
+ control: form.control,
11665
+ name: "province",
11666
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11667
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11668
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11669
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11670
+ ] })
11671
+ }
11672
+ ),
11673
+ /* @__PURE__ */ jsxRuntime.jsx(
11674
+ Form$2.Field,
11675
+ {
11676
+ control: form.control,
11677
+ name: "phone",
11678
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11679
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11680
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11681
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11682
+ ] })
11683
+ }
11684
+ )
11685
+ ] }) }),
11686
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11687
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11688
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11689
+ ] }) })
11690
+ ]
11691
+ }
11692
+ ) });
11693
+ };
11694
+ const schema$2 = addressSchema;
11695
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11696
+ const Shipping = () => {
11697
+ var _a;
11698
+ const { id } = reactRouterDom.useParams();
11699
+ const { order, isPending, isError, error } = useOrder(id, {
11700
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11701
+ });
11702
+ const {
11568
11703
  order: preview,
11569
11704
  isPending: isPreviewPending,
11570
11705
  isError: isPreviewError,
@@ -12215,358 +12350,155 @@ const ItemsPreview = ({ order, shippingProfileId }) => {
12215
12350
  ] })
12216
12351
  ] }) })
12217
12352
  ] })
12218
- ] });
12219
- };
12220
- const LocationField = ({ control, setValue }) => {
12221
- const locations = useComboboxData({
12222
- queryKey: ["locations"],
12223
- queryFn: async (params) => {
12224
- return await sdk.admin.stockLocation.list(params);
12225
- },
12226
- getOptions: (data) => {
12227
- return data.stock_locations.map((location) => ({
12228
- label: location.name,
12229
- value: location.id
12230
- }));
12231
- }
12232
- });
12233
- return /* @__PURE__ */ jsxRuntime.jsx(
12234
- Form$2.Field,
12235
- {
12236
- control,
12237
- name: "location_id",
12238
- render: ({ field: { onChange, ...field } }) => {
12239
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12240
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12241
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12242
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12243
- ] }),
12244
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12245
- Combobox,
12246
- {
12247
- options: locations.options,
12248
- fetchNextPage: locations.fetchNextPage,
12249
- isFetchingNextPage: locations.isFetchingNextPage,
12250
- searchValue: locations.searchValue,
12251
- onSearchValueChange: locations.onSearchValueChange,
12252
- placeholder: "Select location",
12253
- onChange: (value) => {
12254
- setValue("shipping_option_id", "", {
12255
- shouldDirty: true,
12256
- shouldTouch: true
12257
- });
12258
- onChange(value);
12259
- },
12260
- ...field
12261
- }
12262
- ) })
12263
- ] }) });
12264
- }
12265
- }
12266
- );
12267
- };
12268
- const ShippingOptionField = ({
12269
- shippingProfileId,
12270
- preview,
12271
- control
12272
- }) => {
12273
- var _a;
12274
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12275
- const shippingOptions = useComboboxData({
12276
- queryKey: ["shipping_options", locationId, shippingProfileId],
12277
- queryFn: async (params) => {
12278
- return await sdk.admin.shippingOption.list({
12279
- ...params,
12280
- stock_location_id: locationId,
12281
- shipping_profile_id: shippingProfileId
12282
- });
12283
- },
12284
- getOptions: (data) => {
12285
- return data.shipping_options.map((option) => {
12286
- var _a2;
12287
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12288
- (r) => r.attribute === "is_return" && r.value === "true"
12289
- )) {
12290
- return void 0;
12291
- }
12292
- return {
12293
- label: option.name,
12294
- value: option.id
12295
- };
12296
- }).filter(Boolean);
12297
- },
12298
- enabled: !!locationId && !!shippingProfileId,
12299
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12300
- });
12301
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12302
- return /* @__PURE__ */ jsxRuntime.jsx(
12303
- Form$2.Field,
12304
- {
12305
- control,
12306
- name: "shipping_option_id",
12307
- render: ({ field }) => {
12308
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12309
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12310
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12311
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12312
- ] }),
12313
- /* @__PURE__ */ jsxRuntime.jsx(
12314
- ConditionalTooltip,
12315
- {
12316
- content: tooltipContent,
12317
- showTooltip: !locationId || !shippingProfileId,
12318
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12319
- Combobox,
12320
- {
12321
- options: shippingOptions.options,
12322
- fetchNextPage: shippingOptions.fetchNextPage,
12323
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12324
- searchValue: shippingOptions.searchValue,
12325
- onSearchValueChange: shippingOptions.onSearchValueChange,
12326
- placeholder: "Select shipping option",
12327
- ...field,
12328
- disabled: !locationId || !shippingProfileId
12329
- }
12330
- ) }) })
12331
- }
12332
- )
12333
- ] }) });
12334
- }
12335
- }
12336
- );
12337
- };
12338
- const CustomAmountField = ({
12339
- control,
12340
- currencyCode
12341
- }) => {
12342
- return /* @__PURE__ */ jsxRuntime.jsx(
12343
- Form$2.Field,
12344
- {
12345
- control,
12346
- name: "custom_amount",
12347
- render: ({ field: { onChange, ...field } }) => {
12348
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12349
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12350
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12351
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12352
- ] }),
12353
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12354
- ui.CurrencyInput,
12355
- {
12356
- ...field,
12357
- onValueChange: (value) => onChange(value),
12358
- symbol: getNativeSymbol(currencyCode),
12359
- code: currencyCode
12360
- }
12361
- ) })
12362
- ] });
12363
- }
12364
- }
12365
- );
12366
- };
12367
- const ShippingAddress = () => {
12368
- const { id } = reactRouterDom.useParams();
12369
- const { order, isPending, isError, error } = useOrder(id, {
12370
- fields: "+shipping_address"
12371
- });
12372
- if (isError) {
12373
- throw error;
12374
- }
12375
- const isReady = !isPending && !!order;
12376
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12377
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12378
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12379
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12380
- ] }),
12381
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12382
- ] });
12383
- };
12384
- const ShippingAddressForm = ({ order }) => {
12385
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12386
- const form = reactHookForm.useForm({
12387
- defaultValues: {
12388
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12389
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12390
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12391
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12392
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12393
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12394
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12395
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12396
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12397
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12398
- },
12399
- resolver: zod.zodResolver(schema$1)
12400
- });
12401
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12402
- const { handleSuccess } = useRouteModal();
12403
- const onSubmit = form.handleSubmit(async (data) => {
12404
- await mutateAsync(
12405
- {
12406
- shipping_address: {
12407
- first_name: data.first_name,
12408
- last_name: data.last_name,
12409
- company: data.company,
12410
- address_1: data.address_1,
12411
- address_2: data.address_2,
12412
- city: data.city,
12413
- province: data.province,
12414
- country_code: data.country_code,
12415
- postal_code: data.postal_code,
12416
- phone: data.phone
12417
- }
12418
- },
12419
- {
12420
- onSuccess: () => {
12421
- handleSuccess();
12422
- },
12423
- onError: (error) => {
12424
- ui.toast.error(error.message);
12425
- }
12426
- }
12427
- );
12428
- });
12429
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12430
- KeyboundForm,
12431
- {
12432
- className: "flex flex-1 flex-col overflow-hidden",
12433
- onSubmit,
12434
- children: [
12435
- /* @__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: [
12436
- /* @__PURE__ */ jsxRuntime.jsx(
12437
- Form$2.Field,
12438
- {
12439
- control: form.control,
12440
- name: "country_code",
12441
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12442
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12443
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12444
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12445
- ] })
12446
- }
12447
- ),
12448
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12449
- /* @__PURE__ */ jsxRuntime.jsx(
12450
- Form$2.Field,
12451
- {
12452
- control: form.control,
12453
- name: "first_name",
12454
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12455
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12456
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12457
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12458
- ] })
12459
- }
12460
- ),
12461
- /* @__PURE__ */ jsxRuntime.jsx(
12462
- Form$2.Field,
12463
- {
12464
- control: form.control,
12465
- name: "last_name",
12466
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12467
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12468
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12469
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12470
- ] })
12471
- }
12472
- )
12473
- ] }),
12474
- /* @__PURE__ */ jsxRuntime.jsx(
12475
- Form$2.Field,
12476
- {
12477
- control: form.control,
12478
- name: "company",
12479
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12480
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12481
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12482
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12483
- ] })
12484
- }
12485
- ),
12486
- /* @__PURE__ */ jsxRuntime.jsx(
12487
- Form$2.Field,
12488
- {
12489
- control: form.control,
12490
- name: "address_1",
12491
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12492
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12493
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12494
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12495
- ] })
12496
- }
12497
- ),
12498
- /* @__PURE__ */ jsxRuntime.jsx(
12499
- Form$2.Field,
12500
- {
12501
- control: form.control,
12502
- name: "address_2",
12503
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12504
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12505
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12506
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12507
- ] })
12508
- }
12509
- ),
12510
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12511
- /* @__PURE__ */ jsxRuntime.jsx(
12512
- Form$2.Field,
12513
- {
12514
- control: form.control,
12515
- name: "postal_code",
12516
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12517
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12518
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12519
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12520
- ] })
12521
- }
12522
- ),
12523
- /* @__PURE__ */ jsxRuntime.jsx(
12524
- Form$2.Field,
12525
- {
12526
- control: form.control,
12527
- name: "city",
12528
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12529
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12530
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12531
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12532
- ] })
12533
- }
12534
- )
12353
+ ] });
12354
+ };
12355
+ const LocationField = ({ control, setValue }) => {
12356
+ const locations = useComboboxData({
12357
+ queryKey: ["locations"],
12358
+ queryFn: async (params) => {
12359
+ return await sdk.admin.stockLocation.list(params);
12360
+ },
12361
+ getOptions: (data) => {
12362
+ return data.stock_locations.map((location) => ({
12363
+ label: location.name,
12364
+ value: location.id
12365
+ }));
12366
+ }
12367
+ });
12368
+ return /* @__PURE__ */ jsxRuntime.jsx(
12369
+ Form$2.Field,
12370
+ {
12371
+ control,
12372
+ name: "location_id",
12373
+ render: ({ field: { onChange, ...field } }) => {
12374
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12375
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12376
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12377
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12535
12378
  ] }),
12536
- /* @__PURE__ */ jsxRuntime.jsx(
12537
- Form$2.Field,
12379
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12380
+ Combobox,
12538
12381
  {
12539
- control: form.control,
12540
- name: "province",
12541
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12542
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12543
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12544
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12545
- ] })
12382
+ options: locations.options,
12383
+ fetchNextPage: locations.fetchNextPage,
12384
+ isFetchingNextPage: locations.isFetchingNextPage,
12385
+ searchValue: locations.searchValue,
12386
+ onSearchValueChange: locations.onSearchValueChange,
12387
+ placeholder: "Select location",
12388
+ onChange: (value) => {
12389
+ setValue("shipping_option_id", "", {
12390
+ shouldDirty: true,
12391
+ shouldTouch: true
12392
+ });
12393
+ onChange(value);
12394
+ },
12395
+ ...field
12546
12396
  }
12547
- ),
12397
+ ) })
12398
+ ] }) });
12399
+ }
12400
+ }
12401
+ );
12402
+ };
12403
+ const ShippingOptionField = ({
12404
+ shippingProfileId,
12405
+ preview,
12406
+ control
12407
+ }) => {
12408
+ var _a;
12409
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12410
+ const shippingOptions = useComboboxData({
12411
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12412
+ queryFn: async (params) => {
12413
+ return await sdk.admin.shippingOption.list({
12414
+ ...params,
12415
+ stock_location_id: locationId,
12416
+ shipping_profile_id: shippingProfileId
12417
+ });
12418
+ },
12419
+ getOptions: (data) => {
12420
+ return data.shipping_options.map((option) => {
12421
+ var _a2;
12422
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12423
+ (r) => r.attribute === "is_return" && r.value === "true"
12424
+ )) {
12425
+ return void 0;
12426
+ }
12427
+ return {
12428
+ label: option.name,
12429
+ value: option.id
12430
+ };
12431
+ }).filter(Boolean);
12432
+ },
12433
+ enabled: !!locationId && !!shippingProfileId,
12434
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12435
+ });
12436
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12437
+ return /* @__PURE__ */ jsxRuntime.jsx(
12438
+ Form$2.Field,
12439
+ {
12440
+ control,
12441
+ name: "shipping_option_id",
12442
+ render: ({ field }) => {
12443
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12444
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12445
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12446
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12447
+ ] }),
12548
12448
  /* @__PURE__ */ jsxRuntime.jsx(
12549
- Form$2.Field,
12449
+ ConditionalTooltip,
12550
12450
  {
12551
- control: form.control,
12552
- name: "phone",
12553
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12554
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12555
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12556
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12557
- ] })
12451
+ content: tooltipContent,
12452
+ showTooltip: !locationId || !shippingProfileId,
12453
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12454
+ Combobox,
12455
+ {
12456
+ options: shippingOptions.options,
12457
+ fetchNextPage: shippingOptions.fetchNextPage,
12458
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12459
+ searchValue: shippingOptions.searchValue,
12460
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12461
+ placeholder: "Select shipping option",
12462
+ ...field,
12463
+ disabled: !locationId || !shippingProfileId
12464
+ }
12465
+ ) }) })
12558
12466
  }
12559
12467
  )
12560
- ] }) }),
12561
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12562
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12563
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12564
- ] }) })
12565
- ]
12468
+ ] }) });
12469
+ }
12566
12470
  }
12567
- ) });
12471
+ );
12472
+ };
12473
+ const CustomAmountField = ({
12474
+ control,
12475
+ currencyCode
12476
+ }) => {
12477
+ return /* @__PURE__ */ jsxRuntime.jsx(
12478
+ Form$2.Field,
12479
+ {
12480
+ control,
12481
+ name: "custom_amount",
12482
+ render: ({ field: { onChange, ...field } }) => {
12483
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12484
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12485
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12486
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12487
+ ] }),
12488
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12489
+ ui.CurrencyInput,
12490
+ {
12491
+ ...field,
12492
+ onValueChange: (value) => onChange(value),
12493
+ symbol: getNativeSymbol(currencyCode),
12494
+ code: currencyCode
12495
+ }
12496
+ ) })
12497
+ ] });
12498
+ }
12499
+ }
12500
+ );
12568
12501
  };
12569
- const schema$1 = addressSchema;
12570
12502
  const TransferOwnership = () => {
12571
12503
  const { id } = reactRouterDom.useParams();
12572
12504
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12590,7 +12522,7 @@ const TransferOwnershipForm = ({ order }) => {
12590
12522
  defaultValues: {
12591
12523
  customer_id: order.customer_id || ""
12592
12524
  },
12593
- resolver: zod.zodResolver(schema)
12525
+ resolver: zod.zodResolver(schema$1)
12594
12526
  });
12595
12527
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12596
12528
  const { handleSuccess } = useRouteModal();
@@ -13040,9 +12972,77 @@ const Illustration = () => {
13040
12972
  }
13041
12973
  );
13042
12974
  };
13043
- const schema = objectType({
12975
+ const schema$1 = objectType({
13044
12976
  customer_id: stringType().min(1)
13045
12977
  });
12978
+ const Email = () => {
12979
+ const { id } = reactRouterDom.useParams();
12980
+ const { order, isPending, isError, error } = useOrder(id, {
12981
+ fields: "+email"
12982
+ });
12983
+ if (isError) {
12984
+ throw error;
12985
+ }
12986
+ const isReady = !isPending && !!order;
12987
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12988
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12989
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
12990
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
12991
+ ] }),
12992
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
12993
+ ] });
12994
+ };
12995
+ const EmailForm = ({ order }) => {
12996
+ const form = reactHookForm.useForm({
12997
+ defaultValues: {
12998
+ email: order.email ?? ""
12999
+ },
13000
+ resolver: zod.zodResolver(schema)
13001
+ });
13002
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
13003
+ const { handleSuccess } = useRouteModal();
13004
+ const onSubmit = form.handleSubmit(async (data) => {
13005
+ await mutateAsync(
13006
+ { email: data.email },
13007
+ {
13008
+ onSuccess: () => {
13009
+ handleSuccess();
13010
+ },
13011
+ onError: (error) => {
13012
+ ui.toast.error(error.message);
13013
+ }
13014
+ }
13015
+ );
13016
+ });
13017
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
13018
+ KeyboundForm,
13019
+ {
13020
+ className: "flex flex-1 flex-col overflow-hidden",
13021
+ onSubmit,
13022
+ children: [
13023
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
13024
+ Form$2.Field,
13025
+ {
13026
+ control: form.control,
13027
+ name: "email",
13028
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13029
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
13030
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13031
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13032
+ ] })
13033
+ }
13034
+ ) }),
13035
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13036
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13037
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13038
+ ] }) })
13039
+ ]
13040
+ }
13041
+ ) });
13042
+ };
13043
+ const schema = objectType({
13044
+ email: stringType().email()
13045
+ });
13046
13046
  const widgetModule = { widgets: [] };
13047
13047
  const routeModule = {
13048
13048
  routes: [
@@ -13076,32 +13076,32 @@ const routeModule = {
13076
13076
  path: "/draft-orders/:id/items"
13077
13077
  },
13078
13078
  {
13079
- Component: Email,
13080
- path: "/draft-orders/:id/email"
13079
+ Component: Metadata,
13080
+ path: "/draft-orders/:id/metadata"
13081
13081
  },
13082
13082
  {
13083
13083
  Component: Promotions,
13084
13084
  path: "/draft-orders/:id/promotions"
13085
13085
  },
13086
- {
13087
- Component: Metadata,
13088
- path: "/draft-orders/:id/metadata"
13089
- },
13090
13086
  {
13091
13087
  Component: SalesChannel,
13092
13088
  path: "/draft-orders/:id/sales-channel"
13093
13089
  },
13094
- {
13095
- Component: Shipping,
13096
- path: "/draft-orders/:id/shipping"
13097
- },
13098
13090
  {
13099
13091
  Component: ShippingAddress,
13100
13092
  path: "/draft-orders/:id/shipping-address"
13101
13093
  },
13094
+ {
13095
+ Component: Shipping,
13096
+ path: "/draft-orders/:id/shipping"
13097
+ },
13102
13098
  {
13103
13099
  Component: TransferOwnership,
13104
13100
  path: "/draft-orders/:id/transfer-ownership"
13101
+ },
13102
+ {
13103
+ Component: Email,
13104
+ path: "/draft-orders/:id/email"
13105
13105
  }
13106
13106
  ]
13107
13107
  }