@medusajs/draft-order 2.10.4-preview-20250927210155 → 2.10.4-preview-20250928000328

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