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

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