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

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 +1034 -1034
  2. package/.medusa/server/src/admin/index.mjs +1034 -1034
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -9573,10 +9573,31 @@ const ID = () => {
9573
9573
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9574
9574
  ] });
9575
9575
  };
9576
- const BillingAddress = () => {
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
+ const Email = () => {
9577
9598
  const { id } = reactRouterDom.useParams();
9578
9599
  const { order, isPending, isError, error } = useOrder(id, {
9579
- fields: "+billing_address"
9600
+ fields: "+email"
9580
9601
  });
9581
9602
  if (isError) {
9582
9603
  throw error;
@@ -9584,34 +9605,24 @@ const BillingAddress = () => {
9584
9605
  const isReady = !isPending && !!order;
9585
9606
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9586
9607
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9587
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
9588
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9608
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9609
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9589
9610
  ] }),
9590
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9611
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9591
9612
  ] });
9592
9613
  };
9593
- const BillingAddressForm = ({ order }) => {
9594
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9614
+ const EmailForm = ({ order }) => {
9595
9615
  const form = reactHookForm.useForm({
9596
9616
  defaultValues: {
9597
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9598
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9599
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9600
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9601
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9602
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9603
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9604
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9605
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9606
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9617
+ email: order.email ?? ""
9607
9618
  },
9608
- resolver: zod.zodResolver(schema$5)
9619
+ resolver: zod.zodResolver(schema$4)
9609
9620
  });
9610
9621
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9611
9622
  const { handleSuccess } = useRouteModal();
9612
9623
  const onSubmit = form.handleSubmit(async (data) => {
9613
9624
  await mutateAsync(
9614
- { billing_address: data },
9625
+ { email: data.email },
9615
9626
  {
9616
9627
  onSuccess: () => {
9617
9628
  handleSuccess();
@@ -9628,132 +9639,18 @@ const BillingAddressForm = ({ order }) => {
9628
9639
  className: "flex flex-1 flex-col overflow-hidden",
9629
9640
  onSubmit,
9630
9641
  children: [
9631
- /* @__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: [
9632
- /* @__PURE__ */ jsxRuntime.jsx(
9633
- Form$2.Field,
9634
- {
9635
- control: form.control,
9636
- name: "country_code",
9637
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9638
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
9639
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
9640
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9641
- ] })
9642
- }
9643
- ),
9644
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9645
- /* @__PURE__ */ jsxRuntime.jsx(
9646
- Form$2.Field,
9647
- {
9648
- control: form.control,
9649
- name: "first_name",
9650
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9651
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
9652
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9653
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9654
- ] })
9655
- }
9656
- ),
9657
- /* @__PURE__ */ jsxRuntime.jsx(
9658
- Form$2.Field,
9659
- {
9660
- control: form.control,
9661
- name: "last_name",
9662
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9663
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
9664
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9665
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9666
- ] })
9667
- }
9668
- )
9669
- ] }),
9670
- /* @__PURE__ */ jsxRuntime.jsx(
9671
- Form$2.Field,
9672
- {
9673
- control: form.control,
9674
- name: "company",
9675
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9676
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
9677
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9678
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9679
- ] })
9680
- }
9681
- ),
9682
- /* @__PURE__ */ jsxRuntime.jsx(
9683
- Form$2.Field,
9684
- {
9685
- control: form.control,
9686
- name: "address_1",
9687
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9688
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
9689
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9690
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9691
- ] })
9692
- }
9693
- ),
9694
- /* @__PURE__ */ jsxRuntime.jsx(
9695
- Form$2.Field,
9696
- {
9697
- control: form.control,
9698
- name: "address_2",
9699
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9700
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9701
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9702
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9703
- ] })
9704
- }
9705
- ),
9706
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9707
- /* @__PURE__ */ jsxRuntime.jsx(
9708
- Form$2.Field,
9709
- {
9710
- control: form.control,
9711
- name: "postal_code",
9712
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9713
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
9714
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9715
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9716
- ] })
9717
- }
9718
- ),
9719
- /* @__PURE__ */ jsxRuntime.jsx(
9720
- Form$2.Field,
9721
- {
9722
- control: form.control,
9723
- name: "city",
9724
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9725
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
9726
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9727
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9728
- ] })
9729
- }
9730
- )
9731
- ] }),
9732
- /* @__PURE__ */ jsxRuntime.jsx(
9733
- Form$2.Field,
9734
- {
9735
- control: form.control,
9736
- name: "province",
9737
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9738
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9739
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9740
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9741
- ] })
9742
- }
9743
- ),
9744
- /* @__PURE__ */ jsxRuntime.jsx(
9745
- Form$2.Field,
9746
- {
9747
- control: form.control,
9748
- name: "phone",
9749
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9750
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
9751
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9752
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9753
- ] })
9754
- }
9755
- )
9756
- ] }) }),
9642
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9643
+ Form$2.Field,
9644
+ {
9645
+ control: form.control,
9646
+ name: "email",
9647
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9648
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9649
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9650
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9651
+ ] })
9652
+ }
9653
+ ) }),
9757
9654
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9758
9655
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9759
9656
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
@@ -9762,25 +9659,6 @@ const BillingAddressForm = ({ order }) => {
9762
9659
  }
9763
9660
  ) });
9764
9661
  };
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
9662
  const schema$4 = objectType({
9785
9663
  email: stringType().email()
9786
9664
  });
@@ -11694,624 +11572,80 @@ const ShippingAddressForm = ({ order }) => {
11694
11572
  ) });
11695
11573
  };
11696
11574
  const schema$2 = addressSchema;
11697
- const TransferOwnership = () => {
11575
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11576
+ const Shipping = () => {
11577
+ var _a;
11698
11578
  const { id } = reactRouterDom.useParams();
11699
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11700
- fields: "id,customer_id,customer.*"
11579
+ const { order, isPending, isError, error } = useOrder(id, {
11580
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11701
11581
  });
11582
+ const {
11583
+ order: preview,
11584
+ isPending: isPreviewPending,
11585
+ isError: isPreviewError,
11586
+ error: previewError
11587
+ } = useOrderPreview(id);
11588
+ useInitiateOrderEdit({ preview });
11589
+ const { onCancel } = useCancelOrderEdit({ preview });
11702
11590
  if (isError) {
11703
11591
  throw error;
11704
11592
  }
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
- ] });
11593
+ if (isPreviewError) {
11594
+ throw previewError;
11595
+ }
11596
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11597
+ const isReady = preview && !isPreviewPending && order && !isPending;
11598
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11599
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11600
+ /* @__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: [
11601
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11602
+ /* @__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." }) })
11603
+ ] }) }) }),
11604
+ /* @__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" }) }) })
11605
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11606
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11607
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11608
+ ] }) });
11713
11609
  };
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,
11610
+ const ShippingForm = ({ preview, order }) => {
11611
+ var _a;
11612
+ const { setIsOpen } = useStackedModal();
11613
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11614
+ const [data, setData] = React.useState(null);
11615
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11616
+ const { shipping_options } = useShippingOptions(
11745
11617
  {
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
- ] }),
11761
- /* @__PURE__ */ jsxRuntime.jsx(
11762
- CustomerField,
11763
- {
11764
- control: form.control,
11765
- currentCustomerId: order.customer_id
11766
- }
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" })
11772
- ] }) })
11773
- ]
11774
- }
11775
- ) });
11776
- };
11777
- const CustomerField = ({ control, currentCustomerId }) => {
11778
- const customers = useComboboxData({
11779
- queryFn: async (params) => {
11780
- return await sdk.admin.customer.list({
11781
- ...params,
11782
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
11783
- });
11618
+ id: appliedShippingOptionIds,
11619
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11784
11620
  },
11785
- queryKey: ["customers"],
11786
- getOptions: (data) => {
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
- });
11794
- }
11795
- });
11796
- return /* @__PURE__ */ jsxRuntime.jsx(
11797
- Form$2.Field,
11798
11621
  {
11799
- name: "customer_id",
11800
- control,
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
- ] })
11622
+ enabled: appliedShippingOptionIds.length > 0
11820
11623
  }
11821
11624
  );
11822
- };
11823
- const Illustration = () => {
11824
- return /* @__PURE__ */ jsxRuntime.jsxs(
11825
- "svg",
11826
- {
11827
- width: "280",
11828
- height: "180",
11829
- viewBox: "0 0 280 180",
11830
- fill: "none",
11831
- xmlns: "http://www.w3.org/2000/svg",
11832
- children: [
11833
- /* @__PURE__ */ jsxRuntime.jsx(
11834
- "rect",
11835
- {
11836
- x: "0.00428286",
11837
- y: "-0.742904",
11838
- width: "33.5",
11839
- height: "65.5",
11840
- rx: "6.75",
11841
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
11842
- fill: "#D4D4D8",
11843
- stroke: "#52525B",
11844
- strokeWidth: "1.5"
11845
- }
11846
- ),
11847
- /* @__PURE__ */ jsxRuntime.jsx(
11848
- "rect",
11849
- {
11850
- x: "0.00428286",
11851
- y: "-0.742904",
11852
- width: "33.5",
11853
- height: "65.5",
11854
- rx: "6.75",
11855
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
11856
- fill: "white",
11857
- stroke: "#52525B",
11858
- strokeWidth: "1.5"
11859
- }
11860
- ),
11861
- /* @__PURE__ */ jsxRuntime.jsx(
11862
- "path",
11863
- {
11864
- d: "M180.579 107.142L179.126 107.959",
11865
- stroke: "#52525B",
11866
- strokeWidth: "1.5",
11867
- strokeLinecap: "round",
11868
- strokeLinejoin: "round"
11869
- }
11870
- ),
11871
- /* @__PURE__ */ jsxRuntime.jsx(
11872
- "path",
11873
- {
11874
- opacity: "0.88",
11875
- d: "M182.305 109.546L180.257 109.534",
11876
- stroke: "#52525B",
11877
- strokeWidth: "1.5",
11878
- strokeLinecap: "round",
11879
- strokeLinejoin: "round"
11880
- }
11881
- ),
11882
- /* @__PURE__ */ jsxRuntime.jsx(
11883
- "path",
11884
- {
11885
- opacity: "0.75",
11886
- d: "M180.551 111.93L179.108 111.096",
11887
- stroke: "#52525B",
11888
- strokeWidth: "1.5",
11889
- strokeLinecap: "round",
11890
- strokeLinejoin: "round"
11891
- }
11892
- ),
11893
- /* @__PURE__ */ jsxRuntime.jsx(
11894
- "path",
11895
- {
11896
- opacity: "0.63",
11897
- d: "M176.347 112.897L176.354 111.73",
11898
- stroke: "#52525B",
11899
- strokeWidth: "1.5",
11900
- strokeLinecap: "round",
11901
- strokeLinejoin: "round"
11902
- }
11903
- ),
11904
- /* @__PURE__ */ jsxRuntime.jsx(
11905
- "path",
11906
- {
11907
- opacity: "0.5",
11908
- d: "M172.153 111.881L173.606 111.064",
11909
- stroke: "#52525B",
11910
- strokeWidth: "1.5",
11911
- strokeLinecap: "round",
11912
- strokeLinejoin: "round"
11913
- }
11914
- ),
11915
- /* @__PURE__ */ jsxRuntime.jsx(
11916
- "path",
11917
- {
11918
- opacity: "0.38",
11919
- d: "M170.428 109.478L172.476 109.489",
11920
- stroke: "#52525B",
11921
- strokeWidth: "1.5",
11922
- strokeLinecap: "round",
11923
- strokeLinejoin: "round"
11924
- }
11925
- ),
11926
- /* @__PURE__ */ jsxRuntime.jsx(
11927
- "path",
11928
- {
11929
- opacity: "0.25",
11930
- d: "M172.181 107.094L173.624 107.928",
11931
- stroke: "#52525B",
11932
- strokeWidth: "1.5",
11933
- strokeLinecap: "round",
11934
- strokeLinejoin: "round"
11935
- }
11936
- ),
11937
- /* @__PURE__ */ jsxRuntime.jsx(
11938
- "path",
11939
- {
11940
- opacity: "0.13",
11941
- d: "M176.386 106.126L176.379 107.294",
11942
- stroke: "#52525B",
11943
- strokeWidth: "1.5",
11944
- strokeLinecap: "round",
11945
- strokeLinejoin: "round"
11946
- }
11947
- ),
11948
- /* @__PURE__ */ jsxRuntime.jsx(
11949
- "rect",
11950
- {
11951
- width: "12",
11952
- height: "3",
11953
- rx: "1.5",
11954
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
11955
- fill: "#D4D4D8"
11956
- }
11957
- ),
11958
- /* @__PURE__ */ jsxRuntime.jsx(
11959
- "rect",
11960
- {
11961
- x: "0.00428286",
11962
- y: "-0.742904",
11963
- width: "33.5",
11964
- height: "65.5",
11965
- rx: "6.75",
11966
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
11967
- fill: "#D4D4D8",
11968
- stroke: "#52525B",
11969
- strokeWidth: "1.5"
11970
- }
11971
- ),
11972
- /* @__PURE__ */ jsxRuntime.jsx(
11973
- "rect",
11974
- {
11975
- x: "0.00428286",
11976
- y: "-0.742904",
11977
- width: "33.5",
11978
- height: "65.5",
11979
- rx: "6.75",
11980
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
11981
- fill: "white",
11982
- stroke: "#52525B",
11983
- strokeWidth: "1.5"
11984
- }
11985
- ),
11986
- /* @__PURE__ */ jsxRuntime.jsx(
11987
- "rect",
11988
- {
11989
- width: "12",
11990
- height: "3",
11991
- rx: "1.5",
11992
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
11993
- fill: "#D4D4D8"
11994
- }
11995
- ),
11996
- /* @__PURE__ */ jsxRuntime.jsx(
11997
- "rect",
11998
- {
11999
- width: "17",
12000
- height: "3",
12001
- rx: "1.5",
12002
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12003
- fill: "#D4D4D8"
12004
- }
12005
- ),
12006
- /* @__PURE__ */ jsxRuntime.jsx(
12007
- "rect",
12008
- {
12009
- width: "12",
12010
- height: "3",
12011
- rx: "1.5",
12012
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12013
- fill: "#D4D4D8"
12014
- }
12015
- ),
12016
- /* @__PURE__ */ jsxRuntime.jsx(
12017
- "path",
12018
- {
12019
- d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12020
- fill: "#A1A1AA"
12021
- }
12022
- ),
12023
- /* @__PURE__ */ jsxRuntime.jsx(
12024
- "rect",
12025
- {
12026
- width: "17",
12027
- height: "3",
12028
- rx: "1.5",
12029
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12030
- fill: "#A1A1AA"
12031
- }
12032
- ),
12033
- /* @__PURE__ */ jsxRuntime.jsx(
12034
- "rect",
12035
- {
12036
- width: "12",
12037
- height: "3",
12038
- rx: "1.5",
12039
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12040
- fill: "#A1A1AA"
12041
- }
12042
- ),
12043
- /* @__PURE__ */ jsxRuntime.jsx(
12044
- "path",
12045
- {
12046
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12047
- fill: "#52525B"
12048
- }
12049
- ),
12050
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12051
- "path",
12052
- {
12053
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12054
- stroke: "#A1A1AA",
12055
- strokeWidth: "1.5",
12056
- strokeLinecap: "round",
12057
- strokeLinejoin: "round"
12058
- }
12059
- ) }),
12060
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12061
- "path",
12062
- {
12063
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12064
- stroke: "#A1A1AA",
12065
- strokeWidth: "1.5",
12066
- strokeLinecap: "round",
12067
- strokeLinejoin: "round"
12068
- }
12069
- ) }),
12070
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12071
- "path",
12072
- {
12073
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12074
- stroke: "#A1A1AA",
12075
- strokeWidth: "1.5",
12076
- strokeLinecap: "round",
12077
- strokeLinejoin: "round"
12078
- }
12079
- ) }),
12080
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12081
- "path",
12082
- {
12083
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12084
- stroke: "#A1A1AA",
12085
- strokeWidth: "1.5",
12086
- strokeLinecap: "round",
12087
- strokeLinejoin: "round"
12088
- }
12089
- ) }),
12090
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12091
- "path",
12092
- {
12093
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12094
- stroke: "#A1A1AA",
12095
- strokeWidth: "1.5",
12096
- strokeLinecap: "round",
12097
- strokeLinejoin: "round"
12098
- }
12099
- ) }),
12100
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12101
- "path",
12102
- {
12103
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12104
- stroke: "#A1A1AA",
12105
- strokeWidth: "1.5",
12106
- strokeLinecap: "round",
12107
- strokeLinejoin: "round"
12108
- }
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);
11625
+ const uniqueShippingProfiles = React.useMemo(() => {
11626
+ const profiles = /* @__PURE__ */ new Map();
11627
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11628
+ profiles.set(profile.id, profile);
11629
+ });
11630
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11631
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11632
+ });
11633
+ return Array.from(profiles.values());
11634
+ }, [order.items, shipping_options]);
12198
11635
  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;
11636
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11637
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11638
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11639
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11640
+ const onSubmit = async () => {
11641
+ setIsSubmitting(true);
11642
+ let requestSucceeded = false;
11643
+ await requestOrderEdit(void 0, {
11644
+ onError: (e) => {
11645
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
11646
+ },
11647
+ onSuccess: () => {
11648
+ requestSucceeded = true;
12315
11649
  }
12316
11650
  });
12317
11651
  if (!requestSucceeded) {
@@ -12763,288 +12097,954 @@ const ShippingProfileForm = ({
12763
12097
  /* @__PURE__ */ jsxRuntime.jsx(
12764
12098
  LocationField,
12765
12099
  {
12766
- control: form.control,
12767
- setValue: form.setValue
12100
+ control: form.control,
12101
+ setValue: form.setValue
12102
+ }
12103
+ ),
12104
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12105
+ /* @__PURE__ */ jsxRuntime.jsx(
12106
+ ShippingOptionField,
12107
+ {
12108
+ shippingProfileId: data.shippingProfileId,
12109
+ preview,
12110
+ control: form.control
12111
+ }
12112
+ ),
12113
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12114
+ /* @__PURE__ */ jsxRuntime.jsx(
12115
+ CustomAmountField,
12116
+ {
12117
+ control: form.control,
12118
+ currencyCode: order.currency_code
12119
+ }
12120
+ ),
12121
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12122
+ /* @__PURE__ */ jsxRuntime.jsx(
12123
+ ItemsPreview,
12124
+ {
12125
+ order,
12126
+ shippingProfileId: data.shippingProfileId
12127
+ }
12128
+ )
12129
+ ] }) }) }),
12130
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12131
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12132
+ /* @__PURE__ */ jsxRuntime.jsx(
12133
+ ui.Button,
12134
+ {
12135
+ size: "small",
12136
+ type: "submit",
12137
+ isLoading: isPending || isUpdatingShippingMethod,
12138
+ children: data.shippingMethod ? "Update" : "Add"
12139
+ }
12140
+ )
12141
+ ] }) })
12142
+ ]
12143
+ }
12144
+ ) }) });
12145
+ };
12146
+ const shippingMethodSchema = objectType({
12147
+ location_id: stringType(),
12148
+ shipping_option_id: stringType(),
12149
+ custom_amount: unionType([numberType(), stringType()]).optional()
12150
+ });
12151
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12152
+ const matches = order.items.filter(
12153
+ (item) => {
12154
+ var _a, _b, _c;
12155
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12156
+ }
12157
+ );
12158
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12159
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12160
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12161
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12162
+ ] }) }),
12163
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12164
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12165
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12166
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12167
+ ] }),
12168
+ /* @__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(
12169
+ "div",
12170
+ {
12171
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12172
+ children: [
12173
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12174
+ /* @__PURE__ */ jsxRuntime.jsx(
12175
+ Thumbnail,
12176
+ {
12177
+ thumbnail: item.thumbnail,
12178
+ alt: item.product_title ?? void 0
12179
+ }
12180
+ ),
12181
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12182
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12183
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12184
+ /* @__PURE__ */ jsxRuntime.jsxs(
12185
+ ui.Text,
12186
+ {
12187
+ size: "small",
12188
+ leading: "compact",
12189
+ className: "text-ui-fg-subtle",
12190
+ children: [
12191
+ "(",
12192
+ item.variant_title,
12193
+ ")"
12194
+ ]
12195
+ }
12196
+ )
12197
+ ] }),
12198
+ /* @__PURE__ */ jsxRuntime.jsx(
12199
+ ui.Text,
12200
+ {
12201
+ size: "small",
12202
+ leading: "compact",
12203
+ className: "text-ui-fg-subtle",
12204
+ children: item.variant_sku
12205
+ }
12206
+ )
12207
+ ] })
12208
+ ] }),
12209
+ /* @__PURE__ */ jsxRuntime.jsxs(
12210
+ ui.Text,
12211
+ {
12212
+ size: "small",
12213
+ leading: "compact",
12214
+ className: "text-ui-fg-subtle",
12215
+ children: [
12216
+ item.quantity,
12217
+ "x"
12218
+ ]
12219
+ }
12220
+ )
12221
+ ]
12222
+ },
12223
+ item.id
12224
+ )) : /* @__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: [
12225
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12226
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12227
+ 'No items found for "',
12228
+ query,
12229
+ '".'
12230
+ ] })
12231
+ ] }) })
12232
+ ] })
12233
+ ] });
12234
+ };
12235
+ const LocationField = ({ control, setValue }) => {
12236
+ const locations = useComboboxData({
12237
+ queryKey: ["locations"],
12238
+ queryFn: async (params) => {
12239
+ return await sdk.admin.stockLocation.list(params);
12240
+ },
12241
+ getOptions: (data) => {
12242
+ return data.stock_locations.map((location) => ({
12243
+ label: location.name,
12244
+ value: location.id
12245
+ }));
12246
+ }
12247
+ });
12248
+ return /* @__PURE__ */ jsxRuntime.jsx(
12249
+ Form$2.Field,
12250
+ {
12251
+ control,
12252
+ name: "location_id",
12253
+ render: ({ field: { onChange, ...field } }) => {
12254
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12255
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12256
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12257
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12258
+ ] }),
12259
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12260
+ Combobox,
12261
+ {
12262
+ options: locations.options,
12263
+ fetchNextPage: locations.fetchNextPage,
12264
+ isFetchingNextPage: locations.isFetchingNextPage,
12265
+ searchValue: locations.searchValue,
12266
+ onSearchValueChange: locations.onSearchValueChange,
12267
+ placeholder: "Select location",
12268
+ onChange: (value) => {
12269
+ setValue("shipping_option_id", "", {
12270
+ shouldDirty: true,
12271
+ shouldTouch: true
12272
+ });
12273
+ onChange(value);
12274
+ },
12275
+ ...field
12276
+ }
12277
+ ) })
12278
+ ] }) });
12279
+ }
12280
+ }
12281
+ );
12282
+ };
12283
+ const ShippingOptionField = ({
12284
+ shippingProfileId,
12285
+ preview,
12286
+ control
12287
+ }) => {
12288
+ var _a;
12289
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12290
+ const shippingOptions = useComboboxData({
12291
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12292
+ queryFn: async (params) => {
12293
+ return await sdk.admin.shippingOption.list({
12294
+ ...params,
12295
+ stock_location_id: locationId,
12296
+ shipping_profile_id: shippingProfileId
12297
+ });
12298
+ },
12299
+ getOptions: (data) => {
12300
+ return data.shipping_options.map((option) => {
12301
+ var _a2;
12302
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12303
+ (r) => r.attribute === "is_return" && r.value === "true"
12304
+ )) {
12305
+ return void 0;
12306
+ }
12307
+ return {
12308
+ label: option.name,
12309
+ value: option.id
12310
+ };
12311
+ }).filter(Boolean);
12312
+ },
12313
+ enabled: !!locationId && !!shippingProfileId,
12314
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12315
+ });
12316
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12317
+ return /* @__PURE__ */ jsxRuntime.jsx(
12318
+ Form$2.Field,
12319
+ {
12320
+ control,
12321
+ name: "shipping_option_id",
12322
+ render: ({ field }) => {
12323
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12324
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12325
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12326
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12327
+ ] }),
12328
+ /* @__PURE__ */ jsxRuntime.jsx(
12329
+ ConditionalTooltip,
12330
+ {
12331
+ content: tooltipContent,
12332
+ showTooltip: !locationId || !shippingProfileId,
12333
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12334
+ Combobox,
12335
+ {
12336
+ options: shippingOptions.options,
12337
+ fetchNextPage: shippingOptions.fetchNextPage,
12338
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12339
+ searchValue: shippingOptions.searchValue,
12340
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12341
+ placeholder: "Select shipping option",
12342
+ ...field,
12343
+ disabled: !locationId || !shippingProfileId
12344
+ }
12345
+ ) }) })
12346
+ }
12347
+ )
12348
+ ] }) });
12349
+ }
12350
+ }
12351
+ );
12352
+ };
12353
+ const CustomAmountField = ({
12354
+ control,
12355
+ currencyCode
12356
+ }) => {
12357
+ return /* @__PURE__ */ jsxRuntime.jsx(
12358
+ Form$2.Field,
12359
+ {
12360
+ control,
12361
+ name: "custom_amount",
12362
+ render: ({ field: { onChange, ...field } }) => {
12363
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12364
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12365
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12366
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12367
+ ] }),
12368
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12369
+ ui.CurrencyInput,
12370
+ {
12371
+ ...field,
12372
+ onValueChange: (value) => onChange(value),
12373
+ symbol: getNativeSymbol(currencyCode),
12374
+ code: currencyCode
12375
+ }
12376
+ ) })
12377
+ ] });
12378
+ }
12379
+ }
12380
+ );
12381
+ };
12382
+ const TransferOwnership = () => {
12383
+ const { id } = reactRouterDom.useParams();
12384
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12385
+ fields: "id,customer_id,customer.*"
12386
+ });
12387
+ if (isError) {
12388
+ throw error;
12389
+ }
12390
+ const isReady = !isPending && !!draft_order;
12391
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12392
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12393
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12394
+ /* @__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" }) })
12395
+ ] }),
12396
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12397
+ ] });
12398
+ };
12399
+ const TransferOwnershipForm = ({ order }) => {
12400
+ var _a, _b;
12401
+ const form = reactHookForm.useForm({
12402
+ defaultValues: {
12403
+ customer_id: order.customer_id || ""
12404
+ },
12405
+ resolver: zod.zodResolver(schema$1)
12406
+ });
12407
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12408
+ const { handleSuccess } = useRouteModal();
12409
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12410
+ const currentCustomer = order.customer ? {
12411
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
12412
+ value: order.customer.id
12413
+ } : null;
12414
+ const onSubmit = form.handleSubmit(async (data) => {
12415
+ await mutateAsync(
12416
+ { customer_id: data.customer_id },
12417
+ {
12418
+ onSuccess: () => {
12419
+ ui.toast.success("Customer updated");
12420
+ handleSuccess();
12421
+ },
12422
+ onError: (error) => {
12423
+ ui.toast.error(error.message);
12424
+ }
12425
+ }
12426
+ );
12427
+ });
12428
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12429
+ KeyboundForm,
12430
+ {
12431
+ className: "flex flex-1 flex-col overflow-hidden",
12432
+ onSubmit,
12433
+ children: [
12434
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12435
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12436
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12437
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12438
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12439
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12440
+ ] }),
12441
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12442
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12443
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12444
+ ] })
12445
+ ] }),
12446
+ /* @__PURE__ */ jsxRuntime.jsx(
12447
+ CustomerField,
12448
+ {
12449
+ control: form.control,
12450
+ currentCustomerId: order.customer_id
12451
+ }
12452
+ )
12453
+ ] }),
12454
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12455
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12456
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12457
+ ] }) })
12458
+ ]
12459
+ }
12460
+ ) });
12461
+ };
12462
+ const CustomerField = ({ control, currentCustomerId }) => {
12463
+ const customers = useComboboxData({
12464
+ queryFn: async (params) => {
12465
+ return await sdk.admin.customer.list({
12466
+ ...params,
12467
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12468
+ });
12469
+ },
12470
+ queryKey: ["customers"],
12471
+ getOptions: (data) => {
12472
+ return data.customers.map((customer) => {
12473
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12474
+ return {
12475
+ label: name ? `${name} (${customer.email})` : customer.email,
12476
+ value: customer.id
12477
+ };
12478
+ });
12479
+ }
12480
+ });
12481
+ return /* @__PURE__ */ jsxRuntime.jsx(
12482
+ Form$2.Field,
12483
+ {
12484
+ name: "customer_id",
12485
+ control,
12486
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12487
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12488
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12489
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12490
+ ] }),
12491
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12492
+ Combobox,
12493
+ {
12494
+ options: customers.options,
12495
+ fetchNextPage: customers.fetchNextPage,
12496
+ isFetchingNextPage: customers.isFetchingNextPage,
12497
+ searchValue: customers.searchValue,
12498
+ onSearchValueChange: customers.onSearchValueChange,
12499
+ placeholder: "Select customer",
12500
+ ...field
12501
+ }
12502
+ ) }),
12503
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12504
+ ] })
12505
+ }
12506
+ );
12507
+ };
12508
+ const Illustration = () => {
12509
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12510
+ "svg",
12511
+ {
12512
+ width: "280",
12513
+ height: "180",
12514
+ viewBox: "0 0 280 180",
12515
+ fill: "none",
12516
+ xmlns: "http://www.w3.org/2000/svg",
12517
+ children: [
12518
+ /* @__PURE__ */ jsxRuntime.jsx(
12519
+ "rect",
12520
+ {
12521
+ x: "0.00428286",
12522
+ y: "-0.742904",
12523
+ width: "33.5",
12524
+ height: "65.5",
12525
+ rx: "6.75",
12526
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
12527
+ fill: "#D4D4D8",
12528
+ stroke: "#52525B",
12529
+ strokeWidth: "1.5"
12530
+ }
12531
+ ),
12532
+ /* @__PURE__ */ jsxRuntime.jsx(
12533
+ "rect",
12534
+ {
12535
+ x: "0.00428286",
12536
+ y: "-0.742904",
12537
+ width: "33.5",
12538
+ height: "65.5",
12539
+ rx: "6.75",
12540
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
12541
+ fill: "white",
12542
+ stroke: "#52525B",
12543
+ strokeWidth: "1.5"
12544
+ }
12545
+ ),
12546
+ /* @__PURE__ */ jsxRuntime.jsx(
12547
+ "path",
12548
+ {
12549
+ d: "M180.579 107.142L179.126 107.959",
12550
+ stroke: "#52525B",
12551
+ strokeWidth: "1.5",
12552
+ strokeLinecap: "round",
12553
+ strokeLinejoin: "round"
12554
+ }
12555
+ ),
12556
+ /* @__PURE__ */ jsxRuntime.jsx(
12557
+ "path",
12558
+ {
12559
+ opacity: "0.88",
12560
+ d: "M182.305 109.546L180.257 109.534",
12561
+ stroke: "#52525B",
12562
+ strokeWidth: "1.5",
12563
+ strokeLinecap: "round",
12564
+ strokeLinejoin: "round"
12565
+ }
12566
+ ),
12567
+ /* @__PURE__ */ jsxRuntime.jsx(
12568
+ "path",
12569
+ {
12570
+ opacity: "0.75",
12571
+ d: "M180.551 111.93L179.108 111.096",
12572
+ stroke: "#52525B",
12573
+ strokeWidth: "1.5",
12574
+ strokeLinecap: "round",
12575
+ strokeLinejoin: "round"
12576
+ }
12577
+ ),
12578
+ /* @__PURE__ */ jsxRuntime.jsx(
12579
+ "path",
12580
+ {
12581
+ opacity: "0.63",
12582
+ d: "M176.347 112.897L176.354 111.73",
12583
+ stroke: "#52525B",
12584
+ strokeWidth: "1.5",
12585
+ strokeLinecap: "round",
12586
+ strokeLinejoin: "round"
12587
+ }
12588
+ ),
12589
+ /* @__PURE__ */ jsxRuntime.jsx(
12590
+ "path",
12591
+ {
12592
+ opacity: "0.5",
12593
+ d: "M172.153 111.881L173.606 111.064",
12594
+ stroke: "#52525B",
12595
+ strokeWidth: "1.5",
12596
+ strokeLinecap: "round",
12597
+ strokeLinejoin: "round"
12598
+ }
12599
+ ),
12600
+ /* @__PURE__ */ jsxRuntime.jsx(
12601
+ "path",
12602
+ {
12603
+ opacity: "0.38",
12604
+ d: "M170.428 109.478L172.476 109.489",
12605
+ stroke: "#52525B",
12606
+ strokeWidth: "1.5",
12607
+ strokeLinecap: "round",
12608
+ strokeLinejoin: "round"
12609
+ }
12610
+ ),
12611
+ /* @__PURE__ */ jsxRuntime.jsx(
12612
+ "path",
12613
+ {
12614
+ opacity: "0.25",
12615
+ d: "M172.181 107.094L173.624 107.928",
12616
+ stroke: "#52525B",
12617
+ strokeWidth: "1.5",
12618
+ strokeLinecap: "round",
12619
+ strokeLinejoin: "round"
12620
+ }
12621
+ ),
12622
+ /* @__PURE__ */ jsxRuntime.jsx(
12623
+ "path",
12624
+ {
12625
+ opacity: "0.13",
12626
+ d: "M176.386 106.126L176.379 107.294",
12627
+ stroke: "#52525B",
12628
+ strokeWidth: "1.5",
12629
+ strokeLinecap: "round",
12630
+ strokeLinejoin: "round"
12631
+ }
12632
+ ),
12633
+ /* @__PURE__ */ jsxRuntime.jsx(
12634
+ "rect",
12635
+ {
12636
+ width: "12",
12637
+ height: "3",
12638
+ rx: "1.5",
12639
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12640
+ fill: "#D4D4D8"
12641
+ }
12642
+ ),
12643
+ /* @__PURE__ */ jsxRuntime.jsx(
12644
+ "rect",
12645
+ {
12646
+ x: "0.00428286",
12647
+ y: "-0.742904",
12648
+ width: "33.5",
12649
+ height: "65.5",
12650
+ rx: "6.75",
12651
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12652
+ fill: "#D4D4D8",
12653
+ stroke: "#52525B",
12654
+ strokeWidth: "1.5"
12655
+ }
12656
+ ),
12657
+ /* @__PURE__ */ jsxRuntime.jsx(
12658
+ "rect",
12659
+ {
12660
+ x: "0.00428286",
12661
+ y: "-0.742904",
12662
+ width: "33.5",
12663
+ height: "65.5",
12664
+ rx: "6.75",
12665
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12666
+ fill: "white",
12667
+ stroke: "#52525B",
12668
+ strokeWidth: "1.5"
12669
+ }
12670
+ ),
12671
+ /* @__PURE__ */ jsxRuntime.jsx(
12672
+ "rect",
12673
+ {
12674
+ width: "12",
12675
+ height: "3",
12676
+ rx: "1.5",
12677
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12678
+ fill: "#D4D4D8"
12679
+ }
12680
+ ),
12681
+ /* @__PURE__ */ jsxRuntime.jsx(
12682
+ "rect",
12683
+ {
12684
+ width: "17",
12685
+ height: "3",
12686
+ rx: "1.5",
12687
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12688
+ fill: "#D4D4D8"
12689
+ }
12690
+ ),
12691
+ /* @__PURE__ */ jsxRuntime.jsx(
12692
+ "rect",
12693
+ {
12694
+ width: "12",
12695
+ height: "3",
12696
+ rx: "1.5",
12697
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12698
+ fill: "#D4D4D8"
12699
+ }
12700
+ ),
12701
+ /* @__PURE__ */ jsxRuntime.jsx(
12702
+ "path",
12703
+ {
12704
+ d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12705
+ fill: "#A1A1AA"
12706
+ }
12707
+ ),
12708
+ /* @__PURE__ */ jsxRuntime.jsx(
12709
+ "rect",
12710
+ {
12711
+ width: "17",
12712
+ height: "3",
12713
+ rx: "1.5",
12714
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12715
+ fill: "#A1A1AA"
12716
+ }
12717
+ ),
12718
+ /* @__PURE__ */ jsxRuntime.jsx(
12719
+ "rect",
12720
+ {
12721
+ width: "12",
12722
+ height: "3",
12723
+ rx: "1.5",
12724
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12725
+ fill: "#A1A1AA"
12726
+ }
12727
+ ),
12728
+ /* @__PURE__ */ jsxRuntime.jsx(
12729
+ "path",
12730
+ {
12731
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12732
+ fill: "#52525B"
12733
+ }
12734
+ ),
12735
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12736
+ "path",
12737
+ {
12738
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12739
+ stroke: "#A1A1AA",
12740
+ strokeWidth: "1.5",
12741
+ strokeLinecap: "round",
12742
+ strokeLinejoin: "round"
12743
+ }
12744
+ ) }),
12745
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12746
+ "path",
12747
+ {
12748
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12749
+ stroke: "#A1A1AA",
12750
+ strokeWidth: "1.5",
12751
+ strokeLinecap: "round",
12752
+ strokeLinejoin: "round"
12753
+ }
12754
+ ) }),
12755
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12756
+ "path",
12757
+ {
12758
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12759
+ stroke: "#A1A1AA",
12760
+ strokeWidth: "1.5",
12761
+ strokeLinecap: "round",
12762
+ strokeLinejoin: "round"
12763
+ }
12764
+ ) }),
12765
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12766
+ "path",
12767
+ {
12768
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12769
+ stroke: "#A1A1AA",
12770
+ strokeWidth: "1.5",
12771
+ strokeLinecap: "round",
12772
+ strokeLinejoin: "round"
12773
+ }
12774
+ ) }),
12775
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12776
+ "path",
12777
+ {
12778
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12779
+ stroke: "#A1A1AA",
12780
+ strokeWidth: "1.5",
12781
+ strokeLinecap: "round",
12782
+ strokeLinejoin: "round"
12783
+ }
12784
+ ) }),
12785
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12786
+ "path",
12787
+ {
12788
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12789
+ stroke: "#A1A1AA",
12790
+ strokeWidth: "1.5",
12791
+ strokeLinecap: "round",
12792
+ strokeLinejoin: "round"
12793
+ }
12794
+ ) }),
12795
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12796
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12797
+ "rect",
12798
+ {
12799
+ width: "12",
12800
+ height: "12",
12801
+ fill: "white",
12802
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12768
12803
  }
12769
- ),
12770
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12771
- /* @__PURE__ */ jsxRuntime.jsx(
12772
- ShippingOptionField,
12804
+ ) }),
12805
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12806
+ "rect",
12773
12807
  {
12774
- shippingProfileId: data.shippingProfileId,
12775
- preview,
12776
- control: form.control
12808
+ width: "12",
12809
+ height: "12",
12810
+ fill: "white",
12811
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12777
12812
  }
12778
- ),
12779
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12780
- /* @__PURE__ */ jsxRuntime.jsx(
12781
- CustomAmountField,
12813
+ ) }),
12814
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12815
+ "rect",
12782
12816
  {
12783
- control: form.control,
12784
- currencyCode: order.currency_code
12817
+ width: "12",
12818
+ height: "12",
12819
+ fill: "white",
12820
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12785
12821
  }
12786
- ),
12787
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12788
- /* @__PURE__ */ jsxRuntime.jsx(
12789
- ItemsPreview,
12822
+ ) }),
12823
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12824
+ "rect",
12790
12825
  {
12791
- order,
12792
- shippingProfileId: data.shippingProfileId
12826
+ width: "12",
12827
+ height: "12",
12828
+ fill: "white",
12829
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12793
12830
  }
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,
12831
+ ) }),
12832
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12833
+ "rect",
12800
12834
  {
12801
- size: "small",
12802
- type: "submit",
12803
- isLoading: isPending || isUpdatingShippingMethod,
12804
- children: data.shippingMethod ? "Update" : "Add"
12835
+ width: "12",
12836
+ height: "12",
12837
+ fill: "white",
12838
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12805
12839
  }
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,
12840
+ ) }),
12841
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12842
+ "rect",
12927
12843
  {
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
12844
+ width: "12",
12845
+ height: "12",
12846
+ fill: "white",
12847
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12942
12848
  }
12943
12849
  ) })
12944
- ] }) });
12945
- }
12850
+ ] })
12851
+ ]
12946
12852
  }
12947
12853
  );
12948
12854
  };
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
- });
12855
+ const schema$1 = objectType({
12856
+ customer_id: stringType().min(1)
12857
+ });
12858
+ const BillingAddress = () => {
12859
+ const { id } = reactRouterDom.useParams();
12860
+ const { order, isPending, isError, error } = useOrder(id, {
12861
+ fields: "+billing_address"
12862
+ });
12863
+ if (isError) {
12864
+ throw error;
12865
+ }
12866
+ const isReady = !isPending && !!order;
12867
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12868
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12869
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
12870
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12871
+ ] }),
12872
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
12873
+ ] });
12874
+ };
12875
+ const BillingAddressForm = ({ order }) => {
12876
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12877
+ const form = reactHookForm.useForm({
12878
+ defaultValues: {
12879
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12880
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12881
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12882
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12883
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12884
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12885
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12886
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12887
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12888
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12964
12889
  },
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;
12890
+ resolver: zod.zodResolver(schema)
12891
+ });
12892
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12893
+ const { handleSuccess } = useRouteModal();
12894
+ const onSubmit = form.handleSubmit(async (data) => {
12895
+ await mutateAsync(
12896
+ { billing_address: data },
12897
+ {
12898
+ onSuccess: () => {
12899
+ handleSuccess();
12900
+ },
12901
+ onError: (error) => {
12902
+ ui.toast.error(error.message);
12972
12903
  }
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
12904
+ }
12905
+ );
12981
12906
  });
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,
12907
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12908
+ KeyboundForm,
12985
12909
  {
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." })
12910
+ className: "flex flex-1 flex-col overflow-hidden",
12911
+ onSubmit,
12912
+ children: [
12913
+ /* @__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: [
12914
+ /* @__PURE__ */ jsxRuntime.jsx(
12915
+ Form$2.Field,
12916
+ {
12917
+ control: form.control,
12918
+ name: "country_code",
12919
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12920
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12921
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12922
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12923
+ ] })
12924
+ }
12925
+ ),
12926
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12927
+ /* @__PURE__ */ jsxRuntime.jsx(
12928
+ Form$2.Field,
12929
+ {
12930
+ control: form.control,
12931
+ name: "first_name",
12932
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12933
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12934
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12935
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12936
+ ] })
12937
+ }
12938
+ ),
12939
+ /* @__PURE__ */ jsxRuntime.jsx(
12940
+ Form$2.Field,
12941
+ {
12942
+ control: form.control,
12943
+ name: "last_name",
12944
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12945
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12946
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12947
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12948
+ ] })
12949
+ }
12950
+ )
12993
12951
  ] }),
12994
12952
  /* @__PURE__ */ jsxRuntime.jsx(
12995
- ConditionalTooltip,
12953
+ Form$2.Field,
12996
12954
  {
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
- ) }) })
12955
+ control: form.control,
12956
+ name: "company",
12957
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12958
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12959
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12960
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12961
+ ] })
13012
12962
  }
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." })
12963
+ ),
12964
+ /* @__PURE__ */ jsxRuntime.jsx(
12965
+ Form$2.Field,
12966
+ {
12967
+ control: form.control,
12968
+ name: "address_1",
12969
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12970
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12971
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12972
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12973
+ ] })
12974
+ }
12975
+ ),
12976
+ /* @__PURE__ */ jsxRuntime.jsx(
12977
+ Form$2.Field,
12978
+ {
12979
+ control: form.control,
12980
+ name: "address_2",
12981
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12982
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12983
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12984
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12985
+ ] })
12986
+ }
12987
+ ),
12988
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12989
+ /* @__PURE__ */ jsxRuntime.jsx(
12990
+ Form$2.Field,
12991
+ {
12992
+ control: form.control,
12993
+ name: "postal_code",
12994
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12995
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12996
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12997
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12998
+ ] })
12999
+ }
13000
+ ),
13001
+ /* @__PURE__ */ jsxRuntime.jsx(
13002
+ Form$2.Field,
13003
+ {
13004
+ control: form.control,
13005
+ name: "city",
13006
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13007
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13008
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13009
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13010
+ ] })
13011
+ }
13012
+ )
13033
13013
  ] }),
13034
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13035
- ui.CurrencyInput,
13014
+ /* @__PURE__ */ jsxRuntime.jsx(
13015
+ Form$2.Field,
13036
13016
  {
13037
- ...field,
13038
- onValueChange: (value) => onChange(value),
13039
- symbol: getNativeSymbol(currencyCode),
13040
- code: currencyCode
13017
+ control: form.control,
13018
+ name: "province",
13019
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13020
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13021
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13022
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13023
+ ] })
13041
13024
  }
13042
- ) })
13043
- ] });
13044
- }
13025
+ ),
13026
+ /* @__PURE__ */ jsxRuntime.jsx(
13027
+ Form$2.Field,
13028
+ {
13029
+ control: form.control,
13030
+ name: "phone",
13031
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13032
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13033
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13034
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13035
+ ] })
13036
+ }
13037
+ )
13038
+ ] }) }),
13039
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13040
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13041
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13042
+ ] }) })
13043
+ ]
13045
13044
  }
13046
- );
13045
+ ) });
13047
13046
  };
13047
+ const schema = addressSchema;
13048
13048
  const widgetModule = { widgets: [] };
13049
13049
  const routeModule = {
13050
13050
  routes: [
@@ -13065,14 +13065,14 @@ const routeModule = {
13065
13065
  handle,
13066
13066
  loader,
13067
13067
  children: [
13068
- {
13069
- Component: BillingAddress,
13070
- path: "/draft-orders/:id/billing-address"
13071
- },
13072
13068
  {
13073
13069
  Component: CustomItems,
13074
13070
  path: "/draft-orders/:id/custom-items"
13075
13071
  },
13072
+ {
13073
+ Component: Email,
13074
+ path: "/draft-orders/:id/email"
13075
+ },
13076
13076
  {
13077
13077
  Component: Items,
13078
13078
  path: "/draft-orders/:id/items"
@@ -13094,16 +13094,16 @@ const routeModule = {
13094
13094
  path: "/draft-orders/:id/shipping-address"
13095
13095
  },
13096
13096
  {
13097
- Component: TransferOwnership,
13098
- path: "/draft-orders/:id/transfer-ownership"
13097
+ Component: Shipping,
13098
+ path: "/draft-orders/:id/shipping"
13099
13099
  },
13100
13100
  {
13101
- Component: Email,
13102
- path: "/draft-orders/:id/email"
13101
+ Component: TransferOwnership,
13102
+ path: "/draft-orders/:id/transfer-ownership"
13103
13103
  },
13104
13104
  {
13105
- Component: Shipping,
13106
- path: "/draft-orders/:id/shipping"
13105
+ Component: BillingAddress,
13106
+ path: "/draft-orders/:id/billing-address"
13107
13107
  }
13108
13108
  ]
13109
13109
  }