@medusajs/draft-order 2.10.2-preview-20250902000306 → 2.10.2-preview-20250902060151

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/.medusa/server/src/admin/index.js +1133 -1133
  2. package/.medusa/server/src/admin/index.mjs +1133 -1133
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -11546,1151 +11546,344 @@ const SalesChannelField = ({ control, order }) => {
11546
11546
  const schema$2 = objectType({
11547
11547
  sales_channel_id: stringType().min(1)
11548
11548
  });
11549
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11550
- const Shipping = () => {
11551
- var _a;
11549
+ const ShippingAddress = () => {
11552
11550
  const { id } = reactRouterDom.useParams();
11553
11551
  const { order, isPending, isError, error } = useOrder(id, {
11554
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11552
+ fields: "+shipping_address"
11555
11553
  });
11556
- const {
11557
- order: preview,
11558
- isPending: isPreviewPending,
11559
- isError: isPreviewError,
11560
- error: previewError
11561
- } = useOrderPreview(id);
11562
- useInitiateOrderEdit({ preview });
11563
- const { onCancel } = useCancelOrderEdit({ preview });
11564
11554
  if (isError) {
11565
11555
  throw error;
11566
11556
  }
11567
- if (isPreviewError) {
11568
- throw previewError;
11569
- }
11570
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11571
- const isReady = preview && !isPreviewPending && order && !isPending;
11572
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11573
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11574
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11575
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11576
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11577
- ] }) }) }),
11578
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11579
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11580
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11581
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11582
- ] }) });
11557
+ const isReady = !isPending && !!order;
11558
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11559
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11560
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11561
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11562
+ ] }),
11563
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11564
+ ] });
11583
11565
  };
11584
- const ShippingForm = ({ preview, order }) => {
11585
- var _a;
11586
- const { setIsOpen } = useStackedModal();
11587
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11588
- const [data, setData] = React.useState(null);
11589
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11590
- const { shipping_options } = useShippingOptions(
11591
- {
11592
- id: appliedShippingOptionIds,
11593
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11566
+ const ShippingAddressForm = ({ order }) => {
11567
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11568
+ const form = reactHookForm.useForm({
11569
+ defaultValues: {
11570
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11571
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11572
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11573
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11574
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11575
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11576
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11577
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11578
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11579
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11594
11580
  },
11595
- {
11596
- enabled: appliedShippingOptionIds.length > 0
11597
- }
11598
- );
11599
- const uniqueShippingProfiles = React.useMemo(() => {
11600
- const profiles = /* @__PURE__ */ new Map();
11601
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11602
- profiles.set(profile.id, profile);
11603
- });
11604
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11605
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11606
- });
11607
- return Array.from(profiles.values());
11608
- }, [order.items, shipping_options]);
11581
+ resolver: zod.zodResolver(schema$1)
11582
+ });
11583
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11609
11584
  const { handleSuccess } = useRouteModal();
11610
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11611
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11612
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11613
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11614
- const onSubmit = async () => {
11615
- setIsSubmitting(true);
11616
- let requestSucceeded = false;
11617
- await requestOrderEdit(void 0, {
11618
- onError: (e) => {
11619
- ui.toast.error(`Failed to request order edit: ${e.message}`);
11620
- },
11621
- onSuccess: () => {
11622
- requestSucceeded = true;
11623
- }
11624
- });
11625
- if (!requestSucceeded) {
11626
- setIsSubmitting(false);
11627
- return;
11628
- }
11629
- await confirmOrderEdit(void 0, {
11630
- onError: (e) => {
11631
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11632
- },
11633
- onSuccess: () => {
11634
- handleSuccess();
11585
+ const onSubmit = form.handleSubmit(async (data) => {
11586
+ await mutateAsync(
11587
+ {
11588
+ shipping_address: {
11589
+ first_name: data.first_name,
11590
+ last_name: data.last_name,
11591
+ company: data.company,
11592
+ address_1: data.address_1,
11593
+ address_2: data.address_2,
11594
+ city: data.city,
11595
+ province: data.province,
11596
+ country_code: data.country_code,
11597
+ postal_code: data.postal_code,
11598
+ phone: data.phone
11599
+ }
11635
11600
  },
11636
- onSettled: () => {
11637
- setIsSubmitting(false);
11638
- }
11639
- });
11640
- };
11641
- const onKeydown = React.useCallback(
11642
- (e) => {
11643
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11644
- if (data || isSubmitting) {
11645
- return;
11601
+ {
11602
+ onSuccess: () => {
11603
+ handleSuccess();
11604
+ },
11605
+ onError: (error) => {
11606
+ ui.toast.error(error.message);
11646
11607
  }
11647
- onSubmit();
11648
11608
  }
11649
- },
11650
- [data, isSubmitting, onSubmit]
11651
- );
11652
- React.useEffect(() => {
11653
- document.addEventListener("keydown", onKeydown);
11654
- return () => {
11655
- document.removeEventListener("keydown", onKeydown);
11656
- };
11657
- }, [onKeydown]);
11658
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11659
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11660
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11661
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11662
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11663
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11664
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11665
- ] }),
11666
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11667
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11668
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11609
+ );
11610
+ });
11611
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11612
+ KeyboundForm,
11613
+ {
11614
+ className: "flex flex-1 flex-col overflow-hidden",
11615
+ onSubmit,
11616
+ children: [
11617
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
11618
+ /* @__PURE__ */ jsxRuntime.jsx(
11619
+ Form$2.Field,
11620
+ {
11621
+ control: form.control,
11622
+ name: "country_code",
11623
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11624
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11625
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11626
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11627
+ ] })
11628
+ }
11629
+ ),
11630
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11669
11631
  /* @__PURE__ */ jsxRuntime.jsx(
11670
- ui.Text,
11632
+ Form$2.Field,
11671
11633
  {
11672
- size: "xsmall",
11673
- weight: "plus",
11674
- className: "text-ui-fg-muted",
11675
- children: "Shipping profile"
11634
+ control: form.control,
11635
+ name: "first_name",
11636
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11637
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11638
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11639
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11640
+ ] })
11676
11641
  }
11677
11642
  ),
11678
11643
  /* @__PURE__ */ jsxRuntime.jsx(
11679
- ui.Text,
11644
+ Form$2.Field,
11680
11645
  {
11681
- size: "xsmall",
11682
- weight: "plus",
11683
- className: "text-ui-fg-muted",
11684
- children: "Action"
11646
+ control: form.control,
11647
+ name: "last_name",
11648
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11649
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11650
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11651
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11652
+ ] })
11685
11653
  }
11686
11654
  )
11687
11655
  ] }),
11688
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11689
- var _a2, _b, _c, _d, _e, _f, _g;
11690
- const items = getItemsWithShippingProfile(
11691
- profile.id,
11692
- order.items
11693
- );
11694
- const hasItems = items.length > 0;
11695
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11696
- (option) => option.shipping_profile_id === profile.id
11697
- );
11698
- const shippingMethod = preview.shipping_methods.find(
11699
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11700
- );
11701
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11702
- (action) => action.action === "SHIPPING_ADD"
11703
- );
11704
- return /* @__PURE__ */ jsxRuntime.jsxs(
11705
- radixUi.Accordion.Item,
11706
- {
11707
- value: profile.id,
11708
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11709
- children: [
11710
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11711
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11712
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11713
- ui.IconButton,
11714
- {
11715
- size: "2xsmall",
11716
- variant: "transparent",
11717
- className: "group/trigger",
11718
- disabled: !hasItems,
11719
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11720
- }
11721
- ) }),
11722
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11723
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
11724
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
11725
- /* @__PURE__ */ jsxRuntime.jsx(
11726
- ui.Text,
11727
- {
11728
- size: "small",
11729
- weight: "plus",
11730
- leading: "compact",
11731
- children: profile.name
11732
- }
11733
- ),
11734
- /* @__PURE__ */ jsxRuntime.jsxs(
11735
- ui.Text,
11736
- {
11737
- size: "small",
11738
- leading: "compact",
11739
- className: "text-ui-fg-subtle",
11740
- children: [
11741
- items.length,
11742
- " ",
11743
- pluralize(items.length, "items", "item")
11744
- ]
11745
- }
11746
- )
11747
- ] })
11748
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11749
- /* @__PURE__ */ jsxRuntime.jsx(
11750
- ui.Tooltip,
11751
- {
11752
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
11753
- var _a3, _b2, _c2;
11754
- return /* @__PURE__ */ jsxRuntime.jsx(
11755
- "li",
11756
- {
11757
- 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})`
11758
- },
11759
- item.id
11760
- );
11761
- }) }),
11762
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11763
- ui.Badge,
11764
- {
11765
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11766
- size: "xsmall",
11767
- children: [
11768
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
11769
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
11770
- items.reduce(
11771
- (acc, item) => acc + item.quantity,
11772
- 0
11773
- ),
11774
- "x",
11775
- " ",
11776
- pluralize(items.length, "items", "item")
11777
- ] })
11778
- ]
11779
- }
11780
- )
11781
- }
11782
- ),
11783
- /* @__PURE__ */ jsxRuntime.jsx(
11784
- ui.Tooltip,
11785
- {
11786
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11787
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11788
- ui.Badge,
11789
- {
11790
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11791
- size: "xsmall",
11792
- children: [
11793
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
11794
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11795
- ]
11796
- }
11797
- )
11798
- }
11799
- ),
11800
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11801
- ui.Badge,
11802
- {
11803
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11804
- size: "xsmall",
11805
- children: [
11806
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
11807
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
11808
- ]
11809
- }
11810
- ) })
11811
- ] })
11812
- ] }),
11813
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
11814
- ActionMenu,
11815
- {
11816
- groups: [
11817
- {
11818
- actions: [
11819
- hasItems ? {
11820
- label: "Edit shipping option",
11821
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
11822
- onClick: () => {
11823
- setIsOpen(
11824
- STACKED_FOCUS_MODAL_ID,
11825
- true
11826
- );
11827
- setData({
11828
- shippingProfileId: profile.id,
11829
- shippingOption,
11830
- shippingMethod
11831
- });
11832
- }
11833
- } : void 0,
11834
- {
11835
- label: "Remove shipping option",
11836
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
11837
- onClick: () => {
11838
- if (shippingMethod) {
11839
- if (addShippingMethodAction) {
11840
- removeActionShippingMethod(
11841
- addShippingMethodAction.id
11842
- );
11843
- } else {
11844
- removeShippingMethod(
11845
- shippingMethod.id
11846
- );
11847
- }
11848
- }
11849
- }
11850
- }
11851
- ].filter(Boolean)
11852
- }
11853
- ]
11854
- }
11855
- ) : /* @__PURE__ */ jsxRuntime.jsx(
11856
- StackedModalTrigger,
11857
- {
11858
- shippingProfileId: profile.id,
11859
- shippingOption,
11860
- shippingMethod,
11861
- setData,
11862
- children: "Add shipping option"
11863
- }
11864
- )
11865
- ] }),
11866
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
11867
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11868
- items.map((item, idx) => {
11869
- var _a3, _b2, _c2, _d2, _e2;
11870
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11871
- /* @__PURE__ */ jsxRuntime.jsxs(
11872
- "div",
11873
- {
11874
- className: "px-3 flex items-center gap-x-3",
11875
- children: [
11876
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11877
- ui.Divider,
11878
- {
11879
- variant: "dashed",
11880
- orientation: "vertical"
11881
- }
11882
- ) }),
11883
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11884
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11885
- ui.Text,
11886
- {
11887
- size: "small",
11888
- leading: "compact",
11889
- className: "text-ui-fg-subtle",
11890
- children: [
11891
- item.quantity,
11892
- "x"
11893
- ]
11894
- }
11895
- ) }),
11896
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
11897
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11898
- /* @__PURE__ */ jsxRuntime.jsxs(
11899
- ui.Text,
11900
- {
11901
- size: "small",
11902
- leading: "compact",
11903
- weight: "plus",
11904
- children: [
11905
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11906
- " (",
11907
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11908
- ")"
11909
- ]
11910
- }
11911
- ),
11912
- /* @__PURE__ */ jsxRuntime.jsx(
11913
- ui.Text,
11914
- {
11915
- size: "small",
11916
- leading: "compact",
11917
- className: "text-ui-fg-subtle",
11918
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11919
- }
11920
- )
11921
- ] })
11922
- ] })
11923
- ]
11924
- },
11925
- item.id
11926
- ),
11927
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
11928
- ] }, item.id);
11929
- })
11930
- ] })
11931
- ]
11932
- },
11933
- profile.id
11934
- );
11935
- }) })
11936
- ] }) })
11937
- ] }) }),
11938
- /* @__PURE__ */ jsxRuntime.jsx(
11939
- StackedFocusModal,
11940
- {
11941
- id: STACKED_FOCUS_MODAL_ID,
11942
- onOpenChangeCallback: (open) => {
11943
- if (!open) {
11944
- setData(null);
11656
+ /* @__PURE__ */ jsxRuntime.jsx(
11657
+ Form$2.Field,
11658
+ {
11659
+ control: form.control,
11660
+ name: "company",
11661
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11662
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11663
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11664
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11665
+ ] })
11945
11666
  }
11946
- return open;
11947
- },
11948
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11949
- }
11950
- )
11951
- ] }),
11952
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11953
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11954
- /* @__PURE__ */ jsxRuntime.jsx(
11955
- ui.Button,
11956
- {
11957
- size: "small",
11958
- type: "button",
11959
- isLoading: isSubmitting,
11960
- onClick: onSubmit,
11961
- children: "Save"
11962
- }
11963
- )
11964
- ] }) })
11965
- ] });
11966
- };
11967
- const StackedModalTrigger = ({
11968
- shippingProfileId,
11969
- shippingOption,
11970
- shippingMethod,
11971
- setData,
11972
- children
11973
- }) => {
11974
- const { setIsOpen, getIsOpen } = useStackedModal();
11975
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11976
- const onToggle = () => {
11977
- if (isOpen) {
11978
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11979
- setData(null);
11980
- } else {
11981
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11982
- setData({
11983
- shippingProfileId,
11984
- shippingOption,
11985
- shippingMethod
11986
- });
11987
- }
11988
- };
11989
- return /* @__PURE__ */ jsxRuntime.jsx(
11990
- ui.Button,
11991
- {
11992
- size: "small",
11993
- variant: "secondary",
11994
- onClick: onToggle,
11995
- className: "text-ui-fg-primary shrink-0",
11996
- children
11997
- }
11998
- );
11999
- };
12000
- const ShippingProfileForm = ({
12001
- data,
12002
- order,
12003
- preview
12004
- }) => {
12005
- var _a, _b, _c, _d, _e, _f;
12006
- const { setIsOpen } = useStackedModal();
12007
- const form = reactHookForm.useForm({
12008
- resolver: zod.zodResolver(shippingMethodSchema),
12009
- defaultValues: {
12010
- 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,
12011
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12012
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12013
- }
12014
- });
12015
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12016
- const {
12017
- mutateAsync: updateShippingMethod,
12018
- isPending: isUpdatingShippingMethod
12019
- } = useDraftOrderUpdateShippingMethod(order.id);
12020
- const onSubmit = form.handleSubmit(async (values) => {
12021
- if (lodash.isEqual(values, form.formState.defaultValues)) {
12022
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12023
- return;
12024
- }
12025
- if (data.shippingMethod) {
12026
- await updateShippingMethod(
12027
- {
12028
- method_id: data.shippingMethod.id,
12029
- shipping_option_id: values.shipping_option_id,
12030
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12031
- },
12032
- {
12033
- onError: (e) => {
12034
- ui.toast.error(e.message);
12035
- },
12036
- onSuccess: () => {
12037
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12038
- }
12039
- }
12040
- );
12041
- return;
12042
- }
12043
- await addShippingMethod(
12044
- {
12045
- shipping_option_id: values.shipping_option_id,
12046
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12047
- },
12048
- {
12049
- onError: (e) => {
12050
- ui.toast.error(e.message);
12051
- },
12052
- onSuccess: () => {
12053
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12054
- }
12055
- }
12056
- );
12057
- });
12058
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12059
- KeyboundForm,
12060
- {
12061
- className: "flex h-full flex-col overflow-hidden",
12062
- onSubmit,
12063
- children: [
12064
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12065
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12066
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12067
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12068
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12069
- ] }),
12070
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11667
+ ),
12071
11668
  /* @__PURE__ */ jsxRuntime.jsx(
12072
- LocationField,
11669
+ Form$2.Field,
12073
11670
  {
12074
11671
  control: form.control,
12075
- setValue: form.setValue
11672
+ name: "address_1",
11673
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11674
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11675
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11676
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11677
+ ] })
12076
11678
  }
12077
11679
  ),
12078
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12079
11680
  /* @__PURE__ */ jsxRuntime.jsx(
12080
- ShippingOptionField,
11681
+ Form$2.Field,
12081
11682
  {
12082
- shippingProfileId: data.shippingProfileId,
12083
- preview,
12084
- control: form.control
11683
+ control: form.control,
11684
+ name: "address_2",
11685
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11686
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11687
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11688
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11689
+ ] })
12085
11690
  }
12086
11691
  ),
12087
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11692
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11693
+ /* @__PURE__ */ jsxRuntime.jsx(
11694
+ Form$2.Field,
11695
+ {
11696
+ control: form.control,
11697
+ name: "postal_code",
11698
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11699
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11700
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11701
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11702
+ ] })
11703
+ }
11704
+ ),
11705
+ /* @__PURE__ */ jsxRuntime.jsx(
11706
+ Form$2.Field,
11707
+ {
11708
+ control: form.control,
11709
+ name: "city",
11710
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11711
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11712
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11713
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11714
+ ] })
11715
+ }
11716
+ )
11717
+ ] }),
12088
11718
  /* @__PURE__ */ jsxRuntime.jsx(
12089
- CustomAmountField,
11719
+ Form$2.Field,
12090
11720
  {
12091
11721
  control: form.control,
12092
- currencyCode: order.currency_code
11722
+ name: "province",
11723
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11724
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11725
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11726
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11727
+ ] })
12093
11728
  }
12094
11729
  ),
12095
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12096
11730
  /* @__PURE__ */ jsxRuntime.jsx(
12097
- ItemsPreview,
11731
+ Form$2.Field,
12098
11732
  {
12099
- order,
12100
- shippingProfileId: data.shippingProfileId
11733
+ control: form.control,
11734
+ name: "phone",
11735
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11736
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11737
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11738
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11739
+ ] })
12101
11740
  }
12102
11741
  )
12103
- ] }) }) }),
12104
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12105
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11742
+ ] }) }),
11743
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11744
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11745
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11746
+ ] }) })
11747
+ ]
11748
+ }
11749
+ ) });
11750
+ };
11751
+ const schema$1 = addressSchema;
11752
+ const TransferOwnership = () => {
11753
+ const { id } = reactRouterDom.useParams();
11754
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11755
+ fields: "id,customer_id,customer.*"
11756
+ });
11757
+ if (isError) {
11758
+ throw error;
11759
+ }
11760
+ const isReady = !isPending && !!draft_order;
11761
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11762
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11763
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11764
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
11765
+ ] }),
11766
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
11767
+ ] });
11768
+ };
11769
+ const TransferOwnershipForm = ({ order }) => {
11770
+ var _a, _b;
11771
+ const form = reactHookForm.useForm({
11772
+ defaultValues: {
11773
+ customer_id: order.customer_id || ""
11774
+ },
11775
+ resolver: zod.zodResolver(schema)
11776
+ });
11777
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11778
+ const { handleSuccess } = useRouteModal();
11779
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
11780
+ const currentCustomer = order.customer ? {
11781
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
11782
+ value: order.customer.id
11783
+ } : null;
11784
+ const onSubmit = form.handleSubmit(async (data) => {
11785
+ await mutateAsync(
11786
+ { customer_id: data.customer_id },
11787
+ {
11788
+ onSuccess: () => {
11789
+ ui.toast.success("Customer updated");
11790
+ handleSuccess();
11791
+ },
11792
+ onError: (error) => {
11793
+ ui.toast.error(error.message);
11794
+ }
11795
+ }
11796
+ );
11797
+ });
11798
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11799
+ KeyboundForm,
11800
+ {
11801
+ className: "flex flex-1 flex-col overflow-hidden",
11802
+ onSubmit,
11803
+ children: [
11804
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
11805
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
11806
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
11807
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11808
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
11809
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
11810
+ ] }),
11811
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
11812
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
11813
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
11814
+ ] })
11815
+ ] }),
12106
11816
  /* @__PURE__ */ jsxRuntime.jsx(
12107
- ui.Button,
11817
+ CustomerField,
12108
11818
  {
12109
- size: "small",
12110
- type: "submit",
12111
- isLoading: isPending || isUpdatingShippingMethod,
12112
- children: data.shippingMethod ? "Update" : "Add"
11819
+ control: form.control,
11820
+ currentCustomerId: order.customer_id
12113
11821
  }
12114
11822
  )
11823
+ ] }),
11824
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11825
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
11826
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12115
11827
  ] }) })
12116
11828
  ]
12117
11829
  }
12118
- ) }) });
11830
+ ) });
12119
11831
  };
12120
- const shippingMethodSchema = objectType({
12121
- location_id: stringType(),
12122
- shipping_option_id: stringType(),
12123
- custom_amount: unionType([numberType(), stringType()]).optional()
12124
- });
12125
- const ItemsPreview = ({ order, shippingProfileId }) => {
12126
- const matches = order.items.filter(
12127
- (item) => {
12128
- var _a, _b, _c;
12129
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12130
- }
12131
- );
12132
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12133
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12134
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12135
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12136
- ] }) }),
12137
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12138
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12139
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12140
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12141
- ] }),
12142
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12143
- "div",
12144
- {
12145
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12146
- children: [
12147
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12148
- /* @__PURE__ */ jsxRuntime.jsx(
12149
- Thumbnail,
12150
- {
12151
- thumbnail: item.thumbnail,
12152
- alt: item.product_title ?? void 0
12153
- }
12154
- ),
12155
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12156
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12157
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12158
- /* @__PURE__ */ jsxRuntime.jsxs(
12159
- ui.Text,
12160
- {
12161
- size: "small",
12162
- leading: "compact",
12163
- className: "text-ui-fg-subtle",
12164
- children: [
12165
- "(",
12166
- item.variant_title,
12167
- ")"
12168
- ]
12169
- }
12170
- )
12171
- ] }),
12172
- /* @__PURE__ */ jsxRuntime.jsx(
12173
- ui.Text,
12174
- {
12175
- size: "small",
12176
- leading: "compact",
12177
- className: "text-ui-fg-subtle",
12178
- children: item.variant_sku
12179
- }
12180
- )
12181
- ] })
12182
- ] }),
12183
- /* @__PURE__ */ jsxRuntime.jsxs(
12184
- ui.Text,
12185
- {
12186
- size: "small",
12187
- leading: "compact",
12188
- className: "text-ui-fg-subtle",
12189
- children: [
12190
- item.quantity,
12191
- "x"
12192
- ]
12193
- }
12194
- )
12195
- ]
12196
- },
12197
- item.id
12198
- )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12199
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12200
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12201
- 'No items found for "',
12202
- query,
12203
- '".'
12204
- ] })
12205
- ] }) })
12206
- ] })
12207
- ] });
12208
- };
12209
- const LocationField = ({ control, setValue }) => {
12210
- const locations = useComboboxData({
12211
- queryKey: ["locations"],
12212
- queryFn: async (params) => {
12213
- return await sdk.admin.stockLocation.list(params);
12214
- },
12215
- getOptions: (data) => {
12216
- return data.stock_locations.map((location) => ({
12217
- label: location.name,
12218
- value: location.id
12219
- }));
12220
- }
12221
- });
12222
- return /* @__PURE__ */ jsxRuntime.jsx(
12223
- Form$2.Field,
12224
- {
12225
- control,
12226
- name: "location_id",
12227
- render: ({ field: { onChange, ...field } }) => {
12228
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12229
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12230
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12231
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12232
- ] }),
12233
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12234
- Combobox,
12235
- {
12236
- options: locations.options,
12237
- fetchNextPage: locations.fetchNextPage,
12238
- isFetchingNextPage: locations.isFetchingNextPage,
12239
- searchValue: locations.searchValue,
12240
- onSearchValueChange: locations.onSearchValueChange,
12241
- placeholder: "Select location",
12242
- onChange: (value) => {
12243
- setValue("shipping_option_id", "", {
12244
- shouldDirty: true,
12245
- shouldTouch: true
12246
- });
12247
- onChange(value);
12248
- },
12249
- ...field
12250
- }
12251
- ) })
12252
- ] }) });
12253
- }
12254
- }
12255
- );
12256
- };
12257
- const ShippingOptionField = ({
12258
- shippingProfileId,
12259
- preview,
12260
- control
12261
- }) => {
12262
- var _a;
12263
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12264
- const shippingOptions = useComboboxData({
12265
- queryKey: ["shipping_options", locationId, shippingProfileId],
11832
+ const CustomerField = ({ control, currentCustomerId }) => {
11833
+ const customers = useComboboxData({
12266
11834
  queryFn: async (params) => {
12267
- return await sdk.admin.shippingOption.list({
11835
+ return await sdk.admin.customer.list({
12268
11836
  ...params,
12269
- stock_location_id: locationId,
12270
- shipping_profile_id: shippingProfileId
11837
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12271
11838
  });
12272
11839
  },
11840
+ queryKey: ["customers"],
12273
11841
  getOptions: (data) => {
12274
- return data.shipping_options.map((option) => {
12275
- var _a2;
12276
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12277
- (r) => r.attribute === "is_return" && r.value === "true"
12278
- )) {
12279
- return void 0;
12280
- }
11842
+ return data.customers.map((customer) => {
11843
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12281
11844
  return {
12282
- label: option.name,
12283
- value: option.id
11845
+ label: name ? `${name} (${customer.email})` : customer.email,
11846
+ value: customer.id
12284
11847
  };
12285
- }).filter(Boolean);
12286
- },
12287
- enabled: !!locationId && !!shippingProfileId,
12288
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
11848
+ });
11849
+ }
12289
11850
  });
12290
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12291
11851
  return /* @__PURE__ */ jsxRuntime.jsx(
12292
11852
  Form$2.Field,
12293
11853
  {
11854
+ name: "customer_id",
12294
11855
  control,
12295
- name: "shipping_option_id",
12296
- render: ({ field }) => {
12297
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12298
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12299
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12300
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12301
- ] }),
12302
- /* @__PURE__ */ jsxRuntime.jsx(
12303
- ConditionalTooltip,
12304
- {
12305
- content: tooltipContent,
12306
- showTooltip: !locationId || !shippingProfileId,
12307
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12308
- Combobox,
12309
- {
12310
- options: shippingOptions.options,
12311
- fetchNextPage: shippingOptions.fetchNextPage,
12312
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12313
- searchValue: shippingOptions.searchValue,
12314
- onSearchValueChange: shippingOptions.onSearchValueChange,
12315
- placeholder: "Select shipping option",
12316
- ...field,
12317
- disabled: !locationId || !shippingProfileId
12318
- }
12319
- ) }) })
12320
- }
12321
- )
12322
- ] }) });
12323
- }
11856
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
11857
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11858
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
11859
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
11860
+ ] }),
11861
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11862
+ Combobox,
11863
+ {
11864
+ options: customers.options,
11865
+ fetchNextPage: customers.fetchNextPage,
11866
+ isFetchingNextPage: customers.isFetchingNextPage,
11867
+ searchValue: customers.searchValue,
11868
+ onSearchValueChange: customers.onSearchValueChange,
11869
+ placeholder: "Select customer",
11870
+ ...field
11871
+ }
11872
+ ) }),
11873
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11874
+ ] })
12324
11875
  }
12325
11876
  );
12326
11877
  };
12327
- const CustomAmountField = ({
12328
- control,
12329
- currencyCode
12330
- }) => {
12331
- return /* @__PURE__ */ jsxRuntime.jsx(
12332
- Form$2.Field,
11878
+ const Illustration = () => {
11879
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11880
+ "svg",
12333
11881
  {
12334
- control,
12335
- name: "custom_amount",
12336
- render: ({ field: { onChange, ...field } }) => {
12337
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12338
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12339
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12340
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12341
- ] }),
12342
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12343
- ui.CurrencyInput,
12344
- {
12345
- ...field,
12346
- onValueChange: (value) => onChange(value),
12347
- symbol: getNativeSymbol(currencyCode),
12348
- code: currencyCode
12349
- }
12350
- ) })
12351
- ] });
12352
- }
12353
- }
12354
- );
12355
- };
12356
- const ShippingAddress = () => {
12357
- const { id } = reactRouterDom.useParams();
12358
- const { order, isPending, isError, error } = useOrder(id, {
12359
- fields: "+shipping_address"
12360
- });
12361
- if (isError) {
12362
- throw error;
12363
- }
12364
- const isReady = !isPending && !!order;
12365
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12366
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12367
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12368
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12369
- ] }),
12370
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12371
- ] });
12372
- };
12373
- const ShippingAddressForm = ({ order }) => {
12374
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12375
- const form = reactHookForm.useForm({
12376
- defaultValues: {
12377
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12378
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12379
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12380
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12381
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12382
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12383
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12384
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12385
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12386
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12387
- },
12388
- resolver: zod.zodResolver(schema$1)
12389
- });
12390
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12391
- const { handleSuccess } = useRouteModal();
12392
- const onSubmit = form.handleSubmit(async (data) => {
12393
- await mutateAsync(
12394
- {
12395
- shipping_address: {
12396
- first_name: data.first_name,
12397
- last_name: data.last_name,
12398
- company: data.company,
12399
- address_1: data.address_1,
12400
- address_2: data.address_2,
12401
- city: data.city,
12402
- province: data.province,
12403
- country_code: data.country_code,
12404
- postal_code: data.postal_code,
12405
- phone: data.phone
12406
- }
12407
- },
12408
- {
12409
- onSuccess: () => {
12410
- handleSuccess();
12411
- },
12412
- onError: (error) => {
12413
- ui.toast.error(error.message);
12414
- }
12415
- }
12416
- );
12417
- });
12418
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12419
- KeyboundForm,
12420
- {
12421
- className: "flex flex-1 flex-col overflow-hidden",
12422
- onSubmit,
12423
- children: [
12424
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12425
- /* @__PURE__ */ jsxRuntime.jsx(
12426
- Form$2.Field,
12427
- {
12428
- control: form.control,
12429
- name: "country_code",
12430
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12431
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12432
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12433
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12434
- ] })
12435
- }
12436
- ),
12437
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12438
- /* @__PURE__ */ jsxRuntime.jsx(
12439
- Form$2.Field,
12440
- {
12441
- control: form.control,
12442
- name: "first_name",
12443
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12444
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12445
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12446
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12447
- ] })
12448
- }
12449
- ),
12450
- /* @__PURE__ */ jsxRuntime.jsx(
12451
- Form$2.Field,
12452
- {
12453
- control: form.control,
12454
- name: "last_name",
12455
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12456
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12457
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12458
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12459
- ] })
12460
- }
12461
- )
12462
- ] }),
12463
- /* @__PURE__ */ jsxRuntime.jsx(
12464
- Form$2.Field,
12465
- {
12466
- control: form.control,
12467
- name: "company",
12468
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12469
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12470
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12471
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12472
- ] })
12473
- }
12474
- ),
12475
- /* @__PURE__ */ jsxRuntime.jsx(
12476
- Form$2.Field,
12477
- {
12478
- control: form.control,
12479
- name: "address_1",
12480
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12481
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12482
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12483
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12484
- ] })
12485
- }
12486
- ),
12487
- /* @__PURE__ */ jsxRuntime.jsx(
12488
- Form$2.Field,
12489
- {
12490
- control: form.control,
12491
- name: "address_2",
12492
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12493
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12494
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12495
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12496
- ] })
12497
- }
12498
- ),
12499
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12500
- /* @__PURE__ */ jsxRuntime.jsx(
12501
- Form$2.Field,
12502
- {
12503
- control: form.control,
12504
- name: "postal_code",
12505
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12506
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12507
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12508
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12509
- ] })
12510
- }
12511
- ),
12512
- /* @__PURE__ */ jsxRuntime.jsx(
12513
- Form$2.Field,
12514
- {
12515
- control: form.control,
12516
- name: "city",
12517
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12518
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12519
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12520
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12521
- ] })
12522
- }
12523
- )
12524
- ] }),
12525
- /* @__PURE__ */ jsxRuntime.jsx(
12526
- Form$2.Field,
12527
- {
12528
- control: form.control,
12529
- name: "province",
12530
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12531
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12532
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12533
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12534
- ] })
12535
- }
12536
- ),
12537
- /* @__PURE__ */ jsxRuntime.jsx(
12538
- Form$2.Field,
12539
- {
12540
- control: form.control,
12541
- name: "phone",
12542
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12543
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12544
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12545
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12546
- ] })
12547
- }
12548
- )
12549
- ] }) }),
12550
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12551
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12552
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12553
- ] }) })
12554
- ]
12555
- }
12556
- ) });
12557
- };
12558
- const schema$1 = addressSchema;
12559
- const TransferOwnership = () => {
12560
- const { id } = reactRouterDom.useParams();
12561
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12562
- fields: "id,customer_id,customer.*"
12563
- });
12564
- if (isError) {
12565
- throw error;
12566
- }
12567
- const isReady = !isPending && !!draft_order;
12568
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12569
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12570
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12571
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
12572
- ] }),
12573
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12574
- ] });
12575
- };
12576
- const TransferOwnershipForm = ({ order }) => {
12577
- var _a, _b;
12578
- const form = reactHookForm.useForm({
12579
- defaultValues: {
12580
- customer_id: order.customer_id || ""
12581
- },
12582
- resolver: zod.zodResolver(schema)
12583
- });
12584
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12585
- const { handleSuccess } = useRouteModal();
12586
- const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12587
- const currentCustomer = order.customer ? {
12588
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
12589
- value: order.customer.id
12590
- } : null;
12591
- const onSubmit = form.handleSubmit(async (data) => {
12592
- await mutateAsync(
12593
- { customer_id: data.customer_id },
12594
- {
12595
- onSuccess: () => {
12596
- ui.toast.success("Customer updated");
12597
- handleSuccess();
12598
- },
12599
- onError: (error) => {
12600
- ui.toast.error(error.message);
12601
- }
12602
- }
12603
- );
12604
- });
12605
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12606
- KeyboundForm,
12607
- {
12608
- className: "flex flex-1 flex-col overflow-hidden",
12609
- onSubmit,
12610
- children: [
12611
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12612
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12613
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12614
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12615
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12616
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12617
- ] }),
12618
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12619
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12620
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12621
- ] })
12622
- ] }),
12623
- /* @__PURE__ */ jsxRuntime.jsx(
12624
- CustomerField,
12625
- {
12626
- control: form.control,
12627
- currentCustomerId: order.customer_id
12628
- }
12629
- )
12630
- ] }),
12631
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12632
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12633
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12634
- ] }) })
12635
- ]
12636
- }
12637
- ) });
12638
- };
12639
- const CustomerField = ({ control, currentCustomerId }) => {
12640
- const customers = useComboboxData({
12641
- queryFn: async (params) => {
12642
- return await sdk.admin.customer.list({
12643
- ...params,
12644
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12645
- });
12646
- },
12647
- queryKey: ["customers"],
12648
- getOptions: (data) => {
12649
- return data.customers.map((customer) => {
12650
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12651
- return {
12652
- label: name ? `${name} (${customer.email})` : customer.email,
12653
- value: customer.id
12654
- };
12655
- });
12656
- }
12657
- });
12658
- return /* @__PURE__ */ jsxRuntime.jsx(
12659
- Form$2.Field,
12660
- {
12661
- name: "customer_id",
12662
- control,
12663
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12664
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12665
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12666
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12667
- ] }),
12668
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12669
- Combobox,
12670
- {
12671
- options: customers.options,
12672
- fetchNextPage: customers.fetchNextPage,
12673
- isFetchingNextPage: customers.isFetchingNextPage,
12674
- searchValue: customers.searchValue,
12675
- onSearchValueChange: customers.onSearchValueChange,
12676
- placeholder: "Select customer",
12677
- ...field
12678
- }
12679
- ) }),
12680
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12681
- ] })
12682
- }
12683
- );
12684
- };
12685
- const Illustration = () => {
12686
- return /* @__PURE__ */ jsxRuntime.jsxs(
12687
- "svg",
12688
- {
12689
- width: "280",
12690
- height: "180",
12691
- viewBox: "0 0 280 180",
12692
- fill: "none",
12693
- xmlns: "http://www.w3.org/2000/svg",
11882
+ width: "280",
11883
+ height: "180",
11884
+ viewBox: "0 0 280 180",
11885
+ fill: "none",
11886
+ xmlns: "http://www.w3.org/2000/svg",
12694
11887
  children: [
12695
11888
  /* @__PURE__ */ jsxRuntime.jsx(
12696
11889
  "rect",
@@ -12968,70 +12161,877 @@ const Illustration = () => {
12968
12161
  strokeLinecap: "round",
12969
12162
  strokeLinejoin: "round"
12970
12163
  }
12971
- ) }),
12972
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12973
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12974
- "rect",
12164
+ ) }),
12165
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12166
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12167
+ "rect",
12168
+ {
12169
+ width: "12",
12170
+ height: "12",
12171
+ fill: "white",
12172
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12173
+ }
12174
+ ) }),
12175
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12176
+ "rect",
12177
+ {
12178
+ width: "12",
12179
+ height: "12",
12180
+ fill: "white",
12181
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12182
+ }
12183
+ ) }),
12184
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12185
+ "rect",
12186
+ {
12187
+ width: "12",
12188
+ height: "12",
12189
+ fill: "white",
12190
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12191
+ }
12192
+ ) }),
12193
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12194
+ "rect",
12195
+ {
12196
+ width: "12",
12197
+ height: "12",
12198
+ fill: "white",
12199
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12200
+ }
12201
+ ) }),
12202
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12203
+ "rect",
12204
+ {
12205
+ width: "12",
12206
+ height: "12",
12207
+ fill: "white",
12208
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12209
+ }
12210
+ ) }),
12211
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12212
+ "rect",
12213
+ {
12214
+ width: "12",
12215
+ height: "12",
12216
+ fill: "white",
12217
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12218
+ }
12219
+ ) })
12220
+ ] })
12221
+ ]
12222
+ }
12223
+ );
12224
+ };
12225
+ const schema = objectType({
12226
+ customer_id: stringType().min(1)
12227
+ });
12228
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
12229
+ const Shipping = () => {
12230
+ var _a;
12231
+ const { id } = reactRouterDom.useParams();
12232
+ const { order, isPending, isError, error } = useOrder(id, {
12233
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12234
+ });
12235
+ const {
12236
+ order: preview,
12237
+ isPending: isPreviewPending,
12238
+ isError: isPreviewError,
12239
+ error: previewError
12240
+ } = useOrderPreview(id);
12241
+ useInitiateOrderEdit({ preview });
12242
+ const { onCancel } = useCancelOrderEdit({ preview });
12243
+ if (isError) {
12244
+ throw error;
12245
+ }
12246
+ if (isPreviewError) {
12247
+ throw previewError;
12248
+ }
12249
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12250
+ const isReady = preview && !isPreviewPending && order && !isPending;
12251
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12252
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12253
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12254
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12255
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
12256
+ ] }) }) }),
12257
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
12258
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12259
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12260
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12261
+ ] }) });
12262
+ };
12263
+ const ShippingForm = ({ preview, order }) => {
12264
+ var _a;
12265
+ const { setIsOpen } = useStackedModal();
12266
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
12267
+ const [data, setData] = React.useState(null);
12268
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12269
+ const { shipping_options } = useShippingOptions(
12270
+ {
12271
+ id: appliedShippingOptionIds,
12272
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12273
+ },
12274
+ {
12275
+ enabled: appliedShippingOptionIds.length > 0
12276
+ }
12277
+ );
12278
+ const uniqueShippingProfiles = React.useMemo(() => {
12279
+ const profiles = /* @__PURE__ */ new Map();
12280
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
12281
+ profiles.set(profile.id, profile);
12282
+ });
12283
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12284
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
12285
+ });
12286
+ return Array.from(profiles.values());
12287
+ }, [order.items, shipping_options]);
12288
+ const { handleSuccess } = useRouteModal();
12289
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12290
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12291
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12292
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12293
+ const onSubmit = async () => {
12294
+ setIsSubmitting(true);
12295
+ let requestSucceeded = false;
12296
+ await requestOrderEdit(void 0, {
12297
+ onError: (e) => {
12298
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
12299
+ },
12300
+ onSuccess: () => {
12301
+ requestSucceeded = true;
12302
+ }
12303
+ });
12304
+ if (!requestSucceeded) {
12305
+ setIsSubmitting(false);
12306
+ return;
12307
+ }
12308
+ await confirmOrderEdit(void 0, {
12309
+ onError: (e) => {
12310
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12311
+ },
12312
+ onSuccess: () => {
12313
+ handleSuccess();
12314
+ },
12315
+ onSettled: () => {
12316
+ setIsSubmitting(false);
12317
+ }
12318
+ });
12319
+ };
12320
+ const onKeydown = React.useCallback(
12321
+ (e) => {
12322
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12323
+ if (data || isSubmitting) {
12324
+ return;
12325
+ }
12326
+ onSubmit();
12327
+ }
12328
+ },
12329
+ [data, isSubmitting, onSubmit]
12330
+ );
12331
+ React.useEffect(() => {
12332
+ document.addEventListener("keydown", onKeydown);
12333
+ return () => {
12334
+ document.removeEventListener("keydown", onKeydown);
12335
+ };
12336
+ }, [onKeydown]);
12337
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12338
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12339
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12340
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12341
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12342
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12343
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
12344
+ ] }),
12345
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12346
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
12347
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
12348
+ /* @__PURE__ */ jsxRuntime.jsx(
12349
+ ui.Text,
12350
+ {
12351
+ size: "xsmall",
12352
+ weight: "plus",
12353
+ className: "text-ui-fg-muted",
12354
+ children: "Shipping profile"
12355
+ }
12356
+ ),
12357
+ /* @__PURE__ */ jsxRuntime.jsx(
12358
+ ui.Text,
12359
+ {
12360
+ size: "xsmall",
12361
+ weight: "plus",
12362
+ className: "text-ui-fg-muted",
12363
+ children: "Action"
12364
+ }
12365
+ )
12366
+ ] }),
12367
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12368
+ var _a2, _b, _c, _d, _e, _f, _g;
12369
+ const items = getItemsWithShippingProfile(
12370
+ profile.id,
12371
+ order.items
12372
+ );
12373
+ const hasItems = items.length > 0;
12374
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12375
+ (option) => option.shipping_profile_id === profile.id
12376
+ );
12377
+ const shippingMethod = preview.shipping_methods.find(
12378
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12379
+ );
12380
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
12381
+ (action) => action.action === "SHIPPING_ADD"
12382
+ );
12383
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12384
+ radixUi.Accordion.Item,
12385
+ {
12386
+ value: profile.id,
12387
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12388
+ children: [
12389
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
12390
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
12391
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
12392
+ ui.IconButton,
12393
+ {
12394
+ size: "2xsmall",
12395
+ variant: "transparent",
12396
+ className: "group/trigger",
12397
+ disabled: !hasItems,
12398
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
12399
+ }
12400
+ ) }),
12401
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12402
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
12403
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
12404
+ /* @__PURE__ */ jsxRuntime.jsx(
12405
+ ui.Text,
12406
+ {
12407
+ size: "small",
12408
+ weight: "plus",
12409
+ leading: "compact",
12410
+ children: profile.name
12411
+ }
12412
+ ),
12413
+ /* @__PURE__ */ jsxRuntime.jsxs(
12414
+ ui.Text,
12415
+ {
12416
+ size: "small",
12417
+ leading: "compact",
12418
+ className: "text-ui-fg-subtle",
12419
+ children: [
12420
+ items.length,
12421
+ " ",
12422
+ pluralize(items.length, "items", "item")
12423
+ ]
12424
+ }
12425
+ )
12426
+ ] })
12427
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
12428
+ /* @__PURE__ */ jsxRuntime.jsx(
12429
+ ui.Tooltip,
12430
+ {
12431
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
12432
+ var _a3, _b2, _c2;
12433
+ return /* @__PURE__ */ jsxRuntime.jsx(
12434
+ "li",
12435
+ {
12436
+ 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})`
12437
+ },
12438
+ item.id
12439
+ );
12440
+ }) }),
12441
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12442
+ ui.Badge,
12443
+ {
12444
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12445
+ size: "xsmall",
12446
+ children: [
12447
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
12448
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
12449
+ items.reduce(
12450
+ (acc, item) => acc + item.quantity,
12451
+ 0
12452
+ ),
12453
+ "x",
12454
+ " ",
12455
+ pluralize(items.length, "items", "item")
12456
+ ] })
12457
+ ]
12458
+ }
12459
+ )
12460
+ }
12461
+ ),
12462
+ /* @__PURE__ */ jsxRuntime.jsx(
12463
+ ui.Tooltip,
12464
+ {
12465
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12466
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12467
+ ui.Badge,
12468
+ {
12469
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12470
+ size: "xsmall",
12471
+ children: [
12472
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
12473
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
12474
+ ]
12475
+ }
12476
+ )
12477
+ }
12478
+ ),
12479
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
12480
+ ui.Badge,
12481
+ {
12482
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12483
+ size: "xsmall",
12484
+ children: [
12485
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
12486
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
12487
+ ]
12488
+ }
12489
+ ) })
12490
+ ] })
12491
+ ] }),
12492
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
12493
+ ActionMenu,
12494
+ {
12495
+ groups: [
12496
+ {
12497
+ actions: [
12498
+ hasItems ? {
12499
+ label: "Edit shipping option",
12500
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
12501
+ onClick: () => {
12502
+ setIsOpen(
12503
+ STACKED_FOCUS_MODAL_ID,
12504
+ true
12505
+ );
12506
+ setData({
12507
+ shippingProfileId: profile.id,
12508
+ shippingOption,
12509
+ shippingMethod
12510
+ });
12511
+ }
12512
+ } : void 0,
12513
+ {
12514
+ label: "Remove shipping option",
12515
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
12516
+ onClick: () => {
12517
+ if (shippingMethod) {
12518
+ if (addShippingMethodAction) {
12519
+ removeActionShippingMethod(
12520
+ addShippingMethodAction.id
12521
+ );
12522
+ } else {
12523
+ removeShippingMethod(
12524
+ shippingMethod.id
12525
+ );
12526
+ }
12527
+ }
12528
+ }
12529
+ }
12530
+ ].filter(Boolean)
12531
+ }
12532
+ ]
12533
+ }
12534
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
12535
+ StackedModalTrigger,
12536
+ {
12537
+ shippingProfileId: profile.id,
12538
+ shippingOption,
12539
+ shippingMethod,
12540
+ setData,
12541
+ children: "Add shipping option"
12542
+ }
12543
+ )
12544
+ ] }),
12545
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
12546
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12547
+ items.map((item, idx) => {
12548
+ var _a3, _b2, _c2, _d2, _e2;
12549
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12550
+ /* @__PURE__ */ jsxRuntime.jsxs(
12551
+ "div",
12552
+ {
12553
+ className: "px-3 flex items-center gap-x-3",
12554
+ children: [
12555
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
12556
+ ui.Divider,
12557
+ {
12558
+ variant: "dashed",
12559
+ orientation: "vertical"
12560
+ }
12561
+ ) }),
12562
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
12563
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
12564
+ ui.Text,
12565
+ {
12566
+ size: "small",
12567
+ leading: "compact",
12568
+ className: "text-ui-fg-subtle",
12569
+ children: [
12570
+ item.quantity,
12571
+ "x"
12572
+ ]
12573
+ }
12574
+ ) }),
12575
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
12576
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12577
+ /* @__PURE__ */ jsxRuntime.jsxs(
12578
+ ui.Text,
12579
+ {
12580
+ size: "small",
12581
+ leading: "compact",
12582
+ weight: "plus",
12583
+ children: [
12584
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12585
+ " (",
12586
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12587
+ ")"
12588
+ ]
12589
+ }
12590
+ ),
12591
+ /* @__PURE__ */ jsxRuntime.jsx(
12592
+ ui.Text,
12593
+ {
12594
+ size: "small",
12595
+ leading: "compact",
12596
+ className: "text-ui-fg-subtle",
12597
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12598
+ }
12599
+ )
12600
+ ] })
12601
+ ] })
12602
+ ]
12603
+ },
12604
+ item.id
12605
+ ),
12606
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
12607
+ ] }, item.id);
12608
+ })
12609
+ ] })
12610
+ ]
12611
+ },
12612
+ profile.id
12613
+ );
12614
+ }) })
12615
+ ] }) })
12616
+ ] }) }),
12617
+ /* @__PURE__ */ jsxRuntime.jsx(
12618
+ StackedFocusModal,
12619
+ {
12620
+ id: STACKED_FOCUS_MODAL_ID,
12621
+ onOpenChangeCallback: (open) => {
12622
+ if (!open) {
12623
+ setData(null);
12624
+ }
12625
+ return open;
12626
+ },
12627
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12628
+ }
12629
+ )
12630
+ ] }),
12631
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12632
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12633
+ /* @__PURE__ */ jsxRuntime.jsx(
12634
+ ui.Button,
12635
+ {
12636
+ size: "small",
12637
+ type: "button",
12638
+ isLoading: isSubmitting,
12639
+ onClick: onSubmit,
12640
+ children: "Save"
12641
+ }
12642
+ )
12643
+ ] }) })
12644
+ ] });
12645
+ };
12646
+ const StackedModalTrigger = ({
12647
+ shippingProfileId,
12648
+ shippingOption,
12649
+ shippingMethod,
12650
+ setData,
12651
+ children
12652
+ }) => {
12653
+ const { setIsOpen, getIsOpen } = useStackedModal();
12654
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12655
+ const onToggle = () => {
12656
+ if (isOpen) {
12657
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12658
+ setData(null);
12659
+ } else {
12660
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12661
+ setData({
12662
+ shippingProfileId,
12663
+ shippingOption,
12664
+ shippingMethod
12665
+ });
12666
+ }
12667
+ };
12668
+ return /* @__PURE__ */ jsxRuntime.jsx(
12669
+ ui.Button,
12670
+ {
12671
+ size: "small",
12672
+ variant: "secondary",
12673
+ onClick: onToggle,
12674
+ className: "text-ui-fg-primary shrink-0",
12675
+ children
12676
+ }
12677
+ );
12678
+ };
12679
+ const ShippingProfileForm = ({
12680
+ data,
12681
+ order,
12682
+ preview
12683
+ }) => {
12684
+ var _a, _b, _c, _d, _e, _f;
12685
+ const { setIsOpen } = useStackedModal();
12686
+ const form = reactHookForm.useForm({
12687
+ resolver: zod.zodResolver(shippingMethodSchema),
12688
+ defaultValues: {
12689
+ 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,
12690
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12691
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12692
+ }
12693
+ });
12694
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12695
+ const {
12696
+ mutateAsync: updateShippingMethod,
12697
+ isPending: isUpdatingShippingMethod
12698
+ } = useDraftOrderUpdateShippingMethod(order.id);
12699
+ const onSubmit = form.handleSubmit(async (values) => {
12700
+ if (lodash.isEqual(values, form.formState.defaultValues)) {
12701
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12702
+ return;
12703
+ }
12704
+ if (data.shippingMethod) {
12705
+ await updateShippingMethod(
12706
+ {
12707
+ method_id: data.shippingMethod.id,
12708
+ shipping_option_id: values.shipping_option_id,
12709
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12710
+ },
12711
+ {
12712
+ onError: (e) => {
12713
+ ui.toast.error(e.message);
12714
+ },
12715
+ onSuccess: () => {
12716
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12717
+ }
12718
+ }
12719
+ );
12720
+ return;
12721
+ }
12722
+ await addShippingMethod(
12723
+ {
12724
+ shipping_option_id: values.shipping_option_id,
12725
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12726
+ },
12727
+ {
12728
+ onError: (e) => {
12729
+ ui.toast.error(e.message);
12730
+ },
12731
+ onSuccess: () => {
12732
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12733
+ }
12734
+ }
12735
+ );
12736
+ });
12737
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12738
+ KeyboundForm,
12739
+ {
12740
+ className: "flex h-full flex-col overflow-hidden",
12741
+ onSubmit,
12742
+ children: [
12743
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12744
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12745
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12746
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12747
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12748
+ ] }),
12749
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12750
+ /* @__PURE__ */ jsxRuntime.jsx(
12751
+ LocationField,
12975
12752
  {
12976
- width: "12",
12977
- height: "12",
12978
- fill: "white",
12979
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12753
+ control: form.control,
12754
+ setValue: form.setValue
12980
12755
  }
12981
- ) }),
12982
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12983
- "rect",
12756
+ ),
12757
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12758
+ /* @__PURE__ */ jsxRuntime.jsx(
12759
+ ShippingOptionField,
12984
12760
  {
12985
- width: "12",
12986
- height: "12",
12987
- fill: "white",
12988
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12761
+ shippingProfileId: data.shippingProfileId,
12762
+ preview,
12763
+ control: form.control
12989
12764
  }
12990
- ) }),
12991
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12992
- "rect",
12765
+ ),
12766
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12767
+ /* @__PURE__ */ jsxRuntime.jsx(
12768
+ CustomAmountField,
12993
12769
  {
12994
- width: "12",
12995
- height: "12",
12996
- fill: "white",
12997
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12770
+ control: form.control,
12771
+ currencyCode: order.currency_code
12998
12772
  }
12999
- ) }),
13000
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13001
- "rect",
12773
+ ),
12774
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12775
+ /* @__PURE__ */ jsxRuntime.jsx(
12776
+ ItemsPreview,
12777
+ {
12778
+ order,
12779
+ shippingProfileId: data.shippingProfileId
12780
+ }
12781
+ )
12782
+ ] }) }) }),
12783
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12784
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12785
+ /* @__PURE__ */ jsxRuntime.jsx(
12786
+ ui.Button,
12787
+ {
12788
+ size: "small",
12789
+ type: "submit",
12790
+ isLoading: isPending || isUpdatingShippingMethod,
12791
+ children: data.shippingMethod ? "Update" : "Add"
12792
+ }
12793
+ )
12794
+ ] }) })
12795
+ ]
12796
+ }
12797
+ ) }) });
12798
+ };
12799
+ const shippingMethodSchema = objectType({
12800
+ location_id: stringType(),
12801
+ shipping_option_id: stringType(),
12802
+ custom_amount: unionType([numberType(), stringType()]).optional()
12803
+ });
12804
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12805
+ const matches = order.items.filter(
12806
+ (item) => {
12807
+ var _a, _b, _c;
12808
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12809
+ }
12810
+ );
12811
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12812
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12813
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12814
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12815
+ ] }) }),
12816
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12817
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12818
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12819
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12820
+ ] }),
12821
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12822
+ "div",
12823
+ {
12824
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12825
+ children: [
12826
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12827
+ /* @__PURE__ */ jsxRuntime.jsx(
12828
+ Thumbnail,
12829
+ {
12830
+ thumbnail: item.thumbnail,
12831
+ alt: item.product_title ?? void 0
12832
+ }
12833
+ ),
12834
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12835
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12836
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12837
+ /* @__PURE__ */ jsxRuntime.jsxs(
12838
+ ui.Text,
12839
+ {
12840
+ size: "small",
12841
+ leading: "compact",
12842
+ className: "text-ui-fg-subtle",
12843
+ children: [
12844
+ "(",
12845
+ item.variant_title,
12846
+ ")"
12847
+ ]
12848
+ }
12849
+ )
12850
+ ] }),
12851
+ /* @__PURE__ */ jsxRuntime.jsx(
12852
+ ui.Text,
12853
+ {
12854
+ size: "small",
12855
+ leading: "compact",
12856
+ className: "text-ui-fg-subtle",
12857
+ children: item.variant_sku
12858
+ }
12859
+ )
12860
+ ] })
12861
+ ] }),
12862
+ /* @__PURE__ */ jsxRuntime.jsxs(
12863
+ ui.Text,
12864
+ {
12865
+ size: "small",
12866
+ leading: "compact",
12867
+ className: "text-ui-fg-subtle",
12868
+ children: [
12869
+ item.quantity,
12870
+ "x"
12871
+ ]
12872
+ }
12873
+ )
12874
+ ]
12875
+ },
12876
+ item.id
12877
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12878
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12879
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12880
+ 'No items found for "',
12881
+ query,
12882
+ '".'
12883
+ ] })
12884
+ ] }) })
12885
+ ] })
12886
+ ] });
12887
+ };
12888
+ const LocationField = ({ control, setValue }) => {
12889
+ const locations = useComboboxData({
12890
+ queryKey: ["locations"],
12891
+ queryFn: async (params) => {
12892
+ return await sdk.admin.stockLocation.list(params);
12893
+ },
12894
+ getOptions: (data) => {
12895
+ return data.stock_locations.map((location) => ({
12896
+ label: location.name,
12897
+ value: location.id
12898
+ }));
12899
+ }
12900
+ });
12901
+ return /* @__PURE__ */ jsxRuntime.jsx(
12902
+ Form$2.Field,
12903
+ {
12904
+ control,
12905
+ name: "location_id",
12906
+ render: ({ field: { onChange, ...field } }) => {
12907
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12908
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12909
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12910
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12911
+ ] }),
12912
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12913
+ Combobox,
13002
12914
  {
13003
- width: "12",
13004
- height: "12",
13005
- fill: "white",
13006
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12915
+ options: locations.options,
12916
+ fetchNextPage: locations.fetchNextPage,
12917
+ isFetchingNextPage: locations.isFetchingNextPage,
12918
+ searchValue: locations.searchValue,
12919
+ onSearchValueChange: locations.onSearchValueChange,
12920
+ placeholder: "Select location",
12921
+ onChange: (value) => {
12922
+ setValue("shipping_option_id", "", {
12923
+ shouldDirty: true,
12924
+ shouldTouch: true
12925
+ });
12926
+ onChange(value);
12927
+ },
12928
+ ...field
13007
12929
  }
13008
- ) }),
13009
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13010
- "rect",
12930
+ ) })
12931
+ ] }) });
12932
+ }
12933
+ }
12934
+ );
12935
+ };
12936
+ const ShippingOptionField = ({
12937
+ shippingProfileId,
12938
+ preview,
12939
+ control
12940
+ }) => {
12941
+ var _a;
12942
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12943
+ const shippingOptions = useComboboxData({
12944
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12945
+ queryFn: async (params) => {
12946
+ return await sdk.admin.shippingOption.list({
12947
+ ...params,
12948
+ stock_location_id: locationId,
12949
+ shipping_profile_id: shippingProfileId
12950
+ });
12951
+ },
12952
+ getOptions: (data) => {
12953
+ return data.shipping_options.map((option) => {
12954
+ var _a2;
12955
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12956
+ (r) => r.attribute === "is_return" && r.value === "true"
12957
+ )) {
12958
+ return void 0;
12959
+ }
12960
+ return {
12961
+ label: option.name,
12962
+ value: option.id
12963
+ };
12964
+ }).filter(Boolean);
12965
+ },
12966
+ enabled: !!locationId && !!shippingProfileId,
12967
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12968
+ });
12969
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12970
+ return /* @__PURE__ */ jsxRuntime.jsx(
12971
+ Form$2.Field,
12972
+ {
12973
+ control,
12974
+ name: "shipping_option_id",
12975
+ render: ({ field }) => {
12976
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12977
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12978
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12979
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12980
+ ] }),
12981
+ /* @__PURE__ */ jsxRuntime.jsx(
12982
+ ConditionalTooltip,
13011
12983
  {
13012
- width: "12",
13013
- height: "12",
13014
- fill: "white",
13015
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12984
+ content: tooltipContent,
12985
+ showTooltip: !locationId || !shippingProfileId,
12986
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12987
+ Combobox,
12988
+ {
12989
+ options: shippingOptions.options,
12990
+ fetchNextPage: shippingOptions.fetchNextPage,
12991
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12992
+ searchValue: shippingOptions.searchValue,
12993
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12994
+ placeholder: "Select shipping option",
12995
+ ...field,
12996
+ disabled: !locationId || !shippingProfileId
12997
+ }
12998
+ ) }) })
13016
12999
  }
13017
- ) }),
13018
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13019
- "rect",
13000
+ )
13001
+ ] }) });
13002
+ }
13003
+ }
13004
+ );
13005
+ };
13006
+ const CustomAmountField = ({
13007
+ control,
13008
+ currencyCode
13009
+ }) => {
13010
+ return /* @__PURE__ */ jsxRuntime.jsx(
13011
+ Form$2.Field,
13012
+ {
13013
+ control,
13014
+ name: "custom_amount",
13015
+ render: ({ field: { onChange, ...field } }) => {
13016
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13017
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13018
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
13019
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
13020
+ ] }),
13021
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13022
+ ui.CurrencyInput,
13020
13023
  {
13021
- width: "12",
13022
- height: "12",
13023
- fill: "white",
13024
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13024
+ ...field,
13025
+ onValueChange: (value) => onChange(value),
13026
+ symbol: getNativeSymbol(currencyCode),
13027
+ code: currencyCode
13025
13028
  }
13026
13029
  ) })
13027
- ] })
13028
- ]
13030
+ ] });
13031
+ }
13029
13032
  }
13030
13033
  );
13031
13034
  };
13032
- const schema = objectType({
13033
- customer_id: stringType().min(1)
13034
- });
13035
13035
  const widgetModule = { widgets: [] };
13036
13036
  const routeModule = {
13037
13037
  routes: [
@@ -13080,10 +13080,6 @@ const routeModule = {
13080
13080
  Component: SalesChannel,
13081
13081
  path: "/draft-orders/:id/sales-channel"
13082
13082
  },
13083
- {
13084
- Component: Shipping,
13085
- path: "/draft-orders/:id/shipping"
13086
- },
13087
13083
  {
13088
13084
  Component: ShippingAddress,
13089
13085
  path: "/draft-orders/:id/shipping-address"
@@ -13091,6 +13087,10 @@ const routeModule = {
13091
13087
  {
13092
13088
  Component: TransferOwnership,
13093
13089
  path: "/draft-orders/:id/transfer-ownership"
13090
+ },
13091
+ {
13092
+ Component: Shipping,
13093
+ path: "/draft-orders/:id/shipping"
13094
13094
  }
13095
13095
  ]
13096
13096
  }