@medusajs/draft-order 2.11.3-preview-20251031150158 → 2.11.3-preview-20251031210152

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.
@@ -14,14 +14,15 @@ const reactHookForm = require("react-hook-form");
14
14
  const radixUi = require("radix-ui");
15
15
  const react = require("@ariakit/react");
16
16
  const matchSorter = require("match-sorter");
17
- const debounce = require("lodash/debounce");
17
+ const debounce = require("lodash.debounce");
18
18
  const Primitive = require("@uiw/react-json-view");
19
- const lodash = require("lodash");
19
+ const isEqual = require("lodash.isequal");
20
20
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
21
21
  const React__default = /* @__PURE__ */ _interopDefault(React);
22
22
  const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
23
23
  const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
24
24
  const Primitive__default = /* @__PURE__ */ _interopDefault(Primitive);
25
+ const isEqual__default = /* @__PURE__ */ _interopDefault(isEqual);
25
26
  function useQueryParams(keys, prefix) {
26
27
  const [params] = reactRouterDom.useSearchParams();
27
28
  const result = {};
@@ -9592,6 +9593,196 @@ const CustomItemsForm = () => {
9592
9593
  const schema$5 = objectType({
9593
9594
  email: stringType().email()
9594
9595
  });
9596
+ const BillingAddress = () => {
9597
+ const { id } = reactRouterDom.useParams();
9598
+ const { order, isPending, isError, error } = useOrder(id, {
9599
+ fields: "+billing_address"
9600
+ });
9601
+ if (isError) {
9602
+ throw error;
9603
+ }
9604
+ const isReady = !isPending && !!order;
9605
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9606
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9607
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
9608
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9609
+ ] }),
9610
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9611
+ ] });
9612
+ };
9613
+ const BillingAddressForm = ({ order }) => {
9614
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9615
+ const form = reactHookForm.useForm({
9616
+ defaultValues: {
9617
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9618
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9619
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9620
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9621
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9622
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9623
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9624
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9625
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9626
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9627
+ },
9628
+ resolver: zod.zodResolver(schema$4)
9629
+ });
9630
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9631
+ const { handleSuccess } = useRouteModal();
9632
+ const onSubmit = form.handleSubmit(async (data) => {
9633
+ await mutateAsync(
9634
+ { billing_address: data },
9635
+ {
9636
+ onSuccess: () => {
9637
+ handleSuccess();
9638
+ },
9639
+ onError: (error) => {
9640
+ ui.toast.error(error.message);
9641
+ }
9642
+ }
9643
+ );
9644
+ });
9645
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9646
+ KeyboundForm,
9647
+ {
9648
+ className: "flex flex-1 flex-col overflow-hidden",
9649
+ onSubmit,
9650
+ children: [
9651
+ /* @__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: [
9652
+ /* @__PURE__ */ jsxRuntime.jsx(
9653
+ Form$2.Field,
9654
+ {
9655
+ control: form.control,
9656
+ name: "country_code",
9657
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9658
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
9659
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
9660
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9661
+ ] })
9662
+ }
9663
+ ),
9664
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9665
+ /* @__PURE__ */ jsxRuntime.jsx(
9666
+ Form$2.Field,
9667
+ {
9668
+ control: form.control,
9669
+ name: "first_name",
9670
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9671
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
9672
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9673
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9674
+ ] })
9675
+ }
9676
+ ),
9677
+ /* @__PURE__ */ jsxRuntime.jsx(
9678
+ Form$2.Field,
9679
+ {
9680
+ control: form.control,
9681
+ name: "last_name",
9682
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9683
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
9684
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9685
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9686
+ ] })
9687
+ }
9688
+ )
9689
+ ] }),
9690
+ /* @__PURE__ */ jsxRuntime.jsx(
9691
+ Form$2.Field,
9692
+ {
9693
+ control: form.control,
9694
+ name: "company",
9695
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9696
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
9697
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9698
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9699
+ ] })
9700
+ }
9701
+ ),
9702
+ /* @__PURE__ */ jsxRuntime.jsx(
9703
+ Form$2.Field,
9704
+ {
9705
+ control: form.control,
9706
+ name: "address_1",
9707
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9708
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
9709
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9710
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9711
+ ] })
9712
+ }
9713
+ ),
9714
+ /* @__PURE__ */ jsxRuntime.jsx(
9715
+ Form$2.Field,
9716
+ {
9717
+ control: form.control,
9718
+ name: "address_2",
9719
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9720
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9721
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9722
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9723
+ ] })
9724
+ }
9725
+ ),
9726
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9727
+ /* @__PURE__ */ jsxRuntime.jsx(
9728
+ Form$2.Field,
9729
+ {
9730
+ control: form.control,
9731
+ name: "postal_code",
9732
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9733
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
9734
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9735
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9736
+ ] })
9737
+ }
9738
+ ),
9739
+ /* @__PURE__ */ jsxRuntime.jsx(
9740
+ Form$2.Field,
9741
+ {
9742
+ control: form.control,
9743
+ name: "city",
9744
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9745
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
9746
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9747
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9748
+ ] })
9749
+ }
9750
+ )
9751
+ ] }),
9752
+ /* @__PURE__ */ jsxRuntime.jsx(
9753
+ Form$2.Field,
9754
+ {
9755
+ control: form.control,
9756
+ name: "province",
9757
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9758
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9759
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9760
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9761
+ ] })
9762
+ }
9763
+ ),
9764
+ /* @__PURE__ */ jsxRuntime.jsx(
9765
+ Form$2.Field,
9766
+ {
9767
+ control: form.control,
9768
+ name: "phone",
9769
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9770
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
9771
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9772
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9773
+ ] })
9774
+ }
9775
+ )
9776
+ ] }) }),
9777
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9778
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9779
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9780
+ ] }) })
9781
+ ]
9782
+ }
9783
+ ) });
9784
+ };
9785
+ const schema$4 = addressSchema;
9595
9786
  const Email = () => {
9596
9787
  const { id } = reactRouterDom.useParams();
9597
9788
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9614,7 +9805,7 @@ const EmailForm = ({ order }) => {
9614
9805
  defaultValues: {
9615
9806
  email: order.email ?? ""
9616
9807
  },
9617
- resolver: zod.zodResolver(schema$4)
9808
+ resolver: zod.zodResolver(schema$3)
9618
9809
  });
9619
9810
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9620
9811
  const { handleSuccess } = useRouteModal();
@@ -9657,7 +9848,7 @@ const EmailForm = ({ order }) => {
9657
9848
  }
9658
9849
  ) });
9659
9850
  };
9660
- const schema$4 = objectType({
9851
+ const schema$3 = objectType({
9661
9852
  email: stringType().email()
9662
9853
  });
9663
9854
  const NumberInput = React.forwardRef(
@@ -11261,360 +11452,51 @@ function getPromotionIds(items, shippingMethods) {
11261
11452
  }
11262
11453
  return Array.from(promotionIds);
11263
11454
  }
11264
- const SalesChannel = () => {
11455
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11456
+ const Shipping = () => {
11457
+ var _a;
11265
11458
  const { id } = reactRouterDom.useParams();
11266
- const { draft_order, isPending, isError, error } = useDraftOrder(
11267
- id,
11268
- {
11269
- fields: "+sales_channel_id"
11270
- },
11271
- {
11272
- enabled: !!id
11273
- }
11274
- );
11459
+ const { order, isPending, isError, error } = useOrder(id, {
11460
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11461
+ });
11462
+ const {
11463
+ order: preview,
11464
+ isPending: isPreviewPending,
11465
+ isError: isPreviewError,
11466
+ error: previewError
11467
+ } = useOrderPreview(id);
11468
+ useInitiateOrderEdit({ preview });
11469
+ const { onCancel } = useCancelOrderEdit({ preview });
11275
11470
  if (isError) {
11276
11471
  throw error;
11277
11472
  }
11278
- const ISrEADY = !!draft_order && !isPending;
11279
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11280
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11281
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11282
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11283
- ] }),
11284
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11285
- ] });
11473
+ if (isPreviewError) {
11474
+ throw previewError;
11475
+ }
11476
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11477
+ const isReady = preview && !isPreviewPending && order && !isPending;
11478
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11479
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11480
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11481
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11482
+ /* @__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." }) })
11483
+ ] }) }) }),
11484
+ /* @__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" }) }) })
11485
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11486
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11487
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11488
+ ] }) });
11286
11489
  };
11287
- const SalesChannelForm = ({ order }) => {
11288
- const form = reactHookForm.useForm({
11289
- defaultValues: {
11290
- sales_channel_id: order.sales_channel_id || ""
11291
- },
11292
- resolver: zod.zodResolver(schema$3)
11293
- });
11294
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11295
- const { handleSuccess } = useRouteModal();
11296
- const onSubmit = form.handleSubmit(async (data) => {
11297
- await mutateAsync(
11298
- {
11299
- sales_channel_id: data.sales_channel_id
11300
- },
11301
- {
11302
- onSuccess: () => {
11303
- ui.toast.success("Sales channel updated");
11304
- handleSuccess();
11305
- },
11306
- onError: (error) => {
11307
- ui.toast.error(error.message);
11308
- }
11309
- }
11310
- );
11311
- });
11312
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11313
- KeyboundForm,
11314
- {
11315
- className: "flex flex-1 flex-col overflow-hidden",
11316
- onSubmit,
11317
- children: [
11318
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11319
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11320
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11321
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11322
- ] }) })
11323
- ]
11324
- }
11325
- ) });
11326
- };
11327
- const SalesChannelField = ({ control, order }) => {
11328
- const salesChannels = useComboboxData({
11329
- queryFn: async (params) => {
11330
- return await sdk.admin.salesChannel.list(params);
11331
- },
11332
- queryKey: ["sales-channels"],
11333
- getOptions: (data) => {
11334
- return data.sales_channels.map((salesChannel) => ({
11335
- label: salesChannel.name,
11336
- value: salesChannel.id
11337
- }));
11338
- },
11339
- defaultValue: order.sales_channel_id || void 0
11340
- });
11341
- return /* @__PURE__ */ jsxRuntime.jsx(
11342
- Form$2.Field,
11343
- {
11344
- control,
11345
- name: "sales_channel_id",
11346
- render: ({ field }) => {
11347
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11348
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11349
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11350
- Combobox,
11351
- {
11352
- options: salesChannels.options,
11353
- fetchNextPage: salesChannels.fetchNextPage,
11354
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11355
- searchValue: salesChannels.searchValue,
11356
- onSearchValueChange: salesChannels.onSearchValueChange,
11357
- placeholder: "Select sales channel",
11358
- ...field
11359
- }
11360
- ) }),
11361
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11362
- ] });
11363
- }
11364
- }
11365
- );
11366
- };
11367
- const schema$3 = objectType({
11368
- sales_channel_id: stringType().min(1)
11369
- });
11370
- const ShippingAddress = () => {
11371
- const { id } = reactRouterDom.useParams();
11372
- const { order, isPending, isError, error } = useOrder(id, {
11373
- fields: "+shipping_address"
11374
- });
11375
- if (isError) {
11376
- throw error;
11377
- }
11378
- const isReady = !isPending && !!order;
11379
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11380
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11381
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11382
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11383
- ] }),
11384
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11385
- ] });
11386
- };
11387
- const ShippingAddressForm = ({ order }) => {
11388
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11389
- const form = reactHookForm.useForm({
11390
- defaultValues: {
11391
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11392
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11393
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11394
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11395
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11396
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11397
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11398
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11399
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11400
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11401
- },
11402
- resolver: zod.zodResolver(schema$2)
11403
- });
11404
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11405
- const { handleSuccess } = useRouteModal();
11406
- const onSubmit = form.handleSubmit(async (data) => {
11407
- await mutateAsync(
11408
- {
11409
- shipping_address: {
11410
- first_name: data.first_name,
11411
- last_name: data.last_name,
11412
- company: data.company,
11413
- address_1: data.address_1,
11414
- address_2: data.address_2,
11415
- city: data.city,
11416
- province: data.province,
11417
- country_code: data.country_code,
11418
- postal_code: data.postal_code,
11419
- phone: data.phone
11420
- }
11421
- },
11422
- {
11423
- onSuccess: () => {
11424
- handleSuccess();
11425
- },
11426
- onError: (error) => {
11427
- ui.toast.error(error.message);
11428
- }
11429
- }
11430
- );
11431
- });
11432
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11433
- KeyboundForm,
11434
- {
11435
- className: "flex flex-1 flex-col overflow-hidden",
11436
- onSubmit,
11437
- children: [
11438
- /* @__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: [
11439
- /* @__PURE__ */ jsxRuntime.jsx(
11440
- Form$2.Field,
11441
- {
11442
- control: form.control,
11443
- name: "country_code",
11444
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11445
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11446
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11447
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11448
- ] })
11449
- }
11450
- ),
11451
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11452
- /* @__PURE__ */ jsxRuntime.jsx(
11453
- Form$2.Field,
11454
- {
11455
- control: form.control,
11456
- name: "first_name",
11457
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11458
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11459
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11460
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11461
- ] })
11462
- }
11463
- ),
11464
- /* @__PURE__ */ jsxRuntime.jsx(
11465
- Form$2.Field,
11466
- {
11467
- control: form.control,
11468
- name: "last_name",
11469
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11470
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11471
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11472
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11473
- ] })
11474
- }
11475
- )
11476
- ] }),
11477
- /* @__PURE__ */ jsxRuntime.jsx(
11478
- Form$2.Field,
11479
- {
11480
- control: form.control,
11481
- name: "company",
11482
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11483
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11484
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11485
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11486
- ] })
11487
- }
11488
- ),
11489
- /* @__PURE__ */ jsxRuntime.jsx(
11490
- Form$2.Field,
11491
- {
11492
- control: form.control,
11493
- name: "address_1",
11494
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11495
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11496
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11497
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11498
- ] })
11499
- }
11500
- ),
11501
- /* @__PURE__ */ jsxRuntime.jsx(
11502
- Form$2.Field,
11503
- {
11504
- control: form.control,
11505
- name: "address_2",
11506
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11507
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11508
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11509
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11510
- ] })
11511
- }
11512
- ),
11513
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11514
- /* @__PURE__ */ jsxRuntime.jsx(
11515
- Form$2.Field,
11516
- {
11517
- control: form.control,
11518
- name: "postal_code",
11519
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11520
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11521
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11522
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11523
- ] })
11524
- }
11525
- ),
11526
- /* @__PURE__ */ jsxRuntime.jsx(
11527
- Form$2.Field,
11528
- {
11529
- control: form.control,
11530
- name: "city",
11531
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11532
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11533
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11534
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11535
- ] })
11536
- }
11537
- )
11538
- ] }),
11539
- /* @__PURE__ */ jsxRuntime.jsx(
11540
- Form$2.Field,
11541
- {
11542
- control: form.control,
11543
- name: "province",
11544
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11545
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11546
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11547
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11548
- ] })
11549
- }
11550
- ),
11551
- /* @__PURE__ */ jsxRuntime.jsx(
11552
- Form$2.Field,
11553
- {
11554
- control: form.control,
11555
- name: "phone",
11556
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11557
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11558
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11559
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11560
- ] })
11561
- }
11562
- )
11563
- ] }) }),
11564
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11565
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11566
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11567
- ] }) })
11568
- ]
11569
- }
11570
- ) });
11571
- };
11572
- const schema$2 = addressSchema;
11573
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11574
- const Shipping = () => {
11575
- var _a;
11576
- const { id } = reactRouterDom.useParams();
11577
- const { order, isPending, isError, error } = useOrder(id, {
11578
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11579
- });
11580
- const {
11581
- order: preview,
11582
- isPending: isPreviewPending,
11583
- isError: isPreviewError,
11584
- error: previewError
11585
- } = useOrderPreview(id);
11586
- useInitiateOrderEdit({ preview });
11587
- const { onCancel } = useCancelOrderEdit({ preview });
11588
- if (isError) {
11589
- throw error;
11590
- }
11591
- if (isPreviewError) {
11592
- throw previewError;
11593
- }
11594
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11595
- const isReady = preview && !isPreviewPending && order && !isPending;
11596
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11597
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11598
- /* @__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: [
11599
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11600
- /* @__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." }) })
11601
- ] }) }) }),
11602
- /* @__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" }) }) })
11603
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11604
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11605
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11606
- ] }) });
11607
- };
11608
- const ShippingForm = ({ preview, order }) => {
11609
- var _a;
11610
- const { setIsOpen } = useStackedModal();
11611
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11612
- const [data, setData] = React.useState(null);
11613
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11614
- const { shipping_options } = useShippingOptions(
11615
- {
11616
- id: appliedShippingOptionIds,
11617
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11490
+ const ShippingForm = ({ preview, order }) => {
11491
+ var _a;
11492
+ const { setIsOpen } = useStackedModal();
11493
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11494
+ const [data, setData] = React.useState(null);
11495
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11496
+ const { shipping_options } = useShippingOptions(
11497
+ {
11498
+ id: appliedShippingOptionIds,
11499
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11618
11500
  },
11619
11501
  {
11620
11502
  enabled: appliedShippingOptionIds.length > 0
@@ -11682,14 +11564,14 @@ const ShippingForm = ({ preview, order }) => {
11682
11564
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11683
11565
  /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11684
11566
  /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11685
- /* @__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: [
11567
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11686
11568
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11687
11569
  /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11688
11570
  /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11689
11571
  ] }),
11690
11572
  /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11691
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11692
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11573
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11574
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
11693
11575
  /* @__PURE__ */ jsxRuntime.jsx(
11694
11576
  ui.Text,
11695
11577
  {
@@ -11731,8 +11613,8 @@ const ShippingForm = ({ preview, order }) => {
11731
11613
  value: profile.id,
11732
11614
  className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11733
11615
  children: [
11734
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11735
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11616
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
11617
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
11736
11618
  /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11737
11619
  ui.IconButton,
11738
11620
  {
@@ -11740,12 +11622,12 @@ const ShippingForm = ({ preview, order }) => {
11740
11622
  variant: "transparent",
11741
11623
  className: "group/trigger",
11742
11624
  disabled: !hasItems,
11743
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11625
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
11744
11626
  }
11745
11627
  ) }),
11746
11628
  !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11747
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
11748
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
11629
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
11630
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
11749
11631
  /* @__PURE__ */ jsxRuntime.jsx(
11750
11632
  ui.Text,
11751
11633
  {
@@ -11769,7 +11651,7 @@ const ShippingForm = ({ preview, order }) => {
11769
11651
  }
11770
11652
  )
11771
11653
  ] })
11772
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11654
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
11773
11655
  /* @__PURE__ */ jsxRuntime.jsx(
11774
11656
  ui.Tooltip,
11775
11657
  {
@@ -11786,7 +11668,7 @@ const ShippingForm = ({ preview, order }) => {
11786
11668
  children: /* @__PURE__ */ jsxRuntime.jsxs(
11787
11669
  ui.Badge,
11788
11670
  {
11789
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11671
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11790
11672
  size: "xsmall",
11791
11673
  children: [
11792
11674
  /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
@@ -11811,7 +11693,7 @@ const ShippingForm = ({ preview, order }) => {
11811
11693
  children: /* @__PURE__ */ jsxRuntime.jsxs(
11812
11694
  ui.Badge,
11813
11695
  {
11814
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11696
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11815
11697
  size: "xsmall",
11816
11698
  children: [
11817
11699
  /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
@@ -11824,7 +11706,7 @@ const ShippingForm = ({ preview, order }) => {
11824
11706
  /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11825
11707
  ui.Badge,
11826
11708
  {
11827
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11709
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11828
11710
  size: "xsmall",
11829
11711
  children: [
11830
11712
  /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
@@ -11895,17 +11777,17 @@ const ShippingForm = ({ preview, order }) => {
11895
11777
  /* @__PURE__ */ jsxRuntime.jsxs(
11896
11778
  "div",
11897
11779
  {
11898
- className: "px-3 flex items-center gap-x-3",
11780
+ className: "flex items-center gap-x-3 px-3",
11899
11781
  children: [
11900
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11782
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11901
11783
  ui.Divider,
11902
11784
  {
11903
11785
  variant: "dashed",
11904
11786
  orientation: "vertical"
11905
11787
  }
11906
11788
  ) }),
11907
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11908
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11789
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
11790
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11909
11791
  ui.Text,
11910
11792
  {
11911
11793
  size: "small",
@@ -12042,7 +11924,7 @@ const ShippingProfileForm = ({
12042
11924
  isPending: isUpdatingShippingMethod
12043
11925
  } = useDraftOrderUpdateShippingMethod(order.id);
12044
11926
  const onSubmit = form.handleSubmit(async (values) => {
12045
- if (lodash.isEqual(values, form.formState.defaultValues)) {
11927
+ if (isEqual__default.default(values, form.formState.defaultValues)) {
12046
11928
  setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12047
11929
  return;
12048
11930
  }
@@ -12086,7 +11968,7 @@ const ShippingProfileForm = ({
12086
11968
  onSubmit,
12087
11969
  children: [
12088
11970
  /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12089
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11971
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12090
11972
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12091
11973
  /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12092
11974
  /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
@@ -12159,14 +12041,14 @@ const ItemsPreview = ({ order, shippingProfileId }) => {
12159
12041
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12160
12042
  ] }) }),
12161
12043
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12162
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12044
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12163
12045
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12164
12046
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12165
12047
  ] }),
12166
12048
  /* @__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(
12167
12049
  "div",
12168
12050
  {
12169
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12051
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12170
12052
  children: [
12171
12053
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12172
12054
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -12219,7 +12101,7 @@ const ItemsPreview = ({ order, shippingProfileId }) => {
12219
12101
  ]
12220
12102
  },
12221
12103
  item.id
12222
- )) : /* @__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: [
12104
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12223
12105
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12224
12106
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12225
12107
  'No items found for "',
@@ -12377,6 +12259,112 @@ const CustomAmountField = ({
12377
12259
  }
12378
12260
  );
12379
12261
  };
12262
+ const SalesChannel = () => {
12263
+ const { id } = reactRouterDom.useParams();
12264
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12265
+ id,
12266
+ {
12267
+ fields: "+sales_channel_id"
12268
+ },
12269
+ {
12270
+ enabled: !!id
12271
+ }
12272
+ );
12273
+ if (isError) {
12274
+ throw error;
12275
+ }
12276
+ const ISrEADY = !!draft_order && !isPending;
12277
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12278
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12279
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
12280
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12281
+ ] }),
12282
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
12283
+ ] });
12284
+ };
12285
+ const SalesChannelForm = ({ order }) => {
12286
+ const form = reactHookForm.useForm({
12287
+ defaultValues: {
12288
+ sales_channel_id: order.sales_channel_id || ""
12289
+ },
12290
+ resolver: zod.zodResolver(schema$2)
12291
+ });
12292
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12293
+ const { handleSuccess } = useRouteModal();
12294
+ const onSubmit = form.handleSubmit(async (data) => {
12295
+ await mutateAsync(
12296
+ {
12297
+ sales_channel_id: data.sales_channel_id
12298
+ },
12299
+ {
12300
+ onSuccess: () => {
12301
+ ui.toast.success("Sales channel updated");
12302
+ handleSuccess();
12303
+ },
12304
+ onError: (error) => {
12305
+ ui.toast.error(error.message);
12306
+ }
12307
+ }
12308
+ );
12309
+ });
12310
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12311
+ KeyboundForm,
12312
+ {
12313
+ className: "flex flex-1 flex-col overflow-hidden",
12314
+ onSubmit,
12315
+ children: [
12316
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
12317
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12318
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12319
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12320
+ ] }) })
12321
+ ]
12322
+ }
12323
+ ) });
12324
+ };
12325
+ const SalesChannelField = ({ control, order }) => {
12326
+ const salesChannels = useComboboxData({
12327
+ queryFn: async (params) => {
12328
+ return await sdk.admin.salesChannel.list(params);
12329
+ },
12330
+ queryKey: ["sales-channels"],
12331
+ getOptions: (data) => {
12332
+ return data.sales_channels.map((salesChannel) => ({
12333
+ label: salesChannel.name,
12334
+ value: salesChannel.id
12335
+ }));
12336
+ },
12337
+ defaultValue: order.sales_channel_id || void 0
12338
+ });
12339
+ return /* @__PURE__ */ jsxRuntime.jsx(
12340
+ Form$2.Field,
12341
+ {
12342
+ control,
12343
+ name: "sales_channel_id",
12344
+ render: ({ field }) => {
12345
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12346
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
12347
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12348
+ Combobox,
12349
+ {
12350
+ options: salesChannels.options,
12351
+ fetchNextPage: salesChannels.fetchNextPage,
12352
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
12353
+ searchValue: salesChannels.searchValue,
12354
+ onSearchValueChange: salesChannels.onSearchValueChange,
12355
+ placeholder: "Select sales channel",
12356
+ ...field
12357
+ }
12358
+ ) }),
12359
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12360
+ ] });
12361
+ }
12362
+ }
12363
+ );
12364
+ };
12365
+ const schema$2 = objectType({
12366
+ sales_channel_id: stringType().min(1)
12367
+ });
12380
12368
  const TransferOwnership = () => {
12381
12369
  const { id } = reactRouterDom.useParams();
12382
12370
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12853,10 +12841,10 @@ const Illustration = () => {
12853
12841
  const schema$1 = objectType({
12854
12842
  customer_id: stringType().min(1)
12855
12843
  });
12856
- const BillingAddress = () => {
12844
+ const ShippingAddress = () => {
12857
12845
  const { id } = reactRouterDom.useParams();
12858
12846
  const { order, isPending, isError, error } = useOrder(id, {
12859
- fields: "+billing_address"
12847
+ fields: "+shipping_address"
12860
12848
  });
12861
12849
  if (isError) {
12862
12850
  throw error;
@@ -12864,26 +12852,26 @@ const BillingAddress = () => {
12864
12852
  const isReady = !isPending && !!order;
12865
12853
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12866
12854
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12867
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
12868
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12855
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12856
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12869
12857
  ] }),
12870
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
12858
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12871
12859
  ] });
12872
12860
  };
12873
- const BillingAddressForm = ({ order }) => {
12861
+ const ShippingAddressForm = ({ order }) => {
12874
12862
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12875
12863
  const form = reactHookForm.useForm({
12876
12864
  defaultValues: {
12877
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12878
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12879
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12880
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12881
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12882
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12883
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12884
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12885
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12886
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12865
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12866
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12867
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12868
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12869
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12870
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12871
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12872
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12873
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12874
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12887
12875
  },
12888
12876
  resolver: zod.zodResolver(schema)
12889
12877
  });
@@ -12891,7 +12879,20 @@ const BillingAddressForm = ({ order }) => {
12891
12879
  const { handleSuccess } = useRouteModal();
12892
12880
  const onSubmit = form.handleSubmit(async (data) => {
12893
12881
  await mutateAsync(
12894
- { billing_address: data },
12882
+ {
12883
+ shipping_address: {
12884
+ first_name: data.first_name,
12885
+ last_name: data.last_name,
12886
+ company: data.company,
12887
+ address_1: data.address_1,
12888
+ address_2: data.address_2,
12889
+ city: data.city,
12890
+ province: data.province,
12891
+ country_code: data.country_code,
12892
+ postal_code: data.postal_code,
12893
+ phone: data.phone
12894
+ }
12895
+ },
12895
12896
  {
12896
12897
  onSuccess: () => {
12897
12898
  handleSuccess();
@@ -13067,6 +13068,10 @@ const routeModule = {
13067
13068
  Component: CustomItems,
13068
13069
  path: "/draft-orders/:id/custom-items"
13069
13070
  },
13071
+ {
13072
+ Component: BillingAddress,
13073
+ path: "/draft-orders/:id/billing-address"
13074
+ },
13070
13075
  {
13071
13076
  Component: Email,
13072
13077
  path: "/draft-orders/:id/email"
@@ -13083,25 +13088,21 @@ const routeModule = {
13083
13088
  Component: Promotions,
13084
13089
  path: "/draft-orders/:id/promotions"
13085
13090
  },
13086
- {
13087
- Component: SalesChannel,
13088
- path: "/draft-orders/:id/sales-channel"
13089
- },
13090
- {
13091
- Component: ShippingAddress,
13092
- path: "/draft-orders/:id/shipping-address"
13093
- },
13094
13091
  {
13095
13092
  Component: Shipping,
13096
13093
  path: "/draft-orders/:id/shipping"
13097
13094
  },
13095
+ {
13096
+ Component: SalesChannel,
13097
+ path: "/draft-orders/:id/sales-channel"
13098
+ },
13098
13099
  {
13099
13100
  Component: TransferOwnership,
13100
13101
  path: "/draft-orders/:id/transfer-ownership"
13101
13102
  },
13102
13103
  {
13103
- Component: BillingAddress,
13104
- path: "/draft-orders/:id/billing-address"
13104
+ Component: ShippingAddress,
13105
+ path: "/draft-orders/:id/shipping-address"
13105
13106
  }
13106
13107
  ]
13107
13108
  }