@medusajs/draft-order 2.10.3-preview-20250918150200 → 2.10.3-preview-20250918155211

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.
@@ -9662,6 +9662,196 @@ const EmailForm = ({ order }) => {
9662
9662
  const schema$4 = objectType({
9663
9663
  email: stringType().email()
9664
9664
  });
9665
+ const BillingAddress = () => {
9666
+ const { id } = reactRouterDom.useParams();
9667
+ const { order, isPending, isError, error } = useOrder(id, {
9668
+ fields: "+billing_address"
9669
+ });
9670
+ if (isError) {
9671
+ throw error;
9672
+ }
9673
+ const isReady = !isPending && !!order;
9674
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9675
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9676
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
9677
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9678
+ ] }),
9679
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9680
+ ] });
9681
+ };
9682
+ const BillingAddressForm = ({ order }) => {
9683
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9684
+ const form = reactHookForm.useForm({
9685
+ defaultValues: {
9686
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9687
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9688
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9689
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9690
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9691
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9692
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9693
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9694
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9695
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9696
+ },
9697
+ resolver: zod.zodResolver(schema$3)
9698
+ });
9699
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9700
+ const { handleSuccess } = useRouteModal();
9701
+ const onSubmit = form.handleSubmit(async (data) => {
9702
+ await mutateAsync(
9703
+ { billing_address: data },
9704
+ {
9705
+ onSuccess: () => {
9706
+ handleSuccess();
9707
+ },
9708
+ onError: (error) => {
9709
+ ui.toast.error(error.message);
9710
+ }
9711
+ }
9712
+ );
9713
+ });
9714
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9715
+ KeyboundForm,
9716
+ {
9717
+ className: "flex flex-1 flex-col overflow-hidden",
9718
+ onSubmit,
9719
+ children: [
9720
+ /* @__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: [
9721
+ /* @__PURE__ */ jsxRuntime.jsx(
9722
+ Form$2.Field,
9723
+ {
9724
+ control: form.control,
9725
+ name: "country_code",
9726
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9727
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
9728
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
9729
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9730
+ ] })
9731
+ }
9732
+ ),
9733
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9734
+ /* @__PURE__ */ jsxRuntime.jsx(
9735
+ Form$2.Field,
9736
+ {
9737
+ control: form.control,
9738
+ name: "first_name",
9739
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9740
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
9741
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9742
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9743
+ ] })
9744
+ }
9745
+ ),
9746
+ /* @__PURE__ */ jsxRuntime.jsx(
9747
+ Form$2.Field,
9748
+ {
9749
+ control: form.control,
9750
+ name: "last_name",
9751
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9752
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
9753
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9754
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9755
+ ] })
9756
+ }
9757
+ )
9758
+ ] }),
9759
+ /* @__PURE__ */ jsxRuntime.jsx(
9760
+ Form$2.Field,
9761
+ {
9762
+ control: form.control,
9763
+ name: "company",
9764
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9765
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
9766
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9767
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9768
+ ] })
9769
+ }
9770
+ ),
9771
+ /* @__PURE__ */ jsxRuntime.jsx(
9772
+ Form$2.Field,
9773
+ {
9774
+ control: form.control,
9775
+ name: "address_1",
9776
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9777
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
9778
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9779
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9780
+ ] })
9781
+ }
9782
+ ),
9783
+ /* @__PURE__ */ jsxRuntime.jsx(
9784
+ Form$2.Field,
9785
+ {
9786
+ control: form.control,
9787
+ name: "address_2",
9788
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9789
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9790
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9791
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9792
+ ] })
9793
+ }
9794
+ ),
9795
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9796
+ /* @__PURE__ */ jsxRuntime.jsx(
9797
+ Form$2.Field,
9798
+ {
9799
+ control: form.control,
9800
+ name: "postal_code",
9801
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9802
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
9803
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9804
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9805
+ ] })
9806
+ }
9807
+ ),
9808
+ /* @__PURE__ */ jsxRuntime.jsx(
9809
+ Form$2.Field,
9810
+ {
9811
+ control: form.control,
9812
+ name: "city",
9813
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9814
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
9815
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9816
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9817
+ ] })
9818
+ }
9819
+ )
9820
+ ] }),
9821
+ /* @__PURE__ */ jsxRuntime.jsx(
9822
+ Form$2.Field,
9823
+ {
9824
+ control: form.control,
9825
+ name: "province",
9826
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9827
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9828
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9829
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9830
+ ] })
9831
+ }
9832
+ ),
9833
+ /* @__PURE__ */ jsxRuntime.jsx(
9834
+ Form$2.Field,
9835
+ {
9836
+ control: form.control,
9837
+ name: "phone",
9838
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9839
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
9840
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9841
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9842
+ ] })
9843
+ }
9844
+ )
9845
+ ] }) }),
9846
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9847
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9848
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9849
+ ] }) })
9850
+ ]
9851
+ }
9852
+ ) });
9853
+ };
9854
+ const schema$3 = addressSchema;
9665
9855
  const NumberInput = React.forwardRef(
9666
9856
  ({
9667
9857
  value,
@@ -11291,7 +11481,7 @@ const SalesChannelForm = ({ order }) => {
11291
11481
  defaultValues: {
11292
11482
  sales_channel_id: order.sales_channel_id || ""
11293
11483
  },
11294
- resolver: zod.zodResolver(schema$3)
11484
+ resolver: zod.zodResolver(schema$2)
11295
11485
  });
11296
11486
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11297
11487
  const { handleSuccess } = useRouteModal();
@@ -11366,57 +11556,260 @@ const SalesChannelField = ({ control, order }) => {
11366
11556
  }
11367
11557
  );
11368
11558
  };
11369
- const schema$3 = objectType({
11559
+ const schema$2 = objectType({
11370
11560
  sales_channel_id: stringType().min(1)
11371
11561
  });
11372
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11373
- const Shipping = () => {
11374
- var _a;
11562
+ const ShippingAddress = () => {
11375
11563
  const { id } = reactRouterDom.useParams();
11376
11564
  const { order, isPending, isError, error } = useOrder(id, {
11377
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11565
+ fields: "+shipping_address"
11378
11566
  });
11379
- const {
11380
- order: preview,
11381
- isPending: isPreviewPending,
11382
- isError: isPreviewError,
11383
- error: previewError
11384
- } = useOrderPreview(id);
11385
- useInitiateOrderEdit({ preview });
11386
- const { onCancel } = useCancelOrderEdit({ preview });
11387
11567
  if (isError) {
11388
11568
  throw error;
11389
11569
  }
11390
- if (isPreviewError) {
11391
- throw previewError;
11392
- }
11393
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11394
- const isReady = preview && !isPreviewPending && order && !isPending;
11395
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11396
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11397
- /* @__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: [
11398
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11399
- /* @__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." }) })
11400
- ] }) }) }),
11401
- /* @__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" }) }) })
11402
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11403
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11404
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11405
- ] }) });
11570
+ const isReady = !isPending && !!order;
11571
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11572
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11573
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11574
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11575
+ ] }),
11576
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11577
+ ] });
11406
11578
  };
11407
- const ShippingForm = ({ preview, order }) => {
11408
- var _a;
11409
- const { setIsOpen } = useStackedModal();
11410
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11411
- const [data, setData] = React.useState(null);
11412
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11413
- const { shipping_options } = useShippingOptions(
11414
- {
11415
- id: appliedShippingOptionIds,
11416
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11579
+ const ShippingAddressForm = ({ order }) => {
11580
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11581
+ const form = reactHookForm.useForm({
11582
+ defaultValues: {
11583
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11584
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11585
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11586
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11587
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11588
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11589
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11590
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11591
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11592
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11417
11593
  },
11418
- {
11419
- enabled: appliedShippingOptionIds.length > 0
11594
+ resolver: zod.zodResolver(schema$1)
11595
+ });
11596
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11597
+ const { handleSuccess } = useRouteModal();
11598
+ const onSubmit = form.handleSubmit(async (data) => {
11599
+ await mutateAsync(
11600
+ {
11601
+ shipping_address: {
11602
+ first_name: data.first_name,
11603
+ last_name: data.last_name,
11604
+ company: data.company,
11605
+ address_1: data.address_1,
11606
+ address_2: data.address_2,
11607
+ city: data.city,
11608
+ province: data.province,
11609
+ country_code: data.country_code,
11610
+ postal_code: data.postal_code,
11611
+ phone: data.phone
11612
+ }
11613
+ },
11614
+ {
11615
+ onSuccess: () => {
11616
+ handleSuccess();
11617
+ },
11618
+ onError: (error) => {
11619
+ ui.toast.error(error.message);
11620
+ }
11621
+ }
11622
+ );
11623
+ });
11624
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11625
+ KeyboundForm,
11626
+ {
11627
+ className: "flex flex-1 flex-col overflow-hidden",
11628
+ onSubmit,
11629
+ children: [
11630
+ /* @__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: [
11631
+ /* @__PURE__ */ jsxRuntime.jsx(
11632
+ Form$2.Field,
11633
+ {
11634
+ control: form.control,
11635
+ name: "country_code",
11636
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11637
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11638
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11639
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11640
+ ] })
11641
+ }
11642
+ ),
11643
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11644
+ /* @__PURE__ */ jsxRuntime.jsx(
11645
+ Form$2.Field,
11646
+ {
11647
+ control: form.control,
11648
+ name: "first_name",
11649
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11650
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11651
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11652
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11653
+ ] })
11654
+ }
11655
+ ),
11656
+ /* @__PURE__ */ jsxRuntime.jsx(
11657
+ Form$2.Field,
11658
+ {
11659
+ control: form.control,
11660
+ name: "last_name",
11661
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11662
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11663
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11664
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11665
+ ] })
11666
+ }
11667
+ )
11668
+ ] }),
11669
+ /* @__PURE__ */ jsxRuntime.jsx(
11670
+ Form$2.Field,
11671
+ {
11672
+ control: form.control,
11673
+ name: "company",
11674
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11675
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11676
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11677
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11678
+ ] })
11679
+ }
11680
+ ),
11681
+ /* @__PURE__ */ jsxRuntime.jsx(
11682
+ Form$2.Field,
11683
+ {
11684
+ control: form.control,
11685
+ name: "address_1",
11686
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11687
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11688
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11689
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11690
+ ] })
11691
+ }
11692
+ ),
11693
+ /* @__PURE__ */ jsxRuntime.jsx(
11694
+ Form$2.Field,
11695
+ {
11696
+ control: form.control,
11697
+ name: "address_2",
11698
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11699
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11700
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11701
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11702
+ ] })
11703
+ }
11704
+ ),
11705
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11706
+ /* @__PURE__ */ jsxRuntime.jsx(
11707
+ Form$2.Field,
11708
+ {
11709
+ control: form.control,
11710
+ name: "postal_code",
11711
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11712
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11713
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11714
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11715
+ ] })
11716
+ }
11717
+ ),
11718
+ /* @__PURE__ */ jsxRuntime.jsx(
11719
+ Form$2.Field,
11720
+ {
11721
+ control: form.control,
11722
+ name: "city",
11723
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11724
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11725
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11726
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11727
+ ] })
11728
+ }
11729
+ )
11730
+ ] }),
11731
+ /* @__PURE__ */ jsxRuntime.jsx(
11732
+ Form$2.Field,
11733
+ {
11734
+ control: form.control,
11735
+ name: "province",
11736
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11737
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11738
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11739
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11740
+ ] })
11741
+ }
11742
+ ),
11743
+ /* @__PURE__ */ jsxRuntime.jsx(
11744
+ Form$2.Field,
11745
+ {
11746
+ control: form.control,
11747
+ name: "phone",
11748
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11749
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11750
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11751
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11752
+ ] })
11753
+ }
11754
+ )
11755
+ ] }) }),
11756
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11757
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11758
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11759
+ ] }) })
11760
+ ]
11761
+ }
11762
+ ) });
11763
+ };
11764
+ const schema$1 = addressSchema;
11765
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11766
+ const Shipping = () => {
11767
+ var _a;
11768
+ const { id } = reactRouterDom.useParams();
11769
+ const { order, isPending, isError, error } = useOrder(id, {
11770
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11771
+ });
11772
+ const {
11773
+ order: preview,
11774
+ isPending: isPreviewPending,
11775
+ isError: isPreviewError,
11776
+ error: previewError
11777
+ } = useOrderPreview(id);
11778
+ useInitiateOrderEdit({ preview });
11779
+ const { onCancel } = useCancelOrderEdit({ preview });
11780
+ if (isError) {
11781
+ throw error;
11782
+ }
11783
+ if (isPreviewError) {
11784
+ throw previewError;
11785
+ }
11786
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11787
+ const isReady = preview && !isPreviewPending && order && !isPending;
11788
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11789
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11790
+ /* @__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: [
11791
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11792
+ /* @__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." }) })
11793
+ ] }) }) }),
11794
+ /* @__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" }) }) })
11795
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11796
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11797
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11798
+ ] }) });
11799
+ };
11800
+ const ShippingForm = ({ preview, order }) => {
11801
+ var _a;
11802
+ const { setIsOpen } = useStackedModal();
11803
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11804
+ const [data, setData] = React.useState(null);
11805
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11806
+ const { shipping_options } = useShippingOptions(
11807
+ {
11808
+ id: appliedShippingOptionIds,
11809
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11810
+ },
11811
+ {
11812
+ enabled: appliedShippingOptionIds.length > 0
11420
11813
  }
11421
11814
  );
11422
11815
  const uniqueShippingProfiles = React.useMemo(() => {
@@ -12199,7 +12592,7 @@ const TransferOwnershipForm = ({ order }) => {
12199
12592
  defaultValues: {
12200
12593
  customer_id: order.customer_id || ""
12201
12594
  },
12202
- resolver: zod.zodResolver(schema$2)
12595
+ resolver: zod.zodResolver(schema)
12203
12596
  });
12204
12597
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12205
12598
  const { handleSuccess } = useRouteModal();
@@ -12649,402 +13042,9 @@ const Illustration = () => {
12649
13042
  }
12650
13043
  );
12651
13044
  };
12652
- const schema$2 = objectType({
13045
+ const schema = objectType({
12653
13046
  customer_id: stringType().min(1)
12654
13047
  });
12655
- const ShippingAddress = () => {
12656
- const { id } = reactRouterDom.useParams();
12657
- const { order, isPending, isError, error } = useOrder(id, {
12658
- fields: "+shipping_address"
12659
- });
12660
- if (isError) {
12661
- throw error;
12662
- }
12663
- const isReady = !isPending && !!order;
12664
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12665
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12666
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12667
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12668
- ] }),
12669
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12670
- ] });
12671
- };
12672
- const ShippingAddressForm = ({ order }) => {
12673
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12674
- const form = reactHookForm.useForm({
12675
- defaultValues: {
12676
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12677
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12678
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12679
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12680
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12681
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12682
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12683
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12684
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12685
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12686
- },
12687
- resolver: zod.zodResolver(schema$1)
12688
- });
12689
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12690
- const { handleSuccess } = useRouteModal();
12691
- const onSubmit = form.handleSubmit(async (data) => {
12692
- await mutateAsync(
12693
- {
12694
- shipping_address: {
12695
- first_name: data.first_name,
12696
- last_name: data.last_name,
12697
- company: data.company,
12698
- address_1: data.address_1,
12699
- address_2: data.address_2,
12700
- city: data.city,
12701
- province: data.province,
12702
- country_code: data.country_code,
12703
- postal_code: data.postal_code,
12704
- phone: data.phone
12705
- }
12706
- },
12707
- {
12708
- onSuccess: () => {
12709
- handleSuccess();
12710
- },
12711
- onError: (error) => {
12712
- ui.toast.error(error.message);
12713
- }
12714
- }
12715
- );
12716
- });
12717
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12718
- KeyboundForm,
12719
- {
12720
- className: "flex flex-1 flex-col overflow-hidden",
12721
- onSubmit,
12722
- children: [
12723
- /* @__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: [
12724
- /* @__PURE__ */ jsxRuntime.jsx(
12725
- Form$2.Field,
12726
- {
12727
- control: form.control,
12728
- name: "country_code",
12729
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12730
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12731
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12732
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12733
- ] })
12734
- }
12735
- ),
12736
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12737
- /* @__PURE__ */ jsxRuntime.jsx(
12738
- Form$2.Field,
12739
- {
12740
- control: form.control,
12741
- name: "first_name",
12742
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12743
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12744
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12745
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12746
- ] })
12747
- }
12748
- ),
12749
- /* @__PURE__ */ jsxRuntime.jsx(
12750
- Form$2.Field,
12751
- {
12752
- control: form.control,
12753
- name: "last_name",
12754
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12755
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12756
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12757
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12758
- ] })
12759
- }
12760
- )
12761
- ] }),
12762
- /* @__PURE__ */ jsxRuntime.jsx(
12763
- Form$2.Field,
12764
- {
12765
- control: form.control,
12766
- name: "company",
12767
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12768
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12769
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12770
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12771
- ] })
12772
- }
12773
- ),
12774
- /* @__PURE__ */ jsxRuntime.jsx(
12775
- Form$2.Field,
12776
- {
12777
- control: form.control,
12778
- name: "address_1",
12779
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12780
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12781
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12782
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12783
- ] })
12784
- }
12785
- ),
12786
- /* @__PURE__ */ jsxRuntime.jsx(
12787
- Form$2.Field,
12788
- {
12789
- control: form.control,
12790
- name: "address_2",
12791
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12792
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12793
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12794
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12795
- ] })
12796
- }
12797
- ),
12798
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12799
- /* @__PURE__ */ jsxRuntime.jsx(
12800
- Form$2.Field,
12801
- {
12802
- control: form.control,
12803
- name: "postal_code",
12804
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12805
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12806
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12807
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12808
- ] })
12809
- }
12810
- ),
12811
- /* @__PURE__ */ jsxRuntime.jsx(
12812
- Form$2.Field,
12813
- {
12814
- control: form.control,
12815
- name: "city",
12816
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12817
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12818
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12819
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12820
- ] })
12821
- }
12822
- )
12823
- ] }),
12824
- /* @__PURE__ */ jsxRuntime.jsx(
12825
- Form$2.Field,
12826
- {
12827
- control: form.control,
12828
- name: "province",
12829
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12830
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12831
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12832
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12833
- ] })
12834
- }
12835
- ),
12836
- /* @__PURE__ */ jsxRuntime.jsx(
12837
- Form$2.Field,
12838
- {
12839
- control: form.control,
12840
- name: "phone",
12841
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12842
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12843
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12844
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12845
- ] })
12846
- }
12847
- )
12848
- ] }) }),
12849
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12850
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12851
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12852
- ] }) })
12853
- ]
12854
- }
12855
- ) });
12856
- };
12857
- const schema$1 = addressSchema;
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) ?? ""
12889
- },
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);
12903
- }
12904
- }
12905
- );
12906
- });
12907
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12908
- KeyboundForm,
12909
- {
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
- )
12951
- ] }),
12952
- /* @__PURE__ */ jsxRuntime.jsx(
12953
- Form$2.Field,
12954
- {
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
- ] })
12962
- }
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
- )
13013
- ] }),
13014
- /* @__PURE__ */ jsxRuntime.jsx(
13015
- Form$2.Field,
13016
- {
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
- ] })
13024
- }
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
- ]
13044
- }
13045
- ) });
13046
- };
13047
- const schema = addressSchema;
13048
13048
  const widgetModule = { widgets: [] };
13049
13049
  const routeModule = {
13050
13050
  routes: [
@@ -13073,6 +13073,10 @@ const routeModule = {
13073
13073
  Component: Email,
13074
13074
  path: "/draft-orders/:id/email"
13075
13075
  },
13076
+ {
13077
+ Component: BillingAddress,
13078
+ path: "/draft-orders/:id/billing-address"
13079
+ },
13076
13080
  {
13077
13081
  Component: Items,
13078
13082
  path: "/draft-orders/:id/items"
@@ -13089,6 +13093,10 @@ const routeModule = {
13089
13093
  Component: SalesChannel,
13090
13094
  path: "/draft-orders/:id/sales-channel"
13091
13095
  },
13096
+ {
13097
+ Component: ShippingAddress,
13098
+ path: "/draft-orders/:id/shipping-address"
13099
+ },
13092
13100
  {
13093
13101
  Component: Shipping,
13094
13102
  path: "/draft-orders/:id/shipping"
@@ -13096,14 +13104,6 @@ const routeModule = {
13096
13104
  {
13097
13105
  Component: TransferOwnership,
13098
13106
  path: "/draft-orders/:id/transfer-ownership"
13099
- },
13100
- {
13101
- Component: ShippingAddress,
13102
- path: "/draft-orders/:id/shipping-address"
13103
- },
13104
- {
13105
- Component: BillingAddress,
13106
- path: "/draft-orders/:id/billing-address"
13107
13107
  }
13108
13108
  ]
13109
13109
  }