@medusajs/draft-order 2.10.2-snapshot-20250902104934 → 2.10.2-snapshot-20250902105826

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.
@@ -9750,27 +9750,6 @@ const BillingAddressForm = ({ order }) => {
9750
9750
  ) });
9751
9751
  };
9752
9752
  const schema$5 = addressSchema;
9753
- const CustomItems = () => {
9754
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9755
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9756
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9757
- ] });
9758
- };
9759
- const CustomItemsForm = () => {
9760
- const form = reactHookForm.useForm({
9761
- resolver: zod.zodResolver(schema$4)
9762
- });
9763
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9764
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9765
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9766
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9767
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9768
- ] }) })
9769
- ] }) });
9770
- };
9771
- const schema$4 = objectType({
9772
- email: stringType().email()
9773
- });
9774
9753
  const Email = () => {
9775
9754
  const { id } = reactRouterDom.useParams();
9776
9755
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9793,7 +9772,7 @@ const EmailForm = ({ order }) => {
9793
9772
  defaultValues: {
9794
9773
  email: order.email ?? ""
9795
9774
  },
9796
- resolver: zod.zodResolver(schema$3)
9775
+ resolver: zod.zodResolver(schema$4)
9797
9776
  });
9798
9777
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9799
9778
  const { handleSuccess } = useRouteModal();
@@ -9836,7 +9815,7 @@ const EmailForm = ({ order }) => {
9836
9815
  }
9837
9816
  ) });
9838
9817
  };
9839
- const schema$3 = objectType({
9818
+ const schema$4 = objectType({
9840
9819
  email: stringType().email()
9841
9820
  });
9842
9821
  const NumberInput = React.forwardRef(
@@ -10813,392 +10792,115 @@ const customItemSchema = objectType({
10813
10792
  quantity: numberType(),
10814
10793
  unit_price: unionType([numberType(), stringType()])
10815
10794
  });
10816
- const PROMOTION_QUERY_KEY = "promotions";
10817
- const promotionsQueryKeys = {
10818
- list: (query2) => [
10819
- PROMOTION_QUERY_KEY,
10820
- query2 ? query2 : void 0
10821
- ],
10822
- detail: (id, query2) => [
10823
- PROMOTION_QUERY_KEY,
10824
- id,
10825
- query2 ? query2 : void 0
10826
- ]
10827
- };
10828
- const usePromotions = (query2, options) => {
10829
- const { data, ...rest } = reactQuery.useQuery({
10830
- queryKey: promotionsQueryKeys.list(query2),
10831
- queryFn: async () => sdk.admin.promotion.list(query2),
10832
- ...options
10833
- });
10834
- return { ...data, ...rest };
10835
- };
10836
- const Promotions = () => {
10795
+ const InlineTip = React.forwardRef(
10796
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10797
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10798
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10799
+ "div",
10800
+ {
10801
+ ref,
10802
+ className: ui.clx(
10803
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10804
+ className
10805
+ ),
10806
+ ...props,
10807
+ children: [
10808
+ /* @__PURE__ */ jsxRuntime.jsx(
10809
+ "div",
10810
+ {
10811
+ role: "presentation",
10812
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10813
+ "bg-ui-tag-orange-icon": variant === "warning"
10814
+ })
10815
+ }
10816
+ ),
10817
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10818
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10819
+ labelValue,
10820
+ ":"
10821
+ ] }),
10822
+ " ",
10823
+ children
10824
+ ] })
10825
+ ]
10826
+ }
10827
+ );
10828
+ }
10829
+ );
10830
+ InlineTip.displayName = "InlineTip";
10831
+ const MetadataFieldSchema = objectType({
10832
+ key: stringType(),
10833
+ disabled: booleanType().optional(),
10834
+ value: anyType()
10835
+ });
10836
+ const MetadataSchema = objectType({
10837
+ metadata: arrayType(MetadataFieldSchema)
10838
+ });
10839
+ const Metadata = () => {
10837
10840
  const { id } = reactRouterDom.useParams();
10838
- const {
10839
- order: preview,
10840
- isError: isPreviewError,
10841
- error: previewError
10842
- } = useOrderPreview(id, void 0);
10843
- useInitiateOrderEdit({ preview });
10844
- const { onCancel } = useCancelOrderEdit({ preview });
10845
- if (isPreviewError) {
10846
- throw previewError;
10841
+ const { order, isPending, isError, error } = useOrder(id, {
10842
+ fields: "metadata"
10843
+ });
10844
+ if (isError) {
10845
+ throw error;
10847
10846
  }
10848
- const isReady = !!preview;
10849
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
10850
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
10851
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
10847
+ const isReady = !isPending && !!order;
10848
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10849
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10850
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10851
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10852
+ ] }),
10853
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10852
10854
  ] });
10853
10855
  };
10854
- const PromotionForm = ({ preview }) => {
10855
- const { items, shipping_methods } = preview;
10856
- const [isSubmitting, setIsSubmitting] = React.useState(false);
10857
- const [comboboxValue, setComboboxValue] = React.useState("");
10856
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10857
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10858
+ const MetadataForm = ({ orderId, metadata }) => {
10858
10859
  const { handleSuccess } = useRouteModal();
10859
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10860
- const promoCodes = getPromotionCodes(items, shipping_methods);
10861
- const { promotions, isPending, isError, error } = usePromotions(
10862
- {
10863
- code: promoCodes
10864
- },
10865
- {
10866
- enabled: !!promoCodes.length
10867
- }
10868
- );
10869
- const comboboxData = useComboboxData({
10870
- queryKey: ["promotions", "combobox", promoCodes],
10871
- queryFn: async (params) => {
10872
- return await sdk.admin.promotion.list({
10873
- ...params,
10874
- code: {
10875
- $nin: promoCodes
10876
- }
10877
- });
10860
+ const hasUneditableRows = getHasUneditableRows(metadata);
10861
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10862
+ const form = reactHookForm.useForm({
10863
+ defaultValues: {
10864
+ metadata: getDefaultValues(metadata)
10878
10865
  },
10879
- getOptions: (data) => {
10880
- return data.promotions.map((promotion) => ({
10881
- label: promotion.code,
10882
- value: promotion.code
10883
- }));
10884
- }
10866
+ resolver: zod.zodResolver(MetadataSchema)
10885
10867
  });
10886
- const add = async (value) => {
10887
- if (!value) {
10888
- return;
10889
- }
10890
- addPromotions(
10868
+ const handleSubmit = form.handleSubmit(async (data) => {
10869
+ const parsedData = parseValues(data);
10870
+ await mutateAsync(
10891
10871
  {
10892
- promo_codes: [value]
10872
+ metadata: parsedData
10893
10873
  },
10894
10874
  {
10895
- onError: (e) => {
10896
- ui.toast.error(e.message);
10897
- comboboxData.onSearchValueChange("");
10898
- setComboboxValue("");
10899
- },
10900
10875
  onSuccess: () => {
10901
- comboboxData.onSearchValueChange("");
10902
- setComboboxValue("");
10876
+ ui.toast.success("Metadata updated");
10877
+ handleSuccess();
10878
+ },
10879
+ onError: (error) => {
10880
+ ui.toast.error(error.message);
10903
10881
  }
10904
10882
  }
10905
10883
  );
10906
- };
10907
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10908
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10909
- const onSubmit = async () => {
10910
- setIsSubmitting(true);
10911
- let requestSucceeded = false;
10912
- await requestOrderEdit(void 0, {
10913
- onError: (e) => {
10914
- ui.toast.error(e.message);
10915
- },
10916
- onSuccess: () => {
10917
- requestSucceeded = true;
10918
- }
10919
- });
10920
- if (!requestSucceeded) {
10921
- setIsSubmitting(false);
10922
- return;
10884
+ });
10885
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
10886
+ control: form.control,
10887
+ name: "metadata"
10888
+ });
10889
+ function deleteRow(index) {
10890
+ remove(index);
10891
+ if (fields.length === 1) {
10892
+ insert(0, {
10893
+ key: "",
10894
+ value: "",
10895
+ disabled: false
10896
+ });
10923
10897
  }
10924
- await confirmOrderEdit(void 0, {
10925
- onError: (e) => {
10926
- ui.toast.error(e.message);
10927
- },
10928
- onSuccess: () => {
10929
- handleSuccess();
10930
- },
10931
- onSettled: () => {
10932
- setIsSubmitting(false);
10933
- }
10934
- });
10935
- };
10936
- if (isError) {
10937
- throw error;
10938
- }
10939
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
10940
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
10941
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
10942
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
10943
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
10944
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
10945
- ] }),
10946
- /* @__PURE__ */ jsxRuntime.jsx(
10947
- Combobox,
10948
- {
10949
- id: "promotion-combobox",
10950
- "aria-describedby": "promotion-combobox-hint",
10951
- isFetchingNextPage: comboboxData.isFetchingNextPage,
10952
- fetchNextPage: comboboxData.fetchNextPage,
10953
- options: comboboxData.options,
10954
- onSearchValueChange: comboboxData.onSearchValueChange,
10955
- searchValue: comboboxData.searchValue,
10956
- disabled: comboboxData.disabled || isAddingPromotions,
10957
- onChange: add,
10958
- value: comboboxValue
10959
- }
10960
- )
10961
- ] }),
10962
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10963
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
10964
- PromotionItem,
10965
- {
10966
- promotion,
10967
- orderId: preview.id,
10968
- isLoading: isPending
10969
- },
10970
- promotion.id
10971
- )) })
10972
- ] }) }),
10973
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10974
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10975
- /* @__PURE__ */ jsxRuntime.jsx(
10976
- ui.Button,
10977
- {
10978
- size: "small",
10979
- type: "submit",
10980
- isLoading: isSubmitting || isAddingPromotions,
10981
- children: "Save"
10982
- }
10983
- )
10984
- ] }) })
10985
- ] });
10986
- };
10987
- const PromotionItem = ({
10988
- promotion,
10989
- orderId,
10990
- isLoading
10991
- }) => {
10992
- var _a;
10993
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
10994
- const onRemove = async () => {
10995
- removePromotions(
10996
- {
10997
- promo_codes: [promotion.code]
10998
- },
10999
- {
11000
- onError: (e) => {
11001
- ui.toast.error(e.message);
11002
- }
11003
- }
11004
- );
11005
- };
11006
- const displayValue = getDisplayValue(promotion);
11007
- return /* @__PURE__ */ jsxRuntime.jsxs(
11008
- "div",
11009
- {
11010
- className: ui.clx(
11011
- "px-3 py-2 rounded-lg bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between",
11012
- {
11013
- "animate-pulse": isLoading
11014
- }
11015
- ),
11016
- children: [
11017
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11018
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11019
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-ui-fg-subtle", children: [
11020
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11021
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11022
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11023
- ] }),
11024
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11025
- ] })
11026
- ] }),
11027
- /* @__PURE__ */ jsxRuntime.jsx(
11028
- ui.IconButton,
11029
- {
11030
- size: "small",
11031
- type: "button",
11032
- variant: "transparent",
11033
- onClick: onRemove,
11034
- isLoading: isPending || isLoading,
11035
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
11036
- }
11037
- )
11038
- ]
11039
- },
11040
- promotion.id
11041
- );
11042
- };
11043
- function getDisplayValue(promotion) {
11044
- var _a, _b, _c, _d;
11045
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11046
- if (!value) {
11047
- return null;
11048
- }
11049
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11050
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11051
- if (!currency) {
11052
- return null;
11053
- }
11054
- return getLocaleAmount(value, currency);
11055
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11056
- return formatPercentage(value);
11057
- }
11058
- return null;
11059
- }
11060
- const formatter = new Intl.NumberFormat([], {
11061
- style: "percent",
11062
- minimumFractionDigits: 2
11063
- });
11064
- const formatPercentage = (value, isPercentageValue = false) => {
11065
- let val = value || 0;
11066
- if (!isPercentageValue) {
11067
- val = val / 100;
11068
- }
11069
- return formatter.format(val);
11070
- };
11071
- function getPromotionCodes(items, shippingMethods) {
11072
- const codes = /* @__PURE__ */ new Set();
11073
- for (const item of items) {
11074
- if (item.adjustments) {
11075
- for (const adjustment of item.adjustments) {
11076
- if (adjustment.code) {
11077
- codes.add(adjustment.code);
11078
- }
11079
- }
11080
- }
11081
- }
11082
- for (const shippingMethod of shippingMethods) {
11083
- if (shippingMethod.adjustments) {
11084
- for (const adjustment of shippingMethod.adjustments) {
11085
- if (adjustment.code) {
11086
- codes.add(adjustment.code);
11087
- }
11088
- }
11089
- }
11090
- }
11091
- return Array.from(codes);
11092
- }
11093
- const InlineTip = React.forwardRef(
11094
- ({ variant = "tip", label, className, children, ...props }, ref) => {
11095
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11096
- return /* @__PURE__ */ jsxRuntime.jsxs(
11097
- "div",
11098
- {
11099
- ref,
11100
- className: ui.clx(
11101
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11102
- className
11103
- ),
11104
- ...props,
11105
- children: [
11106
- /* @__PURE__ */ jsxRuntime.jsx(
11107
- "div",
11108
- {
11109
- role: "presentation",
11110
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11111
- "bg-ui-tag-orange-icon": variant === "warning"
11112
- })
11113
- }
11114
- ),
11115
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
11116
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11117
- labelValue,
11118
- ":"
11119
- ] }),
11120
- " ",
11121
- children
11122
- ] })
11123
- ]
11124
- }
11125
- );
11126
- }
11127
- );
11128
- InlineTip.displayName = "InlineTip";
11129
- const MetadataFieldSchema = objectType({
11130
- key: stringType(),
11131
- disabled: booleanType().optional(),
11132
- value: anyType()
11133
- });
11134
- const MetadataSchema = objectType({
11135
- metadata: arrayType(MetadataFieldSchema)
11136
- });
11137
- const Metadata = () => {
11138
- const { id } = reactRouterDom.useParams();
11139
- const { order, isPending, isError, error } = useOrder(id, {
11140
- fields: "metadata"
11141
- });
11142
- if (isError) {
11143
- throw error;
11144
- }
11145
- const isReady = !isPending && !!order;
11146
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11147
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11148
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
11149
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11150
- ] }),
11151
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11152
- ] });
11153
- };
11154
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11155
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11156
- const MetadataForm = ({ orderId, metadata }) => {
11157
- const { handleSuccess } = useRouteModal();
11158
- const hasUneditableRows = getHasUneditableRows(metadata);
11159
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11160
- const form = reactHookForm.useForm({
11161
- defaultValues: {
11162
- metadata: getDefaultValues(metadata)
11163
- },
11164
- resolver: zod.zodResolver(MetadataSchema)
11165
- });
11166
- const handleSubmit = form.handleSubmit(async (data) => {
11167
- const parsedData = parseValues(data);
11168
- await mutateAsync(
11169
- {
11170
- metadata: parsedData
11171
- },
11172
- {
11173
- onSuccess: () => {
11174
- ui.toast.success("Metadata updated");
11175
- handleSuccess();
11176
- },
11177
- onError: (error) => {
11178
- ui.toast.error(error.message);
11179
- }
11180
- }
11181
- );
11182
- });
11183
- const { fields, insert, remove } = reactHookForm.useFieldArray({
11184
- control: form.control,
11185
- name: "metadata"
11186
- });
11187
- function deleteRow(index) {
11188
- remove(index);
11189
- if (fields.length === 1) {
11190
- insert(0, {
11191
- key: "",
11192
- value: "",
11193
- disabled: false
11194
- });
11195
- }
11196
- }
11197
- function insertRow(index, position) {
11198
- insert(index + (position === "above" ? 0 : 1), {
11199
- key: "",
11200
- value: "",
11201
- disabled: false
10898
+ }
10899
+ function insertRow(index, position) {
10900
+ insert(index + (position === "above" ? 0 : 1), {
10901
+ key: "",
10902
+ value: "",
10903
+ disabled: false
11202
10904
  });
11203
10905
  }
11204
10906
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11440,116 +11142,393 @@ function getHasUneditableRows(metadata) {
11440
11142
  (value) => !EDITABLE_TYPES.includes(typeof value)
11441
11143
  );
11442
11144
  }
11443
- const ShippingAddress = () => {
11444
- const { id } = reactRouterDom.useParams();
11445
- const { order, isPending, isError, error } = useOrder(id, {
11446
- fields: "+shipping_address"
11145
+ const PROMOTION_QUERY_KEY = "promotions";
11146
+ const promotionsQueryKeys = {
11147
+ list: (query2) => [
11148
+ PROMOTION_QUERY_KEY,
11149
+ query2 ? query2 : void 0
11150
+ ],
11151
+ detail: (id, query2) => [
11152
+ PROMOTION_QUERY_KEY,
11153
+ id,
11154
+ query2 ? query2 : void 0
11155
+ ]
11156
+ };
11157
+ const usePromotions = (query2, options) => {
11158
+ const { data, ...rest } = reactQuery.useQuery({
11159
+ queryKey: promotionsQueryKeys.list(query2),
11160
+ queryFn: async () => sdk.admin.promotion.list(query2),
11161
+ ...options
11447
11162
  });
11448
- if (isError) {
11449
- throw error;
11163
+ return { ...data, ...rest };
11164
+ };
11165
+ const Promotions = () => {
11166
+ const { id } = reactRouterDom.useParams();
11167
+ const {
11168
+ order: preview,
11169
+ isError: isPreviewError,
11170
+ error: previewError
11171
+ } = useOrderPreview(id, void 0);
11172
+ useInitiateOrderEdit({ preview });
11173
+ const { onCancel } = useCancelOrderEdit({ preview });
11174
+ if (isPreviewError) {
11175
+ throw previewError;
11450
11176
  }
11451
- const isReady = !isPending && !!order;
11452
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11453
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11454
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11455
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11456
- ] }),
11457
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11177
+ const isReady = !!preview;
11178
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
11179
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
11180
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
11458
11181
  ] });
11459
11182
  };
11460
- const ShippingAddressForm = ({ order }) => {
11461
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11462
- const form = reactHookForm.useForm({
11463
- defaultValues: {
11464
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11465
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11466
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11467
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11468
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11469
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11470
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11471
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11472
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11473
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11183
+ const PromotionForm = ({ preview }) => {
11184
+ const { items, shipping_methods } = preview;
11185
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11186
+ const [comboboxValue, setComboboxValue] = React.useState("");
11187
+ const { handleSuccess } = useRouteModal();
11188
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11189
+ const promoCodes = getPromotionCodes(items, shipping_methods);
11190
+ const { promotions, isPending, isError, error } = usePromotions(
11191
+ {
11192
+ code: promoCodes
11474
11193
  },
11475
- resolver: zod.zodResolver(schema$2)
11194
+ {
11195
+ enabled: !!promoCodes.length
11196
+ }
11197
+ );
11198
+ const comboboxData = useComboboxData({
11199
+ queryKey: ["promotions", "combobox", promoCodes],
11200
+ queryFn: async (params) => {
11201
+ return await sdk.admin.promotion.list({
11202
+ ...params,
11203
+ code: {
11204
+ $nin: promoCodes
11205
+ }
11206
+ });
11207
+ },
11208
+ getOptions: (data) => {
11209
+ return data.promotions.map((promotion) => ({
11210
+ label: promotion.code,
11211
+ value: promotion.code
11212
+ }));
11213
+ }
11476
11214
  });
11477
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11478
- const { handleSuccess } = useRouteModal();
11479
- const onSubmit = form.handleSubmit(async (data) => {
11480
- await mutateAsync(
11215
+ const add = async (value) => {
11216
+ if (!value) {
11217
+ return;
11218
+ }
11219
+ addPromotions(
11481
11220
  {
11482
- shipping_address: {
11483
- first_name: data.first_name,
11484
- last_name: data.last_name,
11485
- company: data.company,
11486
- address_1: data.address_1,
11487
- address_2: data.address_2,
11488
- city: data.city,
11489
- province: data.province,
11490
- country_code: data.country_code,
11491
- postal_code: data.postal_code,
11492
- phone: data.phone
11493
- }
11221
+ promo_codes: [value]
11494
11222
  },
11495
11223
  {
11224
+ onError: (e) => {
11225
+ ui.toast.error(e.message);
11226
+ comboboxData.onSearchValueChange("");
11227
+ setComboboxValue("");
11228
+ },
11496
11229
  onSuccess: () => {
11497
- handleSuccess();
11230
+ comboboxData.onSearchValueChange("");
11231
+ setComboboxValue("");
11232
+ }
11233
+ }
11234
+ );
11235
+ };
11236
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11237
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11238
+ const onSubmit = async () => {
11239
+ setIsSubmitting(true);
11240
+ let requestSucceeded = false;
11241
+ await requestOrderEdit(void 0, {
11242
+ onError: (e) => {
11243
+ ui.toast.error(e.message);
11244
+ },
11245
+ onSuccess: () => {
11246
+ requestSucceeded = true;
11247
+ }
11248
+ });
11249
+ if (!requestSucceeded) {
11250
+ setIsSubmitting(false);
11251
+ return;
11252
+ }
11253
+ await confirmOrderEdit(void 0, {
11254
+ onError: (e) => {
11255
+ ui.toast.error(e.message);
11256
+ },
11257
+ onSuccess: () => {
11258
+ handleSuccess();
11259
+ },
11260
+ onSettled: () => {
11261
+ setIsSubmitting(false);
11262
+ }
11263
+ });
11264
+ };
11265
+ if (isError) {
11266
+ throw error;
11267
+ }
11268
+ return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11269
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
11270
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
11271
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11272
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11273
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11274
+ ] }),
11275
+ /* @__PURE__ */ jsxRuntime.jsx(
11276
+ Combobox,
11277
+ {
11278
+ id: "promotion-combobox",
11279
+ "aria-describedby": "promotion-combobox-hint",
11280
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
11281
+ fetchNextPage: comboboxData.fetchNextPage,
11282
+ options: comboboxData.options,
11283
+ onSearchValueChange: comboboxData.onSearchValueChange,
11284
+ searchValue: comboboxData.searchValue,
11285
+ disabled: comboboxData.disabled || isAddingPromotions,
11286
+ onChange: add,
11287
+ value: comboboxValue
11288
+ }
11289
+ )
11290
+ ] }),
11291
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11292
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
11293
+ PromotionItem,
11294
+ {
11295
+ promotion,
11296
+ orderId: preview.id,
11297
+ isLoading: isPending
11498
11298
  },
11499
- onError: (error) => {
11500
- ui.toast.error(error.message);
11299
+ promotion.id
11300
+ )) })
11301
+ ] }) }),
11302
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11303
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11304
+ /* @__PURE__ */ jsxRuntime.jsx(
11305
+ ui.Button,
11306
+ {
11307
+ size: "small",
11308
+ type: "submit",
11309
+ isLoading: isSubmitting || isAddingPromotions,
11310
+ children: "Save"
11311
+ }
11312
+ )
11313
+ ] }) })
11314
+ ] });
11315
+ };
11316
+ const PromotionItem = ({
11317
+ promotion,
11318
+ orderId,
11319
+ isLoading
11320
+ }) => {
11321
+ var _a;
11322
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11323
+ const onRemove = async () => {
11324
+ removePromotions(
11325
+ {
11326
+ promo_codes: [promotion.code]
11327
+ },
11328
+ {
11329
+ onError: (e) => {
11330
+ ui.toast.error(e.message);
11501
11331
  }
11502
11332
  }
11503
11333
  );
11504
- });
11505
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11506
- KeyboundForm,
11334
+ };
11335
+ const displayValue = getDisplayValue(promotion);
11336
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11337
+ "div",
11507
11338
  {
11508
- className: "flex flex-1 flex-col overflow-hidden",
11509
- onSubmit,
11339
+ className: ui.clx(
11340
+ "px-3 py-2 rounded-lg bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between",
11341
+ {
11342
+ "animate-pulse": isLoading
11343
+ }
11344
+ ),
11510
11345
  children: [
11511
- /* @__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: [
11512
- /* @__PURE__ */ jsxRuntime.jsx(
11513
- Form$2.Field,
11514
- {
11515
- control: form.control,
11516
- name: "country_code",
11517
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11518
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11519
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11520
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11521
- ] })
11522
- }
11523
- ),
11524
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11525
- /* @__PURE__ */ jsxRuntime.jsx(
11526
- Form$2.Field,
11527
- {
11528
- control: form.control,
11529
- name: "first_name",
11530
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11531
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11532
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11533
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11534
- ] })
11535
- }
11536
- ),
11537
- /* @__PURE__ */ jsxRuntime.jsx(
11538
- Form$2.Field,
11539
- {
11540
- control: form.control,
11541
- name: "last_name",
11542
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11543
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11544
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11545
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11546
- ] })
11547
- }
11548
- )
11549
- ] }),
11550
- /* @__PURE__ */ jsxRuntime.jsx(
11551
- Form$2.Field,
11552
- {
11346
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11347
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11348
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-ui-fg-subtle", children: [
11349
+ displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11350
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11351
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11352
+ ] }),
11353
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11354
+ ] })
11355
+ ] }),
11356
+ /* @__PURE__ */ jsxRuntime.jsx(
11357
+ ui.IconButton,
11358
+ {
11359
+ size: "small",
11360
+ type: "button",
11361
+ variant: "transparent",
11362
+ onClick: onRemove,
11363
+ isLoading: isPending || isLoading,
11364
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
11365
+ }
11366
+ )
11367
+ ]
11368
+ },
11369
+ promotion.id
11370
+ );
11371
+ };
11372
+ function getDisplayValue(promotion) {
11373
+ var _a, _b, _c, _d;
11374
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11375
+ if (!value) {
11376
+ return null;
11377
+ }
11378
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11379
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11380
+ if (!currency) {
11381
+ return null;
11382
+ }
11383
+ return getLocaleAmount(value, currency);
11384
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11385
+ return formatPercentage(value);
11386
+ }
11387
+ return null;
11388
+ }
11389
+ const formatter = new Intl.NumberFormat([], {
11390
+ style: "percent",
11391
+ minimumFractionDigits: 2
11392
+ });
11393
+ const formatPercentage = (value, isPercentageValue = false) => {
11394
+ let val = value || 0;
11395
+ if (!isPercentageValue) {
11396
+ val = val / 100;
11397
+ }
11398
+ return formatter.format(val);
11399
+ };
11400
+ function getPromotionCodes(items, shippingMethods) {
11401
+ const codes = /* @__PURE__ */ new Set();
11402
+ for (const item of items) {
11403
+ if (item.adjustments) {
11404
+ for (const adjustment of item.adjustments) {
11405
+ if (adjustment.code) {
11406
+ codes.add(adjustment.code);
11407
+ }
11408
+ }
11409
+ }
11410
+ }
11411
+ for (const shippingMethod of shippingMethods) {
11412
+ if (shippingMethod.adjustments) {
11413
+ for (const adjustment of shippingMethod.adjustments) {
11414
+ if (adjustment.code) {
11415
+ codes.add(adjustment.code);
11416
+ }
11417
+ }
11418
+ }
11419
+ }
11420
+ return Array.from(codes);
11421
+ }
11422
+ const ShippingAddress = () => {
11423
+ const { id } = reactRouterDom.useParams();
11424
+ const { order, isPending, isError, error } = useOrder(id, {
11425
+ fields: "+shipping_address"
11426
+ });
11427
+ if (isError) {
11428
+ throw error;
11429
+ }
11430
+ const isReady = !isPending && !!order;
11431
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11432
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11433
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11434
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11435
+ ] }),
11436
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11437
+ ] });
11438
+ };
11439
+ const ShippingAddressForm = ({ order }) => {
11440
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11441
+ const form = reactHookForm.useForm({
11442
+ defaultValues: {
11443
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11444
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11445
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11446
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11447
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11448
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11449
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11450
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11451
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11452
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11453
+ },
11454
+ resolver: zod.zodResolver(schema$3)
11455
+ });
11456
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11457
+ const { handleSuccess } = useRouteModal();
11458
+ const onSubmit = form.handleSubmit(async (data) => {
11459
+ await mutateAsync(
11460
+ {
11461
+ shipping_address: {
11462
+ first_name: data.first_name,
11463
+ last_name: data.last_name,
11464
+ company: data.company,
11465
+ address_1: data.address_1,
11466
+ address_2: data.address_2,
11467
+ city: data.city,
11468
+ province: data.province,
11469
+ country_code: data.country_code,
11470
+ postal_code: data.postal_code,
11471
+ phone: data.phone
11472
+ }
11473
+ },
11474
+ {
11475
+ onSuccess: () => {
11476
+ handleSuccess();
11477
+ },
11478
+ onError: (error) => {
11479
+ ui.toast.error(error.message);
11480
+ }
11481
+ }
11482
+ );
11483
+ });
11484
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11485
+ KeyboundForm,
11486
+ {
11487
+ className: "flex flex-1 flex-col overflow-hidden",
11488
+ onSubmit,
11489
+ children: [
11490
+ /* @__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: [
11491
+ /* @__PURE__ */ jsxRuntime.jsx(
11492
+ Form$2.Field,
11493
+ {
11494
+ control: form.control,
11495
+ name: "country_code",
11496
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11497
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11498
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11499
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11500
+ ] })
11501
+ }
11502
+ ),
11503
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11504
+ /* @__PURE__ */ jsxRuntime.jsx(
11505
+ Form$2.Field,
11506
+ {
11507
+ control: form.control,
11508
+ name: "first_name",
11509
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11510
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11511
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11512
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11513
+ ] })
11514
+ }
11515
+ ),
11516
+ /* @__PURE__ */ jsxRuntime.jsx(
11517
+ Form$2.Field,
11518
+ {
11519
+ control: form.control,
11520
+ name: "last_name",
11521
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11522
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11523
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11524
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11525
+ ] })
11526
+ }
11527
+ )
11528
+ ] }),
11529
+ /* @__PURE__ */ jsxRuntime.jsx(
11530
+ Form$2.Field,
11531
+ {
11553
11532
  control: form.control,
11554
11533
  name: "company",
11555
11534
  render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
@@ -11642,585 +11621,109 @@ const ShippingAddressForm = ({ order }) => {
11642
11621
  }
11643
11622
  ) });
11644
11623
  };
11645
- const schema$2 = addressSchema;
11646
- const TransferOwnership = () => {
11624
+ const schema$3 = addressSchema;
11625
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11626
+ const Shipping = () => {
11627
+ var _a;
11647
11628
  const { id } = reactRouterDom.useParams();
11648
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11649
- fields: "id,customer_id,customer.*"
11629
+ const { order, isPending, isError, error } = useOrder(id, {
11630
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11650
11631
  });
11632
+ const {
11633
+ order: preview,
11634
+ isPending: isPreviewPending,
11635
+ isError: isPreviewError,
11636
+ error: previewError
11637
+ } = useOrderPreview(id);
11638
+ useInitiateOrderEdit({ preview });
11639
+ const { onCancel } = useCancelOrderEdit({ preview });
11651
11640
  if (isError) {
11652
11641
  throw error;
11653
11642
  }
11654
- const isReady = !isPending && !!draft_order;
11655
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11656
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11657
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11658
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
11659
- ] }),
11660
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
11661
- ] });
11643
+ if (isPreviewError) {
11644
+ throw previewError;
11645
+ }
11646
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11647
+ const isReady = preview && !isPreviewPending && order && !isPending;
11648
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11649
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11650
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11651
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11652
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11653
+ ] }) }) }),
11654
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11655
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11656
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11657
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11658
+ ] }) });
11662
11659
  };
11663
- const TransferOwnershipForm = ({ order }) => {
11664
- var _a, _b;
11665
- const form = reactHookForm.useForm({
11666
- defaultValues: {
11667
- customer_id: order.customer_id || ""
11660
+ const ShippingForm = ({ preview, order }) => {
11661
+ var _a;
11662
+ const { setIsOpen } = useStackedModal();
11663
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11664
+ const [data, setData] = React.useState(null);
11665
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11666
+ const { shipping_options } = useShippingOptions(
11667
+ {
11668
+ id: appliedShippingOptionIds,
11669
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11668
11670
  },
11669
- resolver: zod.zodResolver(schema$1)
11670
- });
11671
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11672
- const { handleSuccess } = useRouteModal();
11673
- const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
11674
- const currentCustomer = order.customer ? {
11675
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
11676
- value: order.customer.id
11677
- } : null;
11678
- const onSubmit = form.handleSubmit(async (data) => {
11679
- await mutateAsync(
11680
- { customer_id: data.customer_id },
11681
- {
11682
- onSuccess: () => {
11683
- ui.toast.success("Customer updated");
11684
- handleSuccess();
11685
- },
11686
- onError: (error) => {
11687
- ui.toast.error(error.message);
11688
- }
11689
- }
11690
- );
11691
- });
11692
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11693
- KeyboundForm,
11694
11671
  {
11695
- className: "flex flex-1 flex-col overflow-hidden",
11696
- onSubmit,
11697
- children: [
11698
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
11699
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
11700
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
11701
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11702
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
11703
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
11704
- ] }),
11705
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
11706
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
11707
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
11708
- ] })
11709
- ] }),
11710
- /* @__PURE__ */ jsxRuntime.jsx(
11711
- CustomerField,
11712
- {
11713
- control: form.control,
11714
- currentCustomerId: order.customer_id
11715
- }
11716
- )
11717
- ] }),
11718
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11719
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
11720
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11721
- ] }) })
11722
- ]
11723
- }
11724
- ) });
11725
- };
11726
- const CustomerField = ({ control, currentCustomerId }) => {
11727
- const customers = useComboboxData({
11728
- queryFn: async (params) => {
11729
- return await sdk.admin.customer.list({
11730
- ...params,
11731
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
11732
- });
11733
- },
11734
- queryKey: ["customers"],
11735
- getOptions: (data) => {
11736
- return data.customers.map((customer) => {
11737
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
11738
- return {
11739
- label: name ? `${name} (${customer.email})` : customer.email,
11740
- value: customer.id
11741
- };
11742
- });
11672
+ enabled: appliedShippingOptionIds.length > 0
11743
11673
  }
11744
- });
11745
- return /* @__PURE__ */ jsxRuntime.jsx(
11746
- Form$2.Field,
11747
- {
11748
- name: "customer_id",
11749
- control,
11750
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
11751
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11752
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
11753
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
11754
- ] }),
11755
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11756
- Combobox,
11757
- {
11758
- options: customers.options,
11759
- fetchNextPage: customers.fetchNextPage,
11760
- isFetchingNextPage: customers.isFetchingNextPage,
11761
- searchValue: customers.searchValue,
11762
- onSearchValueChange: customers.onSearchValueChange,
11763
- placeholder: "Select customer",
11764
- ...field
11765
- }
11766
- ) }),
11767
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11768
- ] })
11674
+ );
11675
+ const uniqueShippingProfiles = React.useMemo(() => {
11676
+ const profiles = /* @__PURE__ */ new Map();
11677
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11678
+ profiles.set(profile.id, profile);
11679
+ });
11680
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11681
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11682
+ });
11683
+ return Array.from(profiles.values());
11684
+ }, [order.items, shipping_options]);
11685
+ const { handleSuccess } = useRouteModal();
11686
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11687
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11688
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11689
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11690
+ const onSubmit = async () => {
11691
+ setIsSubmitting(true);
11692
+ let requestSucceeded = false;
11693
+ await requestOrderEdit(void 0, {
11694
+ onError: (e) => {
11695
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
11696
+ },
11697
+ onSuccess: () => {
11698
+ requestSucceeded = true;
11699
+ }
11700
+ });
11701
+ if (!requestSucceeded) {
11702
+ setIsSubmitting(false);
11703
+ return;
11769
11704
  }
11770
- );
11771
- };
11772
- const Illustration = () => {
11773
- return /* @__PURE__ */ jsxRuntime.jsxs(
11774
- "svg",
11775
- {
11776
- width: "280",
11777
- height: "180",
11778
- viewBox: "0 0 280 180",
11779
- fill: "none",
11780
- xmlns: "http://www.w3.org/2000/svg",
11781
- children: [
11782
- /* @__PURE__ */ jsxRuntime.jsx(
11783
- "rect",
11784
- {
11785
- x: "0.00428286",
11786
- y: "-0.742904",
11787
- width: "33.5",
11788
- height: "65.5",
11789
- rx: "6.75",
11790
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
11791
- fill: "#D4D4D8",
11792
- stroke: "#52525B",
11793
- strokeWidth: "1.5"
11794
- }
11795
- ),
11796
- /* @__PURE__ */ jsxRuntime.jsx(
11797
- "rect",
11798
- {
11799
- x: "0.00428286",
11800
- y: "-0.742904",
11801
- width: "33.5",
11802
- height: "65.5",
11803
- rx: "6.75",
11804
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
11805
- fill: "white",
11806
- stroke: "#52525B",
11807
- strokeWidth: "1.5"
11808
- }
11809
- ),
11810
- /* @__PURE__ */ jsxRuntime.jsx(
11811
- "path",
11812
- {
11813
- d: "M180.579 107.142L179.126 107.959",
11814
- stroke: "#52525B",
11815
- strokeWidth: "1.5",
11816
- strokeLinecap: "round",
11817
- strokeLinejoin: "round"
11818
- }
11819
- ),
11820
- /* @__PURE__ */ jsxRuntime.jsx(
11821
- "path",
11822
- {
11823
- opacity: "0.88",
11824
- d: "M182.305 109.546L180.257 109.534",
11825
- stroke: "#52525B",
11826
- strokeWidth: "1.5",
11827
- strokeLinecap: "round",
11828
- strokeLinejoin: "round"
11829
- }
11830
- ),
11831
- /* @__PURE__ */ jsxRuntime.jsx(
11832
- "path",
11833
- {
11834
- opacity: "0.75",
11835
- d: "M180.551 111.93L179.108 111.096",
11836
- stroke: "#52525B",
11837
- strokeWidth: "1.5",
11838
- strokeLinecap: "round",
11839
- strokeLinejoin: "round"
11840
- }
11841
- ),
11842
- /* @__PURE__ */ jsxRuntime.jsx(
11843
- "path",
11844
- {
11845
- opacity: "0.63",
11846
- d: "M176.347 112.897L176.354 111.73",
11847
- stroke: "#52525B",
11848
- strokeWidth: "1.5",
11849
- strokeLinecap: "round",
11850
- strokeLinejoin: "round"
11851
- }
11852
- ),
11853
- /* @__PURE__ */ jsxRuntime.jsx(
11854
- "path",
11855
- {
11856
- opacity: "0.5",
11857
- d: "M172.153 111.881L173.606 111.064",
11858
- stroke: "#52525B",
11859
- strokeWidth: "1.5",
11860
- strokeLinecap: "round",
11861
- strokeLinejoin: "round"
11862
- }
11863
- ),
11864
- /* @__PURE__ */ jsxRuntime.jsx(
11865
- "path",
11866
- {
11867
- opacity: "0.38",
11868
- d: "M170.428 109.478L172.476 109.489",
11869
- stroke: "#52525B",
11870
- strokeWidth: "1.5",
11871
- strokeLinecap: "round",
11872
- strokeLinejoin: "round"
11873
- }
11874
- ),
11875
- /* @__PURE__ */ jsxRuntime.jsx(
11876
- "path",
11877
- {
11878
- opacity: "0.25",
11879
- d: "M172.181 107.094L173.624 107.928",
11880
- stroke: "#52525B",
11881
- strokeWidth: "1.5",
11882
- strokeLinecap: "round",
11883
- strokeLinejoin: "round"
11884
- }
11885
- ),
11886
- /* @__PURE__ */ jsxRuntime.jsx(
11887
- "path",
11888
- {
11889
- opacity: "0.13",
11890
- d: "M176.386 106.126L176.379 107.294",
11891
- stroke: "#52525B",
11892
- strokeWidth: "1.5",
11893
- strokeLinecap: "round",
11894
- strokeLinejoin: "round"
11895
- }
11896
- ),
11897
- /* @__PURE__ */ jsxRuntime.jsx(
11898
- "rect",
11899
- {
11900
- width: "12",
11901
- height: "3",
11902
- rx: "1.5",
11903
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
11904
- fill: "#D4D4D8"
11905
- }
11906
- ),
11907
- /* @__PURE__ */ jsxRuntime.jsx(
11908
- "rect",
11909
- {
11910
- x: "0.00428286",
11911
- y: "-0.742904",
11912
- width: "33.5",
11913
- height: "65.5",
11914
- rx: "6.75",
11915
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
11916
- fill: "#D4D4D8",
11917
- stroke: "#52525B",
11918
- strokeWidth: "1.5"
11919
- }
11920
- ),
11921
- /* @__PURE__ */ jsxRuntime.jsx(
11922
- "rect",
11923
- {
11924
- x: "0.00428286",
11925
- y: "-0.742904",
11926
- width: "33.5",
11927
- height: "65.5",
11928
- rx: "6.75",
11929
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
11930
- fill: "white",
11931
- stroke: "#52525B",
11932
- strokeWidth: "1.5"
11933
- }
11934
- ),
11935
- /* @__PURE__ */ jsxRuntime.jsx(
11936
- "rect",
11937
- {
11938
- width: "12",
11939
- height: "3",
11940
- rx: "1.5",
11941
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
11942
- fill: "#D4D4D8"
11943
- }
11944
- ),
11945
- /* @__PURE__ */ jsxRuntime.jsx(
11946
- "rect",
11947
- {
11948
- width: "17",
11949
- height: "3",
11950
- rx: "1.5",
11951
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
11952
- fill: "#D4D4D8"
11953
- }
11954
- ),
11955
- /* @__PURE__ */ jsxRuntime.jsx(
11956
- "rect",
11957
- {
11958
- width: "12",
11959
- height: "3",
11960
- rx: "1.5",
11961
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
11962
- fill: "#D4D4D8"
11963
- }
11964
- ),
11965
- /* @__PURE__ */ jsxRuntime.jsx(
11966
- "path",
11967
- {
11968
- d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
11969
- fill: "#A1A1AA"
11970
- }
11971
- ),
11972
- /* @__PURE__ */ jsxRuntime.jsx(
11973
- "rect",
11974
- {
11975
- width: "17",
11976
- height: "3",
11977
- rx: "1.5",
11978
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
11979
- fill: "#A1A1AA"
11980
- }
11981
- ),
11982
- /* @__PURE__ */ jsxRuntime.jsx(
11983
- "rect",
11984
- {
11985
- width: "12",
11986
- height: "3",
11987
- rx: "1.5",
11988
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
11989
- fill: "#A1A1AA"
11990
- }
11991
- ),
11992
- /* @__PURE__ */ jsxRuntime.jsx(
11993
- "path",
11994
- {
11995
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
11996
- fill: "#52525B"
11997
- }
11998
- ),
11999
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12000
- "path",
12001
- {
12002
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12003
- stroke: "#A1A1AA",
12004
- strokeWidth: "1.5",
12005
- strokeLinecap: "round",
12006
- strokeLinejoin: "round"
12007
- }
12008
- ) }),
12009
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12010
- "path",
12011
- {
12012
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12013
- stroke: "#A1A1AA",
12014
- strokeWidth: "1.5",
12015
- strokeLinecap: "round",
12016
- strokeLinejoin: "round"
12017
- }
12018
- ) }),
12019
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12020
- "path",
12021
- {
12022
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12023
- stroke: "#A1A1AA",
12024
- strokeWidth: "1.5",
12025
- strokeLinecap: "round",
12026
- strokeLinejoin: "round"
12027
- }
12028
- ) }),
12029
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12030
- "path",
12031
- {
12032
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12033
- stroke: "#A1A1AA",
12034
- strokeWidth: "1.5",
12035
- strokeLinecap: "round",
12036
- strokeLinejoin: "round"
12037
- }
12038
- ) }),
12039
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12040
- "path",
12041
- {
12042
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12043
- stroke: "#A1A1AA",
12044
- strokeWidth: "1.5",
12045
- strokeLinecap: "round",
12046
- strokeLinejoin: "round"
12047
- }
12048
- ) }),
12049
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12050
- "path",
12051
- {
12052
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12053
- stroke: "#A1A1AA",
12054
- strokeWidth: "1.5",
12055
- strokeLinecap: "round",
12056
- strokeLinejoin: "round"
12057
- }
12058
- ) }),
12059
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12060
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12061
- "rect",
12062
- {
12063
- width: "12",
12064
- height: "12",
12065
- fill: "white",
12066
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12067
- }
12068
- ) }),
12069
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12070
- "rect",
12071
- {
12072
- width: "12",
12073
- height: "12",
12074
- fill: "white",
12075
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12076
- }
12077
- ) }),
12078
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12079
- "rect",
12080
- {
12081
- width: "12",
12082
- height: "12",
12083
- fill: "white",
12084
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12085
- }
12086
- ) }),
12087
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12088
- "rect",
12089
- {
12090
- width: "12",
12091
- height: "12",
12092
- fill: "white",
12093
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12094
- }
12095
- ) }),
12096
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12097
- "rect",
12098
- {
12099
- width: "12",
12100
- height: "12",
12101
- fill: "white",
12102
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12103
- }
12104
- ) }),
12105
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12106
- "rect",
12107
- {
12108
- width: "12",
12109
- height: "12",
12110
- fill: "white",
12111
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12112
- }
12113
- ) })
12114
- ] })
12115
- ]
12116
- }
12117
- );
12118
- };
12119
- const schema$1 = objectType({
12120
- customer_id: stringType().min(1)
12121
- });
12122
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
12123
- const Shipping = () => {
12124
- var _a;
12125
- const { id } = reactRouterDom.useParams();
12126
- const { order, isPending, isError, error } = useOrder(id, {
12127
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12128
- });
12129
- const {
12130
- order: preview,
12131
- isPending: isPreviewPending,
12132
- isError: isPreviewError,
12133
- error: previewError
12134
- } = useOrderPreview(id);
12135
- useInitiateOrderEdit({ preview });
12136
- const { onCancel } = useCancelOrderEdit({ preview });
12137
- if (isError) {
12138
- throw error;
12139
- }
12140
- if (isPreviewError) {
12141
- throw previewError;
12142
- }
12143
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12144
- const isReady = preview && !isPreviewPending && order && !isPending;
12145
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12146
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12147
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12148
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12149
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
12150
- ] }) }) }),
12151
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
12152
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12153
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12154
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12155
- ] }) });
12156
- };
12157
- const ShippingForm = ({ preview, order }) => {
12158
- var _a;
12159
- const { setIsOpen } = useStackedModal();
12160
- const [isSubmitting, setIsSubmitting] = React.useState(false);
12161
- const [data, setData] = React.useState(null);
12162
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12163
- const { shipping_options } = useShippingOptions(
12164
- {
12165
- id: appliedShippingOptionIds,
12166
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12167
- },
12168
- {
12169
- enabled: appliedShippingOptionIds.length > 0
12170
- }
12171
- );
12172
- const uniqueShippingProfiles = React.useMemo(() => {
12173
- const profiles = /* @__PURE__ */ new Map();
12174
- getUniqueShippingProfiles(order.items).forEach((profile) => {
12175
- profiles.set(profile.id, profile);
12176
- });
12177
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12178
- profiles.set(option.shipping_profile_id, option.shipping_profile);
12179
- });
12180
- return Array.from(profiles.values());
12181
- }, [order.items, shipping_options]);
12182
- const { handleSuccess } = useRouteModal();
12183
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12184
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12185
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12186
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12187
- const onSubmit = async () => {
12188
- setIsSubmitting(true);
12189
- let requestSucceeded = false;
12190
- await requestOrderEdit(void 0, {
12191
- onError: (e) => {
12192
- ui.toast.error(`Failed to request order edit: ${e.message}`);
12193
- },
12194
- onSuccess: () => {
12195
- requestSucceeded = true;
12196
- }
12197
- });
12198
- if (!requestSucceeded) {
12199
- setIsSubmitting(false);
12200
- return;
12201
- }
12202
- await confirmOrderEdit(void 0, {
12203
- onError: (e) => {
12204
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12205
- },
12206
- onSuccess: () => {
12207
- handleSuccess();
12208
- },
12209
- onSettled: () => {
12210
- setIsSubmitting(false);
12211
- }
12212
- });
12213
- };
12214
- const onKeydown = React.useCallback(
12215
- (e) => {
12216
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12217
- if (data || isSubmitting) {
12218
- return;
12219
- }
12220
- onSubmit();
12221
- }
12222
- },
12223
- [data, isSubmitting, onSubmit]
11705
+ await confirmOrderEdit(void 0, {
11706
+ onError: (e) => {
11707
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11708
+ },
11709
+ onSuccess: () => {
11710
+ handleSuccess();
11711
+ },
11712
+ onSettled: () => {
11713
+ setIsSubmitting(false);
11714
+ }
11715
+ });
11716
+ };
11717
+ const onKeydown = React.useCallback(
11718
+ (e) => {
11719
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11720
+ if (data || isSubmitting) {
11721
+ return;
11722
+ }
11723
+ onSubmit();
11724
+ }
11725
+ },
11726
+ [data, isSubmitting, onSubmit]
12224
11727
  );
12225
11728
  React.useEffect(() => {
12226
11729
  document.addEventListener("keydown", onKeydown);
@@ -12791,141 +12294,638 @@ const LocationField = ({ control, setValue }) => {
12791
12294
  value: location.id
12792
12295
  }));
12793
12296
  }
12794
- });
12795
- return /* @__PURE__ */ jsxRuntime.jsx(
12796
- Form$2.Field,
12297
+ });
12298
+ return /* @__PURE__ */ jsxRuntime.jsx(
12299
+ Form$2.Field,
12300
+ {
12301
+ control,
12302
+ name: "location_id",
12303
+ render: ({ field: { onChange, ...field } }) => {
12304
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12305
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12306
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12307
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12308
+ ] }),
12309
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12310
+ Combobox,
12311
+ {
12312
+ options: locations.options,
12313
+ fetchNextPage: locations.fetchNextPage,
12314
+ isFetchingNextPage: locations.isFetchingNextPage,
12315
+ searchValue: locations.searchValue,
12316
+ onSearchValueChange: locations.onSearchValueChange,
12317
+ placeholder: "Select location",
12318
+ onChange: (value) => {
12319
+ setValue("shipping_option_id", "", {
12320
+ shouldDirty: true,
12321
+ shouldTouch: true
12322
+ });
12323
+ onChange(value);
12324
+ },
12325
+ ...field
12326
+ }
12327
+ ) })
12328
+ ] }) });
12329
+ }
12330
+ }
12331
+ );
12332
+ };
12333
+ const ShippingOptionField = ({
12334
+ shippingProfileId,
12335
+ preview,
12336
+ control
12337
+ }) => {
12338
+ var _a;
12339
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12340
+ const shippingOptions = useComboboxData({
12341
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12342
+ queryFn: async (params) => {
12343
+ return await sdk.admin.shippingOption.list({
12344
+ ...params,
12345
+ stock_location_id: locationId,
12346
+ shipping_profile_id: shippingProfileId
12347
+ });
12348
+ },
12349
+ getOptions: (data) => {
12350
+ return data.shipping_options.map((option) => {
12351
+ var _a2;
12352
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12353
+ (r) => r.attribute === "is_return" && r.value === "true"
12354
+ )) {
12355
+ return void 0;
12356
+ }
12357
+ return {
12358
+ label: option.name,
12359
+ value: option.id
12360
+ };
12361
+ }).filter(Boolean);
12362
+ },
12363
+ enabled: !!locationId && !!shippingProfileId,
12364
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12365
+ });
12366
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12367
+ return /* @__PURE__ */ jsxRuntime.jsx(
12368
+ Form$2.Field,
12369
+ {
12370
+ control,
12371
+ name: "shipping_option_id",
12372
+ render: ({ field }) => {
12373
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12374
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12375
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12376
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12377
+ ] }),
12378
+ /* @__PURE__ */ jsxRuntime.jsx(
12379
+ ConditionalTooltip,
12380
+ {
12381
+ content: tooltipContent,
12382
+ showTooltip: !locationId || !shippingProfileId,
12383
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12384
+ Combobox,
12385
+ {
12386
+ options: shippingOptions.options,
12387
+ fetchNextPage: shippingOptions.fetchNextPage,
12388
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12389
+ searchValue: shippingOptions.searchValue,
12390
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12391
+ placeholder: "Select shipping option",
12392
+ ...field,
12393
+ disabled: !locationId || !shippingProfileId
12394
+ }
12395
+ ) }) })
12396
+ }
12397
+ )
12398
+ ] }) });
12399
+ }
12400
+ }
12401
+ );
12402
+ };
12403
+ const CustomAmountField = ({
12404
+ control,
12405
+ currencyCode
12406
+ }) => {
12407
+ return /* @__PURE__ */ jsxRuntime.jsx(
12408
+ Form$2.Field,
12409
+ {
12410
+ control,
12411
+ name: "custom_amount",
12412
+ render: ({ field: { onChange, ...field } }) => {
12413
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12414
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12415
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12416
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12417
+ ] }),
12418
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12419
+ ui.CurrencyInput,
12420
+ {
12421
+ ...field,
12422
+ onValueChange: (value) => onChange(value),
12423
+ symbol: getNativeSymbol(currencyCode),
12424
+ code: currencyCode
12425
+ }
12426
+ ) })
12427
+ ] });
12428
+ }
12429
+ }
12430
+ );
12431
+ };
12432
+ const TransferOwnership = () => {
12433
+ const { id } = reactRouterDom.useParams();
12434
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12435
+ fields: "id,customer_id,customer.*"
12436
+ });
12437
+ if (isError) {
12438
+ throw error;
12439
+ }
12440
+ const isReady = !isPending && !!draft_order;
12441
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12442
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12443
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12444
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
12445
+ ] }),
12446
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12447
+ ] });
12448
+ };
12449
+ const TransferOwnershipForm = ({ order }) => {
12450
+ var _a, _b;
12451
+ const form = reactHookForm.useForm({
12452
+ defaultValues: {
12453
+ customer_id: order.customer_id || ""
12454
+ },
12455
+ resolver: zod.zodResolver(schema$2)
12456
+ });
12457
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12458
+ const { handleSuccess } = useRouteModal();
12459
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12460
+ const currentCustomer = order.customer ? {
12461
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
12462
+ value: order.customer.id
12463
+ } : null;
12464
+ const onSubmit = form.handleSubmit(async (data) => {
12465
+ await mutateAsync(
12466
+ { customer_id: data.customer_id },
12467
+ {
12468
+ onSuccess: () => {
12469
+ ui.toast.success("Customer updated");
12470
+ handleSuccess();
12471
+ },
12472
+ onError: (error) => {
12473
+ ui.toast.error(error.message);
12474
+ }
12475
+ }
12476
+ );
12477
+ });
12478
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12479
+ KeyboundForm,
12480
+ {
12481
+ className: "flex flex-1 flex-col overflow-hidden",
12482
+ onSubmit,
12483
+ children: [
12484
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12485
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12486
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12487
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12488
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12489
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12490
+ ] }),
12491
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12492
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12493
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12494
+ ] })
12495
+ ] }),
12496
+ /* @__PURE__ */ jsxRuntime.jsx(
12497
+ CustomerField,
12498
+ {
12499
+ control: form.control,
12500
+ currentCustomerId: order.customer_id
12501
+ }
12502
+ )
12503
+ ] }),
12504
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12505
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12506
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12507
+ ] }) })
12508
+ ]
12509
+ }
12510
+ ) });
12511
+ };
12512
+ const CustomerField = ({ control, currentCustomerId }) => {
12513
+ const customers = useComboboxData({
12514
+ queryFn: async (params) => {
12515
+ return await sdk.admin.customer.list({
12516
+ ...params,
12517
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12518
+ });
12519
+ },
12520
+ queryKey: ["customers"],
12521
+ getOptions: (data) => {
12522
+ return data.customers.map((customer) => {
12523
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12524
+ return {
12525
+ label: name ? `${name} (${customer.email})` : customer.email,
12526
+ value: customer.id
12527
+ };
12528
+ });
12529
+ }
12530
+ });
12531
+ return /* @__PURE__ */ jsxRuntime.jsx(
12532
+ Form$2.Field,
12533
+ {
12534
+ name: "customer_id",
12535
+ control,
12536
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12537
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12538
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12539
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12540
+ ] }),
12541
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12542
+ Combobox,
12543
+ {
12544
+ options: customers.options,
12545
+ fetchNextPage: customers.fetchNextPage,
12546
+ isFetchingNextPage: customers.isFetchingNextPage,
12547
+ searchValue: customers.searchValue,
12548
+ onSearchValueChange: customers.onSearchValueChange,
12549
+ placeholder: "Select customer",
12550
+ ...field
12551
+ }
12552
+ ) }),
12553
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12554
+ ] })
12555
+ }
12556
+ );
12557
+ };
12558
+ const Illustration = () => {
12559
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12560
+ "svg",
12797
12561
  {
12798
- control,
12799
- name: "location_id",
12800
- render: ({ field: { onChange, ...field } }) => {
12801
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12802
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12803
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12804
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12805
- ] }),
12806
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12807
- Combobox,
12562
+ width: "280",
12563
+ height: "180",
12564
+ viewBox: "0 0 280 180",
12565
+ fill: "none",
12566
+ xmlns: "http://www.w3.org/2000/svg",
12567
+ children: [
12568
+ /* @__PURE__ */ jsxRuntime.jsx(
12569
+ "rect",
12570
+ {
12571
+ x: "0.00428286",
12572
+ y: "-0.742904",
12573
+ width: "33.5",
12574
+ height: "65.5",
12575
+ rx: "6.75",
12576
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
12577
+ fill: "#D4D4D8",
12578
+ stroke: "#52525B",
12579
+ strokeWidth: "1.5"
12580
+ }
12581
+ ),
12582
+ /* @__PURE__ */ jsxRuntime.jsx(
12583
+ "rect",
12584
+ {
12585
+ x: "0.00428286",
12586
+ y: "-0.742904",
12587
+ width: "33.5",
12588
+ height: "65.5",
12589
+ rx: "6.75",
12590
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
12591
+ fill: "white",
12592
+ stroke: "#52525B",
12593
+ strokeWidth: "1.5"
12594
+ }
12595
+ ),
12596
+ /* @__PURE__ */ jsxRuntime.jsx(
12597
+ "path",
12598
+ {
12599
+ d: "M180.579 107.142L179.126 107.959",
12600
+ stroke: "#52525B",
12601
+ strokeWidth: "1.5",
12602
+ strokeLinecap: "round",
12603
+ strokeLinejoin: "round"
12604
+ }
12605
+ ),
12606
+ /* @__PURE__ */ jsxRuntime.jsx(
12607
+ "path",
12608
+ {
12609
+ opacity: "0.88",
12610
+ d: "M182.305 109.546L180.257 109.534",
12611
+ stroke: "#52525B",
12612
+ strokeWidth: "1.5",
12613
+ strokeLinecap: "round",
12614
+ strokeLinejoin: "round"
12615
+ }
12616
+ ),
12617
+ /* @__PURE__ */ jsxRuntime.jsx(
12618
+ "path",
12619
+ {
12620
+ opacity: "0.75",
12621
+ d: "M180.551 111.93L179.108 111.096",
12622
+ stroke: "#52525B",
12623
+ strokeWidth: "1.5",
12624
+ strokeLinecap: "round",
12625
+ strokeLinejoin: "round"
12626
+ }
12627
+ ),
12628
+ /* @__PURE__ */ jsxRuntime.jsx(
12629
+ "path",
12630
+ {
12631
+ opacity: "0.63",
12632
+ d: "M176.347 112.897L176.354 111.73",
12633
+ stroke: "#52525B",
12634
+ strokeWidth: "1.5",
12635
+ strokeLinecap: "round",
12636
+ strokeLinejoin: "round"
12637
+ }
12638
+ ),
12639
+ /* @__PURE__ */ jsxRuntime.jsx(
12640
+ "path",
12641
+ {
12642
+ opacity: "0.5",
12643
+ d: "M172.153 111.881L173.606 111.064",
12644
+ stroke: "#52525B",
12645
+ strokeWidth: "1.5",
12646
+ strokeLinecap: "round",
12647
+ strokeLinejoin: "round"
12648
+ }
12649
+ ),
12650
+ /* @__PURE__ */ jsxRuntime.jsx(
12651
+ "path",
12652
+ {
12653
+ opacity: "0.38",
12654
+ d: "M170.428 109.478L172.476 109.489",
12655
+ stroke: "#52525B",
12656
+ strokeWidth: "1.5",
12657
+ strokeLinecap: "round",
12658
+ strokeLinejoin: "round"
12659
+ }
12660
+ ),
12661
+ /* @__PURE__ */ jsxRuntime.jsx(
12662
+ "path",
12663
+ {
12664
+ opacity: "0.25",
12665
+ d: "M172.181 107.094L173.624 107.928",
12666
+ stroke: "#52525B",
12667
+ strokeWidth: "1.5",
12668
+ strokeLinecap: "round",
12669
+ strokeLinejoin: "round"
12670
+ }
12671
+ ),
12672
+ /* @__PURE__ */ jsxRuntime.jsx(
12673
+ "path",
12674
+ {
12675
+ opacity: "0.13",
12676
+ d: "M176.386 106.126L176.379 107.294",
12677
+ stroke: "#52525B",
12678
+ strokeWidth: "1.5",
12679
+ strokeLinecap: "round",
12680
+ strokeLinejoin: "round"
12681
+ }
12682
+ ),
12683
+ /* @__PURE__ */ jsxRuntime.jsx(
12684
+ "rect",
12685
+ {
12686
+ width: "12",
12687
+ height: "3",
12688
+ rx: "1.5",
12689
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12690
+ fill: "#D4D4D8"
12691
+ }
12692
+ ),
12693
+ /* @__PURE__ */ jsxRuntime.jsx(
12694
+ "rect",
12695
+ {
12696
+ x: "0.00428286",
12697
+ y: "-0.742904",
12698
+ width: "33.5",
12699
+ height: "65.5",
12700
+ rx: "6.75",
12701
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12702
+ fill: "#D4D4D8",
12703
+ stroke: "#52525B",
12704
+ strokeWidth: "1.5"
12705
+ }
12706
+ ),
12707
+ /* @__PURE__ */ jsxRuntime.jsx(
12708
+ "rect",
12709
+ {
12710
+ x: "0.00428286",
12711
+ y: "-0.742904",
12712
+ width: "33.5",
12713
+ height: "65.5",
12714
+ rx: "6.75",
12715
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12716
+ fill: "white",
12717
+ stroke: "#52525B",
12718
+ strokeWidth: "1.5"
12719
+ }
12720
+ ),
12721
+ /* @__PURE__ */ jsxRuntime.jsx(
12722
+ "rect",
12723
+ {
12724
+ width: "12",
12725
+ height: "3",
12726
+ rx: "1.5",
12727
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12728
+ fill: "#D4D4D8"
12729
+ }
12730
+ ),
12731
+ /* @__PURE__ */ jsxRuntime.jsx(
12732
+ "rect",
12733
+ {
12734
+ width: "17",
12735
+ height: "3",
12736
+ rx: "1.5",
12737
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12738
+ fill: "#D4D4D8"
12739
+ }
12740
+ ),
12741
+ /* @__PURE__ */ jsxRuntime.jsx(
12742
+ "rect",
12743
+ {
12744
+ width: "12",
12745
+ height: "3",
12746
+ rx: "1.5",
12747
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12748
+ fill: "#D4D4D8"
12749
+ }
12750
+ ),
12751
+ /* @__PURE__ */ jsxRuntime.jsx(
12752
+ "path",
12753
+ {
12754
+ d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12755
+ fill: "#A1A1AA"
12756
+ }
12757
+ ),
12758
+ /* @__PURE__ */ jsxRuntime.jsx(
12759
+ "rect",
12760
+ {
12761
+ width: "17",
12762
+ height: "3",
12763
+ rx: "1.5",
12764
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12765
+ fill: "#A1A1AA"
12766
+ }
12767
+ ),
12768
+ /* @__PURE__ */ jsxRuntime.jsx(
12769
+ "rect",
12770
+ {
12771
+ width: "12",
12772
+ height: "3",
12773
+ rx: "1.5",
12774
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12775
+ fill: "#A1A1AA"
12776
+ }
12777
+ ),
12778
+ /* @__PURE__ */ jsxRuntime.jsx(
12779
+ "path",
12780
+ {
12781
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12782
+ fill: "#52525B"
12783
+ }
12784
+ ),
12785
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12786
+ "path",
12787
+ {
12788
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12789
+ stroke: "#A1A1AA",
12790
+ strokeWidth: "1.5",
12791
+ strokeLinecap: "round",
12792
+ strokeLinejoin: "round"
12793
+ }
12794
+ ) }),
12795
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12796
+ "path",
12797
+ {
12798
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12799
+ stroke: "#A1A1AA",
12800
+ strokeWidth: "1.5",
12801
+ strokeLinecap: "round",
12802
+ strokeLinejoin: "round"
12803
+ }
12804
+ ) }),
12805
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12806
+ "path",
12807
+ {
12808
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12809
+ stroke: "#A1A1AA",
12810
+ strokeWidth: "1.5",
12811
+ strokeLinecap: "round",
12812
+ strokeLinejoin: "round"
12813
+ }
12814
+ ) }),
12815
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12816
+ "path",
12817
+ {
12818
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12819
+ stroke: "#A1A1AA",
12820
+ strokeWidth: "1.5",
12821
+ strokeLinecap: "round",
12822
+ strokeLinejoin: "round"
12823
+ }
12824
+ ) }),
12825
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12826
+ "path",
12827
+ {
12828
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12829
+ stroke: "#A1A1AA",
12830
+ strokeWidth: "1.5",
12831
+ strokeLinecap: "round",
12832
+ strokeLinejoin: "round"
12833
+ }
12834
+ ) }),
12835
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12836
+ "path",
12837
+ {
12838
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12839
+ stroke: "#A1A1AA",
12840
+ strokeWidth: "1.5",
12841
+ strokeLinecap: "round",
12842
+ strokeLinejoin: "round"
12843
+ }
12844
+ ) }),
12845
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12846
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12847
+ "rect",
12808
12848
  {
12809
- options: locations.options,
12810
- fetchNextPage: locations.fetchNextPage,
12811
- isFetchingNextPage: locations.isFetchingNextPage,
12812
- searchValue: locations.searchValue,
12813
- onSearchValueChange: locations.onSearchValueChange,
12814
- placeholder: "Select location",
12815
- onChange: (value) => {
12816
- setValue("shipping_option_id", "", {
12817
- shouldDirty: true,
12818
- shouldTouch: true
12819
- });
12820
- onChange(value);
12821
- },
12822
- ...field
12849
+ width: "12",
12850
+ height: "12",
12851
+ fill: "white",
12852
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12823
12853
  }
12824
- ) })
12825
- ] }) });
12826
- }
12827
- }
12828
- );
12829
- };
12830
- const ShippingOptionField = ({
12831
- shippingProfileId,
12832
- preview,
12833
- control
12834
- }) => {
12835
- var _a;
12836
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12837
- const shippingOptions = useComboboxData({
12838
- queryKey: ["shipping_options", locationId, shippingProfileId],
12839
- queryFn: async (params) => {
12840
- return await sdk.admin.shippingOption.list({
12841
- ...params,
12842
- stock_location_id: locationId,
12843
- shipping_profile_id: shippingProfileId
12844
- });
12845
- },
12846
- getOptions: (data) => {
12847
- return data.shipping_options.map((option) => {
12848
- var _a2;
12849
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12850
- (r) => r.attribute === "is_return" && r.value === "true"
12851
- )) {
12852
- return void 0;
12853
- }
12854
- return {
12855
- label: option.name,
12856
- value: option.id
12857
- };
12858
- }).filter(Boolean);
12859
- },
12860
- enabled: !!locationId && !!shippingProfileId,
12861
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12862
- });
12863
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12864
- return /* @__PURE__ */ jsxRuntime.jsx(
12865
- Form$2.Field,
12866
- {
12867
- control,
12868
- name: "shipping_option_id",
12869
- render: ({ field }) => {
12870
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12871
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12872
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12873
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12874
- ] }),
12875
- /* @__PURE__ */ jsxRuntime.jsx(
12876
- ConditionalTooltip,
12854
+ ) }),
12855
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12856
+ "rect",
12877
12857
  {
12878
- content: tooltipContent,
12879
- showTooltip: !locationId || !shippingProfileId,
12880
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12881
- Combobox,
12882
- {
12883
- options: shippingOptions.options,
12884
- fetchNextPage: shippingOptions.fetchNextPage,
12885
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12886
- searchValue: shippingOptions.searchValue,
12887
- onSearchValueChange: shippingOptions.onSearchValueChange,
12888
- placeholder: "Select shipping option",
12889
- ...field,
12890
- disabled: !locationId || !shippingProfileId
12891
- }
12892
- ) }) })
12858
+ width: "12",
12859
+ height: "12",
12860
+ fill: "white",
12861
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12893
12862
  }
12894
- )
12895
- ] }) });
12896
- }
12897
- }
12898
- );
12899
- };
12900
- const CustomAmountField = ({
12901
- control,
12902
- currencyCode
12903
- }) => {
12904
- return /* @__PURE__ */ jsxRuntime.jsx(
12905
- Form$2.Field,
12906
- {
12907
- control,
12908
- name: "custom_amount",
12909
- render: ({ field: { onChange, ...field } }) => {
12910
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12911
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12912
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12913
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12914
- ] }),
12915
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12916
- ui.CurrencyInput,
12863
+ ) }),
12864
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12865
+ "rect",
12917
12866
  {
12918
- ...field,
12919
- onValueChange: (value) => onChange(value),
12920
- symbol: getNativeSymbol(currencyCode),
12921
- code: currencyCode
12867
+ width: "12",
12868
+ height: "12",
12869
+ fill: "white",
12870
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12871
+ }
12872
+ ) }),
12873
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12874
+ "rect",
12875
+ {
12876
+ width: "12",
12877
+ height: "12",
12878
+ fill: "white",
12879
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12880
+ }
12881
+ ) }),
12882
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12883
+ "rect",
12884
+ {
12885
+ width: "12",
12886
+ height: "12",
12887
+ fill: "white",
12888
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12889
+ }
12890
+ ) }),
12891
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12892
+ "rect",
12893
+ {
12894
+ width: "12",
12895
+ height: "12",
12896
+ fill: "white",
12897
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12922
12898
  }
12923
12899
  ) })
12924
- ] });
12925
- }
12900
+ ] })
12901
+ ]
12926
12902
  }
12927
12903
  );
12928
12904
  };
12905
+ const schema$2 = objectType({
12906
+ customer_id: stringType().min(1)
12907
+ });
12908
+ const CustomItems = () => {
12909
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12910
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
12911
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
12912
+ ] });
12913
+ };
12914
+ const CustomItemsForm = () => {
12915
+ const form = reactHookForm.useForm({
12916
+ resolver: zod.zodResolver(schema$1)
12917
+ });
12918
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
12919
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
12920
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12921
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12922
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
12923
+ ] }) })
12924
+ ] }) });
12925
+ };
12926
+ const schema$1 = objectType({
12927
+ email: stringType().email()
12928
+ });
12929
12929
  const SalesChannel = () => {
12930
12930
  const { id } = reactRouterDom.useParams();
12931
12931
  const { draft_order, isPending, isError, error } = useDraftOrder(
@@ -13056,10 +13056,6 @@ const routeModule = {
13056
13056
  Component: BillingAddress,
13057
13057
  path: "/draft-orders/:id/billing-address"
13058
13058
  },
13059
- {
13060
- Component: CustomItems,
13061
- path: "/draft-orders/:id/custom-items"
13062
- },
13063
13059
  {
13064
13060
  Component: Email,
13065
13061
  path: "/draft-orders/:id/email"
@@ -13068,25 +13064,29 @@ const routeModule = {
13068
13064
  Component: Items,
13069
13065
  path: "/draft-orders/:id/items"
13070
13066
  },
13071
- {
13072
- Component: Promotions,
13073
- path: "/draft-orders/:id/promotions"
13074
- },
13075
13067
  {
13076
13068
  Component: Metadata,
13077
13069
  path: "/draft-orders/:id/metadata"
13078
13070
  },
13071
+ {
13072
+ Component: Promotions,
13073
+ path: "/draft-orders/:id/promotions"
13074
+ },
13079
13075
  {
13080
13076
  Component: ShippingAddress,
13081
13077
  path: "/draft-orders/:id/shipping-address"
13082
13078
  },
13079
+ {
13080
+ Component: Shipping,
13081
+ path: "/draft-orders/:id/shipping"
13082
+ },
13083
13083
  {
13084
13084
  Component: TransferOwnership,
13085
13085
  path: "/draft-orders/:id/transfer-ownership"
13086
13086
  },
13087
13087
  {
13088
- Component: Shipping,
13089
- path: "/draft-orders/:id/shipping"
13088
+ Component: CustomItems,
13089
+ path: "/draft-orders/:id/custom-items"
13090
13090
  },
13091
13091
  {
13092
13092
  Component: SalesChannel,