@medusajs/draft-order 2.11.4-preview-20251113150133 → 2.11.4-preview-20251113180136

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9755,27 +9755,6 @@ const BillingAddressForm = ({ order }) => {
9755
9755
  ) });
9756
9756
  };
9757
9757
  const schema$5 = addressSchema;
9758
- const CustomItems = () => {
9759
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9760
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9761
- /* @__PURE__ */ jsx(CustomItemsForm, {})
9762
- ] });
9763
- };
9764
- const CustomItemsForm = () => {
9765
- const form = useForm({
9766
- resolver: zodResolver(schema$4)
9767
- });
9768
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9769
- /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9770
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9771
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9772
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9773
- ] }) })
9774
- ] }) });
9775
- };
9776
- const schema$4 = objectType({
9777
- email: stringType().email()
9778
- });
9779
9758
  const Email = () => {
9780
9759
  const { id } = useParams();
9781
9760
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9798,7 +9777,7 @@ const EmailForm = ({ order }) => {
9798
9777
  defaultValues: {
9799
9778
  email: order.email ?? ""
9800
9779
  },
9801
- resolver: zodResolver(schema$3)
9780
+ resolver: zodResolver(schema$4)
9802
9781
  });
9803
9782
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9804
9783
  const { handleSuccess } = useRouteModal();
@@ -9841,7 +9820,7 @@ const EmailForm = ({ order }) => {
9841
9820
  }
9842
9821
  ) });
9843
9822
  };
9844
- const schema$3 = objectType({
9823
+ const schema$4 = objectType({
9845
9824
  email: stringType().email()
9846
9825
  });
9847
9826
  const NumberInput = forwardRef(
@@ -11473,7 +11452,7 @@ const SalesChannelForm = ({ order }) => {
11473
11452
  defaultValues: {
11474
11453
  sales_channel_id: order.sales_channel_id || ""
11475
11454
  },
11476
- resolver: zodResolver(schema$2)
11455
+ resolver: zodResolver(schema$3)
11477
11456
  });
11478
11457
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11479
11458
  const { handleSuccess } = useRouteModal();
@@ -11548,870 +11527,250 @@ const SalesChannelField = ({ control, order }) => {
11548
11527
  }
11549
11528
  );
11550
11529
  };
11551
- const schema$2 = objectType({
11530
+ const schema$3 = objectType({
11552
11531
  sales_channel_id: stringType().min(1)
11553
11532
  });
11554
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11555
- const Shipping = () => {
11556
- var _a;
11533
+ const ShippingAddress = () => {
11557
11534
  const { id } = useParams();
11558
11535
  const { order, isPending, isError, error } = useOrder(id, {
11559
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11536
+ fields: "+shipping_address"
11560
11537
  });
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
11538
  if (isError) {
11570
11539
  throw error;
11571
11540
  }
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
- ] }) });
11541
+ const isReady = !isPending && !!order;
11542
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11543
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11544
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11545
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11546
+ ] }),
11547
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11548
+ ] });
11588
11549
  };
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.*"
11550
+ const ShippingAddressForm = ({ order }) => {
11551
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11552
+ const form = useForm({
11553
+ defaultValues: {
11554
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11555
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11556
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11557
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11558
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11559
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11560
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11561
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11562
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11563
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11599
11564
  },
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]);
11565
+ resolver: zodResolver(schema$2)
11566
+ });
11567
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11614
11568
  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();
11569
+ const onSubmit = form.handleSubmit(async (data) => {
11570
+ await mutateAsync(
11571
+ {
11572
+ shipping_address: {
11573
+ first_name: data.first_name,
11574
+ last_name: data.last_name,
11575
+ company: data.company,
11576
+ address_1: data.address_1,
11577
+ address_2: data.address_2,
11578
+ city: data.city,
11579
+ province: data.province,
11580
+ country_code: data.country_code,
11581
+ postal_code: data.postal_code,
11582
+ phone: data.phone
11583
+ }
11640
11584
  },
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;
11585
+ {
11586
+ onSuccess: () => {
11587
+ handleSuccess();
11588
+ },
11589
+ onError: (error) => {
11590
+ toast.error(error.message);
11651
11591
  }
11652
- onSubmit();
11653
11592
  }
11654
- },
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: [
11593
+ );
11594
+ });
11595
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11596
+ KeyboundForm,
11597
+ {
11598
+ className: "flex flex-1 flex-col overflow-hidden",
11599
+ onSubmit,
11600
+ children: [
11601
+ /* @__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: [
11602
+ /* @__PURE__ */ jsx(
11603
+ Form$2.Field,
11604
+ {
11605
+ control: form.control,
11606
+ name: "country_code",
11607
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11608
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11609
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11610
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11611
+ ] })
11612
+ }
11613
+ ),
11614
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11674
11615
  /* @__PURE__ */ jsx(
11675
- Text,
11616
+ Form$2.Field,
11676
11617
  {
11677
- size: "xsmall",
11678
- weight: "plus",
11679
- className: "text-ui-fg-muted",
11680
- children: "Shipping profile"
11618
+ control: form.control,
11619
+ name: "first_name",
11620
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11621
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11622
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11623
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11624
+ ] })
11681
11625
  }
11682
11626
  ),
11683
11627
  /* @__PURE__ */ jsx(
11684
- Text,
11628
+ Form$2.Field,
11685
11629
  {
11686
- size: "xsmall",
11687
- weight: "plus",
11688
- className: "text-ui-fg-muted",
11689
- children: "Action"
11630
+ control: form.control,
11631
+ name: "last_name",
11632
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11633
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11634
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11635
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11636
+ ] })
11690
11637
  }
11691
11638
  )
11692
11639
  ] }),
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);
11640
+ /* @__PURE__ */ jsx(
11641
+ Form$2.Field,
11642
+ {
11643
+ control: form.control,
11644
+ name: "company",
11645
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11646
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11647
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11648
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11649
+ ] })
11950
11650
  }
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" }),
11651
+ ),
12076
11652
  /* @__PURE__ */ jsx(
12077
- LocationField,
11653
+ Form$2.Field,
12078
11654
  {
12079
11655
  control: form.control,
12080
- setValue: form.setValue
11656
+ name: "address_1",
11657
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11658
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11659
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11660
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11661
+ ] })
12081
11662
  }
12082
11663
  ),
12083
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12084
11664
  /* @__PURE__ */ jsx(
12085
- ShippingOptionField,
11665
+ Form$2.Field,
12086
11666
  {
12087
- shippingProfileId: data.shippingProfileId,
12088
- preview,
12089
- control: form.control
11667
+ control: form.control,
11668
+ name: "address_2",
11669
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11670
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11671
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11672
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11673
+ ] })
12090
11674
  }
12091
11675
  ),
12092
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11676
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11677
+ /* @__PURE__ */ jsx(
11678
+ Form$2.Field,
11679
+ {
11680
+ control: form.control,
11681
+ name: "postal_code",
11682
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11683
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11684
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11685
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11686
+ ] })
11687
+ }
11688
+ ),
11689
+ /* @__PURE__ */ jsx(
11690
+ Form$2.Field,
11691
+ {
11692
+ control: form.control,
11693
+ name: "city",
11694
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11695
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11696
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11697
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11698
+ ] })
11699
+ }
11700
+ )
11701
+ ] }),
12093
11702
  /* @__PURE__ */ jsx(
12094
- CustomAmountField,
11703
+ Form$2.Field,
12095
11704
  {
12096
11705
  control: form.control,
12097
- currencyCode: order.currency_code
11706
+ name: "province",
11707
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11708
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11709
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11710
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11711
+ ] })
12098
11712
  }
12099
11713
  ),
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
11714
  /* @__PURE__ */ jsx(
12112
- Button,
11715
+ Form$2.Field,
12113
11716
  {
12114
- size: "small",
12115
- type: "submit",
12116
- isLoading: isPending || isUpdatingShippingMethod,
12117
- children: data.shippingMethod ? "Update" : "Add"
11717
+ control: form.control,
11718
+ name: "phone",
11719
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11720
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11721
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11722
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11723
+ ] })
12118
11724
  }
12119
11725
  )
11726
+ ] }) }),
11727
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11728
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11729
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12120
11730
  ] }) })
12121
11731
  ]
12122
11732
  }
12123
- ) }) });
11733
+ ) });
12124
11734
  };
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 = () => {
11735
+ const schema$2 = addressSchema;
11736
+ const TransferOwnership = () => {
12362
11737
  const { id } = useParams();
12363
- const { order, isPending, isError, error } = useOrder(id, {
12364
- fields: "+shipping_address"
11738
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11739
+ fields: "id,customer_id,customer.*"
12365
11740
  });
12366
11741
  if (isError) {
12367
11742
  throw error;
12368
11743
  }
12369
- const isReady = !isPending && !!order;
11744
+ const isReady = !isPending && !!draft_order;
12370
11745
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12371
11746
  /* @__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" }) })
11747
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Transfer Ownership" }) }),
11748
+ /* @__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" }) })
12374
11749
  ] }),
12375
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11750
+ isReady && /* @__PURE__ */ jsx(TransferOwnershipForm, { order: draft_order })
12376
11751
  ] });
12377
11752
  };
12378
- const ShippingAddressForm = ({ order }) => {
12379
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11753
+ const TransferOwnershipForm = ({ order }) => {
11754
+ var _a, _b;
12380
11755
  const form = useForm({
12381
11756
  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) ?? ""
11757
+ customer_id: order.customer_id || ""
12392
11758
  },
12393
11759
  resolver: zodResolver(schema$1)
12394
11760
  });
12395
11761
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12396
11762
  const { handleSuccess } = useRouteModal();
11763
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
11764
+ const currentCustomer = order.customer ? {
11765
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
11766
+ value: order.customer.id
11767
+ } : null;
12397
11768
  const onSubmit = form.handleSubmit(async (data) => {
12398
11769
  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
- },
11770
+ { customer_id: data.customer_id },
12413
11771
  {
12414
11772
  onSuccess: () => {
11773
+ toast.success("Customer updated");
12415
11774
  handleSuccess();
12416
11775
  },
12417
11776
  onError: (error) => {
@@ -12426,210 +11785,23 @@ const ShippingAddressForm = ({ order }) => {
12426
11785
  className: "flex flex-1 flex-col overflow-hidden",
12427
11786
  onSubmit,
12428
11787
  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: [
11788
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
11789
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsx(Illustration, {}) }),
11790
+ currentCustomer && /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-3", children: [
11791
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11792
+ /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
11793
+ /* @__PURE__ */ jsx(Hint$1, { children: "The customer that is currently associated with this draft order." })
11794
+ ] }),
11795
+ /* @__PURE__ */ jsxs(Select, { disabled: true, value: currentCustomer.value, children: [
11796
+ /* @__PURE__ */ jsx(Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
11797
+ /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
11798
+ ] })
11799
+ ] }),
12430
11800
  /* @__PURE__ */ jsx(
12431
- Form$2.Field,
11801
+ CustomerField,
12432
11802
  {
12433
11803
  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
11804
+ currentCustomerId: order.customer_id
12633
11805
  }
12634
11806
  )
12635
11807
  ] }),
@@ -12973,70 +12145,898 @@ const Illustration = () => {
12973
12145
  strokeLinecap: "round",
12974
12146
  strokeLinejoin: "round"
12975
12147
  }
12976
- ) }),
12977
- /* @__PURE__ */ jsxs("defs", { children: [
12978
- /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
12979
- "rect",
12148
+ ) }),
12149
+ /* @__PURE__ */ jsxs("defs", { children: [
12150
+ /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
12151
+ "rect",
12152
+ {
12153
+ width: "12",
12154
+ height: "12",
12155
+ fill: "white",
12156
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12157
+ }
12158
+ ) }),
12159
+ /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
12160
+ "rect",
12161
+ {
12162
+ width: "12",
12163
+ height: "12",
12164
+ fill: "white",
12165
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12166
+ }
12167
+ ) }),
12168
+ /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
12169
+ "rect",
12170
+ {
12171
+ width: "12",
12172
+ height: "12",
12173
+ fill: "white",
12174
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12175
+ }
12176
+ ) }),
12177
+ /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
12178
+ "rect",
12179
+ {
12180
+ width: "12",
12181
+ height: "12",
12182
+ fill: "white",
12183
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12184
+ }
12185
+ ) }),
12186
+ /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
12187
+ "rect",
12188
+ {
12189
+ width: "12",
12190
+ height: "12",
12191
+ fill: "white",
12192
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12193
+ }
12194
+ ) }),
12195
+ /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
12196
+ "rect",
12197
+ {
12198
+ width: "12",
12199
+ height: "12",
12200
+ fill: "white",
12201
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12202
+ }
12203
+ ) })
12204
+ ] })
12205
+ ]
12206
+ }
12207
+ );
12208
+ };
12209
+ const schema$1 = objectType({
12210
+ customer_id: stringType().min(1)
12211
+ });
12212
+ const CustomItems = () => {
12213
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12214
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
12215
+ /* @__PURE__ */ jsx(CustomItemsForm, {})
12216
+ ] });
12217
+ };
12218
+ const CustomItemsForm = () => {
12219
+ const form = useForm({
12220
+ resolver: zodResolver(schema)
12221
+ });
12222
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
12223
+ /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
12224
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12225
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12226
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
12227
+ ] }) })
12228
+ ] }) });
12229
+ };
12230
+ const schema = objectType({
12231
+ email: stringType().email()
12232
+ });
12233
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
12234
+ const Shipping = () => {
12235
+ var _a;
12236
+ const { id } = useParams();
12237
+ const { order, isPending, isError, error } = useOrder(id, {
12238
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12239
+ });
12240
+ const {
12241
+ order: preview,
12242
+ isPending: isPreviewPending,
12243
+ isError: isPreviewError,
12244
+ error: previewError
12245
+ } = useOrderPreview(id);
12246
+ useInitiateOrderEdit({ preview });
12247
+ const { onCancel } = useCancelOrderEdit({ preview });
12248
+ if (isError) {
12249
+ throw error;
12250
+ }
12251
+ if (isPreviewError) {
12252
+ throw previewError;
12253
+ }
12254
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12255
+ const isReady = preview && !isPreviewPending && order && !isPending;
12256
+ return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12257
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
12258
+ /* @__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: [
12259
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12260
+ /* @__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." }) })
12261
+ ] }) }) }),
12262
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
12263
+ ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
12264
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12265
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12266
+ ] }) });
12267
+ };
12268
+ const ShippingForm = ({ preview, order }) => {
12269
+ var _a;
12270
+ const { setIsOpen } = useStackedModal();
12271
+ const [isSubmitting, setIsSubmitting] = useState(false);
12272
+ const [data, setData] = useState(null);
12273
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12274
+ const { shipping_options } = useShippingOptions(
12275
+ {
12276
+ id: appliedShippingOptionIds,
12277
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12278
+ },
12279
+ {
12280
+ enabled: appliedShippingOptionIds.length > 0
12281
+ }
12282
+ );
12283
+ const uniqueShippingProfiles = useMemo(() => {
12284
+ const profiles = /* @__PURE__ */ new Map();
12285
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
12286
+ profiles.set(profile.id, profile);
12287
+ });
12288
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12289
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
12290
+ });
12291
+ return Array.from(profiles.values());
12292
+ }, [order.items, shipping_options]);
12293
+ const { handleSuccess } = useRouteModal();
12294
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12295
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12296
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12297
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12298
+ const onSubmit = async () => {
12299
+ setIsSubmitting(true);
12300
+ let requestSucceeded = false;
12301
+ await requestOrderEdit(void 0, {
12302
+ onError: (e) => {
12303
+ toast.error(`Failed to request order edit: ${e.message}`);
12304
+ },
12305
+ onSuccess: () => {
12306
+ requestSucceeded = true;
12307
+ }
12308
+ });
12309
+ if (!requestSucceeded) {
12310
+ setIsSubmitting(false);
12311
+ return;
12312
+ }
12313
+ await confirmOrderEdit(void 0, {
12314
+ onError: (e) => {
12315
+ toast.error(`Failed to confirm order edit: ${e.message}`);
12316
+ },
12317
+ onSuccess: () => {
12318
+ handleSuccess();
12319
+ },
12320
+ onSettled: () => {
12321
+ setIsSubmitting(false);
12322
+ }
12323
+ });
12324
+ };
12325
+ const onKeydown = useCallback(
12326
+ (e) => {
12327
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12328
+ if (data || isSubmitting) {
12329
+ return;
12330
+ }
12331
+ onSubmit();
12332
+ }
12333
+ },
12334
+ [data, isSubmitting, onSubmit]
12335
+ );
12336
+ useEffect(() => {
12337
+ document.addEventListener("keydown", onKeydown);
12338
+ return () => {
12339
+ document.removeEventListener("keydown", onKeydown);
12340
+ };
12341
+ }, [onKeydown]);
12342
+ return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12343
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
12344
+ /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12345
+ /* @__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: [
12346
+ /* @__PURE__ */ jsxs("div", { children: [
12347
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12348
+ /* @__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." }) })
12349
+ ] }),
12350
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12351
+ /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12352
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
12353
+ /* @__PURE__ */ jsx(
12354
+ Text,
12355
+ {
12356
+ size: "xsmall",
12357
+ weight: "plus",
12358
+ className: "text-ui-fg-muted",
12359
+ children: "Shipping profile"
12360
+ }
12361
+ ),
12362
+ /* @__PURE__ */ jsx(
12363
+ Text,
12364
+ {
12365
+ size: "xsmall",
12366
+ weight: "plus",
12367
+ className: "text-ui-fg-muted",
12368
+ children: "Action"
12369
+ }
12370
+ )
12371
+ ] }),
12372
+ /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12373
+ var _a2, _b, _c, _d, _e, _f, _g;
12374
+ const items = getItemsWithShippingProfile(
12375
+ profile.id,
12376
+ order.items
12377
+ );
12378
+ const hasItems = items.length > 0;
12379
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12380
+ (option) => option.shipping_profile_id === profile.id
12381
+ );
12382
+ const shippingMethod = preview.shipping_methods.find(
12383
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12384
+ );
12385
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
12386
+ (action) => action.action === "SHIPPING_ADD"
12387
+ );
12388
+ return /* @__PURE__ */ jsxs(
12389
+ Accordion.Item,
12390
+ {
12391
+ value: profile.id,
12392
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12393
+ children: [
12394
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
12395
+ /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
12396
+ /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
12397
+ IconButton,
12398
+ {
12399
+ size: "2xsmall",
12400
+ variant: "transparent",
12401
+ className: "group/trigger",
12402
+ disabled: !hasItems,
12403
+ children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
12404
+ }
12405
+ ) }),
12406
+ !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12407
+ /* @__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" }) }) }),
12408
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
12409
+ /* @__PURE__ */ jsx(
12410
+ Text,
12411
+ {
12412
+ size: "small",
12413
+ weight: "plus",
12414
+ leading: "compact",
12415
+ children: profile.name
12416
+ }
12417
+ ),
12418
+ /* @__PURE__ */ jsxs(
12419
+ Text,
12420
+ {
12421
+ size: "small",
12422
+ leading: "compact",
12423
+ className: "text-ui-fg-subtle",
12424
+ children: [
12425
+ items.length,
12426
+ " ",
12427
+ pluralize(items.length, "items", "item")
12428
+ ]
12429
+ }
12430
+ )
12431
+ ] })
12432
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
12433
+ /* @__PURE__ */ jsx(
12434
+ Tooltip,
12435
+ {
12436
+ content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
12437
+ var _a3, _b2, _c2;
12438
+ return /* @__PURE__ */ jsx(
12439
+ "li",
12440
+ {
12441
+ 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})`
12442
+ },
12443
+ item.id
12444
+ );
12445
+ }) }),
12446
+ children: /* @__PURE__ */ jsxs(
12447
+ Badge,
12448
+ {
12449
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12450
+ size: "xsmall",
12451
+ children: [
12452
+ /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
12453
+ /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
12454
+ items.reduce(
12455
+ (acc, item) => acc + item.quantity,
12456
+ 0
12457
+ ),
12458
+ "x",
12459
+ " ",
12460
+ pluralize(items.length, "items", "item")
12461
+ ] })
12462
+ ]
12463
+ }
12464
+ )
12465
+ }
12466
+ ),
12467
+ /* @__PURE__ */ jsx(
12468
+ Tooltip,
12469
+ {
12470
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12471
+ children: /* @__PURE__ */ jsxs(
12472
+ Badge,
12473
+ {
12474
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12475
+ size: "xsmall",
12476
+ children: [
12477
+ /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
12478
+ /* @__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 })
12479
+ ]
12480
+ }
12481
+ )
12482
+ }
12483
+ ),
12484
+ /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
12485
+ Badge,
12486
+ {
12487
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12488
+ size: "xsmall",
12489
+ children: [
12490
+ /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
12491
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
12492
+ ]
12493
+ }
12494
+ ) })
12495
+ ] })
12496
+ ] }),
12497
+ shippingOption ? /* @__PURE__ */ jsx(
12498
+ ActionMenu,
12499
+ {
12500
+ groups: [
12501
+ {
12502
+ actions: [
12503
+ hasItems ? {
12504
+ label: "Edit shipping option",
12505
+ icon: /* @__PURE__ */ jsx(Channels, {}),
12506
+ onClick: () => {
12507
+ setIsOpen(
12508
+ STACKED_FOCUS_MODAL_ID,
12509
+ true
12510
+ );
12511
+ setData({
12512
+ shippingProfileId: profile.id,
12513
+ shippingOption,
12514
+ shippingMethod
12515
+ });
12516
+ }
12517
+ } : void 0,
12518
+ {
12519
+ label: "Remove shipping option",
12520
+ icon: /* @__PURE__ */ jsx(Trash, {}),
12521
+ onClick: () => {
12522
+ if (shippingMethod) {
12523
+ if (addShippingMethodAction) {
12524
+ removeActionShippingMethod(
12525
+ addShippingMethodAction.id
12526
+ );
12527
+ } else {
12528
+ removeShippingMethod(
12529
+ shippingMethod.id
12530
+ );
12531
+ }
12532
+ }
12533
+ }
12534
+ }
12535
+ ].filter(Boolean)
12536
+ }
12537
+ ]
12538
+ }
12539
+ ) : /* @__PURE__ */ jsx(
12540
+ StackedModalTrigger,
12541
+ {
12542
+ shippingProfileId: profile.id,
12543
+ shippingOption,
12544
+ shippingMethod,
12545
+ setData,
12546
+ children: "Add shipping option"
12547
+ }
12548
+ )
12549
+ ] }),
12550
+ /* @__PURE__ */ jsxs(Accordion.Content, { children: [
12551
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12552
+ items.map((item, idx) => {
12553
+ var _a3, _b2, _c2, _d2, _e2;
12554
+ return /* @__PURE__ */ jsxs("div", { children: [
12555
+ /* @__PURE__ */ jsxs(
12556
+ "div",
12557
+ {
12558
+ className: "flex items-center gap-x-3 px-3",
12559
+ children: [
12560
+ /* @__PURE__ */ jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsx(
12561
+ Divider,
12562
+ {
12563
+ variant: "dashed",
12564
+ orientation: "vertical"
12565
+ }
12566
+ ) }),
12567
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
12568
+ /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
12569
+ Text,
12570
+ {
12571
+ size: "small",
12572
+ leading: "compact",
12573
+ className: "text-ui-fg-subtle",
12574
+ children: [
12575
+ item.quantity,
12576
+ "x"
12577
+ ]
12578
+ }
12579
+ ) }),
12580
+ /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
12581
+ /* @__PURE__ */ jsxs("div", { children: [
12582
+ /* @__PURE__ */ jsxs(
12583
+ Text,
12584
+ {
12585
+ size: "small",
12586
+ leading: "compact",
12587
+ weight: "plus",
12588
+ children: [
12589
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12590
+ " (",
12591
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12592
+ ")"
12593
+ ]
12594
+ }
12595
+ ),
12596
+ /* @__PURE__ */ jsx(
12597
+ Text,
12598
+ {
12599
+ size: "small",
12600
+ leading: "compact",
12601
+ className: "text-ui-fg-subtle",
12602
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12603
+ }
12604
+ )
12605
+ ] })
12606
+ ] })
12607
+ ]
12608
+ },
12609
+ item.id
12610
+ ),
12611
+ idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
12612
+ ] }, item.id);
12613
+ })
12614
+ ] })
12615
+ ]
12616
+ },
12617
+ profile.id
12618
+ );
12619
+ }) })
12620
+ ] }) })
12621
+ ] }) }),
12622
+ /* @__PURE__ */ jsx(
12623
+ StackedFocusModal,
12624
+ {
12625
+ id: STACKED_FOCUS_MODAL_ID,
12626
+ onOpenChangeCallback: (open) => {
12627
+ if (!open) {
12628
+ setData(null);
12629
+ }
12630
+ return open;
12631
+ },
12632
+ children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
12633
+ }
12634
+ )
12635
+ ] }),
12636
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12637
+ /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12638
+ /* @__PURE__ */ jsx(
12639
+ Button,
12640
+ {
12641
+ size: "small",
12642
+ type: "button",
12643
+ isLoading: isSubmitting,
12644
+ onClick: onSubmit,
12645
+ children: "Save"
12646
+ }
12647
+ )
12648
+ ] }) })
12649
+ ] });
12650
+ };
12651
+ const StackedModalTrigger = ({
12652
+ shippingProfileId,
12653
+ shippingOption,
12654
+ shippingMethod,
12655
+ setData,
12656
+ children
12657
+ }) => {
12658
+ const { setIsOpen, getIsOpen } = useStackedModal();
12659
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12660
+ const onToggle = () => {
12661
+ if (isOpen) {
12662
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12663
+ setData(null);
12664
+ } else {
12665
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12666
+ setData({
12667
+ shippingProfileId,
12668
+ shippingOption,
12669
+ shippingMethod
12670
+ });
12671
+ }
12672
+ };
12673
+ return /* @__PURE__ */ jsx(
12674
+ Button,
12675
+ {
12676
+ size: "small",
12677
+ variant: "secondary",
12678
+ onClick: onToggle,
12679
+ className: "text-ui-fg-primary shrink-0",
12680
+ children
12681
+ }
12682
+ );
12683
+ };
12684
+ const ShippingProfileForm = ({
12685
+ data,
12686
+ order,
12687
+ preview
12688
+ }) => {
12689
+ var _a, _b, _c, _d, _e, _f;
12690
+ const { setIsOpen } = useStackedModal();
12691
+ const form = useForm({
12692
+ resolver: zodResolver(shippingMethodSchema),
12693
+ defaultValues: {
12694
+ 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,
12695
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12696
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12697
+ }
12698
+ });
12699
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12700
+ const {
12701
+ mutateAsync: updateShippingMethod,
12702
+ isPending: isUpdatingShippingMethod
12703
+ } = useDraftOrderUpdateShippingMethod(order.id);
12704
+ const onSubmit = form.handleSubmit(async (values) => {
12705
+ if (isEqual(values, form.formState.defaultValues)) {
12706
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12707
+ return;
12708
+ }
12709
+ if (data.shippingMethod) {
12710
+ await updateShippingMethod(
12711
+ {
12712
+ method_id: data.shippingMethod.id,
12713
+ shipping_option_id: values.shipping_option_id,
12714
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12715
+ },
12716
+ {
12717
+ onError: (e) => {
12718
+ toast.error(e.message);
12719
+ },
12720
+ onSuccess: () => {
12721
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12722
+ }
12723
+ }
12724
+ );
12725
+ return;
12726
+ }
12727
+ await addShippingMethod(
12728
+ {
12729
+ shipping_option_id: values.shipping_option_id,
12730
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12731
+ },
12732
+ {
12733
+ onError: (e) => {
12734
+ toast.error(e.message);
12735
+ },
12736
+ onSuccess: () => {
12737
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12738
+ }
12739
+ }
12740
+ );
12741
+ });
12742
+ return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12743
+ KeyboundForm,
12744
+ {
12745
+ className: "flex h-full flex-col overflow-hidden",
12746
+ onSubmit,
12747
+ children: [
12748
+ /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12749
+ /* @__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: [
12750
+ /* @__PURE__ */ jsxs("div", { children: [
12751
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12752
+ /* @__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." }) })
12753
+ ] }),
12754
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12755
+ /* @__PURE__ */ jsx(
12756
+ LocationField,
12980
12757
  {
12981
- width: "12",
12982
- height: "12",
12983
- fill: "white",
12984
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12758
+ control: form.control,
12759
+ setValue: form.setValue
12985
12760
  }
12986
- ) }),
12987
- /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
12988
- "rect",
12761
+ ),
12762
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12763
+ /* @__PURE__ */ jsx(
12764
+ ShippingOptionField,
12989
12765
  {
12990
- width: "12",
12991
- height: "12",
12992
- fill: "white",
12993
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12766
+ shippingProfileId: data.shippingProfileId,
12767
+ preview,
12768
+ control: form.control
12994
12769
  }
12995
- ) }),
12996
- /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
12997
- "rect",
12770
+ ),
12771
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12772
+ /* @__PURE__ */ jsx(
12773
+ CustomAmountField,
12998
12774
  {
12999
- width: "12",
13000
- height: "12",
13001
- fill: "white",
13002
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12775
+ control: form.control,
12776
+ currencyCode: order.currency_code
13003
12777
  }
13004
- ) }),
13005
- /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
13006
- "rect",
12778
+ ),
12779
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12780
+ /* @__PURE__ */ jsx(
12781
+ ItemsPreview,
12782
+ {
12783
+ order,
12784
+ shippingProfileId: data.shippingProfileId
12785
+ }
12786
+ )
12787
+ ] }) }) }),
12788
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12789
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12790
+ /* @__PURE__ */ jsx(
12791
+ Button,
12792
+ {
12793
+ size: "small",
12794
+ type: "submit",
12795
+ isLoading: isPending || isUpdatingShippingMethod,
12796
+ children: data.shippingMethod ? "Update" : "Add"
12797
+ }
12798
+ )
12799
+ ] }) })
12800
+ ]
12801
+ }
12802
+ ) }) });
12803
+ };
12804
+ const shippingMethodSchema = objectType({
12805
+ location_id: stringType(),
12806
+ shipping_option_id: stringType(),
12807
+ custom_amount: unionType([numberType(), stringType()]).optional()
12808
+ });
12809
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12810
+ const matches = order.items.filter(
12811
+ (item) => {
12812
+ var _a, _b, _c;
12813
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12814
+ }
12815
+ );
12816
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12817
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12818
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12819
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12820
+ ] }) }),
12821
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12822
+ /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12823
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12824
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12825
+ ] }),
12826
+ /* @__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(
12827
+ "div",
12828
+ {
12829
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12830
+ children: [
12831
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12832
+ /* @__PURE__ */ jsx(
12833
+ Thumbnail,
12834
+ {
12835
+ thumbnail: item.thumbnail,
12836
+ alt: item.product_title ?? void 0
12837
+ }
12838
+ ),
12839
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12840
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12841
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12842
+ /* @__PURE__ */ jsxs(
12843
+ Text,
12844
+ {
12845
+ size: "small",
12846
+ leading: "compact",
12847
+ className: "text-ui-fg-subtle",
12848
+ children: [
12849
+ "(",
12850
+ item.variant_title,
12851
+ ")"
12852
+ ]
12853
+ }
12854
+ )
12855
+ ] }),
12856
+ /* @__PURE__ */ jsx(
12857
+ Text,
12858
+ {
12859
+ size: "small",
12860
+ leading: "compact",
12861
+ className: "text-ui-fg-subtle",
12862
+ children: item.variant_sku
12863
+ }
12864
+ )
12865
+ ] })
12866
+ ] }),
12867
+ /* @__PURE__ */ jsxs(
12868
+ Text,
12869
+ {
12870
+ size: "small",
12871
+ leading: "compact",
12872
+ className: "text-ui-fg-subtle",
12873
+ children: [
12874
+ item.quantity,
12875
+ "x"
12876
+ ]
12877
+ }
12878
+ )
12879
+ ]
12880
+ },
12881
+ item.id
12882
+ )) : /* @__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: [
12883
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12884
+ /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12885
+ 'No items found for "',
12886
+ query,
12887
+ '".'
12888
+ ] })
12889
+ ] }) })
12890
+ ] })
12891
+ ] });
12892
+ };
12893
+ const LocationField = ({ control, setValue }) => {
12894
+ const locations = useComboboxData({
12895
+ queryKey: ["locations"],
12896
+ queryFn: async (params) => {
12897
+ return await sdk.admin.stockLocation.list(params);
12898
+ },
12899
+ getOptions: (data) => {
12900
+ return data.stock_locations.map((location) => ({
12901
+ label: location.name,
12902
+ value: location.id
12903
+ }));
12904
+ }
12905
+ });
12906
+ return /* @__PURE__ */ jsx(
12907
+ Form$2.Field,
12908
+ {
12909
+ control,
12910
+ name: "location_id",
12911
+ render: ({ field: { onChange, ...field } }) => {
12912
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12913
+ /* @__PURE__ */ jsxs("div", { children: [
12914
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12915
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12916
+ ] }),
12917
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12918
+ Combobox,
13007
12919
  {
13008
- width: "12",
13009
- height: "12",
13010
- fill: "white",
13011
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12920
+ options: locations.options,
12921
+ fetchNextPage: locations.fetchNextPage,
12922
+ isFetchingNextPage: locations.isFetchingNextPage,
12923
+ searchValue: locations.searchValue,
12924
+ onSearchValueChange: locations.onSearchValueChange,
12925
+ placeholder: "Select location",
12926
+ onChange: (value) => {
12927
+ setValue("shipping_option_id", "", {
12928
+ shouldDirty: true,
12929
+ shouldTouch: true
12930
+ });
12931
+ onChange(value);
12932
+ },
12933
+ ...field
13012
12934
  }
13013
- ) }),
13014
- /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
13015
- "rect",
12935
+ ) })
12936
+ ] }) });
12937
+ }
12938
+ }
12939
+ );
12940
+ };
12941
+ const ShippingOptionField = ({
12942
+ shippingProfileId,
12943
+ preview,
12944
+ control
12945
+ }) => {
12946
+ var _a;
12947
+ const locationId = useWatch({ control, name: "location_id" });
12948
+ const shippingOptions = useComboboxData({
12949
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12950
+ queryFn: async (params) => {
12951
+ return await sdk.admin.shippingOption.list({
12952
+ ...params,
12953
+ stock_location_id: locationId,
12954
+ shipping_profile_id: shippingProfileId
12955
+ });
12956
+ },
12957
+ getOptions: (data) => {
12958
+ return data.shipping_options.map((option) => {
12959
+ var _a2;
12960
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12961
+ (r) => r.attribute === "is_return" && r.value === "true"
12962
+ )) {
12963
+ return void 0;
12964
+ }
12965
+ return {
12966
+ label: option.name,
12967
+ value: option.id
12968
+ };
12969
+ }).filter(Boolean);
12970
+ },
12971
+ enabled: !!locationId && !!shippingProfileId,
12972
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12973
+ });
12974
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12975
+ return /* @__PURE__ */ jsx(
12976
+ Form$2.Field,
12977
+ {
12978
+ control,
12979
+ name: "shipping_option_id",
12980
+ render: ({ field }) => {
12981
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12982
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12983
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12984
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12985
+ ] }),
12986
+ /* @__PURE__ */ jsx(
12987
+ ConditionalTooltip,
13016
12988
  {
13017
- width: "12",
13018
- height: "12",
13019
- fill: "white",
13020
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12989
+ content: tooltipContent,
12990
+ showTooltip: !locationId || !shippingProfileId,
12991
+ children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12992
+ Combobox,
12993
+ {
12994
+ options: shippingOptions.options,
12995
+ fetchNextPage: shippingOptions.fetchNextPage,
12996
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12997
+ searchValue: shippingOptions.searchValue,
12998
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12999
+ placeholder: "Select shipping option",
13000
+ ...field,
13001
+ disabled: !locationId || !shippingProfileId
13002
+ }
13003
+ ) }) })
13021
13004
  }
13022
- ) }),
13023
- /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
13024
- "rect",
13005
+ )
13006
+ ] }) });
13007
+ }
13008
+ }
13009
+ );
13010
+ };
13011
+ const CustomAmountField = ({
13012
+ control,
13013
+ currencyCode
13014
+ }) => {
13015
+ return /* @__PURE__ */ jsx(
13016
+ Form$2.Field,
13017
+ {
13018
+ control,
13019
+ name: "custom_amount",
13020
+ render: ({ field: { onChange, ...field } }) => {
13021
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13022
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
13023
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
13024
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
13025
+ ] }),
13026
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
13027
+ CurrencyInput,
13025
13028
  {
13026
- width: "12",
13027
- height: "12",
13028
- fill: "white",
13029
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13029
+ ...field,
13030
+ onValueChange: (value) => onChange(value),
13031
+ symbol: getNativeSymbol(currencyCode),
13032
+ code: currencyCode
13030
13033
  }
13031
13034
  ) })
13032
- ] })
13033
- ]
13035
+ ] });
13036
+ }
13034
13037
  }
13035
13038
  );
13036
13039
  };
13037
- const schema = objectType({
13038
- customer_id: stringType().min(1)
13039
- });
13040
13040
  const widgetModule = { widgets: [] };
13041
13041
  const routeModule = {
13042
13042
  routes: [
@@ -13061,10 +13061,6 @@ const routeModule = {
13061
13061
  Component: BillingAddress,
13062
13062
  path: "/draft-orders/:id/billing-address"
13063
13063
  },
13064
- {
13065
- Component: CustomItems,
13066
- path: "/draft-orders/:id/custom-items"
13067
- },
13068
13064
  {
13069
13065
  Component: Email,
13070
13066
  path: "/draft-orders/:id/email"
@@ -13085,10 +13081,6 @@ const routeModule = {
13085
13081
  Component: SalesChannel,
13086
13082
  path: "/draft-orders/:id/sales-channel"
13087
13083
  },
13088
- {
13089
- Component: Shipping,
13090
- path: "/draft-orders/:id/shipping"
13091
- },
13092
13084
  {
13093
13085
  Component: ShippingAddress,
13094
13086
  path: "/draft-orders/:id/shipping-address"
@@ -13096,6 +13088,14 @@ const routeModule = {
13096
13088
  {
13097
13089
  Component: TransferOwnership,
13098
13090
  path: "/draft-orders/:id/transfer-ownership"
13091
+ },
13092
+ {
13093
+ Component: CustomItems,
13094
+ path: "/draft-orders/:id/custom-items"
13095
+ },
13096
+ {
13097
+ Component: Shipping,
13098
+ path: "/draft-orders/:id/shipping"
13099
13099
  }
13100
13100
  ]
13101
13101
  }