@medusajs/draft-order 2.14.2 → 2.14.3-preview-20260504041544

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 +1248 -1248
  2. package/.medusa/server/src/admin/index.mjs +1248 -1248
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -11779,33 +11779,37 @@ function getPromotionIds(items, shippingMethods) {
11779
11779
  }
11780
11780
  return Array.from(promotionIds);
11781
11781
  }
11782
- const SalesChannel = () => {
11782
+ const ShippingAddress = () => {
11783
11783
  const { id } = reactRouterDom.useParams();
11784
- const { draft_order, isPending, isError, error } = useDraftOrder(
11785
- id,
11786
- {
11787
- fields: "+sales_channel_id"
11788
- },
11789
- {
11790
- enabled: !!id
11791
- }
11792
- );
11784
+ const { order, isPending, isError, error } = useOrder(id, {
11785
+ fields: "+shipping_address"
11786
+ });
11793
11787
  if (isError) {
11794
11788
  throw error;
11795
11789
  }
11796
- const ISrEADY = !!draft_order && !isPending;
11790
+ const isReady = !isPending && !!order;
11797
11791
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11798
11792
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11799
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11800
- /* @__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" }) })
11793
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11794
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11801
11795
  ] }),
11802
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11796
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11803
11797
  ] });
11804
11798
  };
11805
- const SalesChannelForm = ({ order }) => {
11799
+ const ShippingAddressForm = ({ order }) => {
11800
+ var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11806
11801
  const form = reactHookForm.useForm({
11807
11802
  defaultValues: {
11808
- sales_channel_id: order.sales_channel_id || ""
11803
+ first_name: ((_a2 = order.shipping_address) == null ? void 0 : _a2.first_name) ?? "",
11804
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11805
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11806
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11807
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11808
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11809
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11810
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11811
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11812
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11809
11813
  },
11810
11814
  resolver: zod.zodResolver(schema$2)
11811
11815
  });
@@ -11814,11 +11818,21 @@ const SalesChannelForm = ({ order }) => {
11814
11818
  const onSubmit = form.handleSubmit(async (data) => {
11815
11819
  await mutateAsync(
11816
11820
  {
11817
- sales_channel_id: data.sales_channel_id
11821
+ shipping_address: {
11822
+ first_name: data.first_name,
11823
+ last_name: data.last_name,
11824
+ company: data.company,
11825
+ address_1: data.address_1,
11826
+ address_2: data.address_2,
11827
+ city: data.city,
11828
+ province: data.province,
11829
+ country_code: data.country_code,
11830
+ postal_code: data.postal_code,
11831
+ phone: data.phone
11832
+ }
11818
11833
  },
11819
11834
  {
11820
11835
  onSuccess: () => {
11821
- ui.toast.success("Sales channel updated");
11822
11836
  handleSuccess();
11823
11837
  },
11824
11838
  onError: (error) => {
@@ -11833,7 +11847,132 @@ const SalesChannelForm = ({ order }) => {
11833
11847
  className: "flex flex-1 flex-col overflow-hidden",
11834
11848
  onSubmit,
11835
11849
  children: [
11836
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11850
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
11851
+ /* @__PURE__ */ jsxRuntime.jsx(
11852
+ Form$2.Field,
11853
+ {
11854
+ control: form.control,
11855
+ name: "country_code",
11856
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11857
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11858
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11859
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11860
+ ] })
11861
+ }
11862
+ ),
11863
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11864
+ /* @__PURE__ */ jsxRuntime.jsx(
11865
+ Form$2.Field,
11866
+ {
11867
+ control: form.control,
11868
+ name: "first_name",
11869
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11870
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11871
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11872
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11873
+ ] })
11874
+ }
11875
+ ),
11876
+ /* @__PURE__ */ jsxRuntime.jsx(
11877
+ Form$2.Field,
11878
+ {
11879
+ control: form.control,
11880
+ name: "last_name",
11881
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11882
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11883
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11884
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11885
+ ] })
11886
+ }
11887
+ )
11888
+ ] }),
11889
+ /* @__PURE__ */ jsxRuntime.jsx(
11890
+ Form$2.Field,
11891
+ {
11892
+ control: form.control,
11893
+ name: "company",
11894
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11895
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11896
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11897
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11898
+ ] })
11899
+ }
11900
+ ),
11901
+ /* @__PURE__ */ jsxRuntime.jsx(
11902
+ Form$2.Field,
11903
+ {
11904
+ control: form.control,
11905
+ name: "address_1",
11906
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11907
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11908
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11909
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11910
+ ] })
11911
+ }
11912
+ ),
11913
+ /* @__PURE__ */ jsxRuntime.jsx(
11914
+ Form$2.Field,
11915
+ {
11916
+ control: form.control,
11917
+ name: "address_2",
11918
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11919
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11920
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11921
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11922
+ ] })
11923
+ }
11924
+ ),
11925
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11926
+ /* @__PURE__ */ jsxRuntime.jsx(
11927
+ Form$2.Field,
11928
+ {
11929
+ control: form.control,
11930
+ name: "postal_code",
11931
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11932
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11933
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11934
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11935
+ ] })
11936
+ }
11937
+ ),
11938
+ /* @__PURE__ */ jsxRuntime.jsx(
11939
+ Form$2.Field,
11940
+ {
11941
+ control: form.control,
11942
+ name: "city",
11943
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11944
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11945
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11946
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11947
+ ] })
11948
+ }
11949
+ )
11950
+ ] }),
11951
+ /* @__PURE__ */ jsxRuntime.jsx(
11952
+ Form$2.Field,
11953
+ {
11954
+ control: form.control,
11955
+ name: "province",
11956
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11957
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11958
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11959
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11960
+ ] })
11961
+ }
11962
+ ),
11963
+ /* @__PURE__ */ jsxRuntime.jsx(
11964
+ Form$2.Field,
11965
+ {
11966
+ control: form.control,
11967
+ name: "phone",
11968
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11969
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11970
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11971
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11972
+ ] })
11973
+ }
11974
+ )
11975
+ ] }) }),
11837
11976
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11838
11977
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11839
11978
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
@@ -11842,1194 +11981,142 @@ const SalesChannelForm = ({ order }) => {
11842
11981
  }
11843
11982
  ) });
11844
11983
  };
11845
- const SalesChannelField = ({ control, order }) => {
11846
- const salesChannels = useComboboxData({
11847
- queryFn: async (params) => {
11848
- return await sdk.admin.salesChannel.list(params);
11849
- },
11850
- queryKey: ["sales-channels"],
11851
- getOptions: (data) => {
11852
- return data.sales_channels.map((salesChannel) => ({
11853
- label: salesChannel.name,
11854
- value: salesChannel.id
11855
- }));
11856
- },
11857
- defaultValue: order.sales_channel_id || void 0
11858
- });
11859
- return /* @__PURE__ */ jsxRuntime.jsx(
11860
- Form$2.Field,
11861
- {
11862
- control,
11863
- name: "sales_channel_id",
11864
- render: ({ field }) => {
11865
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11866
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11867
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11868
- Combobox,
11869
- {
11870
- options: salesChannels.options,
11871
- fetchNextPage: salesChannels.fetchNextPage,
11872
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11873
- searchValue: salesChannels.searchValue,
11874
- onSearchValueChange: salesChannels.onSearchValueChange,
11875
- placeholder: "Select sales channel",
11876
- ...field
11877
- }
11878
- ) }),
11879
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11880
- ] });
11881
- }
11882
- }
11883
- );
11884
- };
11885
- const schema$2 = object({
11886
- sales_channel_id: string().min(1)
11887
- });
11888
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11889
- const Shipping = () => {
11890
- var _a2;
11984
+ const schema$2 = addressSchema;
11985
+ const TransferOwnership = () => {
11891
11986
  const { id } = reactRouterDom.useParams();
11892
- const { order, isPending, isError, error } = useOrder(id, {
11893
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11987
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11988
+ fields: "id,customer_id,customer.*"
11894
11989
  });
11895
- const {
11896
- order: preview,
11897
- isPending: isPreviewPending,
11898
- isError: isPreviewError,
11899
- error: previewError
11900
- } = useOrderPreview(id);
11901
- useInitiateOrderEdit({ preview });
11902
- const { onCancel } = useCancelOrderEdit({ preview });
11903
11990
  if (isError) {
11904
11991
  throw error;
11905
11992
  }
11906
- if (isPreviewError) {
11907
- throw previewError;
11908
- }
11909
- const orderHasItems = (((_a2 = order == null ? void 0 : order.items) == null ? void 0 : _a2.length) || 0) > 0;
11910
- const isReady = preview && !isPreviewPending && order && !isPending;
11911
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11912
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11913
- /* @__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 px-6 py-16", children: [
11914
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11915
- /* @__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." }) })
11916
- ] }) }) }),
11917
- /* @__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" }) }) })
11918
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11919
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11920
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11921
- ] }) });
11922
- };
11923
- const ShippingForm = ({ preview, order }) => {
11924
- var _a2;
11925
- const { setIsOpen } = useStackedModal();
11926
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11927
- const [data, setData] = React.useState(null);
11928
- const appliedShippingOptionIds = (_a2 = preview.shipping_methods) == null ? void 0 : _a2.map((method) => method.shipping_option_id).filter(Boolean);
11929
- const { shipping_options } = useShippingOptions(
11930
- {
11931
- id: appliedShippingOptionIds,
11932
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11993
+ const isReady = !isPending && !!draft_order;
11994
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11995
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11996
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11997
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
11998
+ ] }),
11999
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12000
+ ] });
12001
+ };
12002
+ const TransferOwnershipForm = ({ order }) => {
12003
+ var _a2, _b;
12004
+ const form = reactHookForm.useForm({
12005
+ defaultValues: {
12006
+ customer_id: order.customer_id || ""
11933
12007
  },
11934
- {
11935
- enabled: appliedShippingOptionIds.length > 0
11936
- }
11937
- );
11938
- const uniqueShippingProfiles = React.useMemo(() => {
11939
- const profiles = /* @__PURE__ */ new Map();
11940
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11941
- profiles.set(profile.id, profile);
11942
- });
11943
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11944
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11945
- });
11946
- return Array.from(profiles.values());
11947
- }, [order.items, shipping_options]);
12008
+ resolver: zod.zodResolver(schema$1)
12009
+ });
12010
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11948
12011
  const { handleSuccess } = useRouteModal();
11949
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11950
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11951
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11952
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11953
- const onSubmit = async () => {
11954
- setIsSubmitting(true);
11955
- let requestSucceeded = false;
11956
- await requestOrderEdit(void 0, {
11957
- onError: (e) => {
11958
- ui.toast.error(`Failed to request order edit: ${e.message}`);
11959
- },
11960
- onSuccess: () => {
11961
- requestSucceeded = true;
11962
- }
11963
- });
11964
- if (!requestSucceeded) {
11965
- setIsSubmitting(false);
11966
- return;
11967
- }
11968
- await confirmOrderEdit(void 0, {
11969
- onError: (e) => {
11970
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11971
- },
11972
- onSuccess: () => {
11973
- handleSuccess();
11974
- },
11975
- onSettled: () => {
11976
- setIsSubmitting(false);
11977
- }
11978
- });
11979
- };
11980
- const onKeydown = React.useCallback(
11981
- (e) => {
11982
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11983
- if (data || isSubmitting) {
11984
- return;
12012
+ const name = [(_a2 = order.customer) == null ? void 0 : _a2.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12013
+ const currentCustomer = order.customer ? {
12014
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
12015
+ value: order.customer.id
12016
+ } : null;
12017
+ const onSubmit = form.handleSubmit(async (data) => {
12018
+ await mutateAsync(
12019
+ { customer_id: data.customer_id },
12020
+ {
12021
+ onSuccess: () => {
12022
+ ui.toast.success("Customer updated");
12023
+ handleSuccess();
12024
+ },
12025
+ onError: (error) => {
12026
+ ui.toast.error(error.message);
11985
12027
  }
11986
- onSubmit();
11987
12028
  }
12029
+ );
12030
+ });
12031
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12032
+ KeyboundForm,
12033
+ {
12034
+ className: "flex flex-1 flex-col overflow-hidden",
12035
+ onSubmit,
12036
+ children: [
12037
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12038
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12039
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12040
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12041
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12042
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12043
+ ] }),
12044
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12045
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12046
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12047
+ ] })
12048
+ ] }),
12049
+ /* @__PURE__ */ jsxRuntime.jsx(
12050
+ CustomerField,
12051
+ {
12052
+ control: form.control,
12053
+ currentCustomerId: order.customer_id
12054
+ }
12055
+ )
12056
+ ] }),
12057
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12058
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12059
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12060
+ ] }) })
12061
+ ]
12062
+ }
12063
+ ) });
12064
+ };
12065
+ const CustomerField = ({ control, currentCustomerId }) => {
12066
+ const customers = useComboboxData({
12067
+ queryFn: async (params) => {
12068
+ return await sdk.admin.customer.list({
12069
+ ...params,
12070
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12071
+ });
11988
12072
  },
11989
- [data, isSubmitting, onSubmit]
11990
- );
11991
- React.useEffect(() => {
11992
- document.addEventListener("keydown", onKeydown);
11993
- return () => {
11994
- document.removeEventListener("keydown", onKeydown);
11995
- };
11996
- }, [onKeydown]);
11997
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11998
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11999
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12000
- /* @__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 px-6 py-16", children: [
12001
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12002
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12003
- /* @__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." }) })
12073
+ queryKey: ["customers"],
12074
+ getOptions: (data) => {
12075
+ return data.customers.map((customer) => {
12076
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12077
+ return {
12078
+ label: name ? `${name} (${customer.email})` : customer.email,
12079
+ value: customer.id
12080
+ };
12081
+ });
12082
+ }
12083
+ });
12084
+ return /* @__PURE__ */ jsxRuntime.jsx(
12085
+ Form$2.Field,
12086
+ {
12087
+ name: "customer_id",
12088
+ control,
12089
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12090
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12091
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12092
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12004
12093
  ] }),
12005
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12006
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12007
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
12008
- /* @__PURE__ */ jsxRuntime.jsx(
12009
- ui.Text,
12010
- {
12011
- size: "xsmall",
12012
- weight: "plus",
12013
- className: "text-ui-fg-muted",
12014
- children: "Shipping profile"
12015
- }
12016
- ),
12017
- /* @__PURE__ */ jsxRuntime.jsx(
12018
- ui.Text,
12019
- {
12020
- size: "xsmall",
12021
- weight: "plus",
12022
- className: "text-ui-fg-muted",
12023
- children: "Action"
12024
- }
12025
- )
12026
- ] }),
12027
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12028
- var _a3, _b, _c, _d, _e, _f, _g;
12029
- const items = getItemsWithShippingProfile(
12030
- profile.id,
12031
- order.items
12032
- );
12033
- const hasItems = items.length > 0;
12034
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12035
- (option) => option.shipping_profile_id === profile.id
12036
- );
12037
- const shippingMethod = preview.shipping_methods.find(
12038
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12039
- );
12040
- const addShippingMethodAction = (_a3 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a3.find(
12041
- (action) => action.action === "SHIPPING_ADD"
12042
- );
12043
- return /* @__PURE__ */ jsxRuntime.jsxs(
12044
- radixUi.Accordion.Item,
12045
- {
12046
- value: profile.id,
12047
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12048
- children: [
12049
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
12050
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
12051
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
12052
- ui.IconButton,
12053
- {
12054
- size: "2xsmall",
12055
- variant: "transparent",
12056
- className: "group/trigger",
12057
- disabled: !hasItems,
12058
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
12059
- }
12060
- ) }),
12061
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12062
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
12063
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
12064
- /* @__PURE__ */ jsxRuntime.jsx(
12065
- ui.Text,
12066
- {
12067
- size: "small",
12068
- weight: "plus",
12069
- leading: "compact",
12070
- children: profile.name
12071
- }
12072
- ),
12073
- /* @__PURE__ */ jsxRuntime.jsxs(
12074
- ui.Text,
12075
- {
12076
- size: "small",
12077
- leading: "compact",
12078
- className: "text-ui-fg-subtle",
12079
- children: [
12080
- items.length,
12081
- " ",
12082
- pluralize(items.length, "items", "item")
12083
- ]
12084
- }
12085
- )
12086
- ] })
12087
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
12088
- /* @__PURE__ */ jsxRuntime.jsx(
12089
- ui.Tooltip,
12090
- {
12091
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
12092
- var _a4, _b2, _c2;
12093
- return /* @__PURE__ */ jsxRuntime.jsx(
12094
- "li",
12095
- {
12096
- children: `${item.quantity}x ${(_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
12097
- },
12098
- item.id
12099
- );
12100
- }) }),
12101
- children: /* @__PURE__ */ jsxRuntime.jsxs(
12102
- ui.Badge,
12103
- {
12104
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12105
- size: "xsmall",
12106
- children: [
12107
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
12108
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
12109
- items.reduce(
12110
- (acc, item) => acc + item.quantity,
12111
- 0
12112
- ),
12113
- "x",
12114
- " ",
12115
- pluralize(items.length, "items", "item")
12116
- ] })
12117
- ]
12118
- }
12119
- )
12120
- }
12121
- ),
12122
- /* @__PURE__ */ jsxRuntime.jsx(
12123
- ui.Tooltip,
12124
- {
12125
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12126
- children: /* @__PURE__ */ jsxRuntime.jsxs(
12127
- ui.Badge,
12128
- {
12129
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12130
- size: "xsmall",
12131
- children: [
12132
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
12133
- /* @__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 })
12134
- ]
12135
- }
12136
- )
12137
- }
12138
- ),
12139
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
12140
- ui.Badge,
12141
- {
12142
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12143
- size: "xsmall",
12144
- children: [
12145
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
12146
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
12147
- ]
12148
- }
12149
- ) })
12150
- ] })
12151
- ] }),
12152
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
12153
- ActionMenu,
12154
- {
12155
- groups: [
12156
- {
12157
- actions: [
12158
- hasItems ? {
12159
- label: "Edit shipping option",
12160
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
12161
- onClick: () => {
12162
- setIsOpen(
12163
- STACKED_FOCUS_MODAL_ID,
12164
- true
12165
- );
12166
- setData({
12167
- shippingProfileId: profile.id,
12168
- shippingOption,
12169
- shippingMethod
12170
- });
12171
- }
12172
- } : void 0,
12173
- {
12174
- label: "Remove shipping option",
12175
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
12176
- onClick: () => {
12177
- if (shippingMethod) {
12178
- if (addShippingMethodAction) {
12179
- removeActionShippingMethod(
12180
- addShippingMethodAction.id
12181
- );
12182
- } else {
12183
- removeShippingMethod(
12184
- shippingMethod.id
12185
- );
12186
- }
12187
- }
12188
- }
12189
- }
12190
- ].filter(Boolean)
12191
- }
12192
- ]
12193
- }
12194
- ) : /* @__PURE__ */ jsxRuntime.jsx(
12195
- StackedModalTrigger,
12196
- {
12197
- shippingProfileId: profile.id,
12198
- shippingOption,
12199
- shippingMethod,
12200
- setData,
12201
- children: "Add shipping option"
12202
- }
12203
- )
12204
- ] }),
12205
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
12206
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12207
- items.map((item, idx) => {
12208
- var _a4, _b2, _c2, _d2, _e2;
12209
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12210
- /* @__PURE__ */ jsxRuntime.jsxs(
12211
- "div",
12212
- {
12213
- className: "flex items-center gap-x-3 px-3",
12214
- children: [
12215
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
12216
- ui.Divider,
12217
- {
12218
- variant: "dashed",
12219
- orientation: "vertical"
12220
- }
12221
- ) }),
12222
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
12223
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
12224
- ui.Text,
12225
- {
12226
- size: "small",
12227
- leading: "compact",
12228
- className: "text-ui-fg-subtle",
12229
- children: [
12230
- item.quantity,
12231
- "x"
12232
- ]
12233
- }
12234
- ) }),
12235
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
12236
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12237
- /* @__PURE__ */ jsxRuntime.jsxs(
12238
- ui.Text,
12239
- {
12240
- size: "small",
12241
- leading: "compact",
12242
- weight: "plus",
12243
- children: [
12244
- (_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title,
12245
- " (",
12246
- (_c2 = item.variant) == null ? void 0 : _c2.title,
12247
- ")"
12248
- ]
12249
- }
12250
- ),
12251
- /* @__PURE__ */ jsxRuntime.jsx(
12252
- ui.Text,
12253
- {
12254
- size: "small",
12255
- leading: "compact",
12256
- className: "text-ui-fg-subtle",
12257
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12258
- }
12259
- )
12260
- ] })
12261
- ] })
12262
- ]
12263
- },
12264
- item.id
12265
- ),
12266
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
12267
- ] }, item.id);
12268
- })
12269
- ] })
12270
- ]
12271
- },
12272
- profile.id
12273
- );
12274
- }) })
12275
- ] }) })
12276
- ] }) }),
12277
- /* @__PURE__ */ jsxRuntime.jsx(
12278
- StackedFocusModal,
12279
- {
12280
- id: STACKED_FOCUS_MODAL_ID,
12281
- onOpenChangeCallback: (open) => {
12282
- if (!open) {
12283
- setData(null);
12284
- }
12285
- return open;
12286
- },
12287
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12288
- }
12289
- )
12290
- ] }),
12291
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12292
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12293
- /* @__PURE__ */ jsxRuntime.jsx(
12294
- ui.Button,
12295
- {
12296
- size: "small",
12297
- type: "button",
12298
- isLoading: isSubmitting,
12299
- onClick: onSubmit,
12300
- children: "Save"
12301
- }
12302
- )
12303
- ] }) })
12304
- ] });
12305
- };
12306
- const StackedModalTrigger = ({
12307
- shippingProfileId,
12308
- shippingOption,
12309
- shippingMethod,
12310
- setData,
12311
- children
12312
- }) => {
12313
- const { setIsOpen, getIsOpen } = useStackedModal();
12314
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12315
- const onToggle = () => {
12316
- if (isOpen) {
12317
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12318
- setData(null);
12319
- } else {
12320
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12321
- setData({
12322
- shippingProfileId,
12323
- shippingOption,
12324
- shippingMethod
12325
- });
12326
- }
12327
- };
12328
- return /* @__PURE__ */ jsxRuntime.jsx(
12329
- ui.Button,
12330
- {
12331
- size: "small",
12332
- variant: "secondary",
12333
- onClick: onToggle,
12334
- className: "text-ui-fg-primary shrink-0",
12335
- children
12094
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12095
+ Combobox,
12096
+ {
12097
+ options: customers.options,
12098
+ fetchNextPage: customers.fetchNextPage,
12099
+ isFetchingNextPage: customers.isFetchingNextPage,
12100
+ searchValue: customers.searchValue,
12101
+ onSearchValueChange: customers.onSearchValueChange,
12102
+ placeholder: "Select customer",
12103
+ ...field
12104
+ }
12105
+ ) }),
12106
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12107
+ ] })
12336
12108
  }
12337
12109
  );
12338
12110
  };
12339
- const ShippingProfileForm = ({
12340
- data,
12341
- order,
12342
- preview
12343
- }) => {
12344
- var _a2, _b, _c, _d, _e, _f;
12345
- const { setIsOpen } = useStackedModal();
12346
- const form = reactHookForm.useForm({
12347
- resolver: zod.zodResolver(shippingMethodSchema),
12348
- defaultValues: {
12349
- location_id: (_d = (_c = (_b = (_a2 = data.shippingOption) == null ? void 0 : _a2.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12350
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12351
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12352
- }
12353
- });
12354
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12355
- const {
12356
- mutateAsync: updateShippingMethod,
12357
- isPending: isUpdatingShippingMethod
12358
- } = useDraftOrderUpdateShippingMethod(order.id);
12359
- const onSubmit = form.handleSubmit(async (values) => {
12360
- if (isEqual__default.default(values, form.formState.defaultValues)) {
12361
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12362
- return;
12363
- }
12364
- if (data.shippingMethod) {
12365
- await updateShippingMethod(
12366
- {
12367
- method_id: data.shippingMethod.id,
12368
- shipping_option_id: values.shipping_option_id,
12369
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12370
- },
12371
- {
12372
- onError: (e) => {
12373
- ui.toast.error(e.message);
12374
- },
12375
- onSuccess: () => {
12376
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12377
- }
12378
- }
12379
- );
12380
- return;
12381
- }
12382
- await addShippingMethod(
12383
- {
12384
- shipping_option_id: values.shipping_option_id,
12385
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12386
- },
12387
- {
12388
- onError: (e) => {
12389
- ui.toast.error(e.message);
12390
- },
12391
- onSuccess: () => {
12392
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12393
- }
12394
- }
12395
- );
12396
- });
12397
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12398
- KeyboundForm,
12111
+ const Illustration = () => {
12112
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12113
+ "svg",
12399
12114
  {
12400
- className: "flex h-full flex-col overflow-hidden",
12401
- onSubmit,
12402
- children: [
12403
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12404
- /* @__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 px-6 py-16", children: [
12405
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12406
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12407
- /* @__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." }) })
12408
- ] }),
12409
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12410
- /* @__PURE__ */ jsxRuntime.jsx(
12411
- LocationField,
12412
- {
12413
- control: form.control,
12414
- setValue: form.setValue
12415
- }
12416
- ),
12417
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12418
- /* @__PURE__ */ jsxRuntime.jsx(
12419
- ShippingOptionField,
12420
- {
12421
- shippingProfileId: data.shippingProfileId,
12422
- preview,
12423
- control: form.control
12424
- }
12425
- ),
12426
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12427
- /* @__PURE__ */ jsxRuntime.jsx(
12428
- CustomAmountField,
12429
- {
12430
- control: form.control,
12431
- currencyCode: order.currency_code
12432
- }
12433
- ),
12434
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12435
- /* @__PURE__ */ jsxRuntime.jsx(
12436
- ItemsPreview,
12437
- {
12438
- order,
12439
- shippingProfileId: data.shippingProfileId
12440
- }
12441
- )
12442
- ] }) }) }),
12443
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12444
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12445
- /* @__PURE__ */ jsxRuntime.jsx(
12446
- ui.Button,
12447
- {
12448
- size: "small",
12449
- type: "submit",
12450
- isLoading: isPending || isUpdatingShippingMethod,
12451
- children: data.shippingMethod ? "Update" : "Add"
12452
- }
12453
- )
12454
- ] }) })
12455
- ]
12456
- }
12457
- ) }) });
12458
- };
12459
- const shippingMethodSchema = object({
12460
- location_id: string(),
12461
- shipping_option_id: string(),
12462
- custom_amount: union([number(), string()]).optional()
12463
- });
12464
- const ItemsPreview = ({ order, shippingProfileId }) => {
12465
- const matches = order.items.filter(
12466
- (item) => {
12467
- var _a2, _b, _c;
12468
- return ((_c = (_b = (_a2 = item.variant) == null ? void 0 : _a2.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12469
- }
12470
- );
12471
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12472
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12473
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12474
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12475
- ] }) }),
12476
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12477
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12478
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12479
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12480
- ] }),
12481
- /* @__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(
12482
- "div",
12483
- {
12484
- className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12485
- children: [
12486
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12487
- /* @__PURE__ */ jsxRuntime.jsx(
12488
- Thumbnail,
12489
- {
12490
- thumbnail: item.thumbnail,
12491
- alt: item.product_title ?? void 0
12492
- }
12493
- ),
12494
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12495
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12496
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12497
- /* @__PURE__ */ jsxRuntime.jsxs(
12498
- ui.Text,
12499
- {
12500
- size: "small",
12501
- leading: "compact",
12502
- className: "text-ui-fg-subtle",
12503
- children: [
12504
- "(",
12505
- item.variant_title,
12506
- ")"
12507
- ]
12508
- }
12509
- )
12510
- ] }),
12511
- /* @__PURE__ */ jsxRuntime.jsx(
12512
- ui.Text,
12513
- {
12514
- size: "small",
12515
- leading: "compact",
12516
- className: "text-ui-fg-subtle",
12517
- children: item.variant_sku
12518
- }
12519
- )
12520
- ] })
12521
- ] }),
12522
- /* @__PURE__ */ jsxRuntime.jsxs(
12523
- ui.Text,
12524
- {
12525
- size: "small",
12526
- leading: "compact",
12527
- className: "text-ui-fg-subtle",
12528
- children: [
12529
- item.quantity,
12530
- "x"
12531
- ]
12532
- }
12533
- )
12534
- ]
12535
- },
12536
- item.id
12537
- )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12538
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12539
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12540
- 'No items found for "',
12541
- query,
12542
- '".'
12543
- ] })
12544
- ] }) })
12545
- ] })
12546
- ] });
12547
- };
12548
- const LocationField = ({ control, setValue }) => {
12549
- const locations = useComboboxData({
12550
- queryKey: ["locations"],
12551
- queryFn: async (params) => {
12552
- return await sdk.admin.stockLocation.list(params);
12553
- },
12554
- getOptions: (data) => {
12555
- return data.stock_locations.map((location) => ({
12556
- label: location.name,
12557
- value: location.id
12558
- }));
12559
- }
12560
- });
12561
- return /* @__PURE__ */ jsxRuntime.jsx(
12562
- Form$2.Field,
12563
- {
12564
- control,
12565
- name: "location_id",
12566
- render: ({ field: { onChange, ...field } }) => {
12567
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12568
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12569
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12570
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12571
- ] }),
12572
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12573
- Combobox,
12574
- {
12575
- options: locations.options,
12576
- fetchNextPage: locations.fetchNextPage,
12577
- isFetchingNextPage: locations.isFetchingNextPage,
12578
- searchValue: locations.searchValue,
12579
- onSearchValueChange: locations.onSearchValueChange,
12580
- placeholder: "Select location",
12581
- onChange: (value) => {
12582
- setValue("shipping_option_id", "", {
12583
- shouldDirty: true,
12584
- shouldTouch: true
12585
- });
12586
- onChange(value);
12587
- },
12588
- ...field
12589
- }
12590
- ) })
12591
- ] }) });
12592
- }
12593
- }
12594
- );
12595
- };
12596
- const ShippingOptionField = ({
12597
- shippingProfileId,
12598
- preview,
12599
- control
12600
- }) => {
12601
- var _a2;
12602
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12603
- const shippingOptions = useComboboxData({
12604
- queryKey: ["shipping_options", locationId, shippingProfileId],
12605
- queryFn: async (params) => {
12606
- return await sdk.admin.shippingOption.list({
12607
- ...params,
12608
- stock_location_id: locationId,
12609
- shipping_profile_id: shippingProfileId
12610
- });
12611
- },
12612
- getOptions: (data) => {
12613
- return data.shipping_options.map((option) => {
12614
- var _a3;
12615
- if ((_a3 = option.rules) == null ? void 0 : _a3.find(
12616
- (r) => r.attribute === "is_return" && r.value === "true"
12617
- )) {
12618
- return void 0;
12619
- }
12620
- return {
12621
- label: option.name,
12622
- value: option.id
12623
- };
12624
- }).filter(Boolean);
12625
- },
12626
- enabled: !!locationId && !!shippingProfileId,
12627
- defaultValue: ((_a2 = preview.shipping_methods[0]) == null ? void 0 : _a2.shipping_option_id) || void 0
12628
- });
12629
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12630
- return /* @__PURE__ */ jsxRuntime.jsx(
12631
- Form$2.Field,
12632
- {
12633
- control,
12634
- name: "shipping_option_id",
12635
- render: ({ field }) => {
12636
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12637
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12638
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12639
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12640
- ] }),
12641
- /* @__PURE__ */ jsxRuntime.jsx(
12642
- ConditionalTooltip,
12643
- {
12644
- content: tooltipContent,
12645
- showTooltip: !locationId || !shippingProfileId,
12646
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12647
- Combobox,
12648
- {
12649
- options: shippingOptions.options,
12650
- fetchNextPage: shippingOptions.fetchNextPage,
12651
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12652
- searchValue: shippingOptions.searchValue,
12653
- onSearchValueChange: shippingOptions.onSearchValueChange,
12654
- placeholder: "Select shipping option",
12655
- ...field,
12656
- disabled: !locationId || !shippingProfileId
12657
- }
12658
- ) }) })
12659
- }
12660
- )
12661
- ] }) });
12662
- }
12663
- }
12664
- );
12665
- };
12666
- const CustomAmountField = ({
12667
- control,
12668
- currencyCode
12669
- }) => {
12670
- return /* @__PURE__ */ jsxRuntime.jsx(
12671
- Form$2.Field,
12672
- {
12673
- control,
12674
- name: "custom_amount",
12675
- render: ({ field: { onChange, ...field } }) => {
12676
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12677
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12678
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12679
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12680
- ] }),
12681
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12682
- ui.CurrencyInput,
12683
- {
12684
- ...field,
12685
- onValueChange: (value) => onChange(value),
12686
- symbol: getNativeSymbol(currencyCode),
12687
- code: currencyCode
12688
- }
12689
- ) })
12690
- ] });
12691
- }
12692
- }
12693
- );
12694
- };
12695
- const ShippingAddress = () => {
12696
- const { id } = reactRouterDom.useParams();
12697
- const { order, isPending, isError, error } = useOrder(id, {
12698
- fields: "+shipping_address"
12699
- });
12700
- if (isError) {
12701
- throw error;
12702
- }
12703
- const isReady = !isPending && !!order;
12704
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12705
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12706
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12707
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12708
- ] }),
12709
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12710
- ] });
12711
- };
12712
- const ShippingAddressForm = ({ order }) => {
12713
- var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12714
- const form = reactHookForm.useForm({
12715
- defaultValues: {
12716
- first_name: ((_a2 = order.shipping_address) == null ? void 0 : _a2.first_name) ?? "",
12717
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12718
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12719
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12720
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12721
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12722
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12723
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12724
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12725
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12726
- },
12727
- resolver: zod.zodResolver(schema$1)
12728
- });
12729
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12730
- const { handleSuccess } = useRouteModal();
12731
- const onSubmit = form.handleSubmit(async (data) => {
12732
- await mutateAsync(
12733
- {
12734
- shipping_address: {
12735
- first_name: data.first_name,
12736
- last_name: data.last_name,
12737
- company: data.company,
12738
- address_1: data.address_1,
12739
- address_2: data.address_2,
12740
- city: data.city,
12741
- province: data.province,
12742
- country_code: data.country_code,
12743
- postal_code: data.postal_code,
12744
- phone: data.phone
12745
- }
12746
- },
12747
- {
12748
- onSuccess: () => {
12749
- handleSuccess();
12750
- },
12751
- onError: (error) => {
12752
- ui.toast.error(error.message);
12753
- }
12754
- }
12755
- );
12756
- });
12757
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12758
- KeyboundForm,
12759
- {
12760
- className: "flex flex-1 flex-col overflow-hidden",
12761
- onSubmit,
12762
- children: [
12763
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12764
- /* @__PURE__ */ jsxRuntime.jsx(
12765
- Form$2.Field,
12766
- {
12767
- control: form.control,
12768
- name: "country_code",
12769
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12770
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12771
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12772
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12773
- ] })
12774
- }
12775
- ),
12776
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12777
- /* @__PURE__ */ jsxRuntime.jsx(
12778
- Form$2.Field,
12779
- {
12780
- control: form.control,
12781
- name: "first_name",
12782
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12783
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12784
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12785
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12786
- ] })
12787
- }
12788
- ),
12789
- /* @__PURE__ */ jsxRuntime.jsx(
12790
- Form$2.Field,
12791
- {
12792
- control: form.control,
12793
- name: "last_name",
12794
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12795
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12796
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12797
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12798
- ] })
12799
- }
12800
- )
12801
- ] }),
12802
- /* @__PURE__ */ jsxRuntime.jsx(
12803
- Form$2.Field,
12804
- {
12805
- control: form.control,
12806
- name: "company",
12807
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12808
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12809
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12810
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12811
- ] })
12812
- }
12813
- ),
12814
- /* @__PURE__ */ jsxRuntime.jsx(
12815
- Form$2.Field,
12816
- {
12817
- control: form.control,
12818
- name: "address_1",
12819
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12820
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12821
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12822
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12823
- ] })
12824
- }
12825
- ),
12826
- /* @__PURE__ */ jsxRuntime.jsx(
12827
- Form$2.Field,
12828
- {
12829
- control: form.control,
12830
- name: "address_2",
12831
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12832
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12833
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12834
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12835
- ] })
12836
- }
12837
- ),
12838
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12839
- /* @__PURE__ */ jsxRuntime.jsx(
12840
- Form$2.Field,
12841
- {
12842
- control: form.control,
12843
- name: "postal_code",
12844
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12845
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12846
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12847
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12848
- ] })
12849
- }
12850
- ),
12851
- /* @__PURE__ */ jsxRuntime.jsx(
12852
- Form$2.Field,
12853
- {
12854
- control: form.control,
12855
- name: "city",
12856
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12857
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12858
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12859
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12860
- ] })
12861
- }
12862
- )
12863
- ] }),
12864
- /* @__PURE__ */ jsxRuntime.jsx(
12865
- Form$2.Field,
12866
- {
12867
- control: form.control,
12868
- name: "province",
12869
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12870
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12871
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12872
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12873
- ] })
12874
- }
12875
- ),
12876
- /* @__PURE__ */ jsxRuntime.jsx(
12877
- Form$2.Field,
12878
- {
12879
- control: form.control,
12880
- name: "phone",
12881
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12882
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12883
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12884
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12885
- ] })
12886
- }
12887
- )
12888
- ] }) }),
12889
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12890
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12891
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12892
- ] }) })
12893
- ]
12894
- }
12895
- ) });
12896
- };
12897
- const schema$1 = addressSchema;
12898
- const TransferOwnership = () => {
12899
- const { id } = reactRouterDom.useParams();
12900
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12901
- fields: "id,customer_id,customer.*"
12902
- });
12903
- if (isError) {
12904
- throw error;
12905
- }
12906
- const isReady = !isPending && !!draft_order;
12907
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12908
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12909
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12910
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
12911
- ] }),
12912
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12913
- ] });
12914
- };
12915
- const TransferOwnershipForm = ({ order }) => {
12916
- var _a2, _b;
12917
- const form = reactHookForm.useForm({
12918
- defaultValues: {
12919
- customer_id: order.customer_id || ""
12920
- },
12921
- resolver: zod.zodResolver(schema)
12922
- });
12923
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12924
- const { handleSuccess } = useRouteModal();
12925
- const name = [(_a2 = order.customer) == null ? void 0 : _a2.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12926
- const currentCustomer = order.customer ? {
12927
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
12928
- value: order.customer.id
12929
- } : null;
12930
- const onSubmit = form.handleSubmit(async (data) => {
12931
- await mutateAsync(
12932
- { customer_id: data.customer_id },
12933
- {
12934
- onSuccess: () => {
12935
- ui.toast.success("Customer updated");
12936
- handleSuccess();
12937
- },
12938
- onError: (error) => {
12939
- ui.toast.error(error.message);
12940
- }
12941
- }
12942
- );
12943
- });
12944
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12945
- KeyboundForm,
12946
- {
12947
- className: "flex flex-1 flex-col overflow-hidden",
12948
- onSubmit,
12949
- children: [
12950
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12951
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12952
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12953
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12954
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12955
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12956
- ] }),
12957
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12958
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12959
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12960
- ] })
12961
- ] }),
12962
- /* @__PURE__ */ jsxRuntime.jsx(
12963
- CustomerField,
12964
- {
12965
- control: form.control,
12966
- currentCustomerId: order.customer_id
12967
- }
12968
- )
12969
- ] }),
12970
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12971
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12972
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12973
- ] }) })
12974
- ]
12975
- }
12976
- ) });
12977
- };
12978
- const CustomerField = ({ control, currentCustomerId }) => {
12979
- const customers = useComboboxData({
12980
- queryFn: async (params) => {
12981
- return await sdk.admin.customer.list({
12982
- ...params,
12983
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12984
- });
12985
- },
12986
- queryKey: ["customers"],
12987
- getOptions: (data) => {
12988
- return data.customers.map((customer) => {
12989
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12990
- return {
12991
- label: name ? `${name} (${customer.email})` : customer.email,
12992
- value: customer.id
12993
- };
12994
- });
12995
- }
12996
- });
12997
- return /* @__PURE__ */ jsxRuntime.jsx(
12998
- Form$2.Field,
12999
- {
13000
- name: "customer_id",
13001
- control,
13002
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
13003
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13004
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
13005
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
13006
- ] }),
13007
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13008
- Combobox,
13009
- {
13010
- options: customers.options,
13011
- fetchNextPage: customers.fetchNextPage,
13012
- isFetchingNextPage: customers.isFetchingNextPage,
13013
- searchValue: customers.searchValue,
13014
- onSearchValueChange: customers.onSearchValueChange,
13015
- placeholder: "Select customer",
13016
- ...field
13017
- }
13018
- ) }),
13019
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13020
- ] })
13021
- }
13022
- );
13023
- };
13024
- const Illustration = () => {
13025
- return /* @__PURE__ */ jsxRuntime.jsxs(
13026
- "svg",
13027
- {
13028
- width: "280",
13029
- height: "180",
13030
- viewBox: "0 0 280 180",
13031
- fill: "none",
13032
- xmlns: "http://www.w3.org/2000/svg",
12115
+ width: "280",
12116
+ height: "180",
12117
+ viewBox: "0 0 280 180",
12118
+ fill: "none",
12119
+ xmlns: "http://www.w3.org/2000/svg",
13033
12120
  children: [
13034
12121
  /* @__PURE__ */ jsxRuntime.jsx(
13035
12122
  "rect",
@@ -13307,70 +12394,983 @@ const Illustration = () => {
13307
12394
  strokeLinecap: "round",
13308
12395
  strokeLinejoin: "round"
13309
12396
  }
13310
- ) }),
13311
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
13312
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13313
- "rect",
12397
+ ) }),
12398
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12399
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12400
+ "rect",
12401
+ {
12402
+ width: "12",
12403
+ height: "12",
12404
+ fill: "white",
12405
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12406
+ }
12407
+ ) }),
12408
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12409
+ "rect",
12410
+ {
12411
+ width: "12",
12412
+ height: "12",
12413
+ fill: "white",
12414
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12415
+ }
12416
+ ) }),
12417
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12418
+ "rect",
12419
+ {
12420
+ width: "12",
12421
+ height: "12",
12422
+ fill: "white",
12423
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12424
+ }
12425
+ ) }),
12426
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12427
+ "rect",
12428
+ {
12429
+ width: "12",
12430
+ height: "12",
12431
+ fill: "white",
12432
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12433
+ }
12434
+ ) }),
12435
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12436
+ "rect",
12437
+ {
12438
+ width: "12",
12439
+ height: "12",
12440
+ fill: "white",
12441
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12442
+ }
12443
+ ) }),
12444
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12445
+ "rect",
12446
+ {
12447
+ width: "12",
12448
+ height: "12",
12449
+ fill: "white",
12450
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12451
+ }
12452
+ ) })
12453
+ ] })
12454
+ ]
12455
+ }
12456
+ );
12457
+ };
12458
+ const schema$1 = object({
12459
+ customer_id: string().min(1)
12460
+ });
12461
+ const SalesChannel = () => {
12462
+ const { id } = reactRouterDom.useParams();
12463
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12464
+ id,
12465
+ {
12466
+ fields: "+sales_channel_id"
12467
+ },
12468
+ {
12469
+ enabled: !!id
12470
+ }
12471
+ );
12472
+ if (isError) {
12473
+ throw error;
12474
+ }
12475
+ const ISrEADY = !!draft_order && !isPending;
12476
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12477
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12478
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
12479
+ /* @__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" }) })
12480
+ ] }),
12481
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
12482
+ ] });
12483
+ };
12484
+ const SalesChannelForm = ({ order }) => {
12485
+ const form = reactHookForm.useForm({
12486
+ defaultValues: {
12487
+ sales_channel_id: order.sales_channel_id || ""
12488
+ },
12489
+ resolver: zod.zodResolver(schema)
12490
+ });
12491
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12492
+ const { handleSuccess } = useRouteModal();
12493
+ const onSubmit = form.handleSubmit(async (data) => {
12494
+ await mutateAsync(
12495
+ {
12496
+ sales_channel_id: data.sales_channel_id
12497
+ },
12498
+ {
12499
+ onSuccess: () => {
12500
+ ui.toast.success("Sales channel updated");
12501
+ handleSuccess();
12502
+ },
12503
+ onError: (error) => {
12504
+ ui.toast.error(error.message);
12505
+ }
12506
+ }
12507
+ );
12508
+ });
12509
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12510
+ KeyboundForm,
12511
+ {
12512
+ className: "flex flex-1 flex-col overflow-hidden",
12513
+ onSubmit,
12514
+ children: [
12515
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
12516
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12517
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12518
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12519
+ ] }) })
12520
+ ]
12521
+ }
12522
+ ) });
12523
+ };
12524
+ const SalesChannelField = ({ control, order }) => {
12525
+ const salesChannels = useComboboxData({
12526
+ queryFn: async (params) => {
12527
+ return await sdk.admin.salesChannel.list(params);
12528
+ },
12529
+ queryKey: ["sales-channels"],
12530
+ getOptions: (data) => {
12531
+ return data.sales_channels.map((salesChannel) => ({
12532
+ label: salesChannel.name,
12533
+ value: salesChannel.id
12534
+ }));
12535
+ },
12536
+ defaultValue: order.sales_channel_id || void 0
12537
+ });
12538
+ return /* @__PURE__ */ jsxRuntime.jsx(
12539
+ Form$2.Field,
12540
+ {
12541
+ control,
12542
+ name: "sales_channel_id",
12543
+ render: ({ field }) => {
12544
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12545
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
12546
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12547
+ Combobox,
12548
+ {
12549
+ options: salesChannels.options,
12550
+ fetchNextPage: salesChannels.fetchNextPage,
12551
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
12552
+ searchValue: salesChannels.searchValue,
12553
+ onSearchValueChange: salesChannels.onSearchValueChange,
12554
+ placeholder: "Select sales channel",
12555
+ ...field
12556
+ }
12557
+ ) }),
12558
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12559
+ ] });
12560
+ }
12561
+ }
12562
+ );
12563
+ };
12564
+ const schema = object({
12565
+ sales_channel_id: string().min(1)
12566
+ });
12567
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
12568
+ const Shipping = () => {
12569
+ var _a2;
12570
+ const { id } = reactRouterDom.useParams();
12571
+ const { order, isPending, isError, error } = useOrder(id, {
12572
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12573
+ });
12574
+ const {
12575
+ order: preview,
12576
+ isPending: isPreviewPending,
12577
+ isError: isPreviewError,
12578
+ error: previewError
12579
+ } = useOrderPreview(id);
12580
+ useInitiateOrderEdit({ preview });
12581
+ const { onCancel } = useCancelOrderEdit({ preview });
12582
+ if (isError) {
12583
+ throw error;
12584
+ }
12585
+ if (isPreviewError) {
12586
+ throw previewError;
12587
+ }
12588
+ const orderHasItems = (((_a2 = order == null ? void 0 : order.items) == null ? void 0 : _a2.length) || 0) > 0;
12589
+ const isReady = preview && !isPreviewPending && order && !isPending;
12590
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12591
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12592
+ /* @__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 px-6 py-16", children: [
12593
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12594
+ /* @__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." }) })
12595
+ ] }) }) }),
12596
+ /* @__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" }) }) })
12597
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12598
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12599
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12600
+ ] }) });
12601
+ };
12602
+ const ShippingForm = ({ preview, order }) => {
12603
+ var _a2;
12604
+ const { setIsOpen } = useStackedModal();
12605
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
12606
+ const [data, setData] = React.useState(null);
12607
+ const appliedShippingOptionIds = (_a2 = preview.shipping_methods) == null ? void 0 : _a2.map((method) => method.shipping_option_id).filter(Boolean);
12608
+ const { shipping_options } = useShippingOptions(
12609
+ {
12610
+ id: appliedShippingOptionIds,
12611
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12612
+ },
12613
+ {
12614
+ enabled: appliedShippingOptionIds.length > 0
12615
+ }
12616
+ );
12617
+ const uniqueShippingProfiles = React.useMemo(() => {
12618
+ const profiles = /* @__PURE__ */ new Map();
12619
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
12620
+ profiles.set(profile.id, profile);
12621
+ });
12622
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12623
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
12624
+ });
12625
+ return Array.from(profiles.values());
12626
+ }, [order.items, shipping_options]);
12627
+ const { handleSuccess } = useRouteModal();
12628
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12629
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12630
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12631
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12632
+ const onSubmit = async () => {
12633
+ setIsSubmitting(true);
12634
+ let requestSucceeded = false;
12635
+ await requestOrderEdit(void 0, {
12636
+ onError: (e) => {
12637
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
12638
+ },
12639
+ onSuccess: () => {
12640
+ requestSucceeded = true;
12641
+ }
12642
+ });
12643
+ if (!requestSucceeded) {
12644
+ setIsSubmitting(false);
12645
+ return;
12646
+ }
12647
+ await confirmOrderEdit(void 0, {
12648
+ onError: (e) => {
12649
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12650
+ },
12651
+ onSuccess: () => {
12652
+ handleSuccess();
12653
+ },
12654
+ onSettled: () => {
12655
+ setIsSubmitting(false);
12656
+ }
12657
+ });
12658
+ };
12659
+ const onKeydown = React.useCallback(
12660
+ (e) => {
12661
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12662
+ if (data || isSubmitting) {
12663
+ return;
12664
+ }
12665
+ onSubmit();
12666
+ }
12667
+ },
12668
+ [data, isSubmitting, onSubmit]
12669
+ );
12670
+ React.useEffect(() => {
12671
+ document.addEventListener("keydown", onKeydown);
12672
+ return () => {
12673
+ document.removeEventListener("keydown", onKeydown);
12674
+ };
12675
+ }, [onKeydown]);
12676
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12677
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12678
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12679
+ /* @__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 px-6 py-16", children: [
12680
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12681
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12682
+ /* @__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." }) })
12683
+ ] }),
12684
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12685
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12686
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
12687
+ /* @__PURE__ */ jsxRuntime.jsx(
12688
+ ui.Text,
12689
+ {
12690
+ size: "xsmall",
12691
+ weight: "plus",
12692
+ className: "text-ui-fg-muted",
12693
+ children: "Shipping profile"
12694
+ }
12695
+ ),
12696
+ /* @__PURE__ */ jsxRuntime.jsx(
12697
+ ui.Text,
12698
+ {
12699
+ size: "xsmall",
12700
+ weight: "plus",
12701
+ className: "text-ui-fg-muted",
12702
+ children: "Action"
12703
+ }
12704
+ )
12705
+ ] }),
12706
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12707
+ var _a3, _b, _c, _d, _e, _f, _g;
12708
+ const items = getItemsWithShippingProfile(
12709
+ profile.id,
12710
+ order.items
12711
+ );
12712
+ const hasItems = items.length > 0;
12713
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12714
+ (option) => option.shipping_profile_id === profile.id
12715
+ );
12716
+ const shippingMethod = preview.shipping_methods.find(
12717
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12718
+ );
12719
+ const addShippingMethodAction = (_a3 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a3.find(
12720
+ (action) => action.action === "SHIPPING_ADD"
12721
+ );
12722
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12723
+ radixUi.Accordion.Item,
12724
+ {
12725
+ value: profile.id,
12726
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12727
+ children: [
12728
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
12729
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
12730
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
12731
+ ui.IconButton,
12732
+ {
12733
+ size: "2xsmall",
12734
+ variant: "transparent",
12735
+ className: "group/trigger",
12736
+ disabled: !hasItems,
12737
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
12738
+ }
12739
+ ) }),
12740
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12741
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
12742
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
12743
+ /* @__PURE__ */ jsxRuntime.jsx(
12744
+ ui.Text,
12745
+ {
12746
+ size: "small",
12747
+ weight: "plus",
12748
+ leading: "compact",
12749
+ children: profile.name
12750
+ }
12751
+ ),
12752
+ /* @__PURE__ */ jsxRuntime.jsxs(
12753
+ ui.Text,
12754
+ {
12755
+ size: "small",
12756
+ leading: "compact",
12757
+ className: "text-ui-fg-subtle",
12758
+ children: [
12759
+ items.length,
12760
+ " ",
12761
+ pluralize(items.length, "items", "item")
12762
+ ]
12763
+ }
12764
+ )
12765
+ ] })
12766
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
12767
+ /* @__PURE__ */ jsxRuntime.jsx(
12768
+ ui.Tooltip,
12769
+ {
12770
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
12771
+ var _a4, _b2, _c2;
12772
+ return /* @__PURE__ */ jsxRuntime.jsx(
12773
+ "li",
12774
+ {
12775
+ children: `${item.quantity}x ${(_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
12776
+ },
12777
+ item.id
12778
+ );
12779
+ }) }),
12780
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12781
+ ui.Badge,
12782
+ {
12783
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12784
+ size: "xsmall",
12785
+ children: [
12786
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
12787
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
12788
+ items.reduce(
12789
+ (acc, item) => acc + item.quantity,
12790
+ 0
12791
+ ),
12792
+ "x",
12793
+ " ",
12794
+ pluralize(items.length, "items", "item")
12795
+ ] })
12796
+ ]
12797
+ }
12798
+ )
12799
+ }
12800
+ ),
12801
+ /* @__PURE__ */ jsxRuntime.jsx(
12802
+ ui.Tooltip,
12803
+ {
12804
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12805
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12806
+ ui.Badge,
12807
+ {
12808
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12809
+ size: "xsmall",
12810
+ children: [
12811
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
12812
+ /* @__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 })
12813
+ ]
12814
+ }
12815
+ )
12816
+ }
12817
+ ),
12818
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
12819
+ ui.Badge,
12820
+ {
12821
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12822
+ size: "xsmall",
12823
+ children: [
12824
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
12825
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
12826
+ ]
12827
+ }
12828
+ ) })
12829
+ ] })
12830
+ ] }),
12831
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
12832
+ ActionMenu,
12833
+ {
12834
+ groups: [
12835
+ {
12836
+ actions: [
12837
+ hasItems ? {
12838
+ label: "Edit shipping option",
12839
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
12840
+ onClick: () => {
12841
+ setIsOpen(
12842
+ STACKED_FOCUS_MODAL_ID,
12843
+ true
12844
+ );
12845
+ setData({
12846
+ shippingProfileId: profile.id,
12847
+ shippingOption,
12848
+ shippingMethod
12849
+ });
12850
+ }
12851
+ } : void 0,
12852
+ {
12853
+ label: "Remove shipping option",
12854
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
12855
+ onClick: () => {
12856
+ if (shippingMethod) {
12857
+ if (addShippingMethodAction) {
12858
+ removeActionShippingMethod(
12859
+ addShippingMethodAction.id
12860
+ );
12861
+ } else {
12862
+ removeShippingMethod(
12863
+ shippingMethod.id
12864
+ );
12865
+ }
12866
+ }
12867
+ }
12868
+ }
12869
+ ].filter(Boolean)
12870
+ }
12871
+ ]
12872
+ }
12873
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
12874
+ StackedModalTrigger,
12875
+ {
12876
+ shippingProfileId: profile.id,
12877
+ shippingOption,
12878
+ shippingMethod,
12879
+ setData,
12880
+ children: "Add shipping option"
12881
+ }
12882
+ )
12883
+ ] }),
12884
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
12885
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12886
+ items.map((item, idx) => {
12887
+ var _a4, _b2, _c2, _d2, _e2;
12888
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12889
+ /* @__PURE__ */ jsxRuntime.jsxs(
12890
+ "div",
12891
+ {
12892
+ className: "flex items-center gap-x-3 px-3",
12893
+ children: [
12894
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
12895
+ ui.Divider,
12896
+ {
12897
+ variant: "dashed",
12898
+ orientation: "vertical"
12899
+ }
12900
+ ) }),
12901
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
12902
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
12903
+ ui.Text,
12904
+ {
12905
+ size: "small",
12906
+ leading: "compact",
12907
+ className: "text-ui-fg-subtle",
12908
+ children: [
12909
+ item.quantity,
12910
+ "x"
12911
+ ]
12912
+ }
12913
+ ) }),
12914
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
12915
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12916
+ /* @__PURE__ */ jsxRuntime.jsxs(
12917
+ ui.Text,
12918
+ {
12919
+ size: "small",
12920
+ leading: "compact",
12921
+ weight: "plus",
12922
+ children: [
12923
+ (_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title,
12924
+ " (",
12925
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12926
+ ")"
12927
+ ]
12928
+ }
12929
+ ),
12930
+ /* @__PURE__ */ jsxRuntime.jsx(
12931
+ ui.Text,
12932
+ {
12933
+ size: "small",
12934
+ leading: "compact",
12935
+ className: "text-ui-fg-subtle",
12936
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12937
+ }
12938
+ )
12939
+ ] })
12940
+ ] })
12941
+ ]
12942
+ },
12943
+ item.id
12944
+ ),
12945
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
12946
+ ] }, item.id);
12947
+ })
12948
+ ] })
12949
+ ]
12950
+ },
12951
+ profile.id
12952
+ );
12953
+ }) })
12954
+ ] }) })
12955
+ ] }) }),
12956
+ /* @__PURE__ */ jsxRuntime.jsx(
12957
+ StackedFocusModal,
12958
+ {
12959
+ id: STACKED_FOCUS_MODAL_ID,
12960
+ onOpenChangeCallback: (open) => {
12961
+ if (!open) {
12962
+ setData(null);
12963
+ }
12964
+ return open;
12965
+ },
12966
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12967
+ }
12968
+ )
12969
+ ] }),
12970
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12971
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12972
+ /* @__PURE__ */ jsxRuntime.jsx(
12973
+ ui.Button,
12974
+ {
12975
+ size: "small",
12976
+ type: "button",
12977
+ isLoading: isSubmitting,
12978
+ onClick: onSubmit,
12979
+ children: "Save"
12980
+ }
12981
+ )
12982
+ ] }) })
12983
+ ] });
12984
+ };
12985
+ const StackedModalTrigger = ({
12986
+ shippingProfileId,
12987
+ shippingOption,
12988
+ shippingMethod,
12989
+ setData,
12990
+ children
12991
+ }) => {
12992
+ const { setIsOpen, getIsOpen } = useStackedModal();
12993
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12994
+ const onToggle = () => {
12995
+ if (isOpen) {
12996
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12997
+ setData(null);
12998
+ } else {
12999
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
13000
+ setData({
13001
+ shippingProfileId,
13002
+ shippingOption,
13003
+ shippingMethod
13004
+ });
13005
+ }
13006
+ };
13007
+ return /* @__PURE__ */ jsxRuntime.jsx(
13008
+ ui.Button,
13009
+ {
13010
+ size: "small",
13011
+ variant: "secondary",
13012
+ onClick: onToggle,
13013
+ className: "text-ui-fg-primary shrink-0",
13014
+ children
13015
+ }
13016
+ );
13017
+ };
13018
+ const ShippingProfileForm = ({
13019
+ data,
13020
+ order,
13021
+ preview
13022
+ }) => {
13023
+ var _a2, _b, _c, _d, _e, _f;
13024
+ const { setIsOpen } = useStackedModal();
13025
+ const form = reactHookForm.useForm({
13026
+ resolver: zod.zodResolver(shippingMethodSchema),
13027
+ defaultValues: {
13028
+ location_id: (_d = (_c = (_b = (_a2 = data.shippingOption) == null ? void 0 : _a2.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
13029
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
13030
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
13031
+ }
13032
+ });
13033
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
13034
+ const {
13035
+ mutateAsync: updateShippingMethod,
13036
+ isPending: isUpdatingShippingMethod
13037
+ } = useDraftOrderUpdateShippingMethod(order.id);
13038
+ const onSubmit = form.handleSubmit(async (values) => {
13039
+ if (isEqual__default.default(values, form.formState.defaultValues)) {
13040
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
13041
+ return;
13042
+ }
13043
+ if (data.shippingMethod) {
13044
+ await updateShippingMethod(
13045
+ {
13046
+ method_id: data.shippingMethod.id,
13047
+ shipping_option_id: values.shipping_option_id,
13048
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
13049
+ },
13050
+ {
13051
+ onError: (e) => {
13052
+ ui.toast.error(e.message);
13053
+ },
13054
+ onSuccess: () => {
13055
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
13056
+ }
13057
+ }
13058
+ );
13059
+ return;
13060
+ }
13061
+ await addShippingMethod(
13062
+ {
13063
+ shipping_option_id: values.shipping_option_id,
13064
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
13065
+ },
13066
+ {
13067
+ onError: (e) => {
13068
+ ui.toast.error(e.message);
13069
+ },
13070
+ onSuccess: () => {
13071
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
13072
+ }
13073
+ }
13074
+ );
13075
+ });
13076
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
13077
+ KeyboundForm,
13078
+ {
13079
+ className: "flex h-full flex-col overflow-hidden",
13080
+ onSubmit,
13081
+ children: [
13082
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
13083
+ /* @__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 px-6 py-16", children: [
13084
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
13085
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
13086
+ /* @__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." }) })
13087
+ ] }),
13088
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
13089
+ /* @__PURE__ */ jsxRuntime.jsx(
13090
+ LocationField,
13314
13091
  {
13315
- width: "12",
13316
- height: "12",
13317
- fill: "white",
13318
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
13092
+ control: form.control,
13093
+ setValue: form.setValue
13319
13094
  }
13320
- ) }),
13321
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13322
- "rect",
13095
+ ),
13096
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
13097
+ /* @__PURE__ */ jsxRuntime.jsx(
13098
+ ShippingOptionField,
13323
13099
  {
13324
- width: "12",
13325
- height: "12",
13326
- fill: "white",
13327
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
13100
+ shippingProfileId: data.shippingProfileId,
13101
+ preview,
13102
+ control: form.control
13328
13103
  }
13329
- ) }),
13330
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13331
- "rect",
13104
+ ),
13105
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
13106
+ /* @__PURE__ */ jsxRuntime.jsx(
13107
+ CustomAmountField,
13332
13108
  {
13333
- width: "12",
13334
- height: "12",
13335
- fill: "white",
13336
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
13109
+ control: form.control,
13110
+ currencyCode: order.currency_code
13337
13111
  }
13338
- ) }),
13339
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13340
- "rect",
13112
+ ),
13113
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
13114
+ /* @__PURE__ */ jsxRuntime.jsx(
13115
+ ItemsPreview,
13116
+ {
13117
+ order,
13118
+ shippingProfileId: data.shippingProfileId
13119
+ }
13120
+ )
13121
+ ] }) }) }),
13122
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
13123
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
13124
+ /* @__PURE__ */ jsxRuntime.jsx(
13125
+ ui.Button,
13126
+ {
13127
+ size: "small",
13128
+ type: "submit",
13129
+ isLoading: isPending || isUpdatingShippingMethod,
13130
+ children: data.shippingMethod ? "Update" : "Add"
13131
+ }
13132
+ )
13133
+ ] }) })
13134
+ ]
13135
+ }
13136
+ ) }) });
13137
+ };
13138
+ const shippingMethodSchema = object({
13139
+ location_id: string(),
13140
+ shipping_option_id: string(),
13141
+ custom_amount: union([number(), string()]).optional()
13142
+ });
13143
+ const ItemsPreview = ({ order, shippingProfileId }) => {
13144
+ const matches = order.items.filter(
13145
+ (item) => {
13146
+ var _a2, _b, _c;
13147
+ return ((_c = (_b = (_a2 = item.variant) == null ? void 0 : _a2.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
13148
+ }
13149
+ );
13150
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
13151
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13152
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
13153
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
13154
+ ] }) }),
13155
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
13156
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
13157
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
13158
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
13159
+ ] }),
13160
+ /* @__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(
13161
+ "div",
13162
+ {
13163
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
13164
+ children: [
13165
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
13166
+ /* @__PURE__ */ jsxRuntime.jsx(
13167
+ Thumbnail,
13168
+ {
13169
+ thumbnail: item.thumbnail,
13170
+ alt: item.product_title ?? void 0
13171
+ }
13172
+ ),
13173
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13174
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
13175
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
13176
+ /* @__PURE__ */ jsxRuntime.jsxs(
13177
+ ui.Text,
13178
+ {
13179
+ size: "small",
13180
+ leading: "compact",
13181
+ className: "text-ui-fg-subtle",
13182
+ children: [
13183
+ "(",
13184
+ item.variant_title,
13185
+ ")"
13186
+ ]
13187
+ }
13188
+ )
13189
+ ] }),
13190
+ /* @__PURE__ */ jsxRuntime.jsx(
13191
+ ui.Text,
13192
+ {
13193
+ size: "small",
13194
+ leading: "compact",
13195
+ className: "text-ui-fg-subtle",
13196
+ children: item.variant_sku
13197
+ }
13198
+ )
13199
+ ] })
13200
+ ] }),
13201
+ /* @__PURE__ */ jsxRuntime.jsxs(
13202
+ ui.Text,
13203
+ {
13204
+ size: "small",
13205
+ leading: "compact",
13206
+ className: "text-ui-fg-subtle",
13207
+ children: [
13208
+ item.quantity,
13209
+ "x"
13210
+ ]
13211
+ }
13212
+ )
13213
+ ]
13214
+ },
13215
+ item.id
13216
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
13217
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
13218
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
13219
+ 'No items found for "',
13220
+ query,
13221
+ '".'
13222
+ ] })
13223
+ ] }) })
13224
+ ] })
13225
+ ] });
13226
+ };
13227
+ const LocationField = ({ control, setValue }) => {
13228
+ const locations = useComboboxData({
13229
+ queryKey: ["locations"],
13230
+ queryFn: async (params) => {
13231
+ return await sdk.admin.stockLocation.list(params);
13232
+ },
13233
+ getOptions: (data) => {
13234
+ return data.stock_locations.map((location) => ({
13235
+ label: location.name,
13236
+ value: location.id
13237
+ }));
13238
+ }
13239
+ });
13240
+ return /* @__PURE__ */ jsxRuntime.jsx(
13241
+ Form$2.Field,
13242
+ {
13243
+ control,
13244
+ name: "location_id",
13245
+ render: ({ field: { onChange, ...field } }) => {
13246
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13247
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
13248
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
13249
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
13250
+ ] }),
13251
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13252
+ Combobox,
13341
13253
  {
13342
- width: "12",
13343
- height: "12",
13344
- fill: "white",
13345
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
13254
+ options: locations.options,
13255
+ fetchNextPage: locations.fetchNextPage,
13256
+ isFetchingNextPage: locations.isFetchingNextPage,
13257
+ searchValue: locations.searchValue,
13258
+ onSearchValueChange: locations.onSearchValueChange,
13259
+ placeholder: "Select location",
13260
+ onChange: (value) => {
13261
+ setValue("shipping_option_id", "", {
13262
+ shouldDirty: true,
13263
+ shouldTouch: true
13264
+ });
13265
+ onChange(value);
13266
+ },
13267
+ ...field
13346
13268
  }
13347
- ) }),
13348
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13349
- "rect",
13269
+ ) })
13270
+ ] }) });
13271
+ }
13272
+ }
13273
+ );
13274
+ };
13275
+ const ShippingOptionField = ({
13276
+ shippingProfileId,
13277
+ preview,
13278
+ control
13279
+ }) => {
13280
+ var _a2;
13281
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
13282
+ const shippingOptions = useComboboxData({
13283
+ queryKey: ["shipping_options", locationId, shippingProfileId],
13284
+ queryFn: async (params) => {
13285
+ return await sdk.admin.shippingOption.list({
13286
+ ...params,
13287
+ stock_location_id: locationId,
13288
+ shipping_profile_id: shippingProfileId
13289
+ });
13290
+ },
13291
+ getOptions: (data) => {
13292
+ return data.shipping_options.map((option) => {
13293
+ var _a3;
13294
+ if ((_a3 = option.rules) == null ? void 0 : _a3.find(
13295
+ (r) => r.attribute === "is_return" && r.value === "true"
13296
+ )) {
13297
+ return void 0;
13298
+ }
13299
+ return {
13300
+ label: option.name,
13301
+ value: option.id
13302
+ };
13303
+ }).filter(Boolean);
13304
+ },
13305
+ enabled: !!locationId && !!shippingProfileId,
13306
+ defaultValue: ((_a2 = preview.shipping_methods[0]) == null ? void 0 : _a2.shipping_option_id) || void 0
13307
+ });
13308
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
13309
+ return /* @__PURE__ */ jsxRuntime.jsx(
13310
+ Form$2.Field,
13311
+ {
13312
+ control,
13313
+ name: "shipping_option_id",
13314
+ render: ({ field }) => {
13315
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13316
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13317
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
13318
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
13319
+ ] }),
13320
+ /* @__PURE__ */ jsxRuntime.jsx(
13321
+ ConditionalTooltip,
13350
13322
  {
13351
- width: "12",
13352
- height: "12",
13353
- fill: "white",
13354
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
13323
+ content: tooltipContent,
13324
+ showTooltip: !locationId || !shippingProfileId,
13325
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13326
+ Combobox,
13327
+ {
13328
+ options: shippingOptions.options,
13329
+ fetchNextPage: shippingOptions.fetchNextPage,
13330
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
13331
+ searchValue: shippingOptions.searchValue,
13332
+ onSearchValueChange: shippingOptions.onSearchValueChange,
13333
+ placeholder: "Select shipping option",
13334
+ ...field,
13335
+ disabled: !locationId || !shippingProfileId
13336
+ }
13337
+ ) }) })
13355
13338
  }
13356
- ) }),
13357
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13358
- "rect",
13339
+ )
13340
+ ] }) });
13341
+ }
13342
+ }
13343
+ );
13344
+ };
13345
+ const CustomAmountField = ({
13346
+ control,
13347
+ currencyCode
13348
+ }) => {
13349
+ return /* @__PURE__ */ jsxRuntime.jsx(
13350
+ Form$2.Field,
13351
+ {
13352
+ control,
13353
+ name: "custom_amount",
13354
+ render: ({ field: { onChange, ...field } }) => {
13355
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13356
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13357
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
13358
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
13359
+ ] }),
13360
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13361
+ ui.CurrencyInput,
13359
13362
  {
13360
- width: "12",
13361
- height: "12",
13362
- fill: "white",
13363
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13363
+ ...field,
13364
+ onValueChange: (value) => onChange(value),
13365
+ symbol: getNativeSymbol(currencyCode),
13366
+ code: currencyCode
13364
13367
  }
13365
13368
  ) })
13366
- ] })
13367
- ]
13369
+ ] });
13370
+ }
13368
13371
  }
13369
13372
  );
13370
13373
  };
13371
- const schema = object({
13372
- customer_id: string().min(1)
13373
- });
13374
13374
  const widgetModule = { widgets: [] };
13375
13375
  const routeModule = {
13376
13376
  routes: [
@@ -13415,14 +13415,6 @@ const routeModule = {
13415
13415
  Component: Promotions,
13416
13416
  path: "/draft-orders/:id/promotions"
13417
13417
  },
13418
- {
13419
- Component: SalesChannel,
13420
- path: "/draft-orders/:id/sales-channel"
13421
- },
13422
- {
13423
- Component: Shipping,
13424
- path: "/draft-orders/:id/shipping"
13425
- },
13426
13418
  {
13427
13419
  Component: ShippingAddress,
13428
13420
  path: "/draft-orders/:id/shipping-address"
@@ -13430,6 +13422,14 @@ const routeModule = {
13430
13422
  {
13431
13423
  Component: TransferOwnership,
13432
13424
  path: "/draft-orders/:id/transfer-ownership"
13425
+ },
13426
+ {
13427
+ Component: SalesChannel,
13428
+ path: "/draft-orders/:id/sales-channel"
13429
+ },
13430
+ {
13431
+ Component: Shipping,
13432
+ path: "/draft-orders/:id/shipping"
13433
13433
  }
13434
13434
  ]
13435
13435
  }