@medusajs/draft-order 2.10.4-preview-20250926031327 → 2.10.4-preview-20250926090153

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