@medusajs/draft-order 2.10.4-snapshot-20251006181454 → 2.10.4-snapshot-20251007075945

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