@medusajs/draft-order 2.11.4-preview-20251116180137 → 2.11.4-preview-20251117000309

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