@medusajs/draft-order 2.11.4-preview-20251106210130 → 2.11.4-preview-20251107032027

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/.medusa/server/src/admin/index.js +1510 -1510
  2. package/.medusa/server/src/admin/index.mjs +1510 -1510
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -11448,1598 +11448,1598 @@ function getPromotionIds(items, shippingMethods) {
11448
11448
  }
11449
11449
  return Array.from(promotionIds);
11450
11450
  }
11451
- const SalesChannel = () => {
11451
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11452
+ const Shipping = () => {
11453
+ var _a;
11452
11454
  const { id } = reactRouterDom.useParams();
11453
- const { draft_order, isPending, isError, error } = useDraftOrder(
11454
- id,
11455
- {
11456
- fields: "+sales_channel_id"
11457
- },
11458
- {
11459
- enabled: !!id
11460
- }
11461
- );
11455
+ const { order, isPending, isError, error } = useOrder(id, {
11456
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11457
+ });
11458
+ const {
11459
+ order: preview,
11460
+ isPending: isPreviewPending,
11461
+ isError: isPreviewError,
11462
+ error: previewError
11463
+ } = useOrderPreview(id);
11464
+ useInitiateOrderEdit({ preview });
11465
+ const { onCancel } = useCancelOrderEdit({ preview });
11462
11466
  if (isError) {
11463
11467
  throw error;
11464
11468
  }
11465
- const ISrEADY = !!draft_order && !isPending;
11466
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11467
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11468
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11469
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11470
- ] }),
11471
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11472
- ] });
11469
+ if (isPreviewError) {
11470
+ throw previewError;
11471
+ }
11472
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11473
+ const isReady = preview && !isPreviewPending && order && !isPending;
11474
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11475
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11476
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11477
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11478
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11479
+ ] }) }) }),
11480
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11481
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11482
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11483
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11484
+ ] }) });
11473
11485
  };
11474
- const SalesChannelForm = ({ order }) => {
11475
- const form = reactHookForm.useForm({
11476
- defaultValues: {
11477
- sales_channel_id: order.sales_channel_id || ""
11478
- },
11479
- resolver: zod.zodResolver(schema$2)
11480
- });
11481
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11482
- const { handleSuccess } = useRouteModal();
11483
- const onSubmit = form.handleSubmit(async (data) => {
11484
- await mutateAsync(
11485
- {
11486
- sales_channel_id: data.sales_channel_id
11487
- },
11488
- {
11489
- onSuccess: () => {
11490
- ui.toast.success("Sales channel updated");
11491
- handleSuccess();
11492
- },
11493
- onError: (error) => {
11494
- ui.toast.error(error.message);
11495
- }
11496
- }
11497
- );
11498
- });
11499
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11500
- KeyboundForm,
11486
+ const ShippingForm = ({ preview, order }) => {
11487
+ var _a;
11488
+ const { setIsOpen } = useStackedModal();
11489
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11490
+ const [data, setData] = React.useState(null);
11491
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11492
+ const { shipping_options } = useShippingOptions(
11501
11493
  {
11502
- className: "flex flex-1 flex-col overflow-hidden",
11503
- onSubmit,
11504
- children: [
11505
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11506
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11507
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11508
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11509
- ] }) })
11510
- ]
11511
- }
11512
- ) });
11513
- };
11514
- const SalesChannelField = ({ control, order }) => {
11515
- const salesChannels = useComboboxData({
11516
- queryFn: async (params) => {
11517
- return await sdk.admin.salesChannel.list(params);
11518
- },
11519
- queryKey: ["sales-channels"],
11520
- getOptions: (data) => {
11521
- return data.sales_channels.map((salesChannel) => ({
11522
- label: salesChannel.name,
11523
- value: salesChannel.id
11524
- }));
11494
+ id: appliedShippingOptionIds,
11495
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11525
11496
  },
11526
- defaultValue: order.sales_channel_id || void 0
11527
- });
11528
- return /* @__PURE__ */ jsxRuntime.jsx(
11529
- Form$2.Field,
11530
11497
  {
11531
- control,
11532
- name: "sales_channel_id",
11533
- render: ({ field }) => {
11534
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11535
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11536
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11537
- Combobox,
11538
- {
11539
- options: salesChannels.options,
11540
- fetchNextPage: salesChannels.fetchNextPage,
11541
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11542
- searchValue: salesChannels.searchValue,
11543
- onSearchValueChange: salesChannels.onSearchValueChange,
11544
- placeholder: "Select sales channel",
11545
- ...field
11546
- }
11547
- ) }),
11548
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11549
- ] });
11550
- }
11498
+ enabled: appliedShippingOptionIds.length > 0
11551
11499
  }
11552
11500
  );
11553
- };
11554
- const schema$2 = objectType({
11555
- sales_channel_id: stringType().min(1)
11556
- });
11557
- const ShippingAddress = () => {
11558
- const { id } = reactRouterDom.useParams();
11559
- const { order, isPending, isError, error } = useOrder(id, {
11560
- fields: "+shipping_address"
11561
- });
11562
- if (isError) {
11563
- throw error;
11564
- }
11565
- const isReady = !isPending && !!order;
11566
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11567
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11568
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11569
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11570
- ] }),
11571
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11572
- ] });
11573
- };
11574
- const ShippingAddressForm = ({ order }) => {
11575
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11576
- const form = reactHookForm.useForm({
11577
- defaultValues: {
11578
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11579
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11580
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11581
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11582
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11583
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11584
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11585
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11586
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11587
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11588
- },
11589
- resolver: zod.zodResolver(schema$1)
11590
- });
11591
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11501
+ const uniqueShippingProfiles = React.useMemo(() => {
11502
+ const profiles = /* @__PURE__ */ new Map();
11503
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11504
+ profiles.set(profile.id, profile);
11505
+ });
11506
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11507
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11508
+ });
11509
+ return Array.from(profiles.values());
11510
+ }, [order.items, shipping_options]);
11592
11511
  const { handleSuccess } = useRouteModal();
11593
- const onSubmit = form.handleSubmit(async (data) => {
11594
- await mutateAsync(
11595
- {
11596
- shipping_address: {
11597
- first_name: data.first_name,
11598
- last_name: data.last_name,
11599
- company: data.company,
11600
- address_1: data.address_1,
11601
- address_2: data.address_2,
11602
- city: data.city,
11603
- province: data.province,
11604
- country_code: data.country_code,
11605
- postal_code: data.postal_code,
11606
- phone: data.phone
11607
- }
11512
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11513
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11514
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11515
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11516
+ const onSubmit = async () => {
11517
+ setIsSubmitting(true);
11518
+ let requestSucceeded = false;
11519
+ await requestOrderEdit(void 0, {
11520
+ onError: (e) => {
11521
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
11608
11522
  },
11609
- {
11610
- onSuccess: () => {
11611
- handleSuccess();
11612
- },
11613
- onError: (error) => {
11614
- ui.toast.error(error.message);
11523
+ onSuccess: () => {
11524
+ requestSucceeded = true;
11525
+ }
11526
+ });
11527
+ if (!requestSucceeded) {
11528
+ setIsSubmitting(false);
11529
+ return;
11530
+ }
11531
+ await confirmOrderEdit(void 0, {
11532
+ onError: (e) => {
11533
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11534
+ },
11535
+ onSuccess: () => {
11536
+ handleSuccess();
11537
+ },
11538
+ onSettled: () => {
11539
+ setIsSubmitting(false);
11540
+ }
11541
+ });
11542
+ };
11543
+ const onKeydown = React.useCallback(
11544
+ (e) => {
11545
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11546
+ if (data || isSubmitting) {
11547
+ return;
11615
11548
  }
11549
+ onSubmit();
11616
11550
  }
11617
- );
11618
- });
11619
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11620
- KeyboundForm,
11621
- {
11622
- className: "flex flex-1 flex-col overflow-hidden",
11623
- onSubmit,
11624
- children: [
11625
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
11626
- /* @__PURE__ */ jsxRuntime.jsx(
11627
- Form$2.Field,
11628
- {
11629
- control: form.control,
11630
- name: "country_code",
11631
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11632
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11633
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11634
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11635
- ] })
11636
- }
11637
- ),
11638
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11551
+ },
11552
+ [data, isSubmitting, onSubmit]
11553
+ );
11554
+ React.useEffect(() => {
11555
+ document.addEventListener("keydown", onKeydown);
11556
+ return () => {
11557
+ document.removeEventListener("keydown", onKeydown);
11558
+ };
11559
+ }, [onKeydown]);
11560
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11561
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11562
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11563
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11564
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11565
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11566
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11567
+ ] }),
11568
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11569
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11570
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
11639
11571
  /* @__PURE__ */ jsxRuntime.jsx(
11640
- Form$2.Field,
11572
+ ui.Text,
11641
11573
  {
11642
- control: form.control,
11643
- name: "first_name",
11644
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11645
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11646
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11647
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11648
- ] })
11574
+ size: "xsmall",
11575
+ weight: "plus",
11576
+ className: "text-ui-fg-muted",
11577
+ children: "Shipping profile"
11649
11578
  }
11650
11579
  ),
11651
11580
  /* @__PURE__ */ jsxRuntime.jsx(
11652
- Form$2.Field,
11581
+ ui.Text,
11653
11582
  {
11654
- control: form.control,
11655
- name: "last_name",
11656
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11657
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11658
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11659
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11660
- ] })
11583
+ size: "xsmall",
11584
+ weight: "plus",
11585
+ className: "text-ui-fg-muted",
11586
+ children: "Action"
11661
11587
  }
11662
11588
  )
11663
11589
  ] }),
11664
- /* @__PURE__ */ jsxRuntime.jsx(
11665
- Form$2.Field,
11666
- {
11667
- control: form.control,
11668
- name: "company",
11669
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11670
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11671
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11672
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11673
- ] })
11674
- }
11675
- ),
11676
- /* @__PURE__ */ jsxRuntime.jsx(
11677
- Form$2.Field,
11678
- {
11679
- control: form.control,
11680
- name: "address_1",
11681
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11682
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11683
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11684
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11685
- ] })
11686
- }
11687
- ),
11688
- /* @__PURE__ */ jsxRuntime.jsx(
11689
- Form$2.Field,
11690
- {
11691
- control: form.control,
11692
- name: "address_2",
11693
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11694
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11695
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11696
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11697
- ] })
11698
- }
11699
- ),
11700
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11701
- /* @__PURE__ */ jsxRuntime.jsx(
11702
- Form$2.Field,
11703
- {
11704
- control: form.control,
11705
- name: "postal_code",
11706
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11707
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11708
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11709
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11710
- ] })
11711
- }
11712
- ),
11713
- /* @__PURE__ */ jsxRuntime.jsx(
11714
- Form$2.Field,
11590
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11591
+ var _a2, _b, _c, _d, _e, _f, _g;
11592
+ const items = getItemsWithShippingProfile(
11593
+ profile.id,
11594
+ order.items
11595
+ );
11596
+ const hasItems = items.length > 0;
11597
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11598
+ (option) => option.shipping_profile_id === profile.id
11599
+ );
11600
+ const shippingMethod = preview.shipping_methods.find(
11601
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11602
+ );
11603
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11604
+ (action) => action.action === "SHIPPING_ADD"
11605
+ );
11606
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11607
+ radixUi.Accordion.Item,
11715
11608
  {
11716
- control: form.control,
11717
- name: "city",
11718
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11719
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11720
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11721
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11722
- ] })
11723
- }
11724
- )
11725
- ] }),
11726
- /* @__PURE__ */ jsxRuntime.jsx(
11727
- Form$2.Field,
11728
- {
11729
- control: form.control,
11730
- name: "province",
11731
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11732
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11733
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11734
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11735
- ] })
11736
- }
11737
- ),
11738
- /* @__PURE__ */ jsxRuntime.jsx(
11739
- Form$2.Field,
11740
- {
11741
- control: form.control,
11742
- name: "phone",
11743
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11744
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11745
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11746
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11747
- ] })
11748
- }
11749
- )
11750
- ] }) }),
11751
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11752
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11753
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11754
- ] }) })
11755
- ]
11756
- }
11757
- ) });
11758
- };
11759
- const schema$1 = addressSchema;
11760
- const TransferOwnership = () => {
11761
- const { id } = reactRouterDom.useParams();
11762
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11763
- fields: "id,customer_id,customer.*"
11764
- });
11765
- if (isError) {
11766
- throw error;
11767
- }
11768
- const isReady = !isPending && !!draft_order;
11769
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11770
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11771
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11772
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
11773
- ] }),
11774
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
11775
- ] });
11776
- };
11777
- const TransferOwnershipForm = ({ order }) => {
11778
- var _a, _b;
11779
- const form = reactHookForm.useForm({
11780
- defaultValues: {
11781
- customer_id: order.customer_id || ""
11782
- },
11783
- resolver: zod.zodResolver(schema)
11784
- });
11785
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11786
- const { handleSuccess } = useRouteModal();
11787
- const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
11788
- const currentCustomer = order.customer ? {
11789
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
11790
- value: order.customer.id
11791
- } : null;
11792
- const onSubmit = form.handleSubmit(async (data) => {
11793
- await mutateAsync(
11794
- { customer_id: data.customer_id },
11795
- {
11796
- onSuccess: () => {
11797
- ui.toast.success("Customer updated");
11798
- handleSuccess();
11799
- },
11800
- onError: (error) => {
11801
- ui.toast.error(error.message);
11802
- }
11803
- }
11804
- );
11805
- });
11806
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11807
- KeyboundForm,
11808
- {
11809
- className: "flex flex-1 flex-col overflow-hidden",
11810
- onSubmit,
11811
- children: [
11812
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
11813
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
11814
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
11815
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11816
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
11817
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
11818
- ] }),
11819
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
11820
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
11821
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
11822
- ] })
11823
- ] }),
11824
- /* @__PURE__ */ jsxRuntime.jsx(
11825
- CustomerField,
11826
- {
11827
- control: form.control,
11828
- currentCustomerId: order.customer_id
11829
- }
11830
- )
11831
- ] }),
11832
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11833
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
11834
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11835
- ] }) })
11836
- ]
11837
- }
11838
- ) });
11839
- };
11840
- const CustomerField = ({ control, currentCustomerId }) => {
11841
- const customers = useComboboxData({
11842
- queryFn: async (params) => {
11843
- return await sdk.admin.customer.list({
11844
- ...params,
11845
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
11846
- });
11847
- },
11848
- queryKey: ["customers"],
11849
- getOptions: (data) => {
11850
- return data.customers.map((customer) => {
11851
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
11852
- return {
11853
- label: name ? `${name} (${customer.email})` : customer.email,
11854
- value: customer.id
11855
- };
11856
- });
11857
- }
11858
- });
11859
- return /* @__PURE__ */ jsxRuntime.jsx(
11860
- Form$2.Field,
11861
- {
11862
- name: "customer_id",
11863
- control,
11864
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
11865
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11866
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
11867
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
11868
- ] }),
11869
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11870
- Combobox,
11871
- {
11872
- options: customers.options,
11873
- fetchNextPage: customers.fetchNextPage,
11874
- isFetchingNextPage: customers.isFetchingNextPage,
11875
- searchValue: customers.searchValue,
11876
- onSearchValueChange: customers.onSearchValueChange,
11877
- placeholder: "Select customer",
11878
- ...field
11879
- }
11880
- ) }),
11881
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11882
- ] })
11883
- }
11884
- );
11885
- };
11886
- const Illustration = () => {
11887
- return /* @__PURE__ */ jsxRuntime.jsxs(
11888
- "svg",
11889
- {
11890
- width: "280",
11891
- height: "180",
11892
- viewBox: "0 0 280 180",
11893
- fill: "none",
11894
- xmlns: "http://www.w3.org/2000/svg",
11895
- children: [
11896
- /* @__PURE__ */ jsxRuntime.jsx(
11897
- "rect",
11898
- {
11899
- x: "0.00428286",
11900
- y: "-0.742904",
11901
- width: "33.5",
11902
- height: "65.5",
11903
- rx: "6.75",
11904
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
11905
- fill: "#D4D4D8",
11906
- stroke: "#52525B",
11907
- strokeWidth: "1.5"
11908
- }
11909
- ),
11910
- /* @__PURE__ */ jsxRuntime.jsx(
11911
- "rect",
11912
- {
11913
- x: "0.00428286",
11914
- y: "-0.742904",
11915
- width: "33.5",
11916
- height: "65.5",
11917
- rx: "6.75",
11918
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
11919
- fill: "white",
11920
- stroke: "#52525B",
11921
- strokeWidth: "1.5"
11922
- }
11923
- ),
11924
- /* @__PURE__ */ jsxRuntime.jsx(
11925
- "path",
11926
- {
11927
- d: "M180.579 107.142L179.126 107.959",
11928
- stroke: "#52525B",
11929
- strokeWidth: "1.5",
11930
- strokeLinecap: "round",
11931
- strokeLinejoin: "round"
11932
- }
11933
- ),
11934
- /* @__PURE__ */ jsxRuntime.jsx(
11935
- "path",
11936
- {
11937
- opacity: "0.88",
11938
- d: "M182.305 109.546L180.257 109.534",
11939
- stroke: "#52525B",
11940
- strokeWidth: "1.5",
11941
- strokeLinecap: "round",
11942
- strokeLinejoin: "round"
11943
- }
11944
- ),
11945
- /* @__PURE__ */ jsxRuntime.jsx(
11946
- "path",
11947
- {
11948
- opacity: "0.75",
11949
- d: "M180.551 111.93L179.108 111.096",
11950
- stroke: "#52525B",
11951
- strokeWidth: "1.5",
11952
- strokeLinecap: "round",
11953
- strokeLinejoin: "round"
11954
- }
11955
- ),
11956
- /* @__PURE__ */ jsxRuntime.jsx(
11957
- "path",
11958
- {
11959
- opacity: "0.63",
11960
- d: "M176.347 112.897L176.354 111.73",
11961
- stroke: "#52525B",
11962
- strokeWidth: "1.5",
11963
- strokeLinecap: "round",
11964
- strokeLinejoin: "round"
11965
- }
11966
- ),
11967
- /* @__PURE__ */ jsxRuntime.jsx(
11968
- "path",
11969
- {
11970
- opacity: "0.5",
11971
- d: "M172.153 111.881L173.606 111.064",
11972
- stroke: "#52525B",
11973
- strokeWidth: "1.5",
11974
- strokeLinecap: "round",
11975
- strokeLinejoin: "round"
11976
- }
11977
- ),
11978
- /* @__PURE__ */ jsxRuntime.jsx(
11979
- "path",
11980
- {
11981
- opacity: "0.38",
11982
- d: "M170.428 109.478L172.476 109.489",
11983
- stroke: "#52525B",
11984
- strokeWidth: "1.5",
11985
- strokeLinecap: "round",
11986
- strokeLinejoin: "round"
11987
- }
11988
- ),
11989
- /* @__PURE__ */ jsxRuntime.jsx(
11990
- "path",
11991
- {
11992
- opacity: "0.25",
11993
- d: "M172.181 107.094L173.624 107.928",
11994
- stroke: "#52525B",
11995
- strokeWidth: "1.5",
11996
- strokeLinecap: "round",
11997
- strokeLinejoin: "round"
11998
- }
11999
- ),
12000
- /* @__PURE__ */ jsxRuntime.jsx(
12001
- "path",
12002
- {
12003
- opacity: "0.13",
12004
- d: "M176.386 106.126L176.379 107.294",
12005
- stroke: "#52525B",
12006
- strokeWidth: "1.5",
12007
- strokeLinecap: "round",
12008
- strokeLinejoin: "round"
12009
- }
12010
- ),
12011
- /* @__PURE__ */ jsxRuntime.jsx(
12012
- "rect",
12013
- {
12014
- width: "12",
12015
- height: "3",
12016
- rx: "1.5",
12017
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12018
- fill: "#D4D4D8"
12019
- }
12020
- ),
12021
- /* @__PURE__ */ jsxRuntime.jsx(
12022
- "rect",
12023
- {
12024
- x: "0.00428286",
12025
- y: "-0.742904",
12026
- width: "33.5",
12027
- height: "65.5",
12028
- rx: "6.75",
12029
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12030
- fill: "#D4D4D8",
12031
- stroke: "#52525B",
12032
- strokeWidth: "1.5"
12033
- }
12034
- ),
12035
- /* @__PURE__ */ jsxRuntime.jsx(
12036
- "rect",
12037
- {
12038
- x: "0.00428286",
12039
- y: "-0.742904",
12040
- width: "33.5",
12041
- height: "65.5",
12042
- rx: "6.75",
12043
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12044
- fill: "white",
12045
- stroke: "#52525B",
12046
- strokeWidth: "1.5"
12047
- }
12048
- ),
12049
- /* @__PURE__ */ jsxRuntime.jsx(
12050
- "rect",
12051
- {
12052
- width: "12",
12053
- height: "3",
12054
- rx: "1.5",
12055
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12056
- fill: "#D4D4D8"
12057
- }
12058
- ),
12059
- /* @__PURE__ */ jsxRuntime.jsx(
12060
- "rect",
12061
- {
12062
- width: "17",
12063
- height: "3",
12064
- rx: "1.5",
12065
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12066
- fill: "#D4D4D8"
12067
- }
12068
- ),
12069
- /* @__PURE__ */ jsxRuntime.jsx(
12070
- "rect",
12071
- {
12072
- width: "12",
12073
- height: "3",
12074
- rx: "1.5",
12075
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12076
- fill: "#D4D4D8"
12077
- }
12078
- ),
12079
- /* @__PURE__ */ jsxRuntime.jsx(
12080
- "path",
12081
- {
12082
- d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12083
- fill: "#A1A1AA"
12084
- }
12085
- ),
12086
- /* @__PURE__ */ jsxRuntime.jsx(
12087
- "rect",
12088
- {
12089
- width: "17",
12090
- height: "3",
12091
- rx: "1.5",
12092
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12093
- fill: "#A1A1AA"
12094
- }
12095
- ),
12096
- /* @__PURE__ */ jsxRuntime.jsx(
12097
- "rect",
12098
- {
12099
- width: "12",
12100
- height: "3",
12101
- rx: "1.5",
12102
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12103
- fill: "#A1A1AA"
12104
- }
12105
- ),
12106
- /* @__PURE__ */ jsxRuntime.jsx(
12107
- "path",
12108
- {
12109
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12110
- fill: "#52525B"
12111
- }
12112
- ),
12113
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12114
- "path",
12115
- {
12116
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12117
- stroke: "#A1A1AA",
12118
- strokeWidth: "1.5",
12119
- strokeLinecap: "round",
12120
- strokeLinejoin: "round"
12121
- }
12122
- ) }),
12123
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12124
- "path",
12125
- {
12126
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12127
- stroke: "#A1A1AA",
12128
- strokeWidth: "1.5",
12129
- strokeLinecap: "round",
12130
- strokeLinejoin: "round"
12131
- }
12132
- ) }),
12133
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12134
- "path",
12135
- {
12136
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12137
- stroke: "#A1A1AA",
12138
- strokeWidth: "1.5",
12139
- strokeLinecap: "round",
12140
- strokeLinejoin: "round"
12141
- }
12142
- ) }),
12143
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12144
- "path",
12145
- {
12146
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12147
- stroke: "#A1A1AA",
12148
- strokeWidth: "1.5",
12149
- strokeLinecap: "round",
12150
- strokeLinejoin: "round"
12151
- }
12152
- ) }),
12153
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12154
- "path",
12155
- {
12156
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12157
- stroke: "#A1A1AA",
12158
- strokeWidth: "1.5",
12159
- strokeLinecap: "round",
12160
- strokeLinejoin: "round"
12161
- }
12162
- ) }),
12163
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12164
- "path",
12165
- {
12166
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12167
- stroke: "#A1A1AA",
12168
- strokeWidth: "1.5",
12169
- strokeLinecap: "round",
12170
- strokeLinejoin: "round"
12171
- }
12172
- ) }),
12173
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12174
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12175
- "rect",
12176
- {
12177
- width: "12",
12178
- height: "12",
12179
- fill: "white",
12180
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
11609
+ value: profile.id,
11610
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11611
+ children: [
11612
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
11613
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
11614
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11615
+ ui.IconButton,
11616
+ {
11617
+ size: "2xsmall",
11618
+ variant: "transparent",
11619
+ className: "group/trigger",
11620
+ disabled: !hasItems,
11621
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
11622
+ }
11623
+ ) }),
11624
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11625
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
11626
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
11627
+ /* @__PURE__ */ jsxRuntime.jsx(
11628
+ ui.Text,
11629
+ {
11630
+ size: "small",
11631
+ weight: "plus",
11632
+ leading: "compact",
11633
+ children: profile.name
11634
+ }
11635
+ ),
11636
+ /* @__PURE__ */ jsxRuntime.jsxs(
11637
+ ui.Text,
11638
+ {
11639
+ size: "small",
11640
+ leading: "compact",
11641
+ className: "text-ui-fg-subtle",
11642
+ children: [
11643
+ items.length,
11644
+ " ",
11645
+ pluralize(items.length, "items", "item")
11646
+ ]
11647
+ }
11648
+ )
11649
+ ] })
11650
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
11651
+ /* @__PURE__ */ jsxRuntime.jsx(
11652
+ ui.Tooltip,
11653
+ {
11654
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
11655
+ var _a3, _b2, _c2;
11656
+ return /* @__PURE__ */ jsxRuntime.jsx(
11657
+ "li",
11658
+ {
11659
+ 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})`
11660
+ },
11661
+ item.id
11662
+ );
11663
+ }) }),
11664
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
11665
+ ui.Badge,
11666
+ {
11667
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11668
+ size: "xsmall",
11669
+ children: [
11670
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
11671
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
11672
+ items.reduce(
11673
+ (acc, item) => acc + item.quantity,
11674
+ 0
11675
+ ),
11676
+ "x",
11677
+ " ",
11678
+ pluralize(items.length, "items", "item")
11679
+ ] })
11680
+ ]
11681
+ }
11682
+ )
11683
+ }
11684
+ ),
11685
+ /* @__PURE__ */ jsxRuntime.jsx(
11686
+ ui.Tooltip,
11687
+ {
11688
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11689
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
11690
+ ui.Badge,
11691
+ {
11692
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11693
+ size: "xsmall",
11694
+ children: [
11695
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
11696
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11697
+ ]
11698
+ }
11699
+ )
11700
+ }
11701
+ ),
11702
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11703
+ ui.Badge,
11704
+ {
11705
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11706
+ size: "xsmall",
11707
+ children: [
11708
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
11709
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
11710
+ ]
11711
+ }
11712
+ ) })
11713
+ ] })
11714
+ ] }),
11715
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
11716
+ ActionMenu,
11717
+ {
11718
+ groups: [
11719
+ {
11720
+ actions: [
11721
+ hasItems ? {
11722
+ label: "Edit shipping option",
11723
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
11724
+ onClick: () => {
11725
+ setIsOpen(
11726
+ STACKED_FOCUS_MODAL_ID,
11727
+ true
11728
+ );
11729
+ setData({
11730
+ shippingProfileId: profile.id,
11731
+ shippingOption,
11732
+ shippingMethod
11733
+ });
11734
+ }
11735
+ } : void 0,
11736
+ {
11737
+ label: "Remove shipping option",
11738
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
11739
+ onClick: () => {
11740
+ if (shippingMethod) {
11741
+ if (addShippingMethodAction) {
11742
+ removeActionShippingMethod(
11743
+ addShippingMethodAction.id
11744
+ );
11745
+ } else {
11746
+ removeShippingMethod(
11747
+ shippingMethod.id
11748
+ );
11749
+ }
11750
+ }
11751
+ }
11752
+ }
11753
+ ].filter(Boolean)
11754
+ }
11755
+ ]
11756
+ }
11757
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
11758
+ StackedModalTrigger,
11759
+ {
11760
+ shippingProfileId: profile.id,
11761
+ shippingOption,
11762
+ shippingMethod,
11763
+ setData,
11764
+ children: "Add shipping option"
11765
+ }
11766
+ )
11767
+ ] }),
11768
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
11769
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11770
+ items.map((item, idx) => {
11771
+ var _a3, _b2, _c2, _d2, _e2;
11772
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11773
+ /* @__PURE__ */ jsxRuntime.jsxs(
11774
+ "div",
11775
+ {
11776
+ className: "flex items-center gap-x-3 px-3",
11777
+ children: [
11778
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11779
+ ui.Divider,
11780
+ {
11781
+ variant: "dashed",
11782
+ orientation: "vertical"
11783
+ }
11784
+ ) }),
11785
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
11786
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11787
+ ui.Text,
11788
+ {
11789
+ size: "small",
11790
+ leading: "compact",
11791
+ className: "text-ui-fg-subtle",
11792
+ children: [
11793
+ item.quantity,
11794
+ "x"
11795
+ ]
11796
+ }
11797
+ ) }),
11798
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
11799
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11800
+ /* @__PURE__ */ jsxRuntime.jsxs(
11801
+ ui.Text,
11802
+ {
11803
+ size: "small",
11804
+ leading: "compact",
11805
+ weight: "plus",
11806
+ children: [
11807
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11808
+ " (",
11809
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
11810
+ ")"
11811
+ ]
11812
+ }
11813
+ ),
11814
+ /* @__PURE__ */ jsxRuntime.jsx(
11815
+ ui.Text,
11816
+ {
11817
+ size: "small",
11818
+ leading: "compact",
11819
+ className: "text-ui-fg-subtle",
11820
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11821
+ }
11822
+ )
11823
+ ] })
11824
+ ] })
11825
+ ]
11826
+ },
11827
+ item.id
11828
+ ),
11829
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
11830
+ ] }, item.id);
11831
+ })
11832
+ ] })
11833
+ ]
11834
+ },
11835
+ profile.id
11836
+ );
11837
+ }) })
11838
+ ] }) })
11839
+ ] }) }),
11840
+ /* @__PURE__ */ jsxRuntime.jsx(
11841
+ StackedFocusModal,
11842
+ {
11843
+ id: STACKED_FOCUS_MODAL_ID,
11844
+ onOpenChangeCallback: (open) => {
11845
+ if (!open) {
11846
+ setData(null);
12181
11847
  }
12182
- ) }),
12183
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12184
- "rect",
11848
+ return open;
11849
+ },
11850
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11851
+ }
11852
+ )
11853
+ ] }),
11854
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11855
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11856
+ /* @__PURE__ */ jsxRuntime.jsx(
11857
+ ui.Button,
11858
+ {
11859
+ size: "small",
11860
+ type: "button",
11861
+ isLoading: isSubmitting,
11862
+ onClick: onSubmit,
11863
+ children: "Save"
11864
+ }
11865
+ )
11866
+ ] }) })
11867
+ ] });
11868
+ };
11869
+ const StackedModalTrigger = ({
11870
+ shippingProfileId,
11871
+ shippingOption,
11872
+ shippingMethod,
11873
+ setData,
11874
+ children
11875
+ }) => {
11876
+ const { setIsOpen, getIsOpen } = useStackedModal();
11877
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11878
+ const onToggle = () => {
11879
+ if (isOpen) {
11880
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11881
+ setData(null);
11882
+ } else {
11883
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11884
+ setData({
11885
+ shippingProfileId,
11886
+ shippingOption,
11887
+ shippingMethod
11888
+ });
11889
+ }
11890
+ };
11891
+ return /* @__PURE__ */ jsxRuntime.jsx(
11892
+ ui.Button,
11893
+ {
11894
+ size: "small",
11895
+ variant: "secondary",
11896
+ onClick: onToggle,
11897
+ className: "text-ui-fg-primary shrink-0",
11898
+ children
11899
+ }
11900
+ );
11901
+ };
11902
+ const ShippingProfileForm = ({
11903
+ data,
11904
+ order,
11905
+ preview
11906
+ }) => {
11907
+ var _a, _b, _c, _d, _e, _f;
11908
+ const { setIsOpen } = useStackedModal();
11909
+ const form = reactHookForm.useForm({
11910
+ resolver: zod.zodResolver(shippingMethodSchema),
11911
+ defaultValues: {
11912
+ 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,
11913
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
11914
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
11915
+ }
11916
+ });
11917
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
11918
+ const {
11919
+ mutateAsync: updateShippingMethod,
11920
+ isPending: isUpdatingShippingMethod
11921
+ } = useDraftOrderUpdateShippingMethod(order.id);
11922
+ const onSubmit = form.handleSubmit(async (values) => {
11923
+ if (isEqual__default.default(values, form.formState.defaultValues)) {
11924
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11925
+ return;
11926
+ }
11927
+ if (data.shippingMethod) {
11928
+ await updateShippingMethod(
11929
+ {
11930
+ method_id: data.shippingMethod.id,
11931
+ shipping_option_id: values.shipping_option_id,
11932
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11933
+ },
11934
+ {
11935
+ onError: (e) => {
11936
+ ui.toast.error(e.message);
11937
+ },
11938
+ onSuccess: () => {
11939
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11940
+ }
11941
+ }
11942
+ );
11943
+ return;
11944
+ }
11945
+ await addShippingMethod(
11946
+ {
11947
+ shipping_option_id: values.shipping_option_id,
11948
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11949
+ },
11950
+ {
11951
+ onError: (e) => {
11952
+ ui.toast.error(e.message);
11953
+ },
11954
+ onSuccess: () => {
11955
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11956
+ }
11957
+ }
11958
+ );
11959
+ });
11960
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11961
+ KeyboundForm,
11962
+ {
11963
+ className: "flex h-full flex-col overflow-hidden",
11964
+ onSubmit,
11965
+ children: [
11966
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
11967
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11968
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11969
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11970
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
11971
+ ] }),
11972
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11973
+ /* @__PURE__ */ jsxRuntime.jsx(
11974
+ LocationField,
12185
11975
  {
12186
- width: "12",
12187
- height: "12",
12188
- fill: "white",
12189
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
11976
+ control: form.control,
11977
+ setValue: form.setValue
12190
11978
  }
12191
- ) }),
12192
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12193
- "rect",
11979
+ ),
11980
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11981
+ /* @__PURE__ */ jsxRuntime.jsx(
11982
+ ShippingOptionField,
12194
11983
  {
12195
- width: "12",
12196
- height: "12",
12197
- fill: "white",
12198
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
11984
+ shippingProfileId: data.shippingProfileId,
11985
+ preview,
11986
+ control: form.control
12199
11987
  }
12200
- ) }),
12201
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12202
- "rect",
11988
+ ),
11989
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11990
+ /* @__PURE__ */ jsxRuntime.jsx(
11991
+ CustomAmountField,
12203
11992
  {
12204
- width: "12",
12205
- height: "12",
12206
- fill: "white",
12207
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
11993
+ control: form.control,
11994
+ currencyCode: order.currency_code
12208
11995
  }
12209
- ) }),
12210
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12211
- "rect",
11996
+ ),
11997
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11998
+ /* @__PURE__ */ jsxRuntime.jsx(
11999
+ ItemsPreview,
12212
12000
  {
12213
- width: "12",
12214
- height: "12",
12215
- fill: "white",
12216
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12001
+ order,
12002
+ shippingProfileId: data.shippingProfileId
12217
12003
  }
12218
- ) }),
12219
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12220
- "rect",
12004
+ )
12005
+ ] }) }) }),
12006
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12007
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12008
+ /* @__PURE__ */ jsxRuntime.jsx(
12009
+ ui.Button,
12221
12010
  {
12222
- width: "12",
12223
- height: "12",
12224
- fill: "white",
12225
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12011
+ size: "small",
12012
+ type: "submit",
12013
+ isLoading: isPending || isUpdatingShippingMethod,
12014
+ children: data.shippingMethod ? "Update" : "Add"
12226
12015
  }
12227
- ) })
12228
- ] })
12016
+ )
12017
+ ] }) })
12229
12018
  ]
12230
12019
  }
12231
- );
12020
+ ) }) });
12232
12021
  };
12233
- const schema = objectType({
12234
- customer_id: stringType().min(1)
12022
+ const shippingMethodSchema = objectType({
12023
+ location_id: stringType(),
12024
+ shipping_option_id: stringType(),
12025
+ custom_amount: unionType([numberType(), stringType()]).optional()
12235
12026
  });
12236
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
12237
- const Shipping = () => {
12238
- var _a;
12239
- const { id } = reactRouterDom.useParams();
12240
- const { order, isPending, isError, error } = useOrder(id, {
12241
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12242
- });
12243
- const {
12244
- order: preview,
12245
- isPending: isPreviewPending,
12246
- isError: isPreviewError,
12247
- error: previewError
12248
- } = useOrderPreview(id);
12249
- useInitiateOrderEdit({ preview });
12250
- const { onCancel } = useCancelOrderEdit({ preview });
12251
- if (isError) {
12252
- throw error;
12253
- }
12254
- if (isPreviewError) {
12255
- throw previewError;
12256
- }
12257
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12258
- const isReady = preview && !isPreviewPending && order && !isPending;
12259
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12260
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12261
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12262
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12263
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
12264
- ] }) }) }),
12265
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
12266
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12267
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12268
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12269
- ] }) });
12270
- };
12271
- const ShippingForm = ({ preview, order }) => {
12272
- var _a;
12273
- const { setIsOpen } = useStackedModal();
12274
- const [isSubmitting, setIsSubmitting] = React.useState(false);
12275
- const [data, setData] = React.useState(null);
12276
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12277
- const { shipping_options } = useShippingOptions(
12278
- {
12279
- id: appliedShippingOptionIds,
12280
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12281
- },
12282
- {
12283
- enabled: appliedShippingOptionIds.length > 0
12284
- }
12285
- );
12286
- const uniqueShippingProfiles = React.useMemo(() => {
12287
- const profiles = /* @__PURE__ */ new Map();
12288
- getUniqueShippingProfiles(order.items).forEach((profile) => {
12289
- profiles.set(profile.id, profile);
12290
- });
12291
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12292
- profiles.set(option.shipping_profile_id, option.shipping_profile);
12293
- });
12294
- return Array.from(profiles.values());
12295
- }, [order.items, shipping_options]);
12296
- const { handleSuccess } = useRouteModal();
12297
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12298
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12299
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12300
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12301
- const onSubmit = async () => {
12302
- setIsSubmitting(true);
12303
- let requestSucceeded = false;
12304
- await requestOrderEdit(void 0, {
12305
- onError: (e) => {
12306
- ui.toast.error(`Failed to request order edit: ${e.message}`);
12307
- },
12308
- onSuccess: () => {
12309
- requestSucceeded = true;
12310
- }
12311
- });
12312
- if (!requestSucceeded) {
12313
- setIsSubmitting(false);
12314
- return;
12027
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12028
+ const matches = order.items.filter(
12029
+ (item) => {
12030
+ var _a, _b, _c;
12031
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12315
12032
  }
12316
- await confirmOrderEdit(void 0, {
12317
- onError: (e) => {
12318
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12319
- },
12320
- onSuccess: () => {
12321
- handleSuccess();
12322
- },
12323
- onSettled: () => {
12324
- setIsSubmitting(false);
12325
- }
12326
- });
12327
- };
12328
- const onKeydown = React.useCallback(
12329
- (e) => {
12330
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12331
- if (data || isSubmitting) {
12332
- return;
12333
- }
12334
- onSubmit();
12335
- }
12336
- },
12337
- [data, isSubmitting, onSubmit]
12338
12033
  );
12339
- React.useEffect(() => {
12340
- document.addEventListener("keydown", onKeydown);
12341
- return () => {
12342
- document.removeEventListener("keydown", onKeydown);
12343
- };
12344
- }, [onKeydown]);
12345
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12346
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12347
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12348
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12349
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12350
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12351
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
12352
- ] }),
12353
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12354
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12355
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
12356
- /* @__PURE__ */ jsxRuntime.jsx(
12357
- ui.Text,
12358
- {
12359
- size: "xsmall",
12360
- weight: "plus",
12361
- className: "text-ui-fg-muted",
12362
- children: "Shipping profile"
12363
- }
12364
- ),
12365
- /* @__PURE__ */ jsxRuntime.jsx(
12366
- ui.Text,
12367
- {
12368
- size: "xsmall",
12369
- weight: "plus",
12370
- className: "text-ui-fg-muted",
12371
- children: "Action"
12372
- }
12373
- )
12374
- ] }),
12375
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12376
- var _a2, _b, _c, _d, _e, _f, _g;
12377
- const items = getItemsWithShippingProfile(
12378
- profile.id,
12379
- order.items
12380
- );
12381
- const hasItems = items.length > 0;
12382
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12383
- (option) => option.shipping_profile_id === profile.id
12384
- );
12385
- const shippingMethod = preview.shipping_methods.find(
12386
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12387
- );
12388
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
12389
- (action) => action.action === "SHIPPING_ADD"
12390
- );
12391
- return /* @__PURE__ */ jsxRuntime.jsxs(
12392
- radixUi.Accordion.Item,
12034
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12035
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12036
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12037
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12038
+ ] }) }),
12039
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12040
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12041
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12042
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12043
+ ] }),
12044
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12045
+ "div",
12046
+ {
12047
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12048
+ children: [
12049
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12050
+ /* @__PURE__ */ jsxRuntime.jsx(
12051
+ Thumbnail,
12052
+ {
12053
+ thumbnail: item.thumbnail,
12054
+ alt: item.product_title ?? void 0
12055
+ }
12056
+ ),
12057
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12058
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12059
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12060
+ /* @__PURE__ */ jsxRuntime.jsxs(
12061
+ ui.Text,
12062
+ {
12063
+ size: "small",
12064
+ leading: "compact",
12065
+ className: "text-ui-fg-subtle",
12066
+ children: [
12067
+ "(",
12068
+ item.variant_title,
12069
+ ")"
12070
+ ]
12071
+ }
12072
+ )
12073
+ ] }),
12074
+ /* @__PURE__ */ jsxRuntime.jsx(
12075
+ ui.Text,
12076
+ {
12077
+ size: "small",
12078
+ leading: "compact",
12079
+ className: "text-ui-fg-subtle",
12080
+ children: item.variant_sku
12081
+ }
12082
+ )
12083
+ ] })
12084
+ ] }),
12085
+ /* @__PURE__ */ jsxRuntime.jsxs(
12086
+ ui.Text,
12393
12087
  {
12394
- value: profile.id,
12395
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12088
+ size: "small",
12089
+ leading: "compact",
12090
+ className: "text-ui-fg-subtle",
12396
12091
  children: [
12397
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
12398
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
12399
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
12400
- ui.IconButton,
12401
- {
12402
- size: "2xsmall",
12403
- variant: "transparent",
12404
- className: "group/trigger",
12405
- disabled: !hasItems,
12406
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
12407
- }
12408
- ) }),
12409
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12410
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
12411
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
12412
- /* @__PURE__ */ jsxRuntime.jsx(
12413
- ui.Text,
12414
- {
12415
- size: "small",
12416
- weight: "plus",
12417
- leading: "compact",
12418
- children: profile.name
12419
- }
12420
- ),
12421
- /* @__PURE__ */ jsxRuntime.jsxs(
12422
- ui.Text,
12423
- {
12424
- size: "small",
12425
- leading: "compact",
12426
- className: "text-ui-fg-subtle",
12427
- children: [
12428
- items.length,
12429
- " ",
12430
- pluralize(items.length, "items", "item")
12431
- ]
12432
- }
12433
- )
12434
- ] })
12435
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
12436
- /* @__PURE__ */ jsxRuntime.jsx(
12437
- ui.Tooltip,
12438
- {
12439
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
12440
- var _a3, _b2, _c2;
12441
- return /* @__PURE__ */ jsxRuntime.jsx(
12442
- "li",
12443
- {
12444
- 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})`
12445
- },
12446
- item.id
12447
- );
12448
- }) }),
12449
- children: /* @__PURE__ */ jsxRuntime.jsxs(
12450
- ui.Badge,
12451
- {
12452
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12453
- size: "xsmall",
12454
- children: [
12455
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
12456
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
12457
- items.reduce(
12458
- (acc, item) => acc + item.quantity,
12459
- 0
12460
- ),
12461
- "x",
12462
- " ",
12463
- pluralize(items.length, "items", "item")
12464
- ] })
12465
- ]
12466
- }
12467
- )
12468
- }
12469
- ),
12470
- /* @__PURE__ */ jsxRuntime.jsx(
12471
- ui.Tooltip,
12472
- {
12473
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12474
- children: /* @__PURE__ */ jsxRuntime.jsxs(
12475
- ui.Badge,
12476
- {
12477
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12478
- size: "xsmall",
12479
- children: [
12480
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
12481
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
12482
- ]
12483
- }
12484
- )
12485
- }
12486
- ),
12487
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
12488
- ui.Badge,
12489
- {
12490
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12491
- size: "xsmall",
12492
- children: [
12493
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
12494
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
12495
- ]
12496
- }
12497
- ) })
12498
- ] })
12499
- ] }),
12500
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
12501
- ActionMenu,
12502
- {
12503
- groups: [
12504
- {
12505
- actions: [
12506
- hasItems ? {
12507
- label: "Edit shipping option",
12508
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
12509
- onClick: () => {
12510
- setIsOpen(
12511
- STACKED_FOCUS_MODAL_ID,
12512
- true
12513
- );
12514
- setData({
12515
- shippingProfileId: profile.id,
12516
- shippingOption,
12517
- shippingMethod
12518
- });
12519
- }
12520
- } : void 0,
12521
- {
12522
- label: "Remove shipping option",
12523
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
12524
- onClick: () => {
12525
- if (shippingMethod) {
12526
- if (addShippingMethodAction) {
12527
- removeActionShippingMethod(
12528
- addShippingMethodAction.id
12529
- );
12530
- } else {
12531
- removeShippingMethod(
12532
- shippingMethod.id
12533
- );
12534
- }
12535
- }
12536
- }
12537
- }
12538
- ].filter(Boolean)
12539
- }
12540
- ]
12541
- }
12542
- ) : /* @__PURE__ */ jsxRuntime.jsx(
12543
- StackedModalTrigger,
12544
- {
12545
- shippingProfileId: profile.id,
12546
- shippingOption,
12547
- shippingMethod,
12548
- setData,
12549
- children: "Add shipping option"
12550
- }
12551
- )
12552
- ] }),
12553
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
12554
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12555
- items.map((item, idx) => {
12556
- var _a3, _b2, _c2, _d2, _e2;
12557
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12558
- /* @__PURE__ */ jsxRuntime.jsxs(
12559
- "div",
12560
- {
12561
- className: "flex items-center gap-x-3 px-3",
12562
- children: [
12563
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
12564
- ui.Divider,
12565
- {
12566
- variant: "dashed",
12567
- orientation: "vertical"
12568
- }
12569
- ) }),
12570
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
12571
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
12572
- ui.Text,
12573
- {
12574
- size: "small",
12575
- leading: "compact",
12576
- className: "text-ui-fg-subtle",
12577
- children: [
12578
- item.quantity,
12579
- "x"
12580
- ]
12581
- }
12582
- ) }),
12583
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
12584
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12585
- /* @__PURE__ */ jsxRuntime.jsxs(
12586
- ui.Text,
12587
- {
12588
- size: "small",
12589
- leading: "compact",
12590
- weight: "plus",
12591
- children: [
12592
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12593
- " (",
12594
- (_c2 = item.variant) == null ? void 0 : _c2.title,
12595
- ")"
12596
- ]
12597
- }
12598
- ),
12599
- /* @__PURE__ */ jsxRuntime.jsx(
12600
- ui.Text,
12601
- {
12602
- size: "small",
12603
- leading: "compact",
12604
- className: "text-ui-fg-subtle",
12605
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12606
- }
12607
- )
12608
- ] })
12609
- ] })
12610
- ]
12611
- },
12612
- item.id
12613
- ),
12614
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
12615
- ] }, item.id);
12616
- })
12617
- ] })
12092
+ item.quantity,
12093
+ "x"
12618
12094
  ]
12095
+ }
12096
+ )
12097
+ ]
12098
+ },
12099
+ item.id
12100
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12101
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12102
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12103
+ 'No items found for "',
12104
+ query,
12105
+ '".'
12106
+ ] })
12107
+ ] }) })
12108
+ ] })
12109
+ ] });
12110
+ };
12111
+ const LocationField = ({ control, setValue }) => {
12112
+ const locations = useComboboxData({
12113
+ queryKey: ["locations"],
12114
+ queryFn: async (params) => {
12115
+ return await sdk.admin.stockLocation.list(params);
12116
+ },
12117
+ getOptions: (data) => {
12118
+ return data.stock_locations.map((location) => ({
12119
+ label: location.name,
12120
+ value: location.id
12121
+ }));
12122
+ }
12123
+ });
12124
+ return /* @__PURE__ */ jsxRuntime.jsx(
12125
+ Form$2.Field,
12126
+ {
12127
+ control,
12128
+ name: "location_id",
12129
+ render: ({ field: { onChange, ...field } }) => {
12130
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12131
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12132
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12133
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12134
+ ] }),
12135
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12136
+ Combobox,
12137
+ {
12138
+ options: locations.options,
12139
+ fetchNextPage: locations.fetchNextPage,
12140
+ isFetchingNextPage: locations.isFetchingNextPage,
12141
+ searchValue: locations.searchValue,
12142
+ onSearchValueChange: locations.onSearchValueChange,
12143
+ placeholder: "Select location",
12144
+ onChange: (value) => {
12145
+ setValue("shipping_option_id", "", {
12146
+ shouldDirty: true,
12147
+ shouldTouch: true
12148
+ });
12149
+ onChange(value);
12619
12150
  },
12620
- profile.id
12621
- );
12622
- }) })
12623
- ] }) })
12624
- ] }) }),
12625
- /* @__PURE__ */ jsxRuntime.jsx(
12626
- StackedFocusModal,
12627
- {
12628
- id: STACKED_FOCUS_MODAL_ID,
12629
- onOpenChangeCallback: (open) => {
12630
- if (!open) {
12631
- setData(null);
12151
+ ...field
12152
+ }
12153
+ ) })
12154
+ ] }) });
12155
+ }
12156
+ }
12157
+ );
12158
+ };
12159
+ const ShippingOptionField = ({
12160
+ shippingProfileId,
12161
+ preview,
12162
+ control
12163
+ }) => {
12164
+ var _a;
12165
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12166
+ const shippingOptions = useComboboxData({
12167
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12168
+ queryFn: async (params) => {
12169
+ return await sdk.admin.shippingOption.list({
12170
+ ...params,
12171
+ stock_location_id: locationId,
12172
+ shipping_profile_id: shippingProfileId
12173
+ });
12174
+ },
12175
+ getOptions: (data) => {
12176
+ return data.shipping_options.map((option) => {
12177
+ var _a2;
12178
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12179
+ (r) => r.attribute === "is_return" && r.value === "true"
12180
+ )) {
12181
+ return void 0;
12182
+ }
12183
+ return {
12184
+ label: option.name,
12185
+ value: option.id
12186
+ };
12187
+ }).filter(Boolean);
12188
+ },
12189
+ enabled: !!locationId && !!shippingProfileId,
12190
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12191
+ });
12192
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12193
+ return /* @__PURE__ */ jsxRuntime.jsx(
12194
+ Form$2.Field,
12195
+ {
12196
+ control,
12197
+ name: "shipping_option_id",
12198
+ render: ({ field }) => {
12199
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12200
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12201
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12202
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12203
+ ] }),
12204
+ /* @__PURE__ */ jsxRuntime.jsx(
12205
+ ConditionalTooltip,
12206
+ {
12207
+ content: tooltipContent,
12208
+ showTooltip: !locationId || !shippingProfileId,
12209
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12210
+ Combobox,
12211
+ {
12212
+ options: shippingOptions.options,
12213
+ fetchNextPage: shippingOptions.fetchNextPage,
12214
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12215
+ searchValue: shippingOptions.searchValue,
12216
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12217
+ placeholder: "Select shipping option",
12218
+ ...field,
12219
+ disabled: !locationId || !shippingProfileId
12220
+ }
12221
+ ) }) })
12222
+ }
12223
+ )
12224
+ ] }) });
12225
+ }
12226
+ }
12227
+ );
12228
+ };
12229
+ const CustomAmountField = ({
12230
+ control,
12231
+ currencyCode
12232
+ }) => {
12233
+ return /* @__PURE__ */ jsxRuntime.jsx(
12234
+ Form$2.Field,
12235
+ {
12236
+ control,
12237
+ name: "custom_amount",
12238
+ render: ({ field: { onChange, ...field } }) => {
12239
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12240
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12241
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12242
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12243
+ ] }),
12244
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12245
+ ui.CurrencyInput,
12246
+ {
12247
+ ...field,
12248
+ onValueChange: (value) => onChange(value),
12249
+ symbol: getNativeSymbol(currencyCode),
12250
+ code: currencyCode
12251
+ }
12252
+ ) })
12253
+ ] });
12254
+ }
12255
+ }
12256
+ );
12257
+ };
12258
+ const ShippingAddress = () => {
12259
+ const { id } = reactRouterDom.useParams();
12260
+ const { order, isPending, isError, error } = useOrder(id, {
12261
+ fields: "+shipping_address"
12262
+ });
12263
+ if (isError) {
12264
+ throw error;
12265
+ }
12266
+ const isReady = !isPending && !!order;
12267
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12268
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12269
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12270
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12271
+ ] }),
12272
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12273
+ ] });
12274
+ };
12275
+ const ShippingAddressForm = ({ order }) => {
12276
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12277
+ const form = reactHookForm.useForm({
12278
+ defaultValues: {
12279
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12280
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12281
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12282
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12283
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12284
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12285
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12286
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12287
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12288
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12289
+ },
12290
+ resolver: zod.zodResolver(schema$2)
12291
+ });
12292
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12293
+ const { handleSuccess } = useRouteModal();
12294
+ const onSubmit = form.handleSubmit(async (data) => {
12295
+ await mutateAsync(
12296
+ {
12297
+ shipping_address: {
12298
+ first_name: data.first_name,
12299
+ last_name: data.last_name,
12300
+ company: data.company,
12301
+ address_1: data.address_1,
12302
+ address_2: data.address_2,
12303
+ city: data.city,
12304
+ province: data.province,
12305
+ country_code: data.country_code,
12306
+ postal_code: data.postal_code,
12307
+ phone: data.phone
12308
+ }
12309
+ },
12310
+ {
12311
+ onSuccess: () => {
12312
+ handleSuccess();
12313
+ },
12314
+ onError: (error) => {
12315
+ ui.toast.error(error.message);
12316
+ }
12317
+ }
12318
+ );
12319
+ });
12320
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12321
+ KeyboundForm,
12322
+ {
12323
+ className: "flex flex-1 flex-col overflow-hidden",
12324
+ onSubmit,
12325
+ children: [
12326
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12327
+ /* @__PURE__ */ jsxRuntime.jsx(
12328
+ Form$2.Field,
12329
+ {
12330
+ control: form.control,
12331
+ name: "country_code",
12332
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12333
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12334
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12335
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12336
+ ] })
12337
+ }
12338
+ ),
12339
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12340
+ /* @__PURE__ */ jsxRuntime.jsx(
12341
+ Form$2.Field,
12342
+ {
12343
+ control: form.control,
12344
+ name: "first_name",
12345
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12346
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12347
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12348
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12349
+ ] })
12350
+ }
12351
+ ),
12352
+ /* @__PURE__ */ jsxRuntime.jsx(
12353
+ Form$2.Field,
12354
+ {
12355
+ control: form.control,
12356
+ name: "last_name",
12357
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12358
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12359
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12360
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12361
+ ] })
12362
+ }
12363
+ )
12364
+ ] }),
12365
+ /* @__PURE__ */ jsxRuntime.jsx(
12366
+ Form$2.Field,
12367
+ {
12368
+ control: form.control,
12369
+ name: "company",
12370
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12371
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12372
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12373
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12374
+ ] })
12632
12375
  }
12633
- return open;
12634
- },
12635
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12636
- }
12637
- )
12376
+ ),
12377
+ /* @__PURE__ */ jsxRuntime.jsx(
12378
+ Form$2.Field,
12379
+ {
12380
+ control: form.control,
12381
+ name: "address_1",
12382
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12383
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12384
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12385
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12386
+ ] })
12387
+ }
12388
+ ),
12389
+ /* @__PURE__ */ jsxRuntime.jsx(
12390
+ Form$2.Field,
12391
+ {
12392
+ control: form.control,
12393
+ name: "address_2",
12394
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12395
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12396
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12397
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12398
+ ] })
12399
+ }
12400
+ ),
12401
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12402
+ /* @__PURE__ */ jsxRuntime.jsx(
12403
+ Form$2.Field,
12404
+ {
12405
+ control: form.control,
12406
+ name: "postal_code",
12407
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12408
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12409
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12410
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12411
+ ] })
12412
+ }
12413
+ ),
12414
+ /* @__PURE__ */ jsxRuntime.jsx(
12415
+ Form$2.Field,
12416
+ {
12417
+ control: form.control,
12418
+ name: "city",
12419
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12420
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12421
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12422
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12423
+ ] })
12424
+ }
12425
+ )
12426
+ ] }),
12427
+ /* @__PURE__ */ jsxRuntime.jsx(
12428
+ Form$2.Field,
12429
+ {
12430
+ control: form.control,
12431
+ name: "province",
12432
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12433
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12434
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12435
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12436
+ ] })
12437
+ }
12438
+ ),
12439
+ /* @__PURE__ */ jsxRuntime.jsx(
12440
+ Form$2.Field,
12441
+ {
12442
+ control: form.control,
12443
+ name: "phone",
12444
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12445
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12446
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12447
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12448
+ ] })
12449
+ }
12450
+ )
12451
+ ] }) }),
12452
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12453
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12454
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12455
+ ] }) })
12456
+ ]
12457
+ }
12458
+ ) });
12459
+ };
12460
+ const schema$2 = addressSchema;
12461
+ const TransferOwnership = () => {
12462
+ const { id } = reactRouterDom.useParams();
12463
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12464
+ fields: "id,customer_id,customer.*"
12465
+ });
12466
+ if (isError) {
12467
+ throw error;
12468
+ }
12469
+ const isReady = !isPending && !!draft_order;
12470
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12471
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12472
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12473
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
12638
12474
  ] }),
12639
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12640
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12641
- /* @__PURE__ */ jsxRuntime.jsx(
12642
- ui.Button,
12643
- {
12644
- size: "small",
12645
- type: "button",
12646
- isLoading: isSubmitting,
12647
- onClick: onSubmit,
12648
- children: "Save"
12649
- }
12650
- )
12651
- ] }) })
12475
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12652
12476
  ] });
12653
12477
  };
12654
- const StackedModalTrigger = ({
12655
- shippingProfileId,
12656
- shippingOption,
12657
- shippingMethod,
12658
- setData,
12659
- children
12660
- }) => {
12661
- const { setIsOpen, getIsOpen } = useStackedModal();
12662
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12663
- const onToggle = () => {
12664
- if (isOpen) {
12665
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12666
- setData(null);
12667
- } else {
12668
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12669
- setData({
12670
- shippingProfileId,
12671
- shippingOption,
12672
- shippingMethod
12673
- });
12674
- }
12675
- };
12676
- return /* @__PURE__ */ jsxRuntime.jsx(
12677
- ui.Button,
12478
+ const TransferOwnershipForm = ({ order }) => {
12479
+ var _a, _b;
12480
+ const form = reactHookForm.useForm({
12481
+ defaultValues: {
12482
+ customer_id: order.customer_id || ""
12483
+ },
12484
+ resolver: zod.zodResolver(schema$1)
12485
+ });
12486
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12487
+ const { handleSuccess } = useRouteModal();
12488
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12489
+ const currentCustomer = order.customer ? {
12490
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
12491
+ value: order.customer.id
12492
+ } : null;
12493
+ const onSubmit = form.handleSubmit(async (data) => {
12494
+ await mutateAsync(
12495
+ { customer_id: data.customer_id },
12496
+ {
12497
+ onSuccess: () => {
12498
+ ui.toast.success("Customer updated");
12499
+ handleSuccess();
12500
+ },
12501
+ onError: (error) => {
12502
+ ui.toast.error(error.message);
12503
+ }
12504
+ }
12505
+ );
12506
+ });
12507
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12508
+ KeyboundForm,
12678
12509
  {
12679
- size: "small",
12680
- variant: "secondary",
12681
- onClick: onToggle,
12682
- className: "text-ui-fg-primary shrink-0",
12683
- children
12510
+ className: "flex flex-1 flex-col overflow-hidden",
12511
+ onSubmit,
12512
+ children: [
12513
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12514
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12515
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12516
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12517
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12518
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12519
+ ] }),
12520
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12521
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12522
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12523
+ ] })
12524
+ ] }),
12525
+ /* @__PURE__ */ jsxRuntime.jsx(
12526
+ CustomerField,
12527
+ {
12528
+ control: form.control,
12529
+ currentCustomerId: order.customer_id
12530
+ }
12531
+ )
12532
+ ] }),
12533
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12534
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12535
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12536
+ ] }) })
12537
+ ]
12684
12538
  }
12685
- );
12539
+ ) });
12686
12540
  };
12687
- const ShippingProfileForm = ({
12688
- data,
12689
- order,
12690
- preview
12691
- }) => {
12692
- var _a, _b, _c, _d, _e, _f;
12693
- const { setIsOpen } = useStackedModal();
12694
- const form = reactHookForm.useForm({
12695
- resolver: zod.zodResolver(shippingMethodSchema),
12696
- defaultValues: {
12697
- 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,
12698
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12699
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12541
+ const CustomerField = ({ control, currentCustomerId }) => {
12542
+ const customers = useComboboxData({
12543
+ queryFn: async (params) => {
12544
+ return await sdk.admin.customer.list({
12545
+ ...params,
12546
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12547
+ });
12548
+ },
12549
+ queryKey: ["customers"],
12550
+ getOptions: (data) => {
12551
+ return data.customers.map((customer) => {
12552
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12553
+ return {
12554
+ label: name ? `${name} (${customer.email})` : customer.email,
12555
+ value: customer.id
12556
+ };
12557
+ });
12700
12558
  }
12701
12559
  });
12702
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12703
- const {
12704
- mutateAsync: updateShippingMethod,
12705
- isPending: isUpdatingShippingMethod
12706
- } = useDraftOrderUpdateShippingMethod(order.id);
12707
- const onSubmit = form.handleSubmit(async (values) => {
12708
- if (isEqual__default.default(values, form.formState.defaultValues)) {
12709
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12710
- return;
12560
+ return /* @__PURE__ */ jsxRuntime.jsx(
12561
+ Form$2.Field,
12562
+ {
12563
+ name: "customer_id",
12564
+ control,
12565
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12566
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12567
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12568
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12569
+ ] }),
12570
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12571
+ Combobox,
12572
+ {
12573
+ options: customers.options,
12574
+ fetchNextPage: customers.fetchNextPage,
12575
+ isFetchingNextPage: customers.isFetchingNextPage,
12576
+ searchValue: customers.searchValue,
12577
+ onSearchValueChange: customers.onSearchValueChange,
12578
+ placeholder: "Select customer",
12579
+ ...field
12580
+ }
12581
+ ) }),
12582
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12583
+ ] })
12711
12584
  }
12712
- if (data.shippingMethod) {
12713
- await updateShippingMethod(
12714
- {
12715
- method_id: data.shippingMethod.id,
12716
- shipping_option_id: values.shipping_option_id,
12717
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12718
- },
12719
- {
12720
- onError: (e) => {
12721
- ui.toast.error(e.message);
12722
- },
12723
- onSuccess: () => {
12724
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12585
+ );
12586
+ };
12587
+ const Illustration = () => {
12588
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12589
+ "svg",
12590
+ {
12591
+ width: "280",
12592
+ height: "180",
12593
+ viewBox: "0 0 280 180",
12594
+ fill: "none",
12595
+ xmlns: "http://www.w3.org/2000/svg",
12596
+ children: [
12597
+ /* @__PURE__ */ jsxRuntime.jsx(
12598
+ "rect",
12599
+ {
12600
+ x: "0.00428286",
12601
+ y: "-0.742904",
12602
+ width: "33.5",
12603
+ height: "65.5",
12604
+ rx: "6.75",
12605
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
12606
+ fill: "#D4D4D8",
12607
+ stroke: "#52525B",
12608
+ strokeWidth: "1.5"
12609
+ }
12610
+ ),
12611
+ /* @__PURE__ */ jsxRuntime.jsx(
12612
+ "rect",
12613
+ {
12614
+ x: "0.00428286",
12615
+ y: "-0.742904",
12616
+ width: "33.5",
12617
+ height: "65.5",
12618
+ rx: "6.75",
12619
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
12620
+ fill: "white",
12621
+ stroke: "#52525B",
12622
+ strokeWidth: "1.5"
12623
+ }
12624
+ ),
12625
+ /* @__PURE__ */ jsxRuntime.jsx(
12626
+ "path",
12627
+ {
12628
+ d: "M180.579 107.142L179.126 107.959",
12629
+ stroke: "#52525B",
12630
+ strokeWidth: "1.5",
12631
+ strokeLinecap: "round",
12632
+ strokeLinejoin: "round"
12633
+ }
12634
+ ),
12635
+ /* @__PURE__ */ jsxRuntime.jsx(
12636
+ "path",
12637
+ {
12638
+ opacity: "0.88",
12639
+ d: "M182.305 109.546L180.257 109.534",
12640
+ stroke: "#52525B",
12641
+ strokeWidth: "1.5",
12642
+ strokeLinecap: "round",
12643
+ strokeLinejoin: "round"
12644
+ }
12645
+ ),
12646
+ /* @__PURE__ */ jsxRuntime.jsx(
12647
+ "path",
12648
+ {
12649
+ opacity: "0.75",
12650
+ d: "M180.551 111.93L179.108 111.096",
12651
+ stroke: "#52525B",
12652
+ strokeWidth: "1.5",
12653
+ strokeLinecap: "round",
12654
+ strokeLinejoin: "round"
12655
+ }
12656
+ ),
12657
+ /* @__PURE__ */ jsxRuntime.jsx(
12658
+ "path",
12659
+ {
12660
+ opacity: "0.63",
12661
+ d: "M176.347 112.897L176.354 111.73",
12662
+ stroke: "#52525B",
12663
+ strokeWidth: "1.5",
12664
+ strokeLinecap: "round",
12665
+ strokeLinejoin: "round"
12666
+ }
12667
+ ),
12668
+ /* @__PURE__ */ jsxRuntime.jsx(
12669
+ "path",
12670
+ {
12671
+ opacity: "0.5",
12672
+ d: "M172.153 111.881L173.606 111.064",
12673
+ stroke: "#52525B",
12674
+ strokeWidth: "1.5",
12675
+ strokeLinecap: "round",
12676
+ strokeLinejoin: "round"
12677
+ }
12678
+ ),
12679
+ /* @__PURE__ */ jsxRuntime.jsx(
12680
+ "path",
12681
+ {
12682
+ opacity: "0.38",
12683
+ d: "M170.428 109.478L172.476 109.489",
12684
+ stroke: "#52525B",
12685
+ strokeWidth: "1.5",
12686
+ strokeLinecap: "round",
12687
+ strokeLinejoin: "round"
12688
+ }
12689
+ ),
12690
+ /* @__PURE__ */ jsxRuntime.jsx(
12691
+ "path",
12692
+ {
12693
+ opacity: "0.25",
12694
+ d: "M172.181 107.094L173.624 107.928",
12695
+ stroke: "#52525B",
12696
+ strokeWidth: "1.5",
12697
+ strokeLinecap: "round",
12698
+ strokeLinejoin: "round"
12699
+ }
12700
+ ),
12701
+ /* @__PURE__ */ jsxRuntime.jsx(
12702
+ "path",
12703
+ {
12704
+ opacity: "0.13",
12705
+ d: "M176.386 106.126L176.379 107.294",
12706
+ stroke: "#52525B",
12707
+ strokeWidth: "1.5",
12708
+ strokeLinecap: "round",
12709
+ strokeLinejoin: "round"
12710
+ }
12711
+ ),
12712
+ /* @__PURE__ */ jsxRuntime.jsx(
12713
+ "rect",
12714
+ {
12715
+ width: "12",
12716
+ height: "3",
12717
+ rx: "1.5",
12718
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12719
+ fill: "#D4D4D8"
12720
+ }
12721
+ ),
12722
+ /* @__PURE__ */ jsxRuntime.jsx(
12723
+ "rect",
12724
+ {
12725
+ x: "0.00428286",
12726
+ y: "-0.742904",
12727
+ width: "33.5",
12728
+ height: "65.5",
12729
+ rx: "6.75",
12730
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12731
+ fill: "#D4D4D8",
12732
+ stroke: "#52525B",
12733
+ strokeWidth: "1.5"
12734
+ }
12735
+ ),
12736
+ /* @__PURE__ */ jsxRuntime.jsx(
12737
+ "rect",
12738
+ {
12739
+ x: "0.00428286",
12740
+ y: "-0.742904",
12741
+ width: "33.5",
12742
+ height: "65.5",
12743
+ rx: "6.75",
12744
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12745
+ fill: "white",
12746
+ stroke: "#52525B",
12747
+ strokeWidth: "1.5"
12748
+ }
12749
+ ),
12750
+ /* @__PURE__ */ jsxRuntime.jsx(
12751
+ "rect",
12752
+ {
12753
+ width: "12",
12754
+ height: "3",
12755
+ rx: "1.5",
12756
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12757
+ fill: "#D4D4D8"
12758
+ }
12759
+ ),
12760
+ /* @__PURE__ */ jsxRuntime.jsx(
12761
+ "rect",
12762
+ {
12763
+ width: "17",
12764
+ height: "3",
12765
+ rx: "1.5",
12766
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12767
+ fill: "#D4D4D8"
12768
+ }
12769
+ ),
12770
+ /* @__PURE__ */ jsxRuntime.jsx(
12771
+ "rect",
12772
+ {
12773
+ width: "12",
12774
+ height: "3",
12775
+ rx: "1.5",
12776
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12777
+ fill: "#D4D4D8"
12778
+ }
12779
+ ),
12780
+ /* @__PURE__ */ jsxRuntime.jsx(
12781
+ "path",
12782
+ {
12783
+ d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12784
+ fill: "#A1A1AA"
12785
+ }
12786
+ ),
12787
+ /* @__PURE__ */ jsxRuntime.jsx(
12788
+ "rect",
12789
+ {
12790
+ width: "17",
12791
+ height: "3",
12792
+ rx: "1.5",
12793
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12794
+ fill: "#A1A1AA"
12725
12795
  }
12726
- }
12727
- );
12728
- return;
12729
- }
12730
- await addShippingMethod(
12731
- {
12732
- shipping_option_id: values.shipping_option_id,
12733
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12734
- },
12735
- {
12736
- onError: (e) => {
12737
- ui.toast.error(e.message);
12738
- },
12739
- onSuccess: () => {
12740
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12741
- }
12742
- }
12743
- );
12744
- });
12745
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12746
- KeyboundForm,
12747
- {
12748
- className: "flex h-full flex-col overflow-hidden",
12749
- onSubmit,
12750
- children: [
12751
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12752
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12753
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12754
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12755
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12756
- ] }),
12757
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12758
- /* @__PURE__ */ jsxRuntime.jsx(
12759
- LocationField,
12760
- {
12761
- control: form.control,
12762
- setValue: form.setValue
12763
- }
12764
- ),
12765
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12766
- /* @__PURE__ */ jsxRuntime.jsx(
12767
- ShippingOptionField,
12768
- {
12769
- shippingProfileId: data.shippingProfileId,
12770
- preview,
12771
- control: form.control
12772
- }
12773
- ),
12774
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12775
- /* @__PURE__ */ jsxRuntime.jsx(
12776
- CustomAmountField,
12777
- {
12778
- control: form.control,
12779
- currencyCode: order.currency_code
12780
- }
12781
- ),
12782
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12783
- /* @__PURE__ */ jsxRuntime.jsx(
12784
- ItemsPreview,
12796
+ ),
12797
+ /* @__PURE__ */ jsxRuntime.jsx(
12798
+ "rect",
12799
+ {
12800
+ width: "12",
12801
+ height: "3",
12802
+ rx: "1.5",
12803
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12804
+ fill: "#A1A1AA"
12805
+ }
12806
+ ),
12807
+ /* @__PURE__ */ jsxRuntime.jsx(
12808
+ "path",
12809
+ {
12810
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12811
+ fill: "#52525B"
12812
+ }
12813
+ ),
12814
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12815
+ "path",
12816
+ {
12817
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12818
+ stroke: "#A1A1AA",
12819
+ strokeWidth: "1.5",
12820
+ strokeLinecap: "round",
12821
+ strokeLinejoin: "round"
12822
+ }
12823
+ ) }),
12824
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12825
+ "path",
12826
+ {
12827
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12828
+ stroke: "#A1A1AA",
12829
+ strokeWidth: "1.5",
12830
+ strokeLinecap: "round",
12831
+ strokeLinejoin: "round"
12832
+ }
12833
+ ) }),
12834
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12835
+ "path",
12836
+ {
12837
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12838
+ stroke: "#A1A1AA",
12839
+ strokeWidth: "1.5",
12840
+ strokeLinecap: "round",
12841
+ strokeLinejoin: "round"
12842
+ }
12843
+ ) }),
12844
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12845
+ "path",
12846
+ {
12847
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12848
+ stroke: "#A1A1AA",
12849
+ strokeWidth: "1.5",
12850
+ strokeLinecap: "round",
12851
+ strokeLinejoin: "round"
12852
+ }
12853
+ ) }),
12854
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12855
+ "path",
12856
+ {
12857
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12858
+ stroke: "#A1A1AA",
12859
+ strokeWidth: "1.5",
12860
+ strokeLinecap: "round",
12861
+ strokeLinejoin: "round"
12862
+ }
12863
+ ) }),
12864
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12865
+ "path",
12866
+ {
12867
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12868
+ stroke: "#A1A1AA",
12869
+ strokeWidth: "1.5",
12870
+ strokeLinecap: "round",
12871
+ strokeLinejoin: "round"
12872
+ }
12873
+ ) }),
12874
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12875
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12876
+ "rect",
12785
12877
  {
12786
- order,
12787
- shippingProfileId: data.shippingProfileId
12878
+ width: "12",
12879
+ height: "12",
12880
+ fill: "white",
12881
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12788
12882
  }
12789
- )
12790
- ] }) }) }),
12791
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12792
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12793
- /* @__PURE__ */ jsxRuntime.jsx(
12794
- ui.Button,
12883
+ ) }),
12884
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12885
+ "rect",
12795
12886
  {
12796
- size: "small",
12797
- type: "submit",
12798
- isLoading: isPending || isUpdatingShippingMethod,
12799
- children: data.shippingMethod ? "Update" : "Add"
12887
+ width: "12",
12888
+ height: "12",
12889
+ fill: "white",
12890
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12800
12891
  }
12801
- )
12802
- ] }) })
12803
- ]
12804
- }
12805
- ) }) });
12806
- };
12807
- const shippingMethodSchema = objectType({
12808
- location_id: stringType(),
12809
- shipping_option_id: stringType(),
12810
- custom_amount: unionType([numberType(), stringType()]).optional()
12811
- });
12812
- const ItemsPreview = ({ order, shippingProfileId }) => {
12813
- const matches = order.items.filter(
12814
- (item) => {
12815
- var _a, _b, _c;
12816
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12817
- }
12818
- );
12819
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12820
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12821
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12822
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12823
- ] }) }),
12824
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12825
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12826
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12827
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12828
- ] }),
12829
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12830
- "div",
12831
- {
12832
- className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12833
- children: [
12834
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12835
- /* @__PURE__ */ jsxRuntime.jsx(
12836
- Thumbnail,
12837
- {
12838
- thumbnail: item.thumbnail,
12839
- alt: item.product_title ?? void 0
12840
- }
12841
- ),
12842
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12843
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12844
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12845
- /* @__PURE__ */ jsxRuntime.jsxs(
12846
- ui.Text,
12847
- {
12848
- size: "small",
12849
- leading: "compact",
12850
- className: "text-ui-fg-subtle",
12851
- children: [
12852
- "(",
12853
- item.variant_title,
12854
- ")"
12855
- ]
12856
- }
12857
- )
12858
- ] }),
12859
- /* @__PURE__ */ jsxRuntime.jsx(
12860
- ui.Text,
12861
- {
12862
- size: "small",
12863
- leading: "compact",
12864
- className: "text-ui-fg-subtle",
12865
- children: item.variant_sku
12866
- }
12867
- )
12868
- ] })
12869
- ] }),
12870
- /* @__PURE__ */ jsxRuntime.jsxs(
12871
- ui.Text,
12872
- {
12873
- size: "small",
12874
- leading: "compact",
12875
- className: "text-ui-fg-subtle",
12876
- children: [
12877
- item.quantity,
12878
- "x"
12879
- ]
12880
- }
12881
- )
12882
- ]
12883
- },
12884
- item.id
12885
- )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12886
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12887
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12888
- 'No items found for "',
12889
- query,
12890
- '".'
12892
+ ) }),
12893
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12894
+ "rect",
12895
+ {
12896
+ width: "12",
12897
+ height: "12",
12898
+ fill: "white",
12899
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12900
+ }
12901
+ ) }),
12902
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12903
+ "rect",
12904
+ {
12905
+ width: "12",
12906
+ height: "12",
12907
+ fill: "white",
12908
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12909
+ }
12910
+ ) }),
12911
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12912
+ "rect",
12913
+ {
12914
+ width: "12",
12915
+ height: "12",
12916
+ fill: "white",
12917
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12918
+ }
12919
+ ) }),
12920
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12921
+ "rect",
12922
+ {
12923
+ width: "12",
12924
+ height: "12",
12925
+ fill: "white",
12926
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12927
+ }
12928
+ ) })
12891
12929
  ] })
12892
- ] }) })
12893
- ] })
12894
- ] });
12930
+ ]
12931
+ }
12932
+ );
12895
12933
  };
12896
- const LocationField = ({ control, setValue }) => {
12897
- const locations = useComboboxData({
12898
- queryKey: ["locations"],
12899
- queryFn: async (params) => {
12900
- return await sdk.admin.stockLocation.list(params);
12934
+ const schema$1 = objectType({
12935
+ customer_id: stringType().min(1)
12936
+ });
12937
+ const SalesChannel = () => {
12938
+ const { id } = reactRouterDom.useParams();
12939
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12940
+ id,
12941
+ {
12942
+ fields: "+sales_channel_id"
12901
12943
  },
12902
- getOptions: (data) => {
12903
- return data.stock_locations.map((location) => ({
12904
- label: location.name,
12905
- value: location.id
12906
- }));
12944
+ {
12945
+ enabled: !!id
12907
12946
  }
12947
+ );
12948
+ if (isError) {
12949
+ throw error;
12950
+ }
12951
+ const ISrEADY = !!draft_order && !isPending;
12952
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12953
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12954
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
12955
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12956
+ ] }),
12957
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
12958
+ ] });
12959
+ };
12960
+ const SalesChannelForm = ({ order }) => {
12961
+ const form = reactHookForm.useForm({
12962
+ defaultValues: {
12963
+ sales_channel_id: order.sales_channel_id || ""
12964
+ },
12965
+ resolver: zod.zodResolver(schema)
12908
12966
  });
12909
- return /* @__PURE__ */ jsxRuntime.jsx(
12910
- Form$2.Field,
12911
- {
12912
- control,
12913
- name: "location_id",
12914
- render: ({ field: { onChange, ...field } }) => {
12915
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12916
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12917
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12918
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12919
- ] }),
12920
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12921
- Combobox,
12922
- {
12923
- options: locations.options,
12924
- fetchNextPage: locations.fetchNextPage,
12925
- isFetchingNextPage: locations.isFetchingNextPage,
12926
- searchValue: locations.searchValue,
12927
- onSearchValueChange: locations.onSearchValueChange,
12928
- placeholder: "Select location",
12929
- onChange: (value) => {
12930
- setValue("shipping_option_id", "", {
12931
- shouldDirty: true,
12932
- shouldTouch: true
12933
- });
12934
- onChange(value);
12935
- },
12936
- ...field
12937
- }
12938
- ) })
12939
- ] }) });
12967
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12968
+ const { handleSuccess } = useRouteModal();
12969
+ const onSubmit = form.handleSubmit(async (data) => {
12970
+ await mutateAsync(
12971
+ {
12972
+ sales_channel_id: data.sales_channel_id
12973
+ },
12974
+ {
12975
+ onSuccess: () => {
12976
+ ui.toast.success("Sales channel updated");
12977
+ handleSuccess();
12978
+ },
12979
+ onError: (error) => {
12980
+ ui.toast.error(error.message);
12981
+ }
12940
12982
  }
12983
+ );
12984
+ });
12985
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12986
+ KeyboundForm,
12987
+ {
12988
+ className: "flex flex-1 flex-col overflow-hidden",
12989
+ onSubmit,
12990
+ children: [
12991
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
12992
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12993
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12994
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12995
+ ] }) })
12996
+ ]
12941
12997
  }
12942
- );
12998
+ ) });
12943
12999
  };
12944
- const ShippingOptionField = ({
12945
- shippingProfileId,
12946
- preview,
12947
- control
12948
- }) => {
12949
- var _a;
12950
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12951
- const shippingOptions = useComboboxData({
12952
- queryKey: ["shipping_options", locationId, shippingProfileId],
13000
+ const SalesChannelField = ({ control, order }) => {
13001
+ const salesChannels = useComboboxData({
12953
13002
  queryFn: async (params) => {
12954
- return await sdk.admin.shippingOption.list({
12955
- ...params,
12956
- stock_location_id: locationId,
12957
- shipping_profile_id: shippingProfileId
12958
- });
13003
+ return await sdk.admin.salesChannel.list(params);
12959
13004
  },
13005
+ queryKey: ["sales-channels"],
12960
13006
  getOptions: (data) => {
12961
- return data.shipping_options.map((option) => {
12962
- var _a2;
12963
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12964
- (r) => r.attribute === "is_return" && r.value === "true"
12965
- )) {
12966
- return void 0;
12967
- }
12968
- return {
12969
- label: option.name,
12970
- value: option.id
12971
- };
12972
- }).filter(Boolean);
13007
+ return data.sales_channels.map((salesChannel) => ({
13008
+ label: salesChannel.name,
13009
+ value: salesChannel.id
13010
+ }));
12973
13011
  },
12974
- enabled: !!locationId && !!shippingProfileId,
12975
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
13012
+ defaultValue: order.sales_channel_id || void 0
12976
13013
  });
12977
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12978
13014
  return /* @__PURE__ */ jsxRuntime.jsx(
12979
13015
  Form$2.Field,
12980
13016
  {
12981
13017
  control,
12982
- name: "shipping_option_id",
13018
+ name: "sales_channel_id",
12983
13019
  render: ({ field }) => {
12984
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12985
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12986
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12987
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12988
- ] }),
12989
- /* @__PURE__ */ jsxRuntime.jsx(
12990
- ConditionalTooltip,
12991
- {
12992
- content: tooltipContent,
12993
- showTooltip: !locationId || !shippingProfileId,
12994
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12995
- Combobox,
12996
- {
12997
- options: shippingOptions.options,
12998
- fetchNextPage: shippingOptions.fetchNextPage,
12999
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
13000
- searchValue: shippingOptions.searchValue,
13001
- onSearchValueChange: shippingOptions.onSearchValueChange,
13002
- placeholder: "Select shipping option",
13003
- ...field,
13004
- disabled: !locationId || !shippingProfileId
13005
- }
13006
- ) }) })
13007
- }
13008
- )
13009
- ] }) });
13010
- }
13011
- }
13012
- );
13013
- };
13014
- const CustomAmountField = ({
13015
- control,
13016
- currencyCode
13017
- }) => {
13018
- return /* @__PURE__ */ jsxRuntime.jsx(
13019
- Form$2.Field,
13020
- {
13021
- control,
13022
- name: "custom_amount",
13023
- render: ({ field: { onChange, ...field } }) => {
13024
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13025
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13026
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
13027
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
13028
- ] }),
13020
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13021
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
13029
13022
  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13030
- ui.CurrencyInput,
13023
+ Combobox,
13031
13024
  {
13032
- ...field,
13033
- onValueChange: (value) => onChange(value),
13034
- symbol: getNativeSymbol(currencyCode),
13035
- code: currencyCode
13025
+ options: salesChannels.options,
13026
+ fetchNextPage: salesChannels.fetchNextPage,
13027
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
13028
+ searchValue: salesChannels.searchValue,
13029
+ onSearchValueChange: salesChannels.onSearchValueChange,
13030
+ placeholder: "Select sales channel",
13031
+ ...field
13036
13032
  }
13037
- ) })
13033
+ ) }),
13034
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13038
13035
  ] });
13039
13036
  }
13040
13037
  }
13041
13038
  );
13042
13039
  };
13040
+ const schema = objectType({
13041
+ sales_channel_id: stringType().min(1)
13042
+ });
13043
13043
  const widgetModule = { widgets: [] };
13044
13044
  const routeModule = {
13045
13045
  routes: [
@@ -13085,8 +13085,8 @@ const routeModule = {
13085
13085
  path: "/draft-orders/:id/promotions"
13086
13086
  },
13087
13087
  {
13088
- Component: SalesChannel,
13089
- path: "/draft-orders/:id/sales-channel"
13088
+ Component: Shipping,
13089
+ path: "/draft-orders/:id/shipping"
13090
13090
  },
13091
13091
  {
13092
13092
  Component: ShippingAddress,
@@ -13097,8 +13097,8 @@ const routeModule = {
13097
13097
  path: "/draft-orders/:id/transfer-ownership"
13098
13098
  },
13099
13099
  {
13100
- Component: Shipping,
13101
- path: "/draft-orders/:id/shipping"
13100
+ Component: SalesChannel,
13101
+ path: "/draft-orders/:id/sales-channel"
13102
13102
  }
13103
13103
  ]
13104
13104
  }