@medusajs/draft-order 2.12.0-preview-20251103180145 → 3.0.0-snapshot-20251104004624

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