@medusajs/draft-order 2.10.2-preview-20250911210151 → 2.10.2-preview-20250912000322

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.
@@ -10820,392 +10820,115 @@ const customItemSchema = objectType({
10820
10820
  quantity: numberType(),
10821
10821
  unit_price: unionType([numberType(), stringType()])
10822
10822
  });
10823
- const PROMOTION_QUERY_KEY = "promotions";
10824
- const promotionsQueryKeys = {
10825
- list: (query2) => [
10826
- PROMOTION_QUERY_KEY,
10827
- query2 ? query2 : void 0
10828
- ],
10829
- detail: (id, query2) => [
10830
- PROMOTION_QUERY_KEY,
10831
- id,
10832
- query2 ? query2 : void 0
10833
- ]
10834
- };
10835
- const usePromotions = (query2, options) => {
10836
- const { data, ...rest } = useQuery({
10837
- queryKey: promotionsQueryKeys.list(query2),
10838
- queryFn: async () => sdk.admin.promotion.list(query2),
10839
- ...options
10840
- });
10841
- return { ...data, ...rest };
10842
- };
10843
- const Promotions = () => {
10823
+ const InlineTip = forwardRef(
10824
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10825
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10826
+ return /* @__PURE__ */ jsxs(
10827
+ "div",
10828
+ {
10829
+ ref,
10830
+ className: clx(
10831
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10832
+ className
10833
+ ),
10834
+ ...props,
10835
+ children: [
10836
+ /* @__PURE__ */ jsx(
10837
+ "div",
10838
+ {
10839
+ role: "presentation",
10840
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10841
+ "bg-ui-tag-orange-icon": variant === "warning"
10842
+ })
10843
+ }
10844
+ ),
10845
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10846
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10847
+ labelValue,
10848
+ ":"
10849
+ ] }),
10850
+ " ",
10851
+ children
10852
+ ] })
10853
+ ]
10854
+ }
10855
+ );
10856
+ }
10857
+ );
10858
+ InlineTip.displayName = "InlineTip";
10859
+ const MetadataFieldSchema = objectType({
10860
+ key: stringType(),
10861
+ disabled: booleanType().optional(),
10862
+ value: anyType()
10863
+ });
10864
+ const MetadataSchema = objectType({
10865
+ metadata: arrayType(MetadataFieldSchema)
10866
+ });
10867
+ const Metadata = () => {
10844
10868
  const { id } = useParams();
10845
- const {
10846
- order: preview,
10847
- isError: isPreviewError,
10848
- error: previewError
10849
- } = useOrderPreview(id, void 0);
10850
- useInitiateOrderEdit({ preview });
10851
- const { onCancel } = useCancelOrderEdit({ preview });
10852
- if (isPreviewError) {
10853
- throw previewError;
10869
+ const { order, isPending, isError, error } = useOrder(id, {
10870
+ fields: "metadata"
10871
+ });
10872
+ if (isError) {
10873
+ throw error;
10854
10874
  }
10855
- const isReady = !!preview;
10856
- return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
10857
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
10858
- isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
10875
+ const isReady = !isPending && !!order;
10876
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10877
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10878
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10879
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10880
+ ] }),
10881
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10859
10882
  ] });
10860
10883
  };
10861
- const PromotionForm = ({ preview }) => {
10862
- const { items, shipping_methods } = preview;
10863
- const [isSubmitting, setIsSubmitting] = useState(false);
10864
- const [comboboxValue, setComboboxValue] = useState("");
10884
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10885
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10886
+ const MetadataForm = ({ orderId, metadata }) => {
10865
10887
  const { handleSuccess } = useRouteModal();
10866
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10867
- const promoIds = getPromotionIds(items, shipping_methods);
10868
- const { promotions, isPending, isError, error } = usePromotions(
10869
- {
10870
- id: promoIds
10871
- },
10872
- {
10873
- enabled: !!promoIds.length
10874
- }
10875
- );
10876
- const comboboxData = useComboboxData({
10877
- queryKey: ["promotions", "combobox", promoIds],
10878
- queryFn: async (params) => {
10879
- return await sdk.admin.promotion.list({
10880
- ...params,
10881
- id: {
10882
- $nin: promoIds
10883
- }
10884
- });
10888
+ const hasUneditableRows = getHasUneditableRows(metadata);
10889
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10890
+ const form = useForm({
10891
+ defaultValues: {
10892
+ metadata: getDefaultValues(metadata)
10885
10893
  },
10886
- getOptions: (data) => {
10887
- return data.promotions.map((promotion) => ({
10888
- label: promotion.code,
10889
- value: promotion.code
10890
- }));
10891
- }
10894
+ resolver: zodResolver(MetadataSchema)
10892
10895
  });
10893
- const add = async (value) => {
10894
- if (!value) {
10895
- return;
10896
- }
10897
- addPromotions(
10896
+ const handleSubmit = form.handleSubmit(async (data) => {
10897
+ const parsedData = parseValues(data);
10898
+ await mutateAsync(
10898
10899
  {
10899
- promo_codes: [value]
10900
+ metadata: parsedData
10900
10901
  },
10901
10902
  {
10902
- onError: (e) => {
10903
- toast.error(e.message);
10904
- comboboxData.onSearchValueChange("");
10905
- setComboboxValue("");
10906
- },
10907
10903
  onSuccess: () => {
10908
- comboboxData.onSearchValueChange("");
10909
- setComboboxValue("");
10904
+ toast.success("Metadata updated");
10905
+ handleSuccess();
10906
+ },
10907
+ onError: (error) => {
10908
+ toast.error(error.message);
10910
10909
  }
10911
10910
  }
10912
10911
  );
10913
- };
10914
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10915
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10916
- const onSubmit = async () => {
10917
- setIsSubmitting(true);
10918
- let requestSucceeded = false;
10919
- await requestOrderEdit(void 0, {
10920
- onError: (e) => {
10921
- toast.error(e.message);
10922
- },
10923
- onSuccess: () => {
10924
- requestSucceeded = true;
10925
- }
10926
- });
10927
- if (!requestSucceeded) {
10928
- setIsSubmitting(false);
10929
- return;
10912
+ });
10913
+ const { fields, insert, remove } = useFieldArray({
10914
+ control: form.control,
10915
+ name: "metadata"
10916
+ });
10917
+ function deleteRow(index) {
10918
+ remove(index);
10919
+ if (fields.length === 1) {
10920
+ insert(0, {
10921
+ key: "",
10922
+ value: "",
10923
+ disabled: false
10924
+ });
10930
10925
  }
10931
- await confirmOrderEdit(void 0, {
10932
- onError: (e) => {
10933
- toast.error(e.message);
10934
- },
10935
- onSuccess: () => {
10936
- handleSuccess();
10937
- },
10938
- onSettled: () => {
10939
- setIsSubmitting(false);
10940
- }
10941
- });
10942
- };
10943
- if (isError) {
10944
- throw error;
10945
- }
10946
- return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
10947
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
10948
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
10949
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
10950
- /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
10951
- /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
10952
- ] }),
10953
- /* @__PURE__ */ jsx(
10954
- Combobox,
10955
- {
10956
- id: "promotion-combobox",
10957
- "aria-describedby": "promotion-combobox-hint",
10958
- isFetchingNextPage: comboboxData.isFetchingNextPage,
10959
- fetchNextPage: comboboxData.fetchNextPage,
10960
- options: comboboxData.options,
10961
- onSearchValueChange: comboboxData.onSearchValueChange,
10962
- searchValue: comboboxData.searchValue,
10963
- disabled: comboboxData.disabled || isAddingPromotions,
10964
- onChange: add,
10965
- value: comboboxValue
10966
- }
10967
- )
10968
- ] }),
10969
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10970
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
10971
- PromotionItem,
10972
- {
10973
- promotion,
10974
- orderId: preview.id,
10975
- isLoading: isPending
10976
- },
10977
- promotion.id
10978
- )) })
10979
- ] }) }),
10980
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10981
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10982
- /* @__PURE__ */ jsx(
10983
- Button,
10984
- {
10985
- size: "small",
10986
- type: "submit",
10987
- isLoading: isSubmitting || isAddingPromotions,
10988
- children: "Save"
10989
- }
10990
- )
10991
- ] }) })
10992
- ] });
10993
- };
10994
- const PromotionItem = ({
10995
- promotion,
10996
- orderId,
10997
- isLoading
10998
- }) => {
10999
- var _a;
11000
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11001
- const onRemove = async () => {
11002
- removePromotions(
11003
- {
11004
- promo_codes: [promotion.code]
11005
- },
11006
- {
11007
- onError: (e) => {
11008
- toast.error(e.message);
11009
- }
11010
- }
11011
- );
11012
- };
11013
- const displayValue = getDisplayValue(promotion);
11014
- return /* @__PURE__ */ jsxs(
11015
- "div",
11016
- {
11017
- className: clx(
11018
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11019
- {
11020
- "animate-pulse": isLoading
11021
- }
11022
- ),
11023
- children: [
11024
- /* @__PURE__ */ jsxs("div", { children: [
11025
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11026
- /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11027
- displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
11028
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
11029
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
11030
- ] }),
11031
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11032
- ] })
11033
- ] }),
11034
- /* @__PURE__ */ jsx(
11035
- IconButton,
11036
- {
11037
- size: "small",
11038
- type: "button",
11039
- variant: "transparent",
11040
- onClick: onRemove,
11041
- isLoading: isPending || isLoading,
11042
- children: /* @__PURE__ */ jsx(XMark, {})
11043
- }
11044
- )
11045
- ]
11046
- },
11047
- promotion.id
11048
- );
11049
- };
11050
- function getDisplayValue(promotion) {
11051
- var _a, _b, _c, _d;
11052
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11053
- if (!value) {
11054
- return null;
11055
- }
11056
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11057
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11058
- if (!currency) {
11059
- return null;
11060
- }
11061
- return getLocaleAmount(value, currency);
11062
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11063
- return formatPercentage(value);
11064
- }
11065
- return null;
11066
- }
11067
- const formatter = new Intl.NumberFormat([], {
11068
- style: "percent",
11069
- minimumFractionDigits: 2
11070
- });
11071
- const formatPercentage = (value, isPercentageValue = false) => {
11072
- let val = value || 0;
11073
- if (!isPercentageValue) {
11074
- val = val / 100;
11075
- }
11076
- return formatter.format(val);
11077
- };
11078
- function getPromotionIds(items, shippingMethods) {
11079
- const promotionIds = /* @__PURE__ */ new Set();
11080
- for (const item of items) {
11081
- if (item.adjustments) {
11082
- for (const adjustment of item.adjustments) {
11083
- if (adjustment.promotion_id) {
11084
- promotionIds.add(adjustment.promotion_id);
11085
- }
11086
- }
11087
- }
11088
- }
11089
- for (const shippingMethod of shippingMethods) {
11090
- if (shippingMethod.adjustments) {
11091
- for (const adjustment of shippingMethod.adjustments) {
11092
- if (adjustment.promotion_id) {
11093
- promotionIds.add(adjustment.promotion_id);
11094
- }
11095
- }
11096
- }
11097
- }
11098
- return Array.from(promotionIds);
11099
- }
11100
- const InlineTip = forwardRef(
11101
- ({ variant = "tip", label, className, children, ...props }, ref) => {
11102
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11103
- return /* @__PURE__ */ jsxs(
11104
- "div",
11105
- {
11106
- ref,
11107
- className: clx(
11108
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11109
- className
11110
- ),
11111
- ...props,
11112
- children: [
11113
- /* @__PURE__ */ jsx(
11114
- "div",
11115
- {
11116
- role: "presentation",
11117
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11118
- "bg-ui-tag-orange-icon": variant === "warning"
11119
- })
11120
- }
11121
- ),
11122
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
11123
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11124
- labelValue,
11125
- ":"
11126
- ] }),
11127
- " ",
11128
- children
11129
- ] })
11130
- ]
11131
- }
11132
- );
11133
- }
11134
- );
11135
- InlineTip.displayName = "InlineTip";
11136
- const MetadataFieldSchema = objectType({
11137
- key: stringType(),
11138
- disabled: booleanType().optional(),
11139
- value: anyType()
11140
- });
11141
- const MetadataSchema = objectType({
11142
- metadata: arrayType(MetadataFieldSchema)
11143
- });
11144
- const Metadata = () => {
11145
- const { id } = useParams();
11146
- const { order, isPending, isError, error } = useOrder(id, {
11147
- fields: "metadata"
11148
- });
11149
- if (isError) {
11150
- throw error;
11151
- }
11152
- const isReady = !isPending && !!order;
11153
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11154
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11155
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
11156
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11157
- ] }),
11158
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11159
- ] });
11160
- };
11161
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11162
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11163
- const MetadataForm = ({ orderId, metadata }) => {
11164
- const { handleSuccess } = useRouteModal();
11165
- const hasUneditableRows = getHasUneditableRows(metadata);
11166
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11167
- const form = useForm({
11168
- defaultValues: {
11169
- metadata: getDefaultValues(metadata)
11170
- },
11171
- resolver: zodResolver(MetadataSchema)
11172
- });
11173
- const handleSubmit = form.handleSubmit(async (data) => {
11174
- const parsedData = parseValues(data);
11175
- await mutateAsync(
11176
- {
11177
- metadata: parsedData
11178
- },
11179
- {
11180
- onSuccess: () => {
11181
- toast.success("Metadata updated");
11182
- handleSuccess();
11183
- },
11184
- onError: (error) => {
11185
- toast.error(error.message);
11186
- }
11187
- }
11188
- );
11189
- });
11190
- const { fields, insert, remove } = useFieldArray({
11191
- control: form.control,
11192
- name: "metadata"
11193
- });
11194
- function deleteRow(index) {
11195
- remove(index);
11196
- if (fields.length === 1) {
11197
- insert(0, {
11198
- key: "",
11199
- value: "",
11200
- disabled: false
11201
- });
11202
- }
11203
- }
11204
- function insertRow(index, position) {
11205
- insert(index + (position === "above" ? 0 : 1), {
11206
- key: "",
11207
- value: "",
11208
- disabled: false
10926
+ }
10927
+ function insertRow(index, position) {
10928
+ insert(index + (position === "above" ? 0 : 1), {
10929
+ key: "",
10930
+ value: "",
10931
+ disabled: false
11209
10932
  });
11210
10933
  }
11211
10934
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
@@ -11447,183 +11170,105 @@ function getHasUneditableRows(metadata) {
11447
11170
  (value) => !EDITABLE_TYPES.includes(typeof value)
11448
11171
  );
11449
11172
  }
11450
- const SalesChannel = () => {
11451
- const { id } = useParams();
11452
- const { draft_order, isPending, isError, error } = useDraftOrder(
11173
+ const PROMOTION_QUERY_KEY = "promotions";
11174
+ const promotionsQueryKeys = {
11175
+ list: (query2) => [
11176
+ PROMOTION_QUERY_KEY,
11177
+ query2 ? query2 : void 0
11178
+ ],
11179
+ detail: (id, query2) => [
11180
+ PROMOTION_QUERY_KEY,
11453
11181
  id,
11454
- {
11455
- fields: "+sales_channel_id"
11456
- },
11457
- {
11458
- enabled: !!id
11459
- }
11460
- );
11461
- if (isError) {
11462
- throw error;
11463
- }
11464
- const ISrEADY = !!draft_order && !isPending;
11465
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11466
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11467
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11468
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11469
- ] }),
11470
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11471
- ] });
11182
+ query2 ? query2 : void 0
11183
+ ]
11472
11184
  };
11473
- const SalesChannelForm = ({ order }) => {
11474
- const form = useForm({
11475
- defaultValues: {
11476
- sales_channel_id: order.sales_channel_id || ""
11477
- },
11478
- resolver: zodResolver(schema$2)
11185
+ const usePromotions = (query2, options) => {
11186
+ const { data, ...rest } = useQuery({
11187
+ queryKey: promotionsQueryKeys.list(query2),
11188
+ queryFn: async () => sdk.admin.promotion.list(query2),
11189
+ ...options
11479
11190
  });
11480
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11481
- const { handleSuccess } = useRouteModal();
11482
- const onSubmit = form.handleSubmit(async (data) => {
11483
- await mutateAsync(
11484
- {
11485
- sales_channel_id: data.sales_channel_id
11486
- },
11487
- {
11488
- onSuccess: () => {
11489
- toast.success("Sales channel updated");
11490
- handleSuccess();
11491
- },
11492
- onError: (error) => {
11493
- toast.error(error.message);
11494
- }
11495
- }
11496
- );
11497
- });
11498
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11499
- KeyboundForm,
11500
- {
11501
- className: "flex flex-1 flex-col overflow-hidden",
11502
- onSubmit,
11503
- children: [
11504
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11505
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11506
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11507
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11508
- ] }) })
11509
- ]
11510
- }
11511
- ) });
11512
- };
11513
- const SalesChannelField = ({ control, order }) => {
11514
- const salesChannels = useComboboxData({
11515
- queryFn: async (params) => {
11516
- return await sdk.admin.salesChannel.list(params);
11517
- },
11518
- queryKey: ["sales-channels"],
11519
- getOptions: (data) => {
11520
- return data.sales_channels.map((salesChannel) => ({
11521
- label: salesChannel.name,
11522
- value: salesChannel.id
11523
- }));
11524
- },
11525
- defaultValue: order.sales_channel_id || void 0
11526
- });
11527
- return /* @__PURE__ */ jsx(
11528
- Form$2.Field,
11529
- {
11530
- control,
11531
- name: "sales_channel_id",
11532
- render: ({ field }) => {
11533
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11534
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11535
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11536
- Combobox,
11537
- {
11538
- options: salesChannels.options,
11539
- fetchNextPage: salesChannels.fetchNextPage,
11540
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11541
- searchValue: salesChannels.searchValue,
11542
- onSearchValueChange: salesChannels.onSearchValueChange,
11543
- placeholder: "Select sales channel",
11544
- ...field
11545
- }
11546
- ) }),
11547
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11548
- ] });
11549
- }
11550
- }
11551
- );
11191
+ return { ...data, ...rest };
11552
11192
  };
11553
- const schema$2 = objectType({
11554
- sales_channel_id: stringType().min(1)
11555
- });
11556
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11557
- const Shipping = () => {
11558
- var _a;
11193
+ const Promotions = () => {
11559
11194
  const { id } = useParams();
11560
- const { order, isPending, isError, error } = useOrder(id, {
11561
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11562
- });
11563
11195
  const {
11564
11196
  order: preview,
11565
- isPending: isPreviewPending,
11566
11197
  isError: isPreviewError,
11567
11198
  error: previewError
11568
- } = useOrderPreview(id);
11199
+ } = useOrderPreview(id, void 0);
11569
11200
  useInitiateOrderEdit({ preview });
11570
11201
  const { onCancel } = useCancelOrderEdit({ preview });
11571
- if (isError) {
11572
- throw error;
11573
- }
11574
11202
  if (isPreviewError) {
11575
11203
  throw previewError;
11576
11204
  }
11577
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11578
- const isReady = preview && !isPreviewPending && order && !isPending;
11579
- return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11580
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11581
- /* @__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: [
11582
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11583
- /* @__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." }) })
11584
- ] }) }) }),
11585
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11586
- ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11587
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11588
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11589
- ] }) });
11205
+ const isReady = !!preview;
11206
+ return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
11207
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
11208
+ isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
11209
+ ] });
11590
11210
  };
11591
- const ShippingForm = ({ preview, order }) => {
11592
- var _a;
11593
- const { setIsOpen } = useStackedModal();
11211
+ const PromotionForm = ({ preview }) => {
11212
+ const { items, shipping_methods } = preview;
11594
11213
  const [isSubmitting, setIsSubmitting] = useState(false);
11595
- const [data, setData] = useState(null);
11596
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11597
- const { shipping_options } = useShippingOptions(
11214
+ const [comboboxValue, setComboboxValue] = useState("");
11215
+ const { handleSuccess } = useRouteModal();
11216
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11217
+ const promoIds = getPromotionIds(items, shipping_methods);
11218
+ const { promotions, isPending, isError, error } = usePromotions(
11598
11219
  {
11599
- id: appliedShippingOptionIds,
11600
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11220
+ id: promoIds
11601
11221
  },
11602
11222
  {
11603
- enabled: appliedShippingOptionIds.length > 0
11223
+ enabled: !!promoIds.length
11604
11224
  }
11605
11225
  );
11606
- const uniqueShippingProfiles = useMemo(() => {
11607
- const profiles = /* @__PURE__ */ new Map();
11608
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11609
- profiles.set(profile.id, profile);
11610
- });
11611
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11612
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11613
- });
11614
- return Array.from(profiles.values());
11615
- }, [order.items, shipping_options]);
11616
- const { handleSuccess } = useRouteModal();
11226
+ const comboboxData = useComboboxData({
11227
+ queryKey: ["promotions", "combobox", promoIds],
11228
+ queryFn: async (params) => {
11229
+ return await sdk.admin.promotion.list({
11230
+ ...params,
11231
+ id: {
11232
+ $nin: promoIds
11233
+ }
11234
+ });
11235
+ },
11236
+ getOptions: (data) => {
11237
+ return data.promotions.map((promotion) => ({
11238
+ label: promotion.code,
11239
+ value: promotion.code
11240
+ }));
11241
+ }
11242
+ });
11243
+ const add = async (value) => {
11244
+ if (!value) {
11245
+ return;
11246
+ }
11247
+ addPromotions(
11248
+ {
11249
+ promo_codes: [value]
11250
+ },
11251
+ {
11252
+ onError: (e) => {
11253
+ toast.error(e.message);
11254
+ comboboxData.onSearchValueChange("");
11255
+ setComboboxValue("");
11256
+ },
11257
+ onSuccess: () => {
11258
+ comboboxData.onSearchValueChange("");
11259
+ setComboboxValue("");
11260
+ }
11261
+ }
11262
+ );
11263
+ };
11617
11264
  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11618
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11619
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11620
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11265
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11621
11266
  const onSubmit = async () => {
11622
11267
  setIsSubmitting(true);
11623
11268
  let requestSucceeded = false;
11624
11269
  await requestOrderEdit(void 0, {
11625
11270
  onError: (e) => {
11626
- toast.error(`Failed to request order edit: ${e.message}`);
11271
+ toast.error(e.message);
11627
11272
  },
11628
11273
  onSuccess: () => {
11629
11274
  requestSucceeded = true;
@@ -11635,7 +11280,7 @@ const ShippingForm = ({ preview, order }) => {
11635
11280
  }
11636
11281
  await confirmOrderEdit(void 0, {
11637
11282
  onError: (e) => {
11638
- toast.error(`Failed to confirm order edit: ${e.message}`);
11283
+ toast.error(e.message);
11639
11284
  },
11640
11285
  onSuccess: () => {
11641
11286
  handleSuccess();
@@ -11645,924 +11290,1173 @@ const ShippingForm = ({ preview, order }) => {
11645
11290
  }
11646
11291
  });
11647
11292
  };
11648
- const onKeydown = useCallback(
11649
- (e) => {
11650
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11651
- if (data || isSubmitting) {
11652
- return;
11293
+ if (isError) {
11294
+ throw error;
11295
+ }
11296
+ return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11297
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
11298
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
11299
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11300
+ /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11301
+ /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11302
+ ] }),
11303
+ /* @__PURE__ */ jsx(
11304
+ Combobox,
11305
+ {
11306
+ id: "promotion-combobox",
11307
+ "aria-describedby": "promotion-combobox-hint",
11308
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
11309
+ fetchNextPage: comboboxData.fetchNextPage,
11310
+ options: comboboxData.options,
11311
+ onSearchValueChange: comboboxData.onSearchValueChange,
11312
+ searchValue: comboboxData.searchValue,
11313
+ disabled: comboboxData.disabled || isAddingPromotions,
11314
+ onChange: add,
11315
+ value: comboboxValue
11316
+ }
11317
+ )
11318
+ ] }),
11319
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11320
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
11321
+ PromotionItem,
11322
+ {
11323
+ promotion,
11324
+ orderId: preview.id,
11325
+ isLoading: isPending
11326
+ },
11327
+ promotion.id
11328
+ )) })
11329
+ ] }) }),
11330
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11331
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11332
+ /* @__PURE__ */ jsx(
11333
+ Button,
11334
+ {
11335
+ size: "small",
11336
+ type: "submit",
11337
+ isLoading: isSubmitting || isAddingPromotions,
11338
+ children: "Save"
11339
+ }
11340
+ )
11341
+ ] }) })
11342
+ ] });
11343
+ };
11344
+ const PromotionItem = ({
11345
+ promotion,
11346
+ orderId,
11347
+ isLoading
11348
+ }) => {
11349
+ var _a;
11350
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11351
+ const onRemove = async () => {
11352
+ removePromotions(
11353
+ {
11354
+ promo_codes: [promotion.code]
11355
+ },
11356
+ {
11357
+ onError: (e) => {
11358
+ toast.error(e.message);
11653
11359
  }
11654
- onSubmit();
11655
11360
  }
11656
- },
11657
- [data, isSubmitting, onSubmit]
11658
- );
11659
- useEffect(() => {
11660
- document.addEventListener("keydown", onKeydown);
11661
- return () => {
11662
- document.removeEventListener("keydown", onKeydown);
11663
- };
11664
- }, [onKeydown]);
11665
- return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11666
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11667
- /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11668
- /* @__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: [
11361
+ );
11362
+ };
11363
+ const displayValue = getDisplayValue(promotion);
11364
+ return /* @__PURE__ */ jsxs(
11365
+ "div",
11366
+ {
11367
+ className: clx(
11368
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11369
+ {
11370
+ "animate-pulse": isLoading
11371
+ }
11372
+ ),
11373
+ children: [
11669
11374
  /* @__PURE__ */ jsxs("div", { children: [
11670
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11671
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11375
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11376
+ /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11377
+ displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
11378
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
11379
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
11380
+ ] }),
11381
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11382
+ ] })
11672
11383
  ] }),
11673
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11674
- /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11675
- /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11384
+ /* @__PURE__ */ jsx(
11385
+ IconButton,
11386
+ {
11387
+ size: "small",
11388
+ type: "button",
11389
+ variant: "transparent",
11390
+ onClick: onRemove,
11391
+ isLoading: isPending || isLoading,
11392
+ children: /* @__PURE__ */ jsx(XMark, {})
11393
+ }
11394
+ )
11395
+ ]
11396
+ },
11397
+ promotion.id
11398
+ );
11399
+ };
11400
+ function getDisplayValue(promotion) {
11401
+ var _a, _b, _c, _d;
11402
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11403
+ if (!value) {
11404
+ return null;
11405
+ }
11406
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11407
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11408
+ if (!currency) {
11409
+ return null;
11410
+ }
11411
+ return getLocaleAmount(value, currency);
11412
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11413
+ return formatPercentage(value);
11414
+ }
11415
+ return null;
11416
+ }
11417
+ const formatter = new Intl.NumberFormat([], {
11418
+ style: "percent",
11419
+ minimumFractionDigits: 2
11420
+ });
11421
+ const formatPercentage = (value, isPercentageValue = false) => {
11422
+ let val = value || 0;
11423
+ if (!isPercentageValue) {
11424
+ val = val / 100;
11425
+ }
11426
+ return formatter.format(val);
11427
+ };
11428
+ function getPromotionIds(items, shippingMethods) {
11429
+ const promotionIds = /* @__PURE__ */ new Set();
11430
+ for (const item of items) {
11431
+ if (item.adjustments) {
11432
+ for (const adjustment of item.adjustments) {
11433
+ if (adjustment.promotion_id) {
11434
+ promotionIds.add(adjustment.promotion_id);
11435
+ }
11436
+ }
11437
+ }
11438
+ }
11439
+ for (const shippingMethod of shippingMethods) {
11440
+ if (shippingMethod.adjustments) {
11441
+ for (const adjustment of shippingMethod.adjustments) {
11442
+ if (adjustment.promotion_id) {
11443
+ promotionIds.add(adjustment.promotion_id);
11444
+ }
11445
+ }
11446
+ }
11447
+ }
11448
+ return Array.from(promotionIds);
11449
+ }
11450
+ const ShippingAddress = () => {
11451
+ const { id } = useParams();
11452
+ const { order, isPending, isError, error } = useOrder(id, {
11453
+ fields: "+shipping_address"
11454
+ });
11455
+ if (isError) {
11456
+ throw error;
11457
+ }
11458
+ const isReady = !isPending && !!order;
11459
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11460
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11461
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11462
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11463
+ ] }),
11464
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11465
+ ] });
11466
+ };
11467
+ const ShippingAddressForm = ({ order }) => {
11468
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11469
+ const form = useForm({
11470
+ defaultValues: {
11471
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11472
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11473
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11474
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11475
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11476
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11477
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11478
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11479
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11480
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11481
+ },
11482
+ resolver: zodResolver(schema$2)
11483
+ });
11484
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11485
+ const { handleSuccess } = useRouteModal();
11486
+ const onSubmit = form.handleSubmit(async (data) => {
11487
+ await mutateAsync(
11488
+ {
11489
+ shipping_address: {
11490
+ first_name: data.first_name,
11491
+ last_name: data.last_name,
11492
+ company: data.company,
11493
+ address_1: data.address_1,
11494
+ address_2: data.address_2,
11495
+ city: data.city,
11496
+ province: data.province,
11497
+ country_code: data.country_code,
11498
+ postal_code: data.postal_code,
11499
+ phone: data.phone
11500
+ }
11501
+ },
11502
+ {
11503
+ onSuccess: () => {
11504
+ handleSuccess();
11505
+ },
11506
+ onError: (error) => {
11507
+ toast.error(error.message);
11508
+ }
11509
+ }
11510
+ );
11511
+ });
11512
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11513
+ KeyboundForm,
11514
+ {
11515
+ className: "flex flex-1 flex-col overflow-hidden",
11516
+ onSubmit,
11517
+ children: [
11518
+ /* @__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: [
11519
+ /* @__PURE__ */ jsx(
11520
+ Form$2.Field,
11521
+ {
11522
+ control: form.control,
11523
+ name: "country_code",
11524
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11525
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11526
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11527
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11528
+ ] })
11529
+ }
11530
+ ),
11531
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11676
11532
  /* @__PURE__ */ jsx(
11677
- Text,
11533
+ Form$2.Field,
11678
11534
  {
11679
- size: "xsmall",
11680
- weight: "plus",
11681
- className: "text-ui-fg-muted",
11682
- children: "Shipping profile"
11535
+ control: form.control,
11536
+ name: "first_name",
11537
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11538
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11539
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11540
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11541
+ ] })
11683
11542
  }
11684
11543
  ),
11685
11544
  /* @__PURE__ */ jsx(
11686
- Text,
11545
+ Form$2.Field,
11687
11546
  {
11688
- size: "xsmall",
11689
- weight: "plus",
11690
- className: "text-ui-fg-muted",
11691
- children: "Action"
11547
+ control: form.control,
11548
+ name: "last_name",
11549
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11550
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11551
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11552
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11553
+ ] })
11692
11554
  }
11693
11555
  )
11694
11556
  ] }),
11695
- /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11696
- var _a2, _b, _c, _d, _e, _f, _g;
11697
- const items = getItemsWithShippingProfile(
11698
- profile.id,
11699
- order.items
11700
- );
11701
- const hasItems = items.length > 0;
11702
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11703
- (option) => option.shipping_profile_id === profile.id
11704
- );
11705
- const shippingMethod = preview.shipping_methods.find(
11706
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11707
- );
11708
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11709
- (action) => action.action === "SHIPPING_ADD"
11710
- );
11711
- return /* @__PURE__ */ jsxs(
11712
- Accordion.Item,
11713
- {
11714
- value: profile.id,
11715
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11716
- children: [
11717
- /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11718
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11719
- /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
11720
- IconButton,
11721
- {
11722
- size: "2xsmall",
11723
- variant: "transparent",
11724
- className: "group/trigger",
11725
- disabled: !hasItems,
11726
- children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11727
- }
11728
- ) }),
11729
- !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11730
- /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) }),
11731
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
11732
- /* @__PURE__ */ jsx(
11733
- Text,
11734
- {
11735
- size: "small",
11736
- weight: "plus",
11737
- leading: "compact",
11738
- children: profile.name
11739
- }
11740
- ),
11741
- /* @__PURE__ */ jsxs(
11742
- Text,
11743
- {
11744
- size: "small",
11745
- leading: "compact",
11746
- className: "text-ui-fg-subtle",
11747
- children: [
11748
- items.length,
11749
- " ",
11750
- pluralize(items.length, "items", "item")
11751
- ]
11752
- }
11753
- )
11754
- ] })
11755
- ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11756
- /* @__PURE__ */ jsx(
11757
- Tooltip,
11758
- {
11759
- content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
11760
- var _a3, _b2, _c2;
11761
- return /* @__PURE__ */ jsx(
11762
- "li",
11763
- {
11764
- children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11765
- },
11766
- item.id
11767
- );
11768
- }) }),
11769
- children: /* @__PURE__ */ jsxs(
11770
- Badge,
11771
- {
11772
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11773
- size: "xsmall",
11774
- children: [
11775
- /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
11776
- /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
11777
- items.reduce(
11778
- (acc, item) => acc + item.quantity,
11779
- 0
11780
- ),
11781
- "x",
11782
- " ",
11783
- pluralize(items.length, "items", "item")
11784
- ] })
11785
- ]
11786
- }
11787
- )
11788
- }
11789
- ),
11790
- /* @__PURE__ */ jsx(
11791
- Tooltip,
11792
- {
11793
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11794
- children: /* @__PURE__ */ jsxs(
11795
- Badge,
11796
- {
11797
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11798
- size: "xsmall",
11799
- children: [
11800
- /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
11801
- /* @__PURE__ */ jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11802
- ]
11803
- }
11804
- )
11805
- }
11806
- ),
11807
- /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
11808
- Badge,
11809
- {
11810
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11811
- size: "xsmall",
11812
- children: [
11813
- /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
11814
- /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
11815
- ]
11816
- }
11817
- ) })
11818
- ] })
11819
- ] }),
11820
- shippingOption ? /* @__PURE__ */ jsx(
11821
- ActionMenu,
11822
- {
11823
- groups: [
11824
- {
11825
- actions: [
11826
- hasItems ? {
11827
- label: "Edit shipping option",
11828
- icon: /* @__PURE__ */ jsx(Channels, {}),
11829
- onClick: () => {
11830
- setIsOpen(
11831
- STACKED_FOCUS_MODAL_ID,
11832
- true
11833
- );
11834
- setData({
11835
- shippingProfileId: profile.id,
11836
- shippingOption,
11837
- shippingMethod
11838
- });
11839
- }
11840
- } : void 0,
11841
- {
11842
- label: "Remove shipping option",
11843
- icon: /* @__PURE__ */ jsx(Trash, {}),
11844
- onClick: () => {
11845
- if (shippingMethod) {
11846
- if (addShippingMethodAction) {
11847
- removeActionShippingMethod(
11848
- addShippingMethodAction.id
11849
- );
11850
- } else {
11851
- removeShippingMethod(
11852
- shippingMethod.id
11853
- );
11854
- }
11855
- }
11856
- }
11857
- }
11858
- ].filter(Boolean)
11859
- }
11860
- ]
11861
- }
11862
- ) : /* @__PURE__ */ jsx(
11863
- StackedModalTrigger,
11864
- {
11865
- shippingProfileId: profile.id,
11866
- shippingOption,
11867
- shippingMethod,
11868
- setData,
11869
- children: "Add shipping option"
11870
- }
11871
- )
11872
- ] }),
11873
- /* @__PURE__ */ jsxs(Accordion.Content, { children: [
11874
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11875
- items.map((item, idx) => {
11876
- var _a3, _b2, _c2, _d2, _e2;
11877
- return /* @__PURE__ */ jsxs("div", { children: [
11878
- /* @__PURE__ */ jsxs(
11879
- "div",
11880
- {
11881
- className: "px-3 flex items-center gap-x-3",
11882
- children: [
11883
- /* @__PURE__ */ jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(
11884
- Divider,
11885
- {
11886
- variant: "dashed",
11887
- orientation: "vertical"
11888
- }
11889
- ) }),
11890
- /* @__PURE__ */ jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11891
- /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
11892
- Text,
11893
- {
11894
- size: "small",
11895
- leading: "compact",
11896
- className: "text-ui-fg-subtle",
11897
- children: [
11898
- item.quantity,
11899
- "x"
11900
- ]
11901
- }
11902
- ) }),
11903
- /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
11904
- /* @__PURE__ */ jsxs("div", { children: [
11905
- /* @__PURE__ */ jsxs(
11906
- Text,
11907
- {
11908
- size: "small",
11909
- leading: "compact",
11910
- weight: "plus",
11911
- children: [
11912
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11913
- " (",
11914
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11915
- ")"
11916
- ]
11917
- }
11918
- ),
11919
- /* @__PURE__ */ jsx(
11920
- Text,
11921
- {
11922
- size: "small",
11923
- leading: "compact",
11924
- className: "text-ui-fg-subtle",
11925
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11926
- }
11927
- )
11928
- ] })
11929
- ] })
11930
- ]
11931
- },
11932
- item.id
11933
- ),
11934
- idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
11935
- ] }, item.id);
11936
- })
11937
- ] })
11938
- ]
11939
- },
11940
- profile.id
11941
- );
11942
- }) })
11943
- ] }) })
11944
- ] }) }),
11945
- /* @__PURE__ */ jsx(
11946
- StackedFocusModal,
11947
- {
11948
- id: STACKED_FOCUS_MODAL_ID,
11949
- onOpenChangeCallback: (open) => {
11950
- if (!open) {
11951
- setData(null);
11952
- }
11953
- return open;
11954
- },
11955
- children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
11956
- }
11957
- )
11958
- ] }),
11959
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
11960
- /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11961
- /* @__PURE__ */ jsx(
11962
- Button,
11963
- {
11964
- size: "small",
11965
- type: "button",
11966
- isLoading: isSubmitting,
11967
- onClick: onSubmit,
11968
- children: "Save"
11969
- }
11970
- )
11971
- ] }) })
11972
- ] });
11973
- };
11974
- const StackedModalTrigger = ({
11975
- shippingProfileId,
11976
- shippingOption,
11977
- shippingMethod,
11978
- setData,
11979
- children
11980
- }) => {
11981
- const { setIsOpen, getIsOpen } = useStackedModal();
11982
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11983
- const onToggle = () => {
11984
- if (isOpen) {
11985
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11986
- setData(null);
11987
- } else {
11988
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11989
- setData({
11990
- shippingProfileId,
11991
- shippingOption,
11992
- shippingMethod
11993
- });
11994
- }
11995
- };
11996
- return /* @__PURE__ */ jsx(
11997
- Button,
11998
- {
11999
- size: "small",
12000
- variant: "secondary",
12001
- onClick: onToggle,
12002
- className: "text-ui-fg-primary shrink-0",
12003
- children
12004
- }
12005
- );
12006
- };
12007
- const ShippingProfileForm = ({
12008
- data,
12009
- order,
12010
- preview
12011
- }) => {
12012
- var _a, _b, _c, _d, _e, _f;
12013
- const { setIsOpen } = useStackedModal();
12014
- const form = useForm({
12015
- resolver: zodResolver(shippingMethodSchema),
12016
- defaultValues: {
12017
- location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12018
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12019
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12020
- }
12021
- });
12022
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12023
- const {
12024
- mutateAsync: updateShippingMethod,
12025
- isPending: isUpdatingShippingMethod
12026
- } = useDraftOrderUpdateShippingMethod(order.id);
12027
- const onSubmit = form.handleSubmit(async (values) => {
12028
- if (isEqual(values, form.formState.defaultValues)) {
12029
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12030
- return;
12031
- }
12032
- if (data.shippingMethod) {
12033
- await updateShippingMethod(
12034
- {
12035
- method_id: data.shippingMethod.id,
12036
- shipping_option_id: values.shipping_option_id,
12037
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12038
- },
12039
- {
12040
- onError: (e) => {
12041
- toast.error(e.message);
12042
- },
12043
- onSuccess: () => {
12044
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12045
- }
12046
- }
12047
- );
12048
- return;
12049
- }
12050
- await addShippingMethod(
12051
- {
12052
- shipping_option_id: values.shipping_option_id,
12053
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12054
- },
12055
- {
12056
- onError: (e) => {
12057
- toast.error(e.message);
12058
- },
12059
- onSuccess: () => {
12060
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12061
- }
12062
- }
12063
- );
12064
- });
12065
- return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12066
- KeyboundForm,
12067
- {
12068
- className: "flex h-full flex-col overflow-hidden",
12069
- onSubmit,
12070
- children: [
12071
- /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12072
- /* @__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: [
12073
- /* @__PURE__ */ jsxs("div", { children: [
12074
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12075
- /* @__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." }) })
12076
- ] }),
12077
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12078
11557
  /* @__PURE__ */ jsx(
12079
- LocationField,
11558
+ Form$2.Field,
12080
11559
  {
12081
11560
  control: form.control,
12082
- setValue: form.setValue
11561
+ name: "company",
11562
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11563
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11564
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11565
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11566
+ ] })
12083
11567
  }
12084
11568
  ),
12085
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12086
11569
  /* @__PURE__ */ jsx(
12087
- ShippingOptionField,
11570
+ Form$2.Field,
12088
11571
  {
12089
- shippingProfileId: data.shippingProfileId,
12090
- preview,
12091
- control: form.control
11572
+ control: form.control,
11573
+ name: "address_1",
11574
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11575
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11576
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11577
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11578
+ ] })
12092
11579
  }
12093
11580
  ),
12094
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12095
11581
  /* @__PURE__ */ jsx(
12096
- CustomAmountField,
11582
+ Form$2.Field,
12097
11583
  {
12098
11584
  control: form.control,
12099
- currencyCode: order.currency_code
11585
+ name: "address_2",
11586
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11587
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11588
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11589
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11590
+ ] })
12100
11591
  }
12101
11592
  ),
12102
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11593
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11594
+ /* @__PURE__ */ jsx(
11595
+ Form$2.Field,
11596
+ {
11597
+ control: form.control,
11598
+ name: "postal_code",
11599
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11600
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11601
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11602
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11603
+ ] })
11604
+ }
11605
+ ),
11606
+ /* @__PURE__ */ jsx(
11607
+ Form$2.Field,
11608
+ {
11609
+ control: form.control,
11610
+ name: "city",
11611
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11612
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11613
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11614
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11615
+ ] })
11616
+ }
11617
+ )
11618
+ ] }),
12103
11619
  /* @__PURE__ */ jsx(
12104
- ItemsPreview,
11620
+ Form$2.Field,
12105
11621
  {
12106
- order,
12107
- shippingProfileId: data.shippingProfileId
11622
+ control: form.control,
11623
+ name: "province",
11624
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11625
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11626
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11627
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11628
+ ] })
12108
11629
  }
12109
- )
12110
- ] }) }) }),
12111
- /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12112
- /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11630
+ ),
12113
11631
  /* @__PURE__ */ jsx(
12114
- Button,
11632
+ Form$2.Field,
12115
11633
  {
12116
- size: "small",
12117
- type: "submit",
12118
- isLoading: isPending || isUpdatingShippingMethod,
12119
- children: data.shippingMethod ? "Update" : "Add"
11634
+ control: form.control,
11635
+ name: "phone",
11636
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11637
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11638
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11639
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11640
+ ] })
12120
11641
  }
12121
11642
  )
11643
+ ] }) }),
11644
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11645
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11646
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12122
11647
  ] }) })
12123
11648
  ]
12124
11649
  }
12125
- ) }) });
11650
+ ) });
12126
11651
  };
12127
- const shippingMethodSchema = objectType({
12128
- location_id: stringType(),
12129
- shipping_option_id: stringType(),
12130
- custom_amount: unionType([numberType(), stringType()]).optional()
12131
- });
12132
- const ItemsPreview = ({ order, shippingProfileId }) => {
12133
- const matches = order.items.filter(
12134
- (item) => {
12135
- var _a, _b, _c;
12136
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
11652
+ const schema$2 = addressSchema;
11653
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11654
+ const Shipping = () => {
11655
+ var _a;
11656
+ const { id } = useParams();
11657
+ const { order, isPending, isError, error } = useOrder(id, {
11658
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11659
+ });
11660
+ const {
11661
+ order: preview,
11662
+ isPending: isPreviewPending,
11663
+ isError: isPreviewError,
11664
+ error: previewError
11665
+ } = useOrderPreview(id);
11666
+ useInitiateOrderEdit({ preview });
11667
+ const { onCancel } = useCancelOrderEdit({ preview });
11668
+ if (isError) {
11669
+ throw error;
11670
+ }
11671
+ if (isPreviewError) {
11672
+ throw previewError;
11673
+ }
11674
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11675
+ const isReady = preview && !isPreviewPending && order && !isPending;
11676
+ return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11677
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11678
+ /* @__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: [
11679
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11680
+ /* @__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." }) })
11681
+ ] }) }) }),
11682
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11683
+ ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11684
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11685
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11686
+ ] }) });
11687
+ };
11688
+ const ShippingForm = ({ preview, order }) => {
11689
+ var _a;
11690
+ const { setIsOpen } = useStackedModal();
11691
+ const [isSubmitting, setIsSubmitting] = useState(false);
11692
+ const [data, setData] = useState(null);
11693
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11694
+ const { shipping_options } = useShippingOptions(
11695
+ {
11696
+ id: appliedShippingOptionIds,
11697
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11698
+ },
11699
+ {
11700
+ enabled: appliedShippingOptionIds.length > 0
12137
11701
  }
12138
11702
  );
12139
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12140
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12141
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12142
- /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12143
- ] }) }),
12144
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12145
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12146
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12147
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12148
- ] }),
12149
- /* @__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(
12150
- "div",
12151
- {
12152
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12153
- children: [
12154
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12155
- /* @__PURE__ */ jsx(
12156
- Thumbnail,
12157
- {
12158
- thumbnail: item.thumbnail,
12159
- alt: item.product_title ?? void 0
12160
- }
12161
- ),
12162
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12163
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12164
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12165
- /* @__PURE__ */ jsxs(
12166
- Text,
12167
- {
12168
- size: "small",
12169
- leading: "compact",
12170
- className: "text-ui-fg-subtle",
12171
- children: [
12172
- "(",
12173
- item.variant_title,
12174
- ")"
12175
- ]
12176
- }
12177
- )
12178
- ] }),
12179
- /* @__PURE__ */ jsx(
12180
- Text,
12181
- {
12182
- size: "small",
12183
- leading: "compact",
12184
- className: "text-ui-fg-subtle",
12185
- children: item.variant_sku
12186
- }
12187
- )
12188
- ] })
12189
- ] }),
12190
- /* @__PURE__ */ jsxs(
11703
+ const uniqueShippingProfiles = useMemo(() => {
11704
+ const profiles = /* @__PURE__ */ new Map();
11705
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11706
+ profiles.set(profile.id, profile);
11707
+ });
11708
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11709
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11710
+ });
11711
+ return Array.from(profiles.values());
11712
+ }, [order.items, shipping_options]);
11713
+ const { handleSuccess } = useRouteModal();
11714
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11715
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11716
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11717
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11718
+ const onSubmit = async () => {
11719
+ setIsSubmitting(true);
11720
+ let requestSucceeded = false;
11721
+ await requestOrderEdit(void 0, {
11722
+ onError: (e) => {
11723
+ toast.error(`Failed to request order edit: ${e.message}`);
11724
+ },
11725
+ onSuccess: () => {
11726
+ requestSucceeded = true;
11727
+ }
11728
+ });
11729
+ if (!requestSucceeded) {
11730
+ setIsSubmitting(false);
11731
+ return;
11732
+ }
11733
+ await confirmOrderEdit(void 0, {
11734
+ onError: (e) => {
11735
+ toast.error(`Failed to confirm order edit: ${e.message}`);
11736
+ },
11737
+ onSuccess: () => {
11738
+ handleSuccess();
11739
+ },
11740
+ onSettled: () => {
11741
+ setIsSubmitting(false);
11742
+ }
11743
+ });
11744
+ };
11745
+ const onKeydown = useCallback(
11746
+ (e) => {
11747
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11748
+ if (data || isSubmitting) {
11749
+ return;
11750
+ }
11751
+ onSubmit();
11752
+ }
11753
+ },
11754
+ [data, isSubmitting, onSubmit]
11755
+ );
11756
+ useEffect(() => {
11757
+ document.addEventListener("keydown", onKeydown);
11758
+ return () => {
11759
+ document.removeEventListener("keydown", onKeydown);
11760
+ };
11761
+ }, [onKeydown]);
11762
+ return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11763
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11764
+ /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11765
+ /* @__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: [
11766
+ /* @__PURE__ */ jsxs("div", { children: [
11767
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11768
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11769
+ ] }),
11770
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11771
+ /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11772
+ /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11773
+ /* @__PURE__ */ jsx(
12191
11774
  Text,
12192
11775
  {
12193
- size: "small",
12194
- leading: "compact",
12195
- className: "text-ui-fg-subtle",
12196
- children: [
12197
- item.quantity,
12198
- "x"
12199
- ]
12200
- }
12201
- )
12202
- ]
12203
- },
12204
- item.id
12205
- )) : /* @__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: [
12206
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12207
- /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12208
- 'No items found for "',
12209
- query,
12210
- '".'
12211
- ] })
12212
- ] }) })
12213
- ] })
12214
- ] });
12215
- };
12216
- const LocationField = ({ control, setValue }) => {
12217
- const locations = useComboboxData({
12218
- queryKey: ["locations"],
12219
- queryFn: async (params) => {
12220
- return await sdk.admin.stockLocation.list(params);
12221
- },
12222
- getOptions: (data) => {
12223
- return data.stock_locations.map((location) => ({
12224
- label: location.name,
12225
- value: location.id
12226
- }));
12227
- }
12228
- });
12229
- return /* @__PURE__ */ jsx(
12230
- Form$2.Field,
12231
- {
12232
- control,
12233
- name: "location_id",
12234
- render: ({ field: { onChange, ...field } }) => {
12235
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12236
- /* @__PURE__ */ jsxs("div", { children: [
12237
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12238
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
11776
+ size: "xsmall",
11777
+ weight: "plus",
11778
+ className: "text-ui-fg-muted",
11779
+ children: "Shipping profile"
11780
+ }
11781
+ ),
11782
+ /* @__PURE__ */ jsx(
11783
+ Text,
11784
+ {
11785
+ size: "xsmall",
11786
+ weight: "plus",
11787
+ className: "text-ui-fg-muted",
11788
+ children: "Action"
11789
+ }
11790
+ )
12239
11791
  ] }),
12240
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12241
- Combobox,
12242
- {
12243
- options: locations.options,
12244
- fetchNextPage: locations.fetchNextPage,
12245
- isFetchingNextPage: locations.isFetchingNextPage,
12246
- searchValue: locations.searchValue,
12247
- onSearchValueChange: locations.onSearchValueChange,
12248
- placeholder: "Select location",
12249
- onChange: (value) => {
12250
- setValue("shipping_option_id", "", {
12251
- shouldDirty: true,
12252
- shouldTouch: true
12253
- });
12254
- onChange(value);
11792
+ /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11793
+ var _a2, _b, _c, _d, _e, _f, _g;
11794
+ const items = getItemsWithShippingProfile(
11795
+ profile.id,
11796
+ order.items
11797
+ );
11798
+ const hasItems = items.length > 0;
11799
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11800
+ (option) => option.shipping_profile_id === profile.id
11801
+ );
11802
+ const shippingMethod = preview.shipping_methods.find(
11803
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11804
+ );
11805
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11806
+ (action) => action.action === "SHIPPING_ADD"
11807
+ );
11808
+ return /* @__PURE__ */ jsxs(
11809
+ Accordion.Item,
11810
+ {
11811
+ value: profile.id,
11812
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11813
+ children: [
11814
+ /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11815
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11816
+ /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
11817
+ IconButton,
11818
+ {
11819
+ size: "2xsmall",
11820
+ variant: "transparent",
11821
+ className: "group/trigger",
11822
+ disabled: !hasItems,
11823
+ children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11824
+ }
11825
+ ) }),
11826
+ !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11827
+ /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) }),
11828
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
11829
+ /* @__PURE__ */ jsx(
11830
+ Text,
11831
+ {
11832
+ size: "small",
11833
+ weight: "plus",
11834
+ leading: "compact",
11835
+ children: profile.name
11836
+ }
11837
+ ),
11838
+ /* @__PURE__ */ jsxs(
11839
+ Text,
11840
+ {
11841
+ size: "small",
11842
+ leading: "compact",
11843
+ className: "text-ui-fg-subtle",
11844
+ children: [
11845
+ items.length,
11846
+ " ",
11847
+ pluralize(items.length, "items", "item")
11848
+ ]
11849
+ }
11850
+ )
11851
+ ] })
11852
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11853
+ /* @__PURE__ */ jsx(
11854
+ Tooltip,
11855
+ {
11856
+ content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
11857
+ var _a3, _b2, _c2;
11858
+ return /* @__PURE__ */ jsx(
11859
+ "li",
11860
+ {
11861
+ children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11862
+ },
11863
+ item.id
11864
+ );
11865
+ }) }),
11866
+ children: /* @__PURE__ */ jsxs(
11867
+ Badge,
11868
+ {
11869
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11870
+ size: "xsmall",
11871
+ children: [
11872
+ /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
11873
+ /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
11874
+ items.reduce(
11875
+ (acc, item) => acc + item.quantity,
11876
+ 0
11877
+ ),
11878
+ "x",
11879
+ " ",
11880
+ pluralize(items.length, "items", "item")
11881
+ ] })
11882
+ ]
11883
+ }
11884
+ )
11885
+ }
11886
+ ),
11887
+ /* @__PURE__ */ jsx(
11888
+ Tooltip,
11889
+ {
11890
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11891
+ children: /* @__PURE__ */ jsxs(
11892
+ Badge,
11893
+ {
11894
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11895
+ size: "xsmall",
11896
+ children: [
11897
+ /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
11898
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11899
+ ]
11900
+ }
11901
+ )
11902
+ }
11903
+ ),
11904
+ /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
11905
+ Badge,
11906
+ {
11907
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11908
+ size: "xsmall",
11909
+ children: [
11910
+ /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
11911
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
11912
+ ]
11913
+ }
11914
+ ) })
11915
+ ] })
11916
+ ] }),
11917
+ shippingOption ? /* @__PURE__ */ jsx(
11918
+ ActionMenu,
11919
+ {
11920
+ groups: [
11921
+ {
11922
+ actions: [
11923
+ hasItems ? {
11924
+ label: "Edit shipping option",
11925
+ icon: /* @__PURE__ */ jsx(Channels, {}),
11926
+ onClick: () => {
11927
+ setIsOpen(
11928
+ STACKED_FOCUS_MODAL_ID,
11929
+ true
11930
+ );
11931
+ setData({
11932
+ shippingProfileId: profile.id,
11933
+ shippingOption,
11934
+ shippingMethod
11935
+ });
11936
+ }
11937
+ } : void 0,
11938
+ {
11939
+ label: "Remove shipping option",
11940
+ icon: /* @__PURE__ */ jsx(Trash, {}),
11941
+ onClick: () => {
11942
+ if (shippingMethod) {
11943
+ if (addShippingMethodAction) {
11944
+ removeActionShippingMethod(
11945
+ addShippingMethodAction.id
11946
+ );
11947
+ } else {
11948
+ removeShippingMethod(
11949
+ shippingMethod.id
11950
+ );
11951
+ }
11952
+ }
11953
+ }
11954
+ }
11955
+ ].filter(Boolean)
11956
+ }
11957
+ ]
11958
+ }
11959
+ ) : /* @__PURE__ */ jsx(
11960
+ StackedModalTrigger,
11961
+ {
11962
+ shippingProfileId: profile.id,
11963
+ shippingOption,
11964
+ shippingMethod,
11965
+ setData,
11966
+ children: "Add shipping option"
11967
+ }
11968
+ )
11969
+ ] }),
11970
+ /* @__PURE__ */ jsxs(Accordion.Content, { children: [
11971
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11972
+ items.map((item, idx) => {
11973
+ var _a3, _b2, _c2, _d2, _e2;
11974
+ return /* @__PURE__ */ jsxs("div", { children: [
11975
+ /* @__PURE__ */ jsxs(
11976
+ "div",
11977
+ {
11978
+ className: "px-3 flex items-center gap-x-3",
11979
+ children: [
11980
+ /* @__PURE__ */ jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(
11981
+ Divider,
11982
+ {
11983
+ variant: "dashed",
11984
+ orientation: "vertical"
11985
+ }
11986
+ ) }),
11987
+ /* @__PURE__ */ jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11988
+ /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
11989
+ Text,
11990
+ {
11991
+ size: "small",
11992
+ leading: "compact",
11993
+ className: "text-ui-fg-subtle",
11994
+ children: [
11995
+ item.quantity,
11996
+ "x"
11997
+ ]
11998
+ }
11999
+ ) }),
12000
+ /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
12001
+ /* @__PURE__ */ jsxs("div", { children: [
12002
+ /* @__PURE__ */ jsxs(
12003
+ Text,
12004
+ {
12005
+ size: "small",
12006
+ leading: "compact",
12007
+ weight: "plus",
12008
+ children: [
12009
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12010
+ " (",
12011
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12012
+ ")"
12013
+ ]
12014
+ }
12015
+ ),
12016
+ /* @__PURE__ */ jsx(
12017
+ Text,
12018
+ {
12019
+ size: "small",
12020
+ leading: "compact",
12021
+ className: "text-ui-fg-subtle",
12022
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12023
+ }
12024
+ )
12025
+ ] })
12026
+ ] })
12027
+ ]
12028
+ },
12029
+ item.id
12030
+ ),
12031
+ idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
12032
+ ] }, item.id);
12033
+ })
12034
+ ] })
12035
+ ]
12255
12036
  },
12256
- ...field
12037
+ profile.id
12038
+ );
12039
+ }) })
12040
+ ] }) })
12041
+ ] }) }),
12042
+ /* @__PURE__ */ jsx(
12043
+ StackedFocusModal,
12044
+ {
12045
+ id: STACKED_FOCUS_MODAL_ID,
12046
+ onOpenChangeCallback: (open) => {
12047
+ if (!open) {
12048
+ setData(null);
12257
12049
  }
12258
- ) })
12259
- ] }) });
12260
- }
12261
- }
12262
- );
12050
+ return open;
12051
+ },
12052
+ children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
12053
+ }
12054
+ )
12055
+ ] }),
12056
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12057
+ /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12058
+ /* @__PURE__ */ jsx(
12059
+ Button,
12060
+ {
12061
+ size: "small",
12062
+ type: "button",
12063
+ isLoading: isSubmitting,
12064
+ onClick: onSubmit,
12065
+ children: "Save"
12066
+ }
12067
+ )
12068
+ ] }) })
12069
+ ] });
12263
12070
  };
12264
- const ShippingOptionField = ({
12071
+ const StackedModalTrigger = ({
12265
12072
  shippingProfileId,
12266
- preview,
12267
- control
12073
+ shippingOption,
12074
+ shippingMethod,
12075
+ setData,
12076
+ children
12268
12077
  }) => {
12269
- var _a;
12270
- const locationId = useWatch({ control, name: "location_id" });
12271
- const shippingOptions = useComboboxData({
12272
- queryKey: ["shipping_options", locationId, shippingProfileId],
12273
- queryFn: async (params) => {
12274
- return await sdk.admin.shippingOption.list({
12275
- ...params,
12276
- stock_location_id: locationId,
12277
- shipping_profile_id: shippingProfileId
12078
+ const { setIsOpen, getIsOpen } = useStackedModal();
12079
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12080
+ const onToggle = () => {
12081
+ if (isOpen) {
12082
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12083
+ setData(null);
12084
+ } else {
12085
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12086
+ setData({
12087
+ shippingProfileId,
12088
+ shippingOption,
12089
+ shippingMethod
12278
12090
  });
12279
- },
12280
- getOptions: (data) => {
12281
- return data.shipping_options.map((option) => {
12282
- var _a2;
12283
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12284
- (r) => r.attribute === "is_return" && r.value === "true"
12285
- )) {
12286
- return void 0;
12287
- }
12288
- return {
12289
- label: option.name,
12290
- value: option.id
12291
- };
12292
- }).filter(Boolean);
12293
- },
12294
- enabled: !!locationId && !!shippingProfileId,
12295
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12296
- });
12297
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12298
- return /* @__PURE__ */ jsx(
12299
- Form$2.Field,
12300
- {
12301
- control,
12302
- name: "shipping_option_id",
12303
- render: ({ field }) => {
12304
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12305
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12306
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12307
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12308
- ] }),
12309
- /* @__PURE__ */ jsx(
12310
- ConditionalTooltip,
12311
- {
12312
- content: tooltipContent,
12313
- showTooltip: !locationId || !shippingProfileId,
12314
- children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12315
- Combobox,
12316
- {
12317
- options: shippingOptions.options,
12318
- fetchNextPage: shippingOptions.fetchNextPage,
12319
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12320
- searchValue: shippingOptions.searchValue,
12321
- onSearchValueChange: shippingOptions.onSearchValueChange,
12322
- placeholder: "Select shipping option",
12323
- ...field,
12324
- disabled: !locationId || !shippingProfileId
12325
- }
12326
- ) }) })
12327
- }
12328
- )
12329
- ] }) });
12330
- }
12331
12091
  }
12332
- );
12333
- };
12334
- const CustomAmountField = ({
12335
- control,
12336
- currencyCode
12337
- }) => {
12092
+ };
12338
12093
  return /* @__PURE__ */ jsx(
12339
- Form$2.Field,
12094
+ Button,
12340
12095
  {
12341
- control,
12342
- name: "custom_amount",
12343
- render: ({ field: { onChange, ...field } }) => {
12344
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12345
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12346
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12347
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12348
- ] }),
12349
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12350
- CurrencyInput,
12351
- {
12352
- ...field,
12353
- onValueChange: (value) => onChange(value),
12354
- symbol: getNativeSymbol(currencyCode),
12355
- code: currencyCode
12356
- }
12357
- ) })
12358
- ] });
12359
- }
12096
+ size: "small",
12097
+ variant: "secondary",
12098
+ onClick: onToggle,
12099
+ className: "text-ui-fg-primary shrink-0",
12100
+ children
12360
12101
  }
12361
12102
  );
12362
12103
  };
12363
- const ShippingAddress = () => {
12364
- const { id } = useParams();
12365
- const { order, isPending, isError, error } = useOrder(id, {
12366
- fields: "+shipping_address"
12367
- });
12368
- if (isError) {
12369
- throw error;
12370
- }
12371
- const isReady = !isPending && !!order;
12372
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12373
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12374
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12375
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12376
- ] }),
12377
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12378
- ] });
12379
- };
12380
- const ShippingAddressForm = ({ order }) => {
12381
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12104
+ const ShippingProfileForm = ({
12105
+ data,
12106
+ order,
12107
+ preview
12108
+ }) => {
12109
+ var _a, _b, _c, _d, _e, _f;
12110
+ const { setIsOpen } = useStackedModal();
12382
12111
  const form = useForm({
12112
+ resolver: zodResolver(shippingMethodSchema),
12383
12113
  defaultValues: {
12384
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12385
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12386
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12387
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12388
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12389
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12390
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12391
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12392
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12393
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12394
- },
12395
- resolver: zodResolver(schema$1)
12114
+ location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12115
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12116
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12117
+ }
12396
12118
  });
12397
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12398
- const { handleSuccess } = useRouteModal();
12399
- const onSubmit = form.handleSubmit(async (data) => {
12400
- await mutateAsync(
12401
- {
12402
- shipping_address: {
12403
- first_name: data.first_name,
12404
- last_name: data.last_name,
12405
- company: data.company,
12406
- address_1: data.address_1,
12407
- address_2: data.address_2,
12408
- city: data.city,
12409
- province: data.province,
12410
- country_code: data.country_code,
12411
- postal_code: data.postal_code,
12412
- phone: data.phone
12119
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12120
+ const {
12121
+ mutateAsync: updateShippingMethod,
12122
+ isPending: isUpdatingShippingMethod
12123
+ } = useDraftOrderUpdateShippingMethod(order.id);
12124
+ const onSubmit = form.handleSubmit(async (values) => {
12125
+ if (isEqual(values, form.formState.defaultValues)) {
12126
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12127
+ return;
12128
+ }
12129
+ if (data.shippingMethod) {
12130
+ await updateShippingMethod(
12131
+ {
12132
+ method_id: data.shippingMethod.id,
12133
+ shipping_option_id: values.shipping_option_id,
12134
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12135
+ },
12136
+ {
12137
+ onError: (e) => {
12138
+ toast.error(e.message);
12139
+ },
12140
+ onSuccess: () => {
12141
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12142
+ }
12413
12143
  }
12144
+ );
12145
+ return;
12146
+ }
12147
+ await addShippingMethod(
12148
+ {
12149
+ shipping_option_id: values.shipping_option_id,
12150
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12414
12151
  },
12415
12152
  {
12416
- onSuccess: () => {
12417
- handleSuccess();
12153
+ onError: (e) => {
12154
+ toast.error(e.message);
12418
12155
  },
12419
- onError: (error) => {
12420
- toast.error(error.message);
12156
+ onSuccess: () => {
12157
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12421
12158
  }
12422
12159
  }
12423
12160
  );
12424
12161
  });
12425
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12162
+ return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12426
12163
  KeyboundForm,
12427
12164
  {
12428
- className: "flex flex-1 flex-col overflow-hidden",
12165
+ className: "flex h-full flex-col overflow-hidden",
12429
12166
  onSubmit,
12430
12167
  children: [
12431
- /* @__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: [
12168
+ /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12169
+ /* @__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: [
12170
+ /* @__PURE__ */ jsxs("div", { children: [
12171
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12172
+ /* @__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." }) })
12173
+ ] }),
12174
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12432
12175
  /* @__PURE__ */ jsx(
12433
- Form$2.Field,
12176
+ LocationField,
12434
12177
  {
12435
12178
  control: form.control,
12436
- name: "country_code",
12437
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12438
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12439
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12440
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12441
- ] })
12179
+ setValue: form.setValue
12442
12180
  }
12443
12181
  ),
12444
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12445
- /* @__PURE__ */ jsx(
12446
- Form$2.Field,
12447
- {
12448
- control: form.control,
12449
- name: "first_name",
12450
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12451
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12452
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12453
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12454
- ] })
12455
- }
12456
- ),
12457
- /* @__PURE__ */ jsx(
12458
- Form$2.Field,
12459
- {
12460
- control: form.control,
12461
- name: "last_name",
12462
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12463
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12464
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12465
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12466
- ] })
12467
- }
12468
- )
12469
- ] }),
12182
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12470
12183
  /* @__PURE__ */ jsx(
12471
- Form$2.Field,
12184
+ ShippingOptionField,
12472
12185
  {
12473
- control: form.control,
12474
- name: "company",
12475
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12476
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12477
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12478
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12479
- ] })
12186
+ shippingProfileId: data.shippingProfileId,
12187
+ preview,
12188
+ control: form.control
12480
12189
  }
12481
12190
  ),
12191
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12482
12192
  /* @__PURE__ */ jsx(
12483
- Form$2.Field,
12193
+ CustomAmountField,
12484
12194
  {
12485
12195
  control: form.control,
12486
- name: "address_1",
12487
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12488
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12489
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12490
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12491
- ] })
12196
+ currencyCode: order.currency_code
12492
12197
  }
12493
12198
  ),
12199
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12494
12200
  /* @__PURE__ */ jsx(
12495
- Form$2.Field,
12201
+ ItemsPreview,
12496
12202
  {
12497
- control: form.control,
12498
- name: "address_2",
12499
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12500
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12501
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12502
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12503
- ] })
12203
+ order,
12204
+ shippingProfileId: data.shippingProfileId
12504
12205
  }
12505
- ),
12506
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12507
- /* @__PURE__ */ jsx(
12508
- Form$2.Field,
12509
- {
12510
- control: form.control,
12511
- name: "postal_code",
12512
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12513
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12514
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12515
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12516
- ] })
12517
- }
12518
- ),
12519
- /* @__PURE__ */ jsx(
12520
- Form$2.Field,
12206
+ )
12207
+ ] }) }) }),
12208
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12209
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12210
+ /* @__PURE__ */ jsx(
12211
+ Button,
12212
+ {
12213
+ size: "small",
12214
+ type: "submit",
12215
+ isLoading: isPending || isUpdatingShippingMethod,
12216
+ children: data.shippingMethod ? "Update" : "Add"
12217
+ }
12218
+ )
12219
+ ] }) })
12220
+ ]
12221
+ }
12222
+ ) }) });
12223
+ };
12224
+ const shippingMethodSchema = objectType({
12225
+ location_id: stringType(),
12226
+ shipping_option_id: stringType(),
12227
+ custom_amount: unionType([numberType(), stringType()]).optional()
12228
+ });
12229
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12230
+ const matches = order.items.filter(
12231
+ (item) => {
12232
+ var _a, _b, _c;
12233
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12234
+ }
12235
+ );
12236
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12237
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12238
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12239
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12240
+ ] }) }),
12241
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12242
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12243
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12244
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12245
+ ] }),
12246
+ /* @__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(
12247
+ "div",
12248
+ {
12249
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12250
+ children: [
12251
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12252
+ /* @__PURE__ */ jsx(
12253
+ Thumbnail,
12254
+ {
12255
+ thumbnail: item.thumbnail,
12256
+ alt: item.product_title ?? void 0
12257
+ }
12258
+ ),
12259
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12260
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12261
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12262
+ /* @__PURE__ */ jsxs(
12263
+ Text,
12264
+ {
12265
+ size: "small",
12266
+ leading: "compact",
12267
+ className: "text-ui-fg-subtle",
12268
+ children: [
12269
+ "(",
12270
+ item.variant_title,
12271
+ ")"
12272
+ ]
12273
+ }
12274
+ )
12275
+ ] }),
12276
+ /* @__PURE__ */ jsx(
12277
+ Text,
12278
+ {
12279
+ size: "small",
12280
+ leading: "compact",
12281
+ className: "text-ui-fg-subtle",
12282
+ children: item.variant_sku
12283
+ }
12284
+ )
12285
+ ] })
12286
+ ] }),
12287
+ /* @__PURE__ */ jsxs(
12288
+ Text,
12521
12289
  {
12522
- control: form.control,
12523
- name: "city",
12524
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12525
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12526
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12527
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12528
- ] })
12290
+ size: "small",
12291
+ leading: "compact",
12292
+ className: "text-ui-fg-subtle",
12293
+ children: [
12294
+ item.quantity,
12295
+ "x"
12296
+ ]
12529
12297
  }
12530
12298
  )
12299
+ ]
12300
+ },
12301
+ item.id
12302
+ )) : /* @__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: [
12303
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12304
+ /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12305
+ 'No items found for "',
12306
+ query,
12307
+ '".'
12308
+ ] })
12309
+ ] }) })
12310
+ ] })
12311
+ ] });
12312
+ };
12313
+ const LocationField = ({ control, setValue }) => {
12314
+ const locations = useComboboxData({
12315
+ queryKey: ["locations"],
12316
+ queryFn: async (params) => {
12317
+ return await sdk.admin.stockLocation.list(params);
12318
+ },
12319
+ getOptions: (data) => {
12320
+ return data.stock_locations.map((location) => ({
12321
+ label: location.name,
12322
+ value: location.id
12323
+ }));
12324
+ }
12325
+ });
12326
+ return /* @__PURE__ */ jsx(
12327
+ Form$2.Field,
12328
+ {
12329
+ control,
12330
+ name: "location_id",
12331
+ render: ({ field: { onChange, ...field } }) => {
12332
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12333
+ /* @__PURE__ */ jsxs("div", { children: [
12334
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12335
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12336
+ ] }),
12337
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12338
+ Combobox,
12339
+ {
12340
+ options: locations.options,
12341
+ fetchNextPage: locations.fetchNextPage,
12342
+ isFetchingNextPage: locations.isFetchingNextPage,
12343
+ searchValue: locations.searchValue,
12344
+ onSearchValueChange: locations.onSearchValueChange,
12345
+ placeholder: "Select location",
12346
+ onChange: (value) => {
12347
+ setValue("shipping_option_id", "", {
12348
+ shouldDirty: true,
12349
+ shouldTouch: true
12350
+ });
12351
+ onChange(value);
12352
+ },
12353
+ ...field
12354
+ }
12355
+ ) })
12356
+ ] }) });
12357
+ }
12358
+ }
12359
+ );
12360
+ };
12361
+ const ShippingOptionField = ({
12362
+ shippingProfileId,
12363
+ preview,
12364
+ control
12365
+ }) => {
12366
+ var _a;
12367
+ const locationId = useWatch({ control, name: "location_id" });
12368
+ const shippingOptions = useComboboxData({
12369
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12370
+ queryFn: async (params) => {
12371
+ return await sdk.admin.shippingOption.list({
12372
+ ...params,
12373
+ stock_location_id: locationId,
12374
+ shipping_profile_id: shippingProfileId
12375
+ });
12376
+ },
12377
+ getOptions: (data) => {
12378
+ return data.shipping_options.map((option) => {
12379
+ var _a2;
12380
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12381
+ (r) => r.attribute === "is_return" && r.value === "true"
12382
+ )) {
12383
+ return void 0;
12384
+ }
12385
+ return {
12386
+ label: option.name,
12387
+ value: option.id
12388
+ };
12389
+ }).filter(Boolean);
12390
+ },
12391
+ enabled: !!locationId && !!shippingProfileId,
12392
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12393
+ });
12394
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12395
+ return /* @__PURE__ */ jsx(
12396
+ Form$2.Field,
12397
+ {
12398
+ control,
12399
+ name: "shipping_option_id",
12400
+ render: ({ field }) => {
12401
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12402
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12403
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12404
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12531
12405
  ] }),
12532
12406
  /* @__PURE__ */ jsx(
12533
- Form$2.Field,
12407
+ ConditionalTooltip,
12534
12408
  {
12535
- control: form.control,
12536
- name: "province",
12537
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12538
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12539
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12540
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12541
- ] })
12409
+ content: tooltipContent,
12410
+ showTooltip: !locationId || !shippingProfileId,
12411
+ children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12412
+ Combobox,
12413
+ {
12414
+ options: shippingOptions.options,
12415
+ fetchNextPage: shippingOptions.fetchNextPage,
12416
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12417
+ searchValue: shippingOptions.searchValue,
12418
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12419
+ placeholder: "Select shipping option",
12420
+ ...field,
12421
+ disabled: !locationId || !shippingProfileId
12422
+ }
12423
+ ) }) })
12542
12424
  }
12543
- ),
12544
- /* @__PURE__ */ jsx(
12545
- Form$2.Field,
12425
+ )
12426
+ ] }) });
12427
+ }
12428
+ }
12429
+ );
12430
+ };
12431
+ const CustomAmountField = ({
12432
+ control,
12433
+ currencyCode
12434
+ }) => {
12435
+ return /* @__PURE__ */ jsx(
12436
+ Form$2.Field,
12437
+ {
12438
+ control,
12439
+ name: "custom_amount",
12440
+ render: ({ field: { onChange, ...field } }) => {
12441
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12442
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12443
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12444
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12445
+ ] }),
12446
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12447
+ CurrencyInput,
12546
12448
  {
12547
- control: form.control,
12548
- name: "phone",
12549
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12550
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12551
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12552
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12553
- ] })
12449
+ ...field,
12450
+ onValueChange: (value) => onChange(value),
12451
+ symbol: getNativeSymbol(currencyCode),
12452
+ code: currencyCode
12554
12453
  }
12555
- )
12556
- ] }) }),
12557
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12558
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12559
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12560
- ] }) })
12561
- ]
12454
+ ) })
12455
+ ] });
12456
+ }
12562
12457
  }
12563
- ) });
12458
+ );
12564
12459
  };
12565
- const schema$1 = addressSchema;
12566
12460
  const TransferOwnership = () => {
12567
12461
  const { id } = useParams();
12568
12462
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12586,7 +12480,7 @@ const TransferOwnershipForm = ({ order }) => {
12586
12480
  defaultValues: {
12587
12481
  customer_id: order.customer_id || ""
12588
12482
  },
12589
- resolver: zodResolver(schema)
12483
+ resolver: zodResolver(schema$1)
12590
12484
  });
12591
12485
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12592
12486
  const { handleSuccess } = useRouteModal();
@@ -13036,9 +12930,115 @@ const Illustration = () => {
13036
12930
  }
13037
12931
  );
13038
12932
  };
13039
- const schema = objectType({
12933
+ const schema$1 = objectType({
13040
12934
  customer_id: stringType().min(1)
13041
12935
  });
12936
+ const SalesChannel = () => {
12937
+ const { id } = useParams();
12938
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12939
+ id,
12940
+ {
12941
+ fields: "+sales_channel_id"
12942
+ },
12943
+ {
12944
+ enabled: !!id
12945
+ }
12946
+ );
12947
+ if (isError) {
12948
+ throw error;
12949
+ }
12950
+ const ISrEADY = !!draft_order && !isPending;
12951
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12952
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12953
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
12954
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12955
+ ] }),
12956
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
12957
+ ] });
12958
+ };
12959
+ const SalesChannelForm = ({ order }) => {
12960
+ const form = useForm({
12961
+ defaultValues: {
12962
+ sales_channel_id: order.sales_channel_id || ""
12963
+ },
12964
+ resolver: zodResolver(schema)
12965
+ });
12966
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12967
+ const { handleSuccess } = useRouteModal();
12968
+ const onSubmit = form.handleSubmit(async (data) => {
12969
+ await mutateAsync(
12970
+ {
12971
+ sales_channel_id: data.sales_channel_id
12972
+ },
12973
+ {
12974
+ onSuccess: () => {
12975
+ toast.success("Sales channel updated");
12976
+ handleSuccess();
12977
+ },
12978
+ onError: (error) => {
12979
+ toast.error(error.message);
12980
+ }
12981
+ }
12982
+ );
12983
+ });
12984
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12985
+ KeyboundForm,
12986
+ {
12987
+ className: "flex flex-1 flex-col overflow-hidden",
12988
+ onSubmit,
12989
+ children: [
12990
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
12991
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12992
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12993
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12994
+ ] }) })
12995
+ ]
12996
+ }
12997
+ ) });
12998
+ };
12999
+ const SalesChannelField = ({ control, order }) => {
13000
+ const salesChannels = useComboboxData({
13001
+ queryFn: async (params) => {
13002
+ return await sdk.admin.salesChannel.list(params);
13003
+ },
13004
+ queryKey: ["sales-channels"],
13005
+ getOptions: (data) => {
13006
+ return data.sales_channels.map((salesChannel) => ({
13007
+ label: salesChannel.name,
13008
+ value: salesChannel.id
13009
+ }));
13010
+ },
13011
+ defaultValue: order.sales_channel_id || void 0
13012
+ });
13013
+ return /* @__PURE__ */ jsx(
13014
+ Form$2.Field,
13015
+ {
13016
+ control,
13017
+ name: "sales_channel_id",
13018
+ render: ({ field }) => {
13019
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13020
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
13021
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
13022
+ Combobox,
13023
+ {
13024
+ options: salesChannels.options,
13025
+ fetchNextPage: salesChannels.fetchNextPage,
13026
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
13027
+ searchValue: salesChannels.searchValue,
13028
+ onSearchValueChange: salesChannels.onSearchValueChange,
13029
+ placeholder: "Select sales channel",
13030
+ ...field
13031
+ }
13032
+ ) }),
13033
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13034
+ ] });
13035
+ }
13036
+ }
13037
+ );
13038
+ };
13039
+ const schema = objectType({
13040
+ sales_channel_id: stringType().min(1)
13041
+ });
13042
13042
  const widgetModule = { widgets: [] };
13043
13043
  const routeModule = {
13044
13044
  routes: [
@@ -13075,29 +13075,29 @@ const routeModule = {
13075
13075
  Component: Items,
13076
13076
  path: "/draft-orders/:id/items"
13077
13077
  },
13078
- {
13079
- Component: Promotions,
13080
- path: "/draft-orders/:id/promotions"
13081
- },
13082
13078
  {
13083
13079
  Component: Metadata,
13084
13080
  path: "/draft-orders/:id/metadata"
13085
13081
  },
13086
13082
  {
13087
- Component: SalesChannel,
13088
- path: "/draft-orders/:id/sales-channel"
13089
- },
13090
- {
13091
- Component: Shipping,
13092
- path: "/draft-orders/:id/shipping"
13083
+ Component: Promotions,
13084
+ path: "/draft-orders/:id/promotions"
13093
13085
  },
13094
13086
  {
13095
13087
  Component: ShippingAddress,
13096
13088
  path: "/draft-orders/:id/shipping-address"
13097
13089
  },
13090
+ {
13091
+ Component: Shipping,
13092
+ path: "/draft-orders/:id/shipping"
13093
+ },
13098
13094
  {
13099
13095
  Component: TransferOwnership,
13100
13096
  path: "/draft-orders/:id/transfer-ownership"
13097
+ },
13098
+ {
13099
+ Component: SalesChannel,
13100
+ path: "/draft-orders/:id/sales-channel"
13101
13101
  }
13102
13102
  ]
13103
13103
  }