@medusajs/draft-order 2.11.0-preview-20251018090155 → 2.11.0-preview-20251018150154

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