@medusajs/draft-order 2.11.3-preview-20251103120146 → 2.11.3-snapshot-20251103115905

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.
@@ -9,7 +9,7 @@ import Medusa from "@medusajs/js-sdk";
9
9
  import { format, formatDistance, sub, subDays, subMonths } from "date-fns";
10
10
  import { enUS } from "date-fns/locale";
11
11
  import { zodResolver } from "@hookform/resolvers/zod";
12
- import { FormProvider, Controller, useFormContext, useFormState, useForm, useWatch, useFieldArray } from "react-hook-form";
12
+ import { FormProvider, useFormContext, useFormState, Controller, useForm, useWatch, useFieldArray } from "react-hook-form";
13
13
  import { Slot, Collapsible, Accordion } from "radix-ui";
14
14
  import { ComboboxProvider, Combobox as Combobox$1, ComboboxDisclosure, ComboboxPopover, ComboboxItem, ComboboxItemCheck, ComboboxItemValue, Separator } from "@ariakit/react";
15
15
  import { matchSorter } from "match-sorter";
@@ -4647,9 +4647,6 @@ ZodReadonly.create = (type, params) => {
4647
4647
  ...processCreateParams(params)
4648
4648
  });
4649
4649
  };
4650
- ({
4651
- object: ZodObject.lazycreate
4652
- });
4653
4650
  var ZodFirstPartyTypeKind;
4654
4651
  (function(ZodFirstPartyTypeKind2) {
4655
4652
  ZodFirstPartyTypeKind2["ZodString"] = "ZodString";
@@ -4696,7 +4693,6 @@ const anyType = ZodAny.create;
4696
4693
  ZodNever.create;
4697
4694
  const arrayType = ZodArray.create;
4698
4695
  const objectType = ZodObject.create;
4699
- ZodObject.strictCreate;
4700
4696
  const unionType = ZodUnion.create;
4701
4697
  ZodIntersection.create;
4702
4698
  ZodTuple.create;
@@ -9755,27 +9751,6 @@ const BillingAddressForm = ({ order }) => {
9755
9751
  ) });
9756
9752
  };
9757
9753
  const schema$5 = addressSchema;
9758
- const CustomItems = () => {
9759
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9760
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9761
- /* @__PURE__ */ jsx(CustomItemsForm, {})
9762
- ] });
9763
- };
9764
- const CustomItemsForm = () => {
9765
- const form = useForm({
9766
- resolver: zodResolver(schema$4)
9767
- });
9768
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9769
- /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9770
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9771
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9772
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9773
- ] }) })
9774
- ] }) });
9775
- };
9776
- const schema$4 = objectType({
9777
- email: stringType().email()
9778
- });
9779
9754
  const Email = () => {
9780
9755
  const { id } = useParams();
9781
9756
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9798,7 +9773,7 @@ const EmailForm = ({ order }) => {
9798
9773
  defaultValues: {
9799
9774
  email: order.email ?? ""
9800
9775
  },
9801
- resolver: zodResolver(schema$3)
9776
+ resolver: zodResolver(schema$4)
9802
9777
  });
9803
9778
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9804
9779
  const { handleSuccess } = useRouteModal();
@@ -9841,6 +9816,27 @@ const EmailForm = ({ order }) => {
9841
9816
  }
9842
9817
  ) });
9843
9818
  };
9819
+ const schema$4 = objectType({
9820
+ email: stringType().email()
9821
+ });
9822
+ const CustomItems = () => {
9823
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9824
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9825
+ /* @__PURE__ */ jsx(CustomItemsForm, {})
9826
+ ] });
9827
+ };
9828
+ const CustomItemsForm = () => {
9829
+ const form = useForm({
9830
+ resolver: zodResolver(schema$3)
9831
+ });
9832
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9833
+ /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9834
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9835
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9836
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9837
+ ] }) })
9838
+ ] }) });
9839
+ };
9844
9840
  const schema$3 = objectType({
9845
9841
  email: stringType().email()
9846
9842
  });
@@ -11445,1016 +11441,1122 @@ function getPromotionIds(items, shippingMethods) {
11445
11441
  }
11446
11442
  return Array.from(promotionIds);
11447
11443
  }
11448
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11449
- const Shipping = () => {
11450
- var _a;
11444
+ const SalesChannel = () => {
11451
11445
  const { id } = useParams();
11452
- const { order, isPending, isError, error } = useOrder(id, {
11453
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11454
- });
11455
- const {
11456
- order: preview,
11457
- isPending: isPreviewPending,
11458
- isError: isPreviewError,
11459
- error: previewError
11460
- } = useOrderPreview(id);
11461
- useInitiateOrderEdit({ preview });
11462
- const { onCancel } = useCancelOrderEdit({ preview });
11463
- if (isError) {
11464
- throw error;
11465
- }
11466
- if (isPreviewError) {
11467
- throw previewError;
11468
- }
11469
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11470
- const isReady = preview && !isPreviewPending && order && !isPending;
11471
- return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11472
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11473
- /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11474
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11475
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11476
- ] }) }) }),
11477
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11478
- ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11479
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11480
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11481
- ] }) });
11482
- };
11483
- const ShippingForm = ({ preview, order }) => {
11484
- var _a;
11485
- const { setIsOpen } = useStackedModal();
11486
- const [isSubmitting, setIsSubmitting] = useState(false);
11487
- const [data, setData] = useState(null);
11488
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11489
- const { shipping_options } = useShippingOptions(
11446
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11447
+ id,
11490
11448
  {
11491
- id: appliedShippingOptionIds,
11492
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11449
+ fields: "+sales_channel_id"
11493
11450
  },
11494
11451
  {
11495
- enabled: appliedShippingOptionIds.length > 0
11452
+ enabled: !!id
11496
11453
  }
11497
11454
  );
11498
- const uniqueShippingProfiles = useMemo(() => {
11499
- const profiles = /* @__PURE__ */ new Map();
11500
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11501
- profiles.set(profile.id, profile);
11502
- });
11503
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11504
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11505
- });
11506
- return Array.from(profiles.values());
11507
- }, [order.items, shipping_options]);
11455
+ if (isError) {
11456
+ throw error;
11457
+ }
11458
+ const ISrEADY = !!draft_order && !isPending;
11459
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11460
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11461
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11462
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11463
+ ] }),
11464
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11465
+ ] });
11466
+ };
11467
+ const SalesChannelForm = ({ order }) => {
11468
+ const form = useForm({
11469
+ defaultValues: {
11470
+ sales_channel_id: order.sales_channel_id || ""
11471
+ },
11472
+ resolver: zodResolver(schema$2)
11473
+ });
11474
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11508
11475
  const { handleSuccess } = useRouteModal();
11509
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11510
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11511
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11512
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11513
- const onSubmit = async () => {
11514
- setIsSubmitting(true);
11515
- let requestSucceeded = false;
11516
- await requestOrderEdit(void 0, {
11517
- onError: (e) => {
11518
- toast.error(`Failed to request order edit: ${e.message}`);
11519
- },
11520
- onSuccess: () => {
11521
- requestSucceeded = true;
11522
- }
11523
- });
11524
- if (!requestSucceeded) {
11525
- setIsSubmitting(false);
11526
- return;
11527
- }
11528
- await confirmOrderEdit(void 0, {
11529
- onError: (e) => {
11530
- toast.error(`Failed to confirm order edit: ${e.message}`);
11531
- },
11532
- onSuccess: () => {
11533
- handleSuccess();
11476
+ const onSubmit = form.handleSubmit(async (data) => {
11477
+ await mutateAsync(
11478
+ {
11479
+ sales_channel_id: data.sales_channel_id
11534
11480
  },
11535
- onSettled: () => {
11536
- setIsSubmitting(false);
11537
- }
11538
- });
11539
- };
11540
- const onKeydown = useCallback(
11541
- (e) => {
11542
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11543
- if (data || isSubmitting) {
11544
- return;
11481
+ {
11482
+ onSuccess: () => {
11483
+ toast.success("Sales channel updated");
11484
+ handleSuccess();
11485
+ },
11486
+ onError: (error) => {
11487
+ toast.error(error.message);
11545
11488
  }
11546
- onSubmit();
11547
11489
  }
11490
+ );
11491
+ });
11492
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11493
+ KeyboundForm,
11494
+ {
11495
+ className: "flex flex-1 flex-col overflow-hidden",
11496
+ onSubmit,
11497
+ children: [
11498
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11499
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11500
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11501
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11502
+ ] }) })
11503
+ ]
11504
+ }
11505
+ ) });
11506
+ };
11507
+ const SalesChannelField = ({ control, order }) => {
11508
+ const salesChannels = useComboboxData({
11509
+ queryFn: async (params) => {
11510
+ return await sdk.admin.salesChannel.list(params);
11548
11511
  },
11549
- [data, isSubmitting, onSubmit]
11512
+ queryKey: ["sales-channels"],
11513
+ getOptions: (data) => {
11514
+ return data.sales_channels.map((salesChannel) => ({
11515
+ label: salesChannel.name,
11516
+ value: salesChannel.id
11517
+ }));
11518
+ },
11519
+ defaultValue: order.sales_channel_id || void 0
11520
+ });
11521
+ return /* @__PURE__ */ jsx(
11522
+ Form$2.Field,
11523
+ {
11524
+ control,
11525
+ name: "sales_channel_id",
11526
+ render: ({ field }) => {
11527
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11528
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11529
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11530
+ Combobox,
11531
+ {
11532
+ options: salesChannels.options,
11533
+ fetchNextPage: salesChannels.fetchNextPage,
11534
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11535
+ searchValue: salesChannels.searchValue,
11536
+ onSearchValueChange: salesChannels.onSearchValueChange,
11537
+ placeholder: "Select sales channel",
11538
+ ...field
11539
+ }
11540
+ ) }),
11541
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11542
+ ] });
11543
+ }
11544
+ }
11550
11545
  );
11551
- useEffect(() => {
11552
- document.addEventListener("keydown", onKeydown);
11553
- return () => {
11554
- document.removeEventListener("keydown", onKeydown);
11555
- };
11556
- }, [onKeydown]);
11557
- return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11558
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11559
- /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11560
- /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11561
- /* @__PURE__ */ jsxs("div", { children: [
11562
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11563
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11564
- ] }),
11565
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11566
- /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11567
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
11568
- /* @__PURE__ */ jsx(
11569
- Text,
11570
- {
11571
- size: "xsmall",
11572
- weight: "plus",
11573
- className: "text-ui-fg-muted",
11574
- children: "Shipping profile"
11575
- }
11576
- ),
11577
- /* @__PURE__ */ jsx(
11578
- Text,
11579
- {
11580
- size: "xsmall",
11581
- weight: "plus",
11582
- className: "text-ui-fg-muted",
11583
- children: "Action"
11546
+ };
11547
+ const schema$2 = objectType({
11548
+ sales_channel_id: stringType().min(1)
11549
+ });
11550
+ const ShippingAddress = () => {
11551
+ const { id } = useParams();
11552
+ const { order, isPending, isError, error } = useOrder(id, {
11553
+ fields: "+shipping_address"
11554
+ });
11555
+ if (isError) {
11556
+ throw error;
11557
+ }
11558
+ const isReady = !isPending && !!order;
11559
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11560
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11561
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11562
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11563
+ ] }),
11564
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11565
+ ] });
11566
+ };
11567
+ const ShippingAddressForm = ({ order }) => {
11568
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11569
+ const form = useForm({
11570
+ defaultValues: {
11571
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11572
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11573
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11574
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11575
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11576
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11577
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11578
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11579
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11580
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11581
+ },
11582
+ resolver: zodResolver(schema$1)
11583
+ });
11584
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11585
+ const { handleSuccess } = useRouteModal();
11586
+ const onSubmit = form.handleSubmit(async (data) => {
11587
+ await mutateAsync(
11588
+ {
11589
+ shipping_address: {
11590
+ first_name: data.first_name,
11591
+ last_name: data.last_name,
11592
+ company: data.company,
11593
+ address_1: data.address_1,
11594
+ address_2: data.address_2,
11595
+ city: data.city,
11596
+ province: data.province,
11597
+ country_code: data.country_code,
11598
+ postal_code: data.postal_code,
11599
+ phone: data.phone
11600
+ }
11601
+ },
11602
+ {
11603
+ onSuccess: () => {
11604
+ handleSuccess();
11605
+ },
11606
+ onError: (error) => {
11607
+ toast.error(error.message);
11608
+ }
11609
+ }
11610
+ );
11611
+ });
11612
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11613
+ KeyboundForm,
11614
+ {
11615
+ className: "flex flex-1 flex-col overflow-hidden",
11616
+ onSubmit,
11617
+ children: [
11618
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
11619
+ /* @__PURE__ */ jsx(
11620
+ Form$2.Field,
11621
+ {
11622
+ control: form.control,
11623
+ name: "country_code",
11624
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11625
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11626
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11627
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11628
+ ] })
11629
+ }
11630
+ ),
11631
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11632
+ /* @__PURE__ */ jsx(
11633
+ Form$2.Field,
11634
+ {
11635
+ control: form.control,
11636
+ name: "first_name",
11637
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11638
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11639
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11640
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11641
+ ] })
11642
+ }
11643
+ ),
11644
+ /* @__PURE__ */ jsx(
11645
+ Form$2.Field,
11646
+ {
11647
+ control: form.control,
11648
+ name: "last_name",
11649
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11650
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11651
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11652
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11653
+ ] })
11584
11654
  }
11585
11655
  )
11586
11656
  ] }),
11587
- /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11588
- var _a2, _b, _c, _d, _e, _f, _g;
11589
- const items = getItemsWithShippingProfile(
11590
- profile.id,
11591
- order.items
11592
- );
11593
- const hasItems = items.length > 0;
11594
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11595
- (option) => option.shipping_profile_id === profile.id
11596
- );
11597
- const shippingMethod = preview.shipping_methods.find(
11598
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11599
- );
11600
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11601
- (action) => action.action === "SHIPPING_ADD"
11602
- );
11603
- return /* @__PURE__ */ jsxs(
11604
- Accordion.Item,
11657
+ /* @__PURE__ */ jsx(
11658
+ Form$2.Field,
11659
+ {
11660
+ control: form.control,
11661
+ name: "company",
11662
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11663
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11664
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11665
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11666
+ ] })
11667
+ }
11668
+ ),
11669
+ /* @__PURE__ */ jsx(
11670
+ Form$2.Field,
11671
+ {
11672
+ control: form.control,
11673
+ name: "address_1",
11674
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11675
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11676
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11677
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11678
+ ] })
11679
+ }
11680
+ ),
11681
+ /* @__PURE__ */ jsx(
11682
+ Form$2.Field,
11683
+ {
11684
+ control: form.control,
11685
+ name: "address_2",
11686
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11687
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11688
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11689
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11690
+ ] })
11691
+ }
11692
+ ),
11693
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11694
+ /* @__PURE__ */ jsx(
11695
+ Form$2.Field,
11605
11696
  {
11606
- value: profile.id,
11607
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11608
- children: [
11609
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
11610
- /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
11611
- /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
11612
- IconButton,
11613
- {
11614
- size: "2xsmall",
11615
- variant: "transparent",
11616
- className: "group/trigger",
11617
- disabled: !hasItems,
11618
- children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
11619
- }
11620
- ) }),
11621
- !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11622
- /* @__PURE__ */ jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) }),
11623
- /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
11624
- /* @__PURE__ */ jsx(
11625
- Text,
11626
- {
11627
- size: "small",
11628
- weight: "plus",
11629
- leading: "compact",
11630
- children: profile.name
11631
- }
11632
- ),
11633
- /* @__PURE__ */ jsxs(
11634
- Text,
11635
- {
11636
- size: "small",
11637
- leading: "compact",
11638
- className: "text-ui-fg-subtle",
11639
- children: [
11640
- items.length,
11641
- " ",
11642
- pluralize(items.length, "items", "item")
11643
- ]
11644
- }
11645
- )
11646
- ] })
11647
- ] }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
11648
- /* @__PURE__ */ jsx(
11649
- Tooltip,
11650
- {
11651
- content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
11652
- var _a3, _b2, _c2;
11653
- return /* @__PURE__ */ jsx(
11654
- "li",
11655
- {
11656
- children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11657
- },
11658
- item.id
11659
- );
11660
- }) }),
11661
- children: /* @__PURE__ */ jsxs(
11662
- Badge,
11663
- {
11664
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11665
- size: "xsmall",
11666
- children: [
11667
- /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
11668
- /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
11669
- items.reduce(
11670
- (acc, item) => acc + item.quantity,
11671
- 0
11672
- ),
11673
- "x",
11674
- " ",
11675
- pluralize(items.length, "items", "item")
11676
- ] })
11677
- ]
11678
- }
11679
- )
11680
- }
11681
- ),
11682
- /* @__PURE__ */ jsx(
11683
- Tooltip,
11684
- {
11685
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11686
- children: /* @__PURE__ */ jsxs(
11687
- Badge,
11688
- {
11689
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11690
- size: "xsmall",
11691
- children: [
11692
- /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
11693
- /* @__PURE__ */ jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11694
- ]
11695
- }
11696
- )
11697
- }
11698
- ),
11699
- /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
11700
- Badge,
11701
- {
11702
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11703
- size: "xsmall",
11704
- children: [
11705
- /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
11706
- /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
11707
- ]
11708
- }
11709
- ) })
11710
- ] })
11711
- ] }),
11712
- shippingOption ? /* @__PURE__ */ jsx(
11713
- ActionMenu,
11714
- {
11715
- groups: [
11716
- {
11717
- actions: [
11718
- hasItems ? {
11719
- label: "Edit shipping option",
11720
- icon: /* @__PURE__ */ jsx(Channels, {}),
11721
- onClick: () => {
11722
- setIsOpen(
11723
- STACKED_FOCUS_MODAL_ID,
11724
- true
11725
- );
11726
- setData({
11727
- shippingProfileId: profile.id,
11728
- shippingOption,
11729
- shippingMethod
11730
- });
11731
- }
11732
- } : void 0,
11733
- {
11734
- label: "Remove shipping option",
11735
- icon: /* @__PURE__ */ jsx(Trash, {}),
11736
- onClick: () => {
11737
- if (shippingMethod) {
11738
- if (addShippingMethodAction) {
11739
- removeActionShippingMethod(
11740
- addShippingMethodAction.id
11741
- );
11742
- } else {
11743
- removeShippingMethod(
11744
- shippingMethod.id
11745
- );
11746
- }
11747
- }
11748
- }
11749
- }
11750
- ].filter(Boolean)
11751
- }
11752
- ]
11753
- }
11754
- ) : /* @__PURE__ */ jsx(
11755
- StackedModalTrigger,
11756
- {
11757
- shippingProfileId: profile.id,
11758
- shippingOption,
11759
- shippingMethod,
11760
- setData,
11761
- children: "Add shipping option"
11762
- }
11763
- )
11764
- ] }),
11765
- /* @__PURE__ */ jsxs(Accordion.Content, { children: [
11766
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11767
- items.map((item, idx) => {
11768
- var _a3, _b2, _c2, _d2, _e2;
11769
- return /* @__PURE__ */ jsxs("div", { children: [
11770
- /* @__PURE__ */ jsxs(
11771
- "div",
11772
- {
11773
- className: "flex items-center gap-x-3 px-3",
11774
- children: [
11775
- /* @__PURE__ */ jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsx(
11776
- Divider,
11777
- {
11778
- variant: "dashed",
11779
- orientation: "vertical"
11780
- }
11781
- ) }),
11782
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
11783
- /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
11784
- Text,
11785
- {
11786
- size: "small",
11787
- leading: "compact",
11788
- className: "text-ui-fg-subtle",
11789
- children: [
11790
- item.quantity,
11791
- "x"
11792
- ]
11793
- }
11794
- ) }),
11795
- /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
11796
- /* @__PURE__ */ jsxs("div", { children: [
11797
- /* @__PURE__ */ jsxs(
11798
- Text,
11799
- {
11800
- size: "small",
11801
- leading: "compact",
11802
- weight: "plus",
11803
- children: [
11804
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11805
- " (",
11806
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11807
- ")"
11808
- ]
11809
- }
11810
- ),
11811
- /* @__PURE__ */ jsx(
11812
- Text,
11813
- {
11814
- size: "small",
11815
- leading: "compact",
11816
- className: "text-ui-fg-subtle",
11817
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11818
- }
11819
- )
11820
- ] })
11821
- ] })
11822
- ]
11823
- },
11824
- item.id
11825
- ),
11826
- idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
11827
- ] }, item.id);
11828
- })
11829
- ] })
11830
- ]
11831
- },
11832
- profile.id
11833
- );
11834
- }) })
11835
- ] }) })
11836
- ] }) }),
11837
- /* @__PURE__ */ jsx(
11838
- StackedFocusModal,
11839
- {
11840
- id: STACKED_FOCUS_MODAL_ID,
11841
- onOpenChangeCallback: (open) => {
11842
- if (!open) {
11843
- setData(null);
11697
+ control: form.control,
11698
+ name: "postal_code",
11699
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11700
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11701
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11702
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11703
+ ] })
11704
+ }
11705
+ ),
11706
+ /* @__PURE__ */ jsx(
11707
+ Form$2.Field,
11708
+ {
11709
+ control: form.control,
11710
+ name: "city",
11711
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11712
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11713
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11714
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11715
+ ] })
11716
+ }
11717
+ )
11718
+ ] }),
11719
+ /* @__PURE__ */ jsx(
11720
+ Form$2.Field,
11721
+ {
11722
+ control: form.control,
11723
+ name: "province",
11724
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11725
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11726
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11727
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11728
+ ] })
11844
11729
  }
11845
- return open;
11846
- },
11847
- children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
11848
- }
11849
- )
11850
- ] }),
11851
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
11852
- /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11853
- /* @__PURE__ */ jsx(
11854
- Button,
11855
- {
11856
- size: "small",
11857
- type: "button",
11858
- isLoading: isSubmitting,
11859
- onClick: onSubmit,
11860
- children: "Save"
11861
- }
11862
- )
11863
- ] }) })
11864
- ] });
11865
- };
11866
- const StackedModalTrigger = ({
11867
- shippingProfileId,
11868
- shippingOption,
11869
- shippingMethod,
11870
- setData,
11871
- children
11872
- }) => {
11873
- const { setIsOpen, getIsOpen } = useStackedModal();
11874
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11875
- const onToggle = () => {
11876
- if (isOpen) {
11877
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11878
- setData(null);
11879
- } else {
11880
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11881
- setData({
11882
- shippingProfileId,
11883
- shippingOption,
11884
- shippingMethod
11885
- });
11886
- }
11887
- };
11888
- return /* @__PURE__ */ jsx(
11889
- Button,
11890
- {
11891
- size: "small",
11892
- variant: "secondary",
11893
- onClick: onToggle,
11894
- className: "text-ui-fg-primary shrink-0",
11895
- children
11730
+ ),
11731
+ /* @__PURE__ */ jsx(
11732
+ Form$2.Field,
11733
+ {
11734
+ control: form.control,
11735
+ name: "phone",
11736
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11737
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11738
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11739
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11740
+ ] })
11741
+ }
11742
+ )
11743
+ ] }) }),
11744
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11745
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11746
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11747
+ ] }) })
11748
+ ]
11896
11749
  }
11897
- );
11750
+ ) });
11898
11751
  };
11899
- const ShippingProfileForm = ({
11900
- data,
11901
- order,
11902
- preview
11903
- }) => {
11904
- var _a, _b, _c, _d, _e, _f;
11905
- const { setIsOpen } = useStackedModal();
11906
- const form = useForm({
11907
- resolver: zodResolver(shippingMethodSchema),
11908
- defaultValues: {
11909
- location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
11910
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
11911
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
11912
- }
11752
+ const schema$1 = addressSchema;
11753
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11754
+ const Shipping = () => {
11755
+ var _a;
11756
+ const { id } = useParams();
11757
+ const { order, isPending, isError, error } = useOrder(id, {
11758
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11913
11759
  });
11914
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
11915
11760
  const {
11916
- mutateAsync: updateShippingMethod,
11917
- isPending: isUpdatingShippingMethod
11918
- } = useDraftOrderUpdateShippingMethod(order.id);
11919
- const onSubmit = form.handleSubmit(async (values) => {
11920
- if (isEqual(values, form.formState.defaultValues)) {
11921
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11922
- return;
11761
+ order: preview,
11762
+ isPending: isPreviewPending,
11763
+ isError: isPreviewError,
11764
+ error: previewError
11765
+ } = useOrderPreview(id);
11766
+ useInitiateOrderEdit({ preview });
11767
+ const { onCancel } = useCancelOrderEdit({ preview });
11768
+ if (isError) {
11769
+ throw error;
11770
+ }
11771
+ if (isPreviewError) {
11772
+ throw previewError;
11773
+ }
11774
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11775
+ const isReady = preview && !isPreviewPending && order && !isPending;
11776
+ return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11777
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11778
+ /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11779
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11780
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11781
+ ] }) }) }),
11782
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11783
+ ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11784
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11785
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11786
+ ] }) });
11787
+ };
11788
+ const ShippingForm = ({ preview, order }) => {
11789
+ var _a;
11790
+ const { setIsOpen } = useStackedModal();
11791
+ const [isSubmitting, setIsSubmitting] = useState(false);
11792
+ const [data, setData] = useState(null);
11793
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11794
+ const { shipping_options } = useShippingOptions(
11795
+ {
11796
+ id: appliedShippingOptionIds,
11797
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11798
+ },
11799
+ {
11800
+ enabled: appliedShippingOptionIds.length > 0
11923
11801
  }
11924
- if (data.shippingMethod) {
11925
- await updateShippingMethod(
11926
- {
11927
- method_id: data.shippingMethod.id,
11928
- shipping_option_id: values.shipping_option_id,
11929
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11930
- },
11931
- {
11932
- onError: (e) => {
11933
- toast.error(e.message);
11934
- },
11935
- onSuccess: () => {
11936
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11937
- }
11938
- }
11939
- );
11802
+ );
11803
+ const uniqueShippingProfiles = useMemo(() => {
11804
+ const profiles = /* @__PURE__ */ new Map();
11805
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11806
+ profiles.set(profile.id, profile);
11807
+ });
11808
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11809
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11810
+ });
11811
+ return Array.from(profiles.values());
11812
+ }, [order.items, shipping_options]);
11813
+ const { handleSuccess } = useRouteModal();
11814
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11815
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11816
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11817
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11818
+ const onSubmit = async () => {
11819
+ setIsSubmitting(true);
11820
+ let requestSucceeded = false;
11821
+ await requestOrderEdit(void 0, {
11822
+ onError: (e) => {
11823
+ toast.error(`Failed to request order edit: ${e.message}`);
11824
+ },
11825
+ onSuccess: () => {
11826
+ requestSucceeded = true;
11827
+ }
11828
+ });
11829
+ if (!requestSucceeded) {
11830
+ setIsSubmitting(false);
11940
11831
  return;
11941
11832
  }
11942
- await addShippingMethod(
11943
- {
11944
- shipping_option_id: values.shipping_option_id,
11945
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11833
+ await confirmOrderEdit(void 0, {
11834
+ onError: (e) => {
11835
+ toast.error(`Failed to confirm order edit: ${e.message}`);
11946
11836
  },
11947
- {
11948
- onError: (e) => {
11949
- toast.error(e.message);
11950
- },
11951
- onSuccess: () => {
11952
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11837
+ onSuccess: () => {
11838
+ handleSuccess();
11839
+ },
11840
+ onSettled: () => {
11841
+ setIsSubmitting(false);
11842
+ }
11843
+ });
11844
+ };
11845
+ const onKeydown = useCallback(
11846
+ (e) => {
11847
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11848
+ if (data || isSubmitting) {
11849
+ return;
11953
11850
  }
11851
+ onSubmit();
11954
11852
  }
11955
- );
11956
- });
11957
- return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
11958
- KeyboundForm,
11959
- {
11960
- className: "flex h-full flex-col overflow-hidden",
11961
- onSubmit,
11962
- children: [
11963
- /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
11964
- /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11965
- /* @__PURE__ */ jsxs("div", { children: [
11966
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11967
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
11968
- ] }),
11969
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11970
- /* @__PURE__ */ jsx(
11971
- LocationField,
11972
- {
11973
- control: form.control,
11974
- setValue: form.setValue
11975
- }
11976
- ),
11977
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11978
- /* @__PURE__ */ jsx(
11979
- ShippingOptionField,
11980
- {
11981
- shippingProfileId: data.shippingProfileId,
11982
- preview,
11983
- control: form.control
11984
- }
11985
- ),
11986
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11987
- /* @__PURE__ */ jsx(
11988
- CustomAmountField,
11989
- {
11990
- control: form.control,
11991
- currencyCode: order.currency_code
11992
- }
11993
- ),
11994
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11995
- /* @__PURE__ */ jsx(
11996
- ItemsPreview,
11997
- {
11998
- order,
11999
- shippingProfileId: data.shippingProfileId
12000
- }
12001
- )
12002
- ] }) }) }),
12003
- /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12004
- /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12005
- /* @__PURE__ */ jsx(
12006
- Button,
12007
- {
12008
- size: "small",
12009
- type: "submit",
12010
- isLoading: isPending || isUpdatingShippingMethod,
12011
- children: data.shippingMethod ? "Update" : "Add"
12012
- }
12013
- )
12014
- ] }) })
12015
- ]
12016
- }
12017
- ) }) });
12018
- };
12019
- const shippingMethodSchema = objectType({
12020
- location_id: stringType(),
12021
- shipping_option_id: stringType(),
12022
- custom_amount: unionType([numberType(), stringType()]).optional()
12023
- });
12024
- const ItemsPreview = ({ order, shippingProfileId }) => {
12025
- const matches = order.items.filter(
12026
- (item) => {
12027
- var _a, _b, _c;
12028
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12029
- }
11853
+ },
11854
+ [data, isSubmitting, onSubmit]
12030
11855
  );
12031
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12032
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12033
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12034
- /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12035
- ] }) }),
12036
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12037
- /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12038
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12039
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12040
- ] }),
12041
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
12042
- "div",
12043
- {
12044
- className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12045
- children: [
12046
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12047
- /* @__PURE__ */ jsx(
12048
- Thumbnail,
12049
- {
12050
- thumbnail: item.thumbnail,
12051
- alt: item.product_title ?? void 0
12052
- }
12053
- ),
12054
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12055
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12056
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12057
- /* @__PURE__ */ jsxs(
12058
- Text,
12059
- {
12060
- size: "small",
12061
- leading: "compact",
12062
- className: "text-ui-fg-subtle",
12063
- children: [
12064
- "(",
12065
- item.variant_title,
12066
- ")"
12067
- ]
12068
- }
12069
- )
12070
- ] }),
12071
- /* @__PURE__ */ jsx(
12072
- Text,
12073
- {
12074
- size: "small",
12075
- leading: "compact",
12076
- className: "text-ui-fg-subtle",
12077
- children: item.variant_sku
12078
- }
12079
- )
12080
- ] })
12081
- ] }),
12082
- /* @__PURE__ */ jsxs(
11856
+ useEffect(() => {
11857
+ document.addEventListener("keydown", onKeydown);
11858
+ return () => {
11859
+ document.removeEventListener("keydown", onKeydown);
11860
+ };
11861
+ }, [onKeydown]);
11862
+ return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11863
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11864
+ /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11865
+ /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11866
+ /* @__PURE__ */ jsxs("div", { children: [
11867
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11868
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11869
+ ] }),
11870
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11871
+ /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11872
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
11873
+ /* @__PURE__ */ jsx(
12083
11874
  Text,
12084
11875
  {
12085
- size: "small",
12086
- leading: "compact",
12087
- className: "text-ui-fg-subtle",
12088
- children: [
12089
- item.quantity,
12090
- "x"
12091
- ]
11876
+ size: "xsmall",
11877
+ weight: "plus",
11878
+ className: "text-ui-fg-muted",
11879
+ children: "Shipping profile"
11880
+ }
11881
+ ),
11882
+ /* @__PURE__ */ jsx(
11883
+ Text,
11884
+ {
11885
+ size: "xsmall",
11886
+ weight: "plus",
11887
+ className: "text-ui-fg-muted",
11888
+ children: "Action"
12092
11889
  }
12093
11890
  )
12094
- ]
12095
- },
12096
- item.id
12097
- )) : /* @__PURE__ */ 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: [
12098
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12099
- /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12100
- 'No items found for "',
12101
- query,
12102
- '".'
12103
- ] })
12104
- ] }) })
12105
- ] })
12106
- ] });
12107
- };
12108
- const LocationField = ({ control, setValue }) => {
12109
- const locations = useComboboxData({
12110
- queryKey: ["locations"],
12111
- queryFn: async (params) => {
12112
- return await sdk.admin.stockLocation.list(params);
12113
- },
12114
- getOptions: (data) => {
12115
- return data.stock_locations.map((location) => ({
12116
- label: location.name,
12117
- value: location.id
12118
- }));
12119
- }
12120
- });
12121
- return /* @__PURE__ */ jsx(
12122
- Form$2.Field,
12123
- {
12124
- control,
12125
- name: "location_id",
12126
- render: ({ field: { onChange, ...field } }) => {
12127
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12128
- /* @__PURE__ */ jsxs("div", { children: [
12129
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12130
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12131
11891
  ] }),
12132
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12133
- Combobox,
12134
- {
12135
- options: locations.options,
12136
- fetchNextPage: locations.fetchNextPage,
12137
- isFetchingNextPage: locations.isFetchingNextPage,
12138
- searchValue: locations.searchValue,
12139
- onSearchValueChange: locations.onSearchValueChange,
12140
- placeholder: "Select location",
12141
- onChange: (value) => {
12142
- setValue("shipping_option_id", "", {
12143
- shouldDirty: true,
12144
- shouldTouch: true
12145
- });
12146
- onChange(value);
11892
+ /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11893
+ var _a2, _b, _c, _d, _e, _f, _g;
11894
+ const items = getItemsWithShippingProfile(
11895
+ profile.id,
11896
+ order.items
11897
+ );
11898
+ const hasItems = items.length > 0;
11899
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11900
+ (option) => option.shipping_profile_id === profile.id
11901
+ );
11902
+ const shippingMethod = preview.shipping_methods.find(
11903
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11904
+ );
11905
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11906
+ (action) => action.action === "SHIPPING_ADD"
11907
+ );
11908
+ return /* @__PURE__ */ jsxs(
11909
+ Accordion.Item,
11910
+ {
11911
+ value: profile.id,
11912
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11913
+ children: [
11914
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
11915
+ /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
11916
+ /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
11917
+ IconButton,
11918
+ {
11919
+ size: "2xsmall",
11920
+ variant: "transparent",
11921
+ className: "group/trigger",
11922
+ disabled: !hasItems,
11923
+ children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
11924
+ }
11925
+ ) }),
11926
+ !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11927
+ /* @__PURE__ */ jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) }),
11928
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
11929
+ /* @__PURE__ */ jsx(
11930
+ Text,
11931
+ {
11932
+ size: "small",
11933
+ weight: "plus",
11934
+ leading: "compact",
11935
+ children: profile.name
11936
+ }
11937
+ ),
11938
+ /* @__PURE__ */ jsxs(
11939
+ Text,
11940
+ {
11941
+ size: "small",
11942
+ leading: "compact",
11943
+ className: "text-ui-fg-subtle",
11944
+ children: [
11945
+ items.length,
11946
+ " ",
11947
+ pluralize(items.length, "items", "item")
11948
+ ]
11949
+ }
11950
+ )
11951
+ ] })
11952
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
11953
+ /* @__PURE__ */ jsx(
11954
+ Tooltip,
11955
+ {
11956
+ content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
11957
+ var _a3, _b2, _c2;
11958
+ return /* @__PURE__ */ jsx(
11959
+ "li",
11960
+ {
11961
+ children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11962
+ },
11963
+ item.id
11964
+ );
11965
+ }) }),
11966
+ children: /* @__PURE__ */ jsxs(
11967
+ Badge,
11968
+ {
11969
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11970
+ size: "xsmall",
11971
+ children: [
11972
+ /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
11973
+ /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
11974
+ items.reduce(
11975
+ (acc, item) => acc + item.quantity,
11976
+ 0
11977
+ ),
11978
+ "x",
11979
+ " ",
11980
+ pluralize(items.length, "items", "item")
11981
+ ] })
11982
+ ]
11983
+ }
11984
+ )
11985
+ }
11986
+ ),
11987
+ /* @__PURE__ */ jsx(
11988
+ Tooltip,
11989
+ {
11990
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11991
+ children: /* @__PURE__ */ jsxs(
11992
+ Badge,
11993
+ {
11994
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11995
+ size: "xsmall",
11996
+ children: [
11997
+ /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
11998
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11999
+ ]
12000
+ }
12001
+ )
12002
+ }
12003
+ ),
12004
+ /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
12005
+ Badge,
12006
+ {
12007
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12008
+ size: "xsmall",
12009
+ children: [
12010
+ /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
12011
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
12012
+ ]
12013
+ }
12014
+ ) })
12015
+ ] })
12016
+ ] }),
12017
+ shippingOption ? /* @__PURE__ */ jsx(
12018
+ ActionMenu,
12019
+ {
12020
+ groups: [
12021
+ {
12022
+ actions: [
12023
+ hasItems ? {
12024
+ label: "Edit shipping option",
12025
+ icon: /* @__PURE__ */ jsx(Channels, {}),
12026
+ onClick: () => {
12027
+ setIsOpen(
12028
+ STACKED_FOCUS_MODAL_ID,
12029
+ true
12030
+ );
12031
+ setData({
12032
+ shippingProfileId: profile.id,
12033
+ shippingOption,
12034
+ shippingMethod
12035
+ });
12036
+ }
12037
+ } : void 0,
12038
+ {
12039
+ label: "Remove shipping option",
12040
+ icon: /* @__PURE__ */ jsx(Trash, {}),
12041
+ onClick: () => {
12042
+ if (shippingMethod) {
12043
+ if (addShippingMethodAction) {
12044
+ removeActionShippingMethod(
12045
+ addShippingMethodAction.id
12046
+ );
12047
+ } else {
12048
+ removeShippingMethod(
12049
+ shippingMethod.id
12050
+ );
12051
+ }
12052
+ }
12053
+ }
12054
+ }
12055
+ ].filter(Boolean)
12056
+ }
12057
+ ]
12058
+ }
12059
+ ) : /* @__PURE__ */ jsx(
12060
+ StackedModalTrigger,
12061
+ {
12062
+ shippingProfileId: profile.id,
12063
+ shippingOption,
12064
+ shippingMethod,
12065
+ setData,
12066
+ children: "Add shipping option"
12067
+ }
12068
+ )
12069
+ ] }),
12070
+ /* @__PURE__ */ jsxs(Accordion.Content, { children: [
12071
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12072
+ items.map((item, idx) => {
12073
+ var _a3, _b2, _c2, _d2, _e2;
12074
+ return /* @__PURE__ */ jsxs("div", { children: [
12075
+ /* @__PURE__ */ jsxs(
12076
+ "div",
12077
+ {
12078
+ className: "flex items-center gap-x-3 px-3",
12079
+ children: [
12080
+ /* @__PURE__ */ jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsx(
12081
+ Divider,
12082
+ {
12083
+ variant: "dashed",
12084
+ orientation: "vertical"
12085
+ }
12086
+ ) }),
12087
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
12088
+ /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
12089
+ Text,
12090
+ {
12091
+ size: "small",
12092
+ leading: "compact",
12093
+ className: "text-ui-fg-subtle",
12094
+ children: [
12095
+ item.quantity,
12096
+ "x"
12097
+ ]
12098
+ }
12099
+ ) }),
12100
+ /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
12101
+ /* @__PURE__ */ jsxs("div", { children: [
12102
+ /* @__PURE__ */ jsxs(
12103
+ Text,
12104
+ {
12105
+ size: "small",
12106
+ leading: "compact",
12107
+ weight: "plus",
12108
+ children: [
12109
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12110
+ " (",
12111
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12112
+ ")"
12113
+ ]
12114
+ }
12115
+ ),
12116
+ /* @__PURE__ */ jsx(
12117
+ Text,
12118
+ {
12119
+ size: "small",
12120
+ leading: "compact",
12121
+ className: "text-ui-fg-subtle",
12122
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12123
+ }
12124
+ )
12125
+ ] })
12126
+ ] })
12127
+ ]
12128
+ },
12129
+ item.id
12130
+ ),
12131
+ idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
12132
+ ] }, item.id);
12133
+ })
12134
+ ] })
12135
+ ]
12147
12136
  },
12148
- ...field
12137
+ profile.id
12138
+ );
12139
+ }) })
12140
+ ] }) })
12141
+ ] }) }),
12142
+ /* @__PURE__ */ jsx(
12143
+ StackedFocusModal,
12144
+ {
12145
+ id: STACKED_FOCUS_MODAL_ID,
12146
+ onOpenChangeCallback: (open) => {
12147
+ if (!open) {
12148
+ setData(null);
12149
12149
  }
12150
- ) })
12151
- ] }) });
12152
- }
12153
- }
12154
- );
12150
+ return open;
12151
+ },
12152
+ children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
12153
+ }
12154
+ )
12155
+ ] }),
12156
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12157
+ /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12158
+ /* @__PURE__ */ jsx(
12159
+ Button,
12160
+ {
12161
+ size: "small",
12162
+ type: "button",
12163
+ isLoading: isSubmitting,
12164
+ onClick: onSubmit,
12165
+ children: "Save"
12166
+ }
12167
+ )
12168
+ ] }) })
12169
+ ] });
12155
12170
  };
12156
- const ShippingOptionField = ({
12171
+ const StackedModalTrigger = ({
12157
12172
  shippingProfileId,
12158
- preview,
12159
- control
12173
+ shippingOption,
12174
+ shippingMethod,
12175
+ setData,
12176
+ children
12160
12177
  }) => {
12161
- var _a;
12162
- const locationId = useWatch({ control, name: "location_id" });
12163
- const shippingOptions = useComboboxData({
12164
- queryKey: ["shipping_options", locationId, shippingProfileId],
12165
- queryFn: async (params) => {
12166
- return await sdk.admin.shippingOption.list({
12167
- ...params,
12168
- stock_location_id: locationId,
12169
- shipping_profile_id: shippingProfileId
12178
+ const { setIsOpen, getIsOpen } = useStackedModal();
12179
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12180
+ const onToggle = () => {
12181
+ if (isOpen) {
12182
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12183
+ setData(null);
12184
+ } else {
12185
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12186
+ setData({
12187
+ shippingProfileId,
12188
+ shippingOption,
12189
+ shippingMethod
12170
12190
  });
12171
- },
12172
- getOptions: (data) => {
12173
- return data.shipping_options.map((option) => {
12174
- var _a2;
12175
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12176
- (r) => r.attribute === "is_return" && r.value === "true"
12177
- )) {
12178
- return void 0;
12179
- }
12180
- return {
12181
- label: option.name,
12182
- value: option.id
12183
- };
12184
- }).filter(Boolean);
12185
- },
12186
- enabled: !!locationId && !!shippingProfileId,
12187
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12188
- });
12189
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12190
- return /* @__PURE__ */ jsx(
12191
- Form$2.Field,
12192
- {
12193
- control,
12194
- name: "shipping_option_id",
12195
- render: ({ field }) => {
12196
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12197
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12198
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12199
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12200
- ] }),
12201
- /* @__PURE__ */ jsx(
12202
- ConditionalTooltip,
12203
- {
12204
- content: tooltipContent,
12205
- showTooltip: !locationId || !shippingProfileId,
12206
- children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12207
- Combobox,
12208
- {
12209
- options: shippingOptions.options,
12210
- fetchNextPage: shippingOptions.fetchNextPage,
12211
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12212
- searchValue: shippingOptions.searchValue,
12213
- onSearchValueChange: shippingOptions.onSearchValueChange,
12214
- placeholder: "Select shipping option",
12215
- ...field,
12216
- disabled: !locationId || !shippingProfileId
12217
- }
12218
- ) }) })
12219
- }
12220
- )
12221
- ] }) });
12222
- }
12223
12191
  }
12224
- );
12225
- };
12226
- const CustomAmountField = ({
12227
- control,
12228
- currencyCode
12229
- }) => {
12192
+ };
12230
12193
  return /* @__PURE__ */ jsx(
12231
- Form$2.Field,
12194
+ Button,
12232
12195
  {
12233
- control,
12234
- name: "custom_amount",
12235
- render: ({ field: { onChange, ...field } }) => {
12236
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12237
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12238
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12239
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12240
- ] }),
12241
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12242
- CurrencyInput,
12243
- {
12244
- ...field,
12245
- onValueChange: (value) => onChange(value),
12246
- symbol: getNativeSymbol(currencyCode),
12247
- code: currencyCode
12248
- }
12249
- ) })
12250
- ] });
12251
- }
12196
+ size: "small",
12197
+ variant: "secondary",
12198
+ onClick: onToggle,
12199
+ className: "text-ui-fg-primary shrink-0",
12200
+ children
12252
12201
  }
12253
12202
  );
12254
12203
  };
12255
- const ShippingAddress = () => {
12256
- const { id } = useParams();
12257
- const { order, isPending, isError, error } = useOrder(id, {
12258
- fields: "+shipping_address"
12259
- });
12260
- if (isError) {
12261
- throw error;
12262
- }
12263
- const isReady = !isPending && !!order;
12264
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12265
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12266
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12267
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12268
- ] }),
12269
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12270
- ] });
12271
- };
12272
- const ShippingAddressForm = ({ order }) => {
12273
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12204
+ const ShippingProfileForm = ({
12205
+ data,
12206
+ order,
12207
+ preview
12208
+ }) => {
12209
+ var _a, _b, _c, _d, _e, _f;
12210
+ const { setIsOpen } = useStackedModal();
12274
12211
  const form = useForm({
12212
+ resolver: zodResolver(shippingMethodSchema),
12275
12213
  defaultValues: {
12276
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12277
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12278
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12279
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12280
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12281
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12282
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12283
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12284
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12285
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12286
- },
12287
- resolver: zodResolver(schema$2)
12214
+ location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12215
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12216
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12217
+ }
12288
12218
  });
12289
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12290
- const { handleSuccess } = useRouteModal();
12291
- const onSubmit = form.handleSubmit(async (data) => {
12292
- await mutateAsync(
12293
- {
12294
- shipping_address: {
12295
- first_name: data.first_name,
12296
- last_name: data.last_name,
12297
- company: data.company,
12298
- address_1: data.address_1,
12299
- address_2: data.address_2,
12300
- city: data.city,
12301
- province: data.province,
12302
- country_code: data.country_code,
12303
- postal_code: data.postal_code,
12304
- phone: data.phone
12219
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12220
+ const {
12221
+ mutateAsync: updateShippingMethod,
12222
+ isPending: isUpdatingShippingMethod
12223
+ } = useDraftOrderUpdateShippingMethod(order.id);
12224
+ const onSubmit = form.handleSubmit(async (values) => {
12225
+ if (isEqual(values, form.formState.defaultValues)) {
12226
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12227
+ return;
12228
+ }
12229
+ if (data.shippingMethod) {
12230
+ await updateShippingMethod(
12231
+ {
12232
+ method_id: data.shippingMethod.id,
12233
+ shipping_option_id: values.shipping_option_id,
12234
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12235
+ },
12236
+ {
12237
+ onError: (e) => {
12238
+ toast.error(e.message);
12239
+ },
12240
+ onSuccess: () => {
12241
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12242
+ }
12305
12243
  }
12244
+ );
12245
+ return;
12246
+ }
12247
+ await addShippingMethod(
12248
+ {
12249
+ shipping_option_id: values.shipping_option_id,
12250
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12306
12251
  },
12307
12252
  {
12308
- onSuccess: () => {
12309
- handleSuccess();
12253
+ onError: (e) => {
12254
+ toast.error(e.message);
12310
12255
  },
12311
- onError: (error) => {
12312
- toast.error(error.message);
12256
+ onSuccess: () => {
12257
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12313
12258
  }
12314
12259
  }
12315
12260
  );
12316
12261
  });
12317
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12262
+ return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12318
12263
  KeyboundForm,
12319
12264
  {
12320
- className: "flex flex-1 flex-col overflow-hidden",
12265
+ className: "flex h-full flex-col overflow-hidden",
12321
12266
  onSubmit,
12322
12267
  children: [
12323
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12268
+ /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12269
+ /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12270
+ /* @__PURE__ */ jsxs("div", { children: [
12271
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12272
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12273
+ ] }),
12274
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12324
12275
  /* @__PURE__ */ jsx(
12325
- Form$2.Field,
12276
+ LocationField,
12326
12277
  {
12327
12278
  control: form.control,
12328
- name: "country_code",
12329
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12330
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12331
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12332
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12333
- ] })
12279
+ setValue: form.setValue
12334
12280
  }
12335
12281
  ),
12336
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12337
- /* @__PURE__ */ jsx(
12338
- Form$2.Field,
12339
- {
12340
- control: form.control,
12341
- name: "first_name",
12342
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12343
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12344
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12345
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12346
- ] })
12347
- }
12348
- ),
12349
- /* @__PURE__ */ jsx(
12350
- Form$2.Field,
12351
- {
12352
- control: form.control,
12353
- name: "last_name",
12354
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12355
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12356
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12357
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12358
- ] })
12359
- }
12360
- )
12361
- ] }),
12282
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12362
12283
  /* @__PURE__ */ jsx(
12363
- Form$2.Field,
12284
+ ShippingOptionField,
12364
12285
  {
12365
- control: form.control,
12366
- name: "company",
12367
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12368
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12369
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12370
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12371
- ] })
12286
+ shippingProfileId: data.shippingProfileId,
12287
+ preview,
12288
+ control: form.control
12372
12289
  }
12373
12290
  ),
12291
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12374
12292
  /* @__PURE__ */ jsx(
12375
- Form$2.Field,
12293
+ CustomAmountField,
12376
12294
  {
12377
12295
  control: form.control,
12378
- name: "address_1",
12379
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12380
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12381
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12382
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12383
- ] })
12296
+ currencyCode: order.currency_code
12384
12297
  }
12385
12298
  ),
12299
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12386
12300
  /* @__PURE__ */ jsx(
12387
- Form$2.Field,
12301
+ ItemsPreview,
12388
12302
  {
12389
- control: form.control,
12390
- name: "address_2",
12391
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12392
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12393
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12394
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12395
- ] })
12303
+ order,
12304
+ shippingProfileId: data.shippingProfileId
12396
12305
  }
12397
- ),
12398
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12399
- /* @__PURE__ */ jsx(
12400
- Form$2.Field,
12401
- {
12402
- control: form.control,
12403
- name: "postal_code",
12404
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12405
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12406
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12407
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12408
- ] })
12409
- }
12410
- ),
12411
- /* @__PURE__ */ jsx(
12412
- Form$2.Field,
12306
+ )
12307
+ ] }) }) }),
12308
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12309
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12310
+ /* @__PURE__ */ jsx(
12311
+ Button,
12312
+ {
12313
+ size: "small",
12314
+ type: "submit",
12315
+ isLoading: isPending || isUpdatingShippingMethod,
12316
+ children: data.shippingMethod ? "Update" : "Add"
12317
+ }
12318
+ )
12319
+ ] }) })
12320
+ ]
12321
+ }
12322
+ ) }) });
12323
+ };
12324
+ const shippingMethodSchema = objectType({
12325
+ location_id: stringType(),
12326
+ shipping_option_id: stringType(),
12327
+ custom_amount: unionType([numberType(), stringType()]).optional()
12328
+ });
12329
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12330
+ const matches = order.items.filter(
12331
+ (item) => {
12332
+ var _a, _b, _c;
12333
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12334
+ }
12335
+ );
12336
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12337
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12338
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12339
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12340
+ ] }) }),
12341
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12342
+ /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12343
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12344
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12345
+ ] }),
12346
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
12347
+ "div",
12348
+ {
12349
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12350
+ children: [
12351
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12352
+ /* @__PURE__ */ jsx(
12353
+ Thumbnail,
12354
+ {
12355
+ thumbnail: item.thumbnail,
12356
+ alt: item.product_title ?? void 0
12357
+ }
12358
+ ),
12359
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12360
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12361
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12362
+ /* @__PURE__ */ jsxs(
12363
+ Text,
12364
+ {
12365
+ size: "small",
12366
+ leading: "compact",
12367
+ className: "text-ui-fg-subtle",
12368
+ children: [
12369
+ "(",
12370
+ item.variant_title,
12371
+ ")"
12372
+ ]
12373
+ }
12374
+ )
12375
+ ] }),
12376
+ /* @__PURE__ */ jsx(
12377
+ Text,
12378
+ {
12379
+ size: "small",
12380
+ leading: "compact",
12381
+ className: "text-ui-fg-subtle",
12382
+ children: item.variant_sku
12383
+ }
12384
+ )
12385
+ ] })
12386
+ ] }),
12387
+ /* @__PURE__ */ jsxs(
12388
+ Text,
12413
12389
  {
12414
- control: form.control,
12415
- name: "city",
12416
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12417
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12418
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12419
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12420
- ] })
12390
+ size: "small",
12391
+ leading: "compact",
12392
+ className: "text-ui-fg-subtle",
12393
+ children: [
12394
+ item.quantity,
12395
+ "x"
12396
+ ]
12421
12397
  }
12422
12398
  )
12399
+ ]
12400
+ },
12401
+ item.id
12402
+ )) : /* @__PURE__ */ 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: [
12403
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12404
+ /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12405
+ 'No items found for "',
12406
+ query,
12407
+ '".'
12408
+ ] })
12409
+ ] }) })
12410
+ ] })
12411
+ ] });
12412
+ };
12413
+ const LocationField = ({ control, setValue }) => {
12414
+ const locations = useComboboxData({
12415
+ queryKey: ["locations"],
12416
+ queryFn: async (params) => {
12417
+ return await sdk.admin.stockLocation.list(params);
12418
+ },
12419
+ getOptions: (data) => {
12420
+ return data.stock_locations.map((location) => ({
12421
+ label: location.name,
12422
+ value: location.id
12423
+ }));
12424
+ }
12425
+ });
12426
+ return /* @__PURE__ */ jsx(
12427
+ Form$2.Field,
12428
+ {
12429
+ control,
12430
+ name: "location_id",
12431
+ render: ({ field: { onChange, ...field } }) => {
12432
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12433
+ /* @__PURE__ */ jsxs("div", { children: [
12434
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12435
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12436
+ ] }),
12437
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12438
+ Combobox,
12439
+ {
12440
+ options: locations.options,
12441
+ fetchNextPage: locations.fetchNextPage,
12442
+ isFetchingNextPage: locations.isFetchingNextPage,
12443
+ searchValue: locations.searchValue,
12444
+ onSearchValueChange: locations.onSearchValueChange,
12445
+ placeholder: "Select location",
12446
+ onChange: (value) => {
12447
+ setValue("shipping_option_id", "", {
12448
+ shouldDirty: true,
12449
+ shouldTouch: true
12450
+ });
12451
+ onChange(value);
12452
+ },
12453
+ ...field
12454
+ }
12455
+ ) })
12456
+ ] }) });
12457
+ }
12458
+ }
12459
+ );
12460
+ };
12461
+ const ShippingOptionField = ({
12462
+ shippingProfileId,
12463
+ preview,
12464
+ control
12465
+ }) => {
12466
+ var _a;
12467
+ const locationId = useWatch({ control, name: "location_id" });
12468
+ const shippingOptions = useComboboxData({
12469
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12470
+ queryFn: async (params) => {
12471
+ return await sdk.admin.shippingOption.list({
12472
+ ...params,
12473
+ stock_location_id: locationId,
12474
+ shipping_profile_id: shippingProfileId
12475
+ });
12476
+ },
12477
+ getOptions: (data) => {
12478
+ return data.shipping_options.map((option) => {
12479
+ var _a2;
12480
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12481
+ (r) => r.attribute === "is_return" && r.value === "true"
12482
+ )) {
12483
+ return void 0;
12484
+ }
12485
+ return {
12486
+ label: option.name,
12487
+ value: option.id
12488
+ };
12489
+ }).filter(Boolean);
12490
+ },
12491
+ enabled: !!locationId && !!shippingProfileId,
12492
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12493
+ });
12494
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12495
+ return /* @__PURE__ */ jsx(
12496
+ Form$2.Field,
12497
+ {
12498
+ control,
12499
+ name: "shipping_option_id",
12500
+ render: ({ field }) => {
12501
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12502
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12503
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12504
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12423
12505
  ] }),
12424
12506
  /* @__PURE__ */ jsx(
12425
- Form$2.Field,
12507
+ ConditionalTooltip,
12426
12508
  {
12427
- control: form.control,
12428
- name: "province",
12429
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12430
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12431
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12432
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12433
- ] })
12509
+ content: tooltipContent,
12510
+ showTooltip: !locationId || !shippingProfileId,
12511
+ children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12512
+ Combobox,
12513
+ {
12514
+ options: shippingOptions.options,
12515
+ fetchNextPage: shippingOptions.fetchNextPage,
12516
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12517
+ searchValue: shippingOptions.searchValue,
12518
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12519
+ placeholder: "Select shipping option",
12520
+ ...field,
12521
+ disabled: !locationId || !shippingProfileId
12522
+ }
12523
+ ) }) })
12434
12524
  }
12435
- ),
12436
- /* @__PURE__ */ jsx(
12437
- Form$2.Field,
12525
+ )
12526
+ ] }) });
12527
+ }
12528
+ }
12529
+ );
12530
+ };
12531
+ const CustomAmountField = ({
12532
+ control,
12533
+ currencyCode
12534
+ }) => {
12535
+ return /* @__PURE__ */ jsx(
12536
+ Form$2.Field,
12537
+ {
12538
+ control,
12539
+ name: "custom_amount",
12540
+ render: ({ field: { onChange, ...field } }) => {
12541
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12542
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12543
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12544
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12545
+ ] }),
12546
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12547
+ CurrencyInput,
12438
12548
  {
12439
- control: form.control,
12440
- name: "phone",
12441
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12442
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12443
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12444
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12445
- ] })
12549
+ ...field,
12550
+ onValueChange: (value) => onChange(value),
12551
+ symbol: getNativeSymbol(currencyCode),
12552
+ code: currencyCode
12446
12553
  }
12447
- )
12448
- ] }) }),
12449
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12450
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12451
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12452
- ] }) })
12453
- ]
12554
+ ) })
12555
+ ] });
12556
+ }
12454
12557
  }
12455
- ) });
12558
+ );
12456
12559
  };
12457
- const schema$2 = addressSchema;
12458
12560
  const TransferOwnership = () => {
12459
12561
  const { id } = useParams();
12460
12562
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12478,7 +12580,7 @@ const TransferOwnershipForm = ({ order }) => {
12478
12580
  defaultValues: {
12479
12581
  customer_id: order.customer_id || ""
12480
12582
  },
12481
- resolver: zodResolver(schema$1)
12583
+ resolver: zodResolver(schema)
12482
12584
  });
12483
12585
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12484
12586
  const { handleSuccess } = useRouteModal();
@@ -12928,114 +13030,8 @@ const Illustration = () => {
12928
13030
  }
12929
13031
  );
12930
13032
  };
12931
- const schema$1 = objectType({
12932
- customer_id: stringType().min(1)
12933
- });
12934
- const SalesChannel = () => {
12935
- const { id } = useParams();
12936
- const { draft_order, isPending, isError, error } = useDraftOrder(
12937
- id,
12938
- {
12939
- fields: "+sales_channel_id"
12940
- },
12941
- {
12942
- enabled: !!id
12943
- }
12944
- );
12945
- if (isError) {
12946
- throw error;
12947
- }
12948
- const ISrEADY = !!draft_order && !isPending;
12949
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12950
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12951
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
12952
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12953
- ] }),
12954
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
12955
- ] });
12956
- };
12957
- const SalesChannelForm = ({ order }) => {
12958
- const form = useForm({
12959
- defaultValues: {
12960
- sales_channel_id: order.sales_channel_id || ""
12961
- },
12962
- resolver: zodResolver(schema)
12963
- });
12964
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12965
- const { handleSuccess } = useRouteModal();
12966
- const onSubmit = form.handleSubmit(async (data) => {
12967
- await mutateAsync(
12968
- {
12969
- sales_channel_id: data.sales_channel_id
12970
- },
12971
- {
12972
- onSuccess: () => {
12973
- toast.success("Sales channel updated");
12974
- handleSuccess();
12975
- },
12976
- onError: (error) => {
12977
- toast.error(error.message);
12978
- }
12979
- }
12980
- );
12981
- });
12982
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12983
- KeyboundForm,
12984
- {
12985
- className: "flex flex-1 flex-col overflow-hidden",
12986
- onSubmit,
12987
- children: [
12988
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
12989
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12990
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12991
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12992
- ] }) })
12993
- ]
12994
- }
12995
- ) });
12996
- };
12997
- const SalesChannelField = ({ control, order }) => {
12998
- const salesChannels = useComboboxData({
12999
- queryFn: async (params) => {
13000
- return await sdk.admin.salesChannel.list(params);
13001
- },
13002
- queryKey: ["sales-channels"],
13003
- getOptions: (data) => {
13004
- return data.sales_channels.map((salesChannel) => ({
13005
- label: salesChannel.name,
13006
- value: salesChannel.id
13007
- }));
13008
- },
13009
- defaultValue: order.sales_channel_id || void 0
13010
- });
13011
- return /* @__PURE__ */ jsx(
13012
- Form$2.Field,
13013
- {
13014
- control,
13015
- name: "sales_channel_id",
13016
- render: ({ field }) => {
13017
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13018
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
13019
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
13020
- Combobox,
13021
- {
13022
- options: salesChannels.options,
13023
- fetchNextPage: salesChannels.fetchNextPage,
13024
- isFetchingNextPage: salesChannels.isFetchingNextPage,
13025
- searchValue: salesChannels.searchValue,
13026
- onSearchValueChange: salesChannels.onSearchValueChange,
13027
- placeholder: "Select sales channel",
13028
- ...field
13029
- }
13030
- ) }),
13031
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13032
- ] });
13033
- }
13034
- }
13035
- );
13036
- };
13037
13033
  const schema = objectType({
13038
- sales_channel_id: stringType().min(1)
13034
+ customer_id: stringType().min(1)
13039
13035
  });
13040
13036
  const widgetModule = { widgets: [] };
13041
13037
  const routeModule = {
@@ -13061,14 +13057,14 @@ const routeModule = {
13061
13057
  Component: BillingAddress,
13062
13058
  path: "/draft-orders/:id/billing-address"
13063
13059
  },
13064
- {
13065
- Component: CustomItems,
13066
- path: "/draft-orders/:id/custom-items"
13067
- },
13068
13060
  {
13069
13061
  Component: Email,
13070
13062
  path: "/draft-orders/:id/email"
13071
13063
  },
13064
+ {
13065
+ Component: CustomItems,
13066
+ path: "/draft-orders/:id/custom-items"
13067
+ },
13072
13068
  {
13073
13069
  Component: Items,
13074
13070
  path: "/draft-orders/:id/items"
@@ -13082,20 +13078,20 @@ const routeModule = {
13082
13078
  path: "/draft-orders/:id/promotions"
13083
13079
  },
13084
13080
  {
13085
- Component: Shipping,
13086
- path: "/draft-orders/:id/shipping"
13081
+ Component: SalesChannel,
13082
+ path: "/draft-orders/:id/sales-channel"
13087
13083
  },
13088
13084
  {
13089
13085
  Component: ShippingAddress,
13090
13086
  path: "/draft-orders/:id/shipping-address"
13091
13087
  },
13092
13088
  {
13093
- Component: TransferOwnership,
13094
- path: "/draft-orders/:id/transfer-ownership"
13089
+ Component: Shipping,
13090
+ path: "/draft-orders/:id/shipping"
13095
13091
  },
13096
13092
  {
13097
- Component: SalesChannel,
13098
- path: "/draft-orders/:id/sales-channel"
13093
+ Component: TransferOwnership,
13094
+ path: "/draft-orders/:id/transfer-ownership"
13099
13095
  }
13100
13096
  ]
13101
13097
  }