@medusajs/draft-order 2.11.4-preview-20251113060137 → 2.11.4-preview-20251113120143

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