@medusajs/draft-order 2.11.2-preview-20251028120204 → 2.11.2-preview-20251028150158

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 +1246 -1246
  2. package/.medusa/server/src/admin/index.mjs +1246 -1246
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -9571,6 +9571,196 @@ const ID = () => {
9571
9571
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9572
9572
  ] });
9573
9573
  };
9574
+ const BillingAddress = () => {
9575
+ const { id } = reactRouterDom.useParams();
9576
+ const { order, isPending, isError, error } = useOrder(id, {
9577
+ fields: "+billing_address"
9578
+ });
9579
+ if (isError) {
9580
+ throw error;
9581
+ }
9582
+ const isReady = !isPending && !!order;
9583
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9584
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9585
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
9586
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9587
+ ] }),
9588
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9589
+ ] });
9590
+ };
9591
+ const BillingAddressForm = ({ order }) => {
9592
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9593
+ const form = reactHookForm.useForm({
9594
+ defaultValues: {
9595
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9596
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9597
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9598
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9599
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9600
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9601
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9602
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9603
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9604
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9605
+ },
9606
+ resolver: zod.zodResolver(schema$5)
9607
+ });
9608
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9609
+ const { handleSuccess } = useRouteModal();
9610
+ const onSubmit = form.handleSubmit(async (data) => {
9611
+ await mutateAsync(
9612
+ { billing_address: data },
9613
+ {
9614
+ onSuccess: () => {
9615
+ handleSuccess();
9616
+ },
9617
+ onError: (error) => {
9618
+ ui.toast.error(error.message);
9619
+ }
9620
+ }
9621
+ );
9622
+ });
9623
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9624
+ KeyboundForm,
9625
+ {
9626
+ className: "flex flex-1 flex-col overflow-hidden",
9627
+ onSubmit,
9628
+ children: [
9629
+ /* @__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: [
9630
+ /* @__PURE__ */ jsxRuntime.jsx(
9631
+ Form$2.Field,
9632
+ {
9633
+ control: form.control,
9634
+ name: "country_code",
9635
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9636
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
9637
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
9638
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9639
+ ] })
9640
+ }
9641
+ ),
9642
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9643
+ /* @__PURE__ */ jsxRuntime.jsx(
9644
+ Form$2.Field,
9645
+ {
9646
+ control: form.control,
9647
+ name: "first_name",
9648
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9649
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
9650
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9651
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9652
+ ] })
9653
+ }
9654
+ ),
9655
+ /* @__PURE__ */ jsxRuntime.jsx(
9656
+ Form$2.Field,
9657
+ {
9658
+ control: form.control,
9659
+ name: "last_name",
9660
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9661
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
9662
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9663
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9664
+ ] })
9665
+ }
9666
+ )
9667
+ ] }),
9668
+ /* @__PURE__ */ jsxRuntime.jsx(
9669
+ Form$2.Field,
9670
+ {
9671
+ control: form.control,
9672
+ name: "company",
9673
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9674
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
9675
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9676
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9677
+ ] })
9678
+ }
9679
+ ),
9680
+ /* @__PURE__ */ jsxRuntime.jsx(
9681
+ Form$2.Field,
9682
+ {
9683
+ control: form.control,
9684
+ name: "address_1",
9685
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9686
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
9687
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9688
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9689
+ ] })
9690
+ }
9691
+ ),
9692
+ /* @__PURE__ */ jsxRuntime.jsx(
9693
+ Form$2.Field,
9694
+ {
9695
+ control: form.control,
9696
+ name: "address_2",
9697
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9698
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9699
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9700
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9701
+ ] })
9702
+ }
9703
+ ),
9704
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9705
+ /* @__PURE__ */ jsxRuntime.jsx(
9706
+ Form$2.Field,
9707
+ {
9708
+ control: form.control,
9709
+ name: "postal_code",
9710
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9711
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
9712
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9713
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9714
+ ] })
9715
+ }
9716
+ ),
9717
+ /* @__PURE__ */ jsxRuntime.jsx(
9718
+ Form$2.Field,
9719
+ {
9720
+ control: form.control,
9721
+ name: "city",
9722
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9723
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
9724
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9725
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9726
+ ] })
9727
+ }
9728
+ )
9729
+ ] }),
9730
+ /* @__PURE__ */ jsxRuntime.jsx(
9731
+ Form$2.Field,
9732
+ {
9733
+ control: form.control,
9734
+ name: "province",
9735
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9736
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9737
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9738
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9739
+ ] })
9740
+ }
9741
+ ),
9742
+ /* @__PURE__ */ jsxRuntime.jsx(
9743
+ Form$2.Field,
9744
+ {
9745
+ control: form.control,
9746
+ name: "phone",
9747
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9748
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
9749
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9750
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9751
+ ] })
9752
+ }
9753
+ )
9754
+ ] }) }),
9755
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9756
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9757
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9758
+ ] }) })
9759
+ ]
9760
+ }
9761
+ ) });
9762
+ };
9763
+ const schema$5 = addressSchema;
9574
9764
  const CustomItems = () => {
9575
9765
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9576
9766
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
@@ -9579,7 +9769,7 @@ const CustomItems = () => {
9579
9769
  };
9580
9770
  const CustomItemsForm = () => {
9581
9771
  const form = reactHookForm.useForm({
9582
- resolver: zod.zodResolver(schema$5)
9772
+ resolver: zod.zodResolver(schema$4)
9583
9773
  });
9584
9774
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9585
9775
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
@@ -9589,7 +9779,7 @@ const CustomItemsForm = () => {
9589
9779
  ] }) })
9590
9780
  ] }) });
9591
9781
  };
9592
- const schema$5 = objectType({
9782
+ const schema$4 = objectType({
9593
9783
  email: stringType().email()
9594
9784
  });
9595
9785
  const Email = () => {
@@ -9614,7 +9804,7 @@ const EmailForm = ({ order }) => {
9614
9804
  defaultValues: {
9615
9805
  email: order.email ?? ""
9616
9806
  },
9617
- resolver: zod.zodResolver(schema$4)
9807
+ resolver: zod.zodResolver(schema$3)
9618
9808
  });
9619
9809
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9620
9810
  const { handleSuccess } = useRouteModal();
@@ -9657,7 +9847,7 @@ const EmailForm = ({ order }) => {
9657
9847
  }
9658
9848
  ) });
9659
9849
  };
9660
- const schema$4 = objectType({
9850
+ const schema$3 = objectType({
9661
9851
  email: stringType().email()
9662
9852
  });
9663
9853
  const NumberInput = React.forwardRef(
@@ -11289,7 +11479,7 @@ const SalesChannelForm = ({ order }) => {
11289
11479
  defaultValues: {
11290
11480
  sales_channel_id: order.sales_channel_id || ""
11291
11481
  },
11292
- resolver: zod.zodResolver(schema$3)
11482
+ resolver: zod.zodResolver(schema$2)
11293
11483
  });
11294
11484
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11295
11485
  const { handleSuccess } = useRouteModal();
@@ -11364,1154 +11554,347 @@ const SalesChannelField = ({ control, order }) => {
11364
11554
  }
11365
11555
  );
11366
11556
  };
11367
- const schema$3 = objectType({
11557
+ const schema$2 = objectType({
11368
11558
  sales_channel_id: stringType().min(1)
11369
11559
  });
11370
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11371
- const Shipping = () => {
11372
- var _a;
11560
+ const ShippingAddress = () => {
11373
11561
  const { id } = reactRouterDom.useParams();
11374
11562
  const { order, isPending, isError, error } = useOrder(id, {
11375
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11563
+ fields: "+shipping_address"
11376
11564
  });
11377
- const {
11378
- order: preview,
11379
- isPending: isPreviewPending,
11380
- isError: isPreviewError,
11381
- error: previewError
11382
- } = useOrderPreview(id);
11383
- useInitiateOrderEdit({ preview });
11384
- const { onCancel } = useCancelOrderEdit({ preview });
11385
11565
  if (isError) {
11386
11566
  throw error;
11387
11567
  }
11388
- if (isPreviewError) {
11389
- throw previewError;
11390
- }
11391
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11392
- const isReady = preview && !isPreviewPending && order && !isPending;
11393
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11394
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11395
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11396
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11397
- /* @__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." }) })
11398
- ] }) }) }),
11399
- /* @__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" }) }) })
11400
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11401
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11402
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11403
- ] }) });
11568
+ const isReady = !isPending && !!order;
11569
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11570
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11571
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11572
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11573
+ ] }),
11574
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11575
+ ] });
11404
11576
  };
11405
- const ShippingForm = ({ preview, order }) => {
11406
- var _a;
11407
- const { setIsOpen } = useStackedModal();
11408
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11409
- const [data, setData] = React.useState(null);
11410
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11411
- const { shipping_options } = useShippingOptions(
11412
- {
11413
- id: appliedShippingOptionIds,
11414
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11415
- },
11416
- {
11417
- enabled: appliedShippingOptionIds.length > 0
11418
- }
11419
- );
11420
- const uniqueShippingProfiles = React.useMemo(() => {
11421
- const profiles = /* @__PURE__ */ new Map();
11422
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11423
- profiles.set(profile.id, profile);
11424
- });
11425
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11426
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11427
- });
11428
- return Array.from(profiles.values());
11429
- }, [order.items, shipping_options]);
11577
+ const ShippingAddressForm = ({ order }) => {
11578
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11579
+ const form = reactHookForm.useForm({
11580
+ defaultValues: {
11581
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11582
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11583
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11584
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11585
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11586
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11587
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11588
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11589
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11590
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11591
+ },
11592
+ resolver: zod.zodResolver(schema$1)
11593
+ });
11594
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11430
11595
  const { handleSuccess } = useRouteModal();
11431
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11432
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11433
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11434
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11435
- const onSubmit = async () => {
11436
- setIsSubmitting(true);
11437
- let requestSucceeded = false;
11438
- await requestOrderEdit(void 0, {
11439
- onError: (e) => {
11440
- ui.toast.error(`Failed to request order edit: ${e.message}`);
11441
- },
11442
- onSuccess: () => {
11443
- requestSucceeded = true;
11444
- }
11445
- });
11446
- if (!requestSucceeded) {
11447
- setIsSubmitting(false);
11448
- return;
11449
- }
11450
- await confirmOrderEdit(void 0, {
11451
- onError: (e) => {
11452
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11453
- },
11454
- onSuccess: () => {
11455
- handleSuccess();
11596
+ const onSubmit = form.handleSubmit(async (data) => {
11597
+ await mutateAsync(
11598
+ {
11599
+ shipping_address: {
11600
+ first_name: data.first_name,
11601
+ last_name: data.last_name,
11602
+ company: data.company,
11603
+ address_1: data.address_1,
11604
+ address_2: data.address_2,
11605
+ city: data.city,
11606
+ province: data.province,
11607
+ country_code: data.country_code,
11608
+ postal_code: data.postal_code,
11609
+ phone: data.phone
11610
+ }
11456
11611
  },
11457
- onSettled: () => {
11458
- setIsSubmitting(false);
11459
- }
11460
- });
11461
- };
11462
- const onKeydown = React.useCallback(
11463
- (e) => {
11464
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11465
- if (data || isSubmitting) {
11466
- return;
11612
+ {
11613
+ onSuccess: () => {
11614
+ handleSuccess();
11615
+ },
11616
+ onError: (error) => {
11617
+ ui.toast.error(error.message);
11467
11618
  }
11468
- onSubmit();
11469
11619
  }
11470
- },
11471
- [data, isSubmitting, onSubmit]
11472
- );
11473
- React.useEffect(() => {
11474
- document.addEventListener("keydown", onKeydown);
11475
- return () => {
11476
- document.removeEventListener("keydown", onKeydown);
11477
- };
11478
- }, [onKeydown]);
11479
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11480
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11481
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11482
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11483
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11484
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11485
- /* @__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." }) })
11486
- ] }),
11487
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11488
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11489
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11620
+ );
11621
+ });
11622
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11623
+ KeyboundForm,
11624
+ {
11625
+ className: "flex flex-1 flex-col overflow-hidden",
11626
+ onSubmit,
11627
+ children: [
11628
+ /* @__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: [
11629
+ /* @__PURE__ */ jsxRuntime.jsx(
11630
+ Form$2.Field,
11631
+ {
11632
+ control: form.control,
11633
+ name: "country_code",
11634
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11635
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11636
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11637
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11638
+ ] })
11639
+ }
11640
+ ),
11641
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11490
11642
  /* @__PURE__ */ jsxRuntime.jsx(
11491
- ui.Text,
11643
+ Form$2.Field,
11492
11644
  {
11493
- size: "xsmall",
11494
- weight: "plus",
11495
- className: "text-ui-fg-muted",
11496
- children: "Shipping profile"
11645
+ control: form.control,
11646
+ name: "first_name",
11647
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11648
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11649
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11650
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11651
+ ] })
11497
11652
  }
11498
11653
  ),
11499
11654
  /* @__PURE__ */ jsxRuntime.jsx(
11500
- ui.Text,
11655
+ Form$2.Field,
11501
11656
  {
11502
- size: "xsmall",
11503
- weight: "plus",
11504
- className: "text-ui-fg-muted",
11505
- children: "Action"
11657
+ control: form.control,
11658
+ name: "last_name",
11659
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11660
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11661
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11662
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11663
+ ] })
11506
11664
  }
11507
11665
  )
11508
11666
  ] }),
11509
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11510
- var _a2, _b, _c, _d, _e, _f, _g;
11511
- const items = getItemsWithShippingProfile(
11512
- profile.id,
11513
- order.items
11514
- );
11515
- const hasItems = items.length > 0;
11516
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11517
- (option) => option.shipping_profile_id === profile.id
11518
- );
11519
- const shippingMethod = preview.shipping_methods.find(
11520
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11521
- );
11522
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11523
- (action) => action.action === "SHIPPING_ADD"
11524
- );
11525
- return /* @__PURE__ */ jsxRuntime.jsxs(
11526
- radixUi.Accordion.Item,
11667
+ /* @__PURE__ */ jsxRuntime.jsx(
11668
+ Form$2.Field,
11669
+ {
11670
+ control: form.control,
11671
+ name: "company",
11672
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11673
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11674
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11675
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11676
+ ] })
11677
+ }
11678
+ ),
11679
+ /* @__PURE__ */ jsxRuntime.jsx(
11680
+ Form$2.Field,
11681
+ {
11682
+ control: form.control,
11683
+ name: "address_1",
11684
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11685
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11686
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11687
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11688
+ ] })
11689
+ }
11690
+ ),
11691
+ /* @__PURE__ */ jsxRuntime.jsx(
11692
+ Form$2.Field,
11693
+ {
11694
+ control: form.control,
11695
+ name: "address_2",
11696
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11697
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11698
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11699
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11700
+ ] })
11701
+ }
11702
+ ),
11703
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11704
+ /* @__PURE__ */ jsxRuntime.jsx(
11705
+ Form$2.Field,
11527
11706
  {
11528
- value: profile.id,
11529
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11530
- children: [
11531
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11532
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11533
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11534
- ui.IconButton,
11535
- {
11536
- size: "2xsmall",
11537
- variant: "transparent",
11538
- className: "group/trigger",
11539
- disabled: !hasItems,
11540
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11541
- }
11542
- ) }),
11543
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11544
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
11545
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
11546
- /* @__PURE__ */ jsxRuntime.jsx(
11547
- ui.Text,
11548
- {
11549
- size: "small",
11550
- weight: "plus",
11551
- leading: "compact",
11552
- children: profile.name
11553
- }
11554
- ),
11555
- /* @__PURE__ */ jsxRuntime.jsxs(
11556
- ui.Text,
11557
- {
11558
- size: "small",
11559
- leading: "compact",
11560
- className: "text-ui-fg-subtle",
11561
- children: [
11562
- items.length,
11563
- " ",
11564
- pluralize(items.length, "items", "item")
11565
- ]
11566
- }
11567
- )
11568
- ] })
11569
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11570
- /* @__PURE__ */ jsxRuntime.jsx(
11571
- ui.Tooltip,
11572
- {
11573
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
11574
- var _a3, _b2, _c2;
11575
- return /* @__PURE__ */ jsxRuntime.jsx(
11576
- "li",
11577
- {
11578
- 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})`
11579
- },
11580
- item.id
11581
- );
11582
- }) }),
11583
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11584
- ui.Badge,
11585
- {
11586
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11587
- size: "xsmall",
11588
- children: [
11589
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
11590
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
11591
- items.reduce(
11592
- (acc, item) => acc + item.quantity,
11593
- 0
11594
- ),
11595
- "x",
11596
- " ",
11597
- pluralize(items.length, "items", "item")
11598
- ] })
11599
- ]
11600
- }
11601
- )
11602
- }
11603
- ),
11604
- /* @__PURE__ */ jsxRuntime.jsx(
11605
- ui.Tooltip,
11606
- {
11607
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11608
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11609
- ui.Badge,
11610
- {
11611
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11612
- size: "xsmall",
11613
- children: [
11614
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
11615
- /* @__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 })
11616
- ]
11617
- }
11618
- )
11619
- }
11620
- ),
11621
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11622
- ui.Badge,
11623
- {
11624
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11625
- size: "xsmall",
11626
- children: [
11627
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
11628
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
11629
- ]
11630
- }
11631
- ) })
11632
- ] })
11633
- ] }),
11634
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
11635
- ActionMenu,
11636
- {
11637
- groups: [
11638
- {
11639
- actions: [
11640
- hasItems ? {
11641
- label: "Edit shipping option",
11642
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
11643
- onClick: () => {
11644
- setIsOpen(
11645
- STACKED_FOCUS_MODAL_ID,
11646
- true
11647
- );
11648
- setData({
11649
- shippingProfileId: profile.id,
11650
- shippingOption,
11651
- shippingMethod
11652
- });
11653
- }
11654
- } : void 0,
11655
- {
11656
- label: "Remove shipping option",
11657
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
11658
- onClick: () => {
11659
- if (shippingMethod) {
11660
- if (addShippingMethodAction) {
11661
- removeActionShippingMethod(
11662
- addShippingMethodAction.id
11663
- );
11664
- } else {
11665
- removeShippingMethod(
11666
- shippingMethod.id
11667
- );
11668
- }
11669
- }
11670
- }
11671
- }
11672
- ].filter(Boolean)
11673
- }
11674
- ]
11675
- }
11676
- ) : /* @__PURE__ */ jsxRuntime.jsx(
11677
- StackedModalTrigger,
11678
- {
11679
- shippingProfileId: profile.id,
11680
- shippingOption,
11681
- shippingMethod,
11682
- setData,
11683
- children: "Add shipping option"
11684
- }
11685
- )
11686
- ] }),
11687
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
11688
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11689
- items.map((item, idx) => {
11690
- var _a3, _b2, _c2, _d2, _e2;
11691
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11692
- /* @__PURE__ */ jsxRuntime.jsxs(
11693
- "div",
11694
- {
11695
- className: "px-3 flex items-center gap-x-3",
11696
- children: [
11697
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11698
- ui.Divider,
11699
- {
11700
- variant: "dashed",
11701
- orientation: "vertical"
11702
- }
11703
- ) }),
11704
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11705
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11706
- ui.Text,
11707
- {
11708
- size: "small",
11709
- leading: "compact",
11710
- className: "text-ui-fg-subtle",
11711
- children: [
11712
- item.quantity,
11713
- "x"
11714
- ]
11715
- }
11716
- ) }),
11717
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
11718
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11719
- /* @__PURE__ */ jsxRuntime.jsxs(
11720
- ui.Text,
11721
- {
11722
- size: "small",
11723
- leading: "compact",
11724
- weight: "plus",
11725
- children: [
11726
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11727
- " (",
11728
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11729
- ")"
11730
- ]
11731
- }
11732
- ),
11733
- /* @__PURE__ */ jsxRuntime.jsx(
11734
- ui.Text,
11735
- {
11736
- size: "small",
11737
- leading: "compact",
11738
- className: "text-ui-fg-subtle",
11739
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11740
- }
11741
- )
11742
- ] })
11743
- ] })
11744
- ]
11745
- },
11746
- item.id
11747
- ),
11748
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
11749
- ] }, item.id);
11750
- })
11751
- ] })
11752
- ]
11753
- },
11754
- profile.id
11755
- );
11756
- }) })
11757
- ] }) })
11758
- ] }) }),
11759
- /* @__PURE__ */ jsxRuntime.jsx(
11760
- StackedFocusModal,
11761
- {
11762
- id: STACKED_FOCUS_MODAL_ID,
11763
- onOpenChangeCallback: (open) => {
11764
- if (!open) {
11765
- setData(null);
11707
+ control: form.control,
11708
+ name: "postal_code",
11709
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11710
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11711
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11712
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11713
+ ] })
11714
+ }
11715
+ ),
11716
+ /* @__PURE__ */ jsxRuntime.jsx(
11717
+ Form$2.Field,
11718
+ {
11719
+ control: form.control,
11720
+ name: "city",
11721
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11722
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11723
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11724
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11725
+ ] })
11726
+ }
11727
+ )
11728
+ ] }),
11729
+ /* @__PURE__ */ jsxRuntime.jsx(
11730
+ Form$2.Field,
11731
+ {
11732
+ control: form.control,
11733
+ name: "province",
11734
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11735
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11736
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11737
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11738
+ ] })
11766
11739
  }
11767
- return open;
11768
- },
11769
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11770
- }
11771
- )
11772
- ] }),
11773
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11774
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11775
- /* @__PURE__ */ jsxRuntime.jsx(
11776
- ui.Button,
11777
- {
11778
- size: "small",
11779
- type: "button",
11780
- isLoading: isSubmitting,
11781
- onClick: onSubmit,
11782
- children: "Save"
11783
- }
11784
- )
11785
- ] }) })
11786
- ] });
11787
- };
11788
- const StackedModalTrigger = ({
11789
- shippingProfileId,
11790
- shippingOption,
11791
- shippingMethod,
11792
- setData,
11793
- children
11794
- }) => {
11795
- const { setIsOpen, getIsOpen } = useStackedModal();
11796
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11797
- const onToggle = () => {
11798
- if (isOpen) {
11799
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11800
- setData(null);
11801
- } else {
11802
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11803
- setData({
11804
- shippingProfileId,
11805
- shippingOption,
11806
- shippingMethod
11807
- });
11808
- }
11809
- };
11810
- return /* @__PURE__ */ jsxRuntime.jsx(
11811
- ui.Button,
11812
- {
11813
- size: "small",
11814
- variant: "secondary",
11815
- onClick: onToggle,
11816
- className: "text-ui-fg-primary shrink-0",
11817
- children
11740
+ ),
11741
+ /* @__PURE__ */ jsxRuntime.jsx(
11742
+ Form$2.Field,
11743
+ {
11744
+ control: form.control,
11745
+ name: "phone",
11746
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11747
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11748
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11749
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11750
+ ] })
11751
+ }
11752
+ )
11753
+ ] }) }),
11754
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11755
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11756
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11757
+ ] }) })
11758
+ ]
11818
11759
  }
11819
- );
11760
+ ) });
11820
11761
  };
11821
- const ShippingProfileForm = ({
11822
- data,
11823
- order,
11824
- preview
11825
- }) => {
11826
- var _a, _b, _c, _d, _e, _f;
11827
- const { setIsOpen } = useStackedModal();
11762
+ const schema$1 = addressSchema;
11763
+ const TransferOwnership = () => {
11764
+ const { id } = reactRouterDom.useParams();
11765
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11766
+ fields: "id,customer_id,customer.*"
11767
+ });
11768
+ if (isError) {
11769
+ throw error;
11770
+ }
11771
+ const isReady = !isPending && !!draft_order;
11772
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11773
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11774
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11775
+ /* @__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" }) })
11776
+ ] }),
11777
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
11778
+ ] });
11779
+ };
11780
+ const TransferOwnershipForm = ({ order }) => {
11781
+ var _a, _b;
11828
11782
  const form = reactHookForm.useForm({
11829
- resolver: zod.zodResolver(shippingMethodSchema),
11830
11783
  defaultValues: {
11831
- 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,
11832
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
11833
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
11834
- }
11784
+ customer_id: order.customer_id || ""
11785
+ },
11786
+ resolver: zod.zodResolver(schema)
11835
11787
  });
11836
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
11837
- const {
11838
- mutateAsync: updateShippingMethod,
11839
- isPending: isUpdatingShippingMethod
11840
- } = useDraftOrderUpdateShippingMethod(order.id);
11841
- const onSubmit = form.handleSubmit(async (values) => {
11842
- if (lodash.isEqual(values, form.formState.defaultValues)) {
11843
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11844
- return;
11845
- }
11846
- if (data.shippingMethod) {
11847
- await updateShippingMethod(
11848
- {
11849
- method_id: data.shippingMethod.id,
11850
- shipping_option_id: values.shipping_option_id,
11851
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11852
- },
11853
- {
11854
- onError: (e) => {
11855
- ui.toast.error(e.message);
11856
- },
11857
- onSuccess: () => {
11858
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11859
- }
11860
- }
11861
- );
11862
- return;
11863
- }
11864
- await addShippingMethod(
11865
- {
11866
- shipping_option_id: values.shipping_option_id,
11867
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11868
- },
11788
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11789
+ const { handleSuccess } = useRouteModal();
11790
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
11791
+ const currentCustomer = order.customer ? {
11792
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
11793
+ value: order.customer.id
11794
+ } : null;
11795
+ const onSubmit = form.handleSubmit(async (data) => {
11796
+ await mutateAsync(
11797
+ { customer_id: data.customer_id },
11869
11798
  {
11870
- onError: (e) => {
11871
- ui.toast.error(e.message);
11872
- },
11873
11799
  onSuccess: () => {
11874
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11800
+ ui.toast.success("Customer updated");
11801
+ handleSuccess();
11802
+ },
11803
+ onError: (error) => {
11804
+ ui.toast.error(error.message);
11875
11805
  }
11876
11806
  }
11877
11807
  );
11878
11808
  });
11879
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11809
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11880
11810
  KeyboundForm,
11881
11811
  {
11882
- className: "flex h-full flex-col overflow-hidden",
11812
+ className: "flex flex-1 flex-col overflow-hidden",
11883
11813
  onSubmit,
11884
11814
  children: [
11885
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
11886
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11887
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11888
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11889
- /* @__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." }) })
11815
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
11816
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
11817
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
11818
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11819
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
11820
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
11821
+ ] }),
11822
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
11823
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
11824
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
11825
+ ] })
11890
11826
  ] }),
11891
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11892
- /* @__PURE__ */ jsxRuntime.jsx(
11893
- LocationField,
11894
- {
11895
- control: form.control,
11896
- setValue: form.setValue
11897
- }
11898
- ),
11899
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11900
- /* @__PURE__ */ jsxRuntime.jsx(
11901
- ShippingOptionField,
11902
- {
11903
- shippingProfileId: data.shippingProfileId,
11904
- preview,
11905
- control: form.control
11906
- }
11907
- ),
11908
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11909
11827
  /* @__PURE__ */ jsxRuntime.jsx(
11910
- CustomAmountField,
11828
+ CustomerField,
11911
11829
  {
11912
11830
  control: form.control,
11913
- currencyCode: order.currency_code
11914
- }
11915
- ),
11916
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11917
- /* @__PURE__ */ jsxRuntime.jsx(
11918
- ItemsPreview,
11919
- {
11920
- order,
11921
- shippingProfileId: data.shippingProfileId
11922
- }
11923
- )
11924
- ] }) }) }),
11925
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11926
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11927
- /* @__PURE__ */ jsxRuntime.jsx(
11928
- ui.Button,
11929
- {
11930
- size: "small",
11931
- type: "submit",
11932
- isLoading: isPending || isUpdatingShippingMethod,
11933
- children: data.shippingMethod ? "Update" : "Add"
11831
+ currentCustomerId: order.customer_id
11934
11832
  }
11935
11833
  )
11834
+ ] }),
11835
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11836
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
11837
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11936
11838
  ] }) })
11937
11839
  ]
11938
11840
  }
11939
- ) }) });
11841
+ ) });
11940
11842
  };
11941
- const shippingMethodSchema = objectType({
11942
- location_id: stringType(),
11943
- shipping_option_id: stringType(),
11944
- custom_amount: unionType([numberType(), stringType()]).optional()
11945
- });
11946
- const ItemsPreview = ({ order, shippingProfileId }) => {
11947
- const matches = order.items.filter(
11948
- (item) => {
11949
- var _a, _b, _c;
11950
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
11951
- }
11952
- );
11953
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
11954
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11955
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
11956
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
11957
- ] }) }),
11958
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11959
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
11960
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
11961
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
11962
- ] }),
11963
- /* @__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(
11964
- "div",
11965
- {
11966
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
11967
- children: [
11968
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11969
- /* @__PURE__ */ jsxRuntime.jsx(
11970
- Thumbnail,
11971
- {
11972
- thumbnail: item.thumbnail,
11973
- alt: item.product_title ?? void 0
11974
- }
11975
- ),
11976
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11977
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
11978
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
11979
- /* @__PURE__ */ jsxRuntime.jsxs(
11980
- ui.Text,
11981
- {
11982
- size: "small",
11983
- leading: "compact",
11984
- className: "text-ui-fg-subtle",
11985
- children: [
11986
- "(",
11987
- item.variant_title,
11988
- ")"
11989
- ]
11990
- }
11991
- )
11992
- ] }),
11993
- /* @__PURE__ */ jsxRuntime.jsx(
11994
- ui.Text,
11995
- {
11996
- size: "small",
11997
- leading: "compact",
11998
- className: "text-ui-fg-subtle",
11999
- children: item.variant_sku
12000
- }
12001
- )
12002
- ] })
12003
- ] }),
12004
- /* @__PURE__ */ jsxRuntime.jsxs(
12005
- ui.Text,
12006
- {
12007
- size: "small",
12008
- leading: "compact",
12009
- className: "text-ui-fg-subtle",
12010
- children: [
12011
- item.quantity,
12012
- "x"
12013
- ]
12014
- }
12015
- )
12016
- ]
12017
- },
12018
- item.id
12019
- )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12020
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12021
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12022
- 'No items found for "',
12023
- query,
12024
- '".'
12025
- ] })
12026
- ] }) })
12027
- ] })
12028
- ] });
12029
- };
12030
- const LocationField = ({ control, setValue }) => {
12031
- const locations = useComboboxData({
12032
- queryKey: ["locations"],
12033
- queryFn: async (params) => {
12034
- return await sdk.admin.stockLocation.list(params);
12035
- },
12036
- getOptions: (data) => {
12037
- return data.stock_locations.map((location) => ({
12038
- label: location.name,
12039
- value: location.id
12040
- }));
12041
- }
12042
- });
12043
- return /* @__PURE__ */ jsxRuntime.jsx(
12044
- Form$2.Field,
12045
- {
12046
- control,
12047
- name: "location_id",
12048
- render: ({ field: { onChange, ...field } }) => {
12049
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12050
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12051
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12052
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12053
- ] }),
12054
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12055
- Combobox,
12056
- {
12057
- options: locations.options,
12058
- fetchNextPage: locations.fetchNextPage,
12059
- isFetchingNextPage: locations.isFetchingNextPage,
12060
- searchValue: locations.searchValue,
12061
- onSearchValueChange: locations.onSearchValueChange,
12062
- placeholder: "Select location",
12063
- onChange: (value) => {
12064
- setValue("shipping_option_id", "", {
12065
- shouldDirty: true,
12066
- shouldTouch: true
12067
- });
12068
- onChange(value);
12069
- },
12070
- ...field
12071
- }
12072
- ) })
12073
- ] }) });
12074
- }
12075
- }
12076
- );
12077
- };
12078
- const ShippingOptionField = ({
12079
- shippingProfileId,
12080
- preview,
12081
- control
12082
- }) => {
12083
- var _a;
12084
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12085
- const shippingOptions = useComboboxData({
12086
- queryKey: ["shipping_options", locationId, shippingProfileId],
12087
- queryFn: async (params) => {
12088
- return await sdk.admin.shippingOption.list({
12089
- ...params,
12090
- stock_location_id: locationId,
12091
- shipping_profile_id: shippingProfileId
12092
- });
12093
- },
12094
- getOptions: (data) => {
12095
- return data.shipping_options.map((option) => {
12096
- var _a2;
12097
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12098
- (r) => r.attribute === "is_return" && r.value === "true"
12099
- )) {
12100
- return void 0;
12101
- }
12102
- return {
12103
- label: option.name,
12104
- value: option.id
12105
- };
12106
- }).filter(Boolean);
12107
- },
12108
- enabled: !!locationId && !!shippingProfileId,
12109
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12110
- });
12111
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12112
- return /* @__PURE__ */ jsxRuntime.jsx(
12113
- Form$2.Field,
12114
- {
12115
- control,
12116
- name: "shipping_option_id",
12117
- render: ({ field }) => {
12118
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12119
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12120
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12121
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12122
- ] }),
12123
- /* @__PURE__ */ jsxRuntime.jsx(
12124
- ConditionalTooltip,
12125
- {
12126
- content: tooltipContent,
12127
- showTooltip: !locationId || !shippingProfileId,
12128
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12129
- Combobox,
12130
- {
12131
- options: shippingOptions.options,
12132
- fetchNextPage: shippingOptions.fetchNextPage,
12133
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12134
- searchValue: shippingOptions.searchValue,
12135
- onSearchValueChange: shippingOptions.onSearchValueChange,
12136
- placeholder: "Select shipping option",
12137
- ...field,
12138
- disabled: !locationId || !shippingProfileId
12139
- }
12140
- ) }) })
12141
- }
12142
- )
12143
- ] }) });
12144
- }
11843
+ const CustomerField = ({ control, currentCustomerId }) => {
11844
+ const customers = useComboboxData({
11845
+ queryFn: async (params) => {
11846
+ return await sdk.admin.customer.list({
11847
+ ...params,
11848
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
11849
+ });
11850
+ },
11851
+ queryKey: ["customers"],
11852
+ getOptions: (data) => {
11853
+ return data.customers.map((customer) => {
11854
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
11855
+ return {
11856
+ label: name ? `${name} (${customer.email})` : customer.email,
11857
+ value: customer.id
11858
+ };
11859
+ });
11860
+ }
11861
+ });
11862
+ return /* @__PURE__ */ jsxRuntime.jsx(
11863
+ Form$2.Field,
11864
+ {
11865
+ name: "customer_id",
11866
+ control,
11867
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
11868
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11869
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
11870
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
11871
+ ] }),
11872
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11873
+ Combobox,
11874
+ {
11875
+ options: customers.options,
11876
+ fetchNextPage: customers.fetchNextPage,
11877
+ isFetchingNextPage: customers.isFetchingNextPage,
11878
+ searchValue: customers.searchValue,
11879
+ onSearchValueChange: customers.onSearchValueChange,
11880
+ placeholder: "Select customer",
11881
+ ...field
11882
+ }
11883
+ ) }),
11884
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11885
+ ] })
12145
11886
  }
12146
11887
  );
12147
11888
  };
12148
- const CustomAmountField = ({
12149
- control,
12150
- currencyCode
12151
- }) => {
12152
- return /* @__PURE__ */ jsxRuntime.jsx(
12153
- Form$2.Field,
11889
+ const Illustration = () => {
11890
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11891
+ "svg",
12154
11892
  {
12155
- control,
12156
- name: "custom_amount",
12157
- render: ({ field: { onChange, ...field } }) => {
12158
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12159
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12160
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12161
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12162
- ] }),
12163
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12164
- ui.CurrencyInput,
12165
- {
12166
- ...field,
12167
- onValueChange: (value) => onChange(value),
12168
- symbol: getNativeSymbol(currencyCode),
12169
- code: currencyCode
12170
- }
12171
- ) })
12172
- ] });
12173
- }
12174
- }
12175
- );
12176
- };
12177
- const ShippingAddress = () => {
12178
- const { id } = reactRouterDom.useParams();
12179
- const { order, isPending, isError, error } = useOrder(id, {
12180
- fields: "+shipping_address"
12181
- });
12182
- if (isError) {
12183
- throw error;
12184
- }
12185
- const isReady = !isPending && !!order;
12186
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12187
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12188
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12189
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12190
- ] }),
12191
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12192
- ] });
12193
- };
12194
- const ShippingAddressForm = ({ order }) => {
12195
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12196
- const form = reactHookForm.useForm({
12197
- defaultValues: {
12198
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12199
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12200
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12201
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12202
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12203
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12204
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12205
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12206
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12207
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12208
- },
12209
- resolver: zod.zodResolver(schema$2)
12210
- });
12211
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12212
- const { handleSuccess } = useRouteModal();
12213
- const onSubmit = form.handleSubmit(async (data) => {
12214
- await mutateAsync(
12215
- {
12216
- shipping_address: {
12217
- first_name: data.first_name,
12218
- last_name: data.last_name,
12219
- company: data.company,
12220
- address_1: data.address_1,
12221
- address_2: data.address_2,
12222
- city: data.city,
12223
- province: data.province,
12224
- country_code: data.country_code,
12225
- postal_code: data.postal_code,
12226
- phone: data.phone
12227
- }
12228
- },
12229
- {
12230
- onSuccess: () => {
12231
- handleSuccess();
12232
- },
12233
- onError: (error) => {
12234
- ui.toast.error(error.message);
12235
- }
12236
- }
12237
- );
12238
- });
12239
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12240
- KeyboundForm,
12241
- {
12242
- className: "flex flex-1 flex-col overflow-hidden",
12243
- onSubmit,
12244
- children: [
12245
- /* @__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: [
12246
- /* @__PURE__ */ jsxRuntime.jsx(
12247
- Form$2.Field,
12248
- {
12249
- control: form.control,
12250
- name: "country_code",
12251
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12252
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12253
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12254
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12255
- ] })
12256
- }
12257
- ),
12258
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12259
- /* @__PURE__ */ jsxRuntime.jsx(
12260
- Form$2.Field,
12261
- {
12262
- control: form.control,
12263
- name: "first_name",
12264
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12265
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12266
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12267
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12268
- ] })
12269
- }
12270
- ),
12271
- /* @__PURE__ */ jsxRuntime.jsx(
12272
- Form$2.Field,
12273
- {
12274
- control: form.control,
12275
- name: "last_name",
12276
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12277
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12278
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12279
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12280
- ] })
12281
- }
12282
- )
12283
- ] }),
12284
- /* @__PURE__ */ jsxRuntime.jsx(
12285
- Form$2.Field,
12286
- {
12287
- control: form.control,
12288
- name: "company",
12289
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12290
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12291
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12292
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12293
- ] })
12294
- }
12295
- ),
12296
- /* @__PURE__ */ jsxRuntime.jsx(
12297
- Form$2.Field,
12298
- {
12299
- control: form.control,
12300
- name: "address_1",
12301
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12302
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12303
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12304
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12305
- ] })
12306
- }
12307
- ),
12308
- /* @__PURE__ */ jsxRuntime.jsx(
12309
- Form$2.Field,
12310
- {
12311
- control: form.control,
12312
- name: "address_2",
12313
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12314
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12315
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12316
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12317
- ] })
12318
- }
12319
- ),
12320
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12321
- /* @__PURE__ */ jsxRuntime.jsx(
12322
- Form$2.Field,
12323
- {
12324
- control: form.control,
12325
- name: "postal_code",
12326
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12327
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12328
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12329
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12330
- ] })
12331
- }
12332
- ),
12333
- /* @__PURE__ */ jsxRuntime.jsx(
12334
- Form$2.Field,
12335
- {
12336
- control: form.control,
12337
- name: "city",
12338
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12339
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12340
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12341
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12342
- ] })
12343
- }
12344
- )
12345
- ] }),
12346
- /* @__PURE__ */ jsxRuntime.jsx(
12347
- Form$2.Field,
12348
- {
12349
- control: form.control,
12350
- name: "province",
12351
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12352
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12353
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12354
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12355
- ] })
12356
- }
12357
- ),
12358
- /* @__PURE__ */ jsxRuntime.jsx(
12359
- Form$2.Field,
12360
- {
12361
- control: form.control,
12362
- name: "phone",
12363
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12364
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12365
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12366
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12367
- ] })
12368
- }
12369
- )
12370
- ] }) }),
12371
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12372
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12373
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12374
- ] }) })
12375
- ]
12376
- }
12377
- ) });
12378
- };
12379
- const schema$2 = addressSchema;
12380
- const TransferOwnership = () => {
12381
- const { id } = reactRouterDom.useParams();
12382
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12383
- fields: "id,customer_id,customer.*"
12384
- });
12385
- if (isError) {
12386
- throw error;
12387
- }
12388
- const isReady = !isPending && !!draft_order;
12389
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12390
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12391
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12392
- /* @__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" }) })
12393
- ] }),
12394
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12395
- ] });
12396
- };
12397
- const TransferOwnershipForm = ({ order }) => {
12398
- var _a, _b;
12399
- const form = reactHookForm.useForm({
12400
- defaultValues: {
12401
- customer_id: order.customer_id || ""
12402
- },
12403
- resolver: zod.zodResolver(schema$1)
12404
- });
12405
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12406
- const { handleSuccess } = useRouteModal();
12407
- const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12408
- const currentCustomer = order.customer ? {
12409
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
12410
- value: order.customer.id
12411
- } : null;
12412
- const onSubmit = form.handleSubmit(async (data) => {
12413
- await mutateAsync(
12414
- { customer_id: data.customer_id },
12415
- {
12416
- onSuccess: () => {
12417
- ui.toast.success("Customer updated");
12418
- handleSuccess();
12419
- },
12420
- onError: (error) => {
12421
- ui.toast.error(error.message);
12422
- }
12423
- }
12424
- );
12425
- });
12426
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12427
- KeyboundForm,
12428
- {
12429
- className: "flex flex-1 flex-col overflow-hidden",
12430
- onSubmit,
12431
- children: [
12432
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12433
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12434
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12435
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12436
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12437
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12438
- ] }),
12439
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12440
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12441
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12442
- ] })
12443
- ] }),
12444
- /* @__PURE__ */ jsxRuntime.jsx(
12445
- CustomerField,
12446
- {
12447
- control: form.control,
12448
- currentCustomerId: order.customer_id
12449
- }
12450
- )
12451
- ] }),
12452
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12453
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12454
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12455
- ] }) })
12456
- ]
12457
- }
12458
- ) });
12459
- };
12460
- const CustomerField = ({ control, currentCustomerId }) => {
12461
- const customers = useComboboxData({
12462
- queryFn: async (params) => {
12463
- return await sdk.admin.customer.list({
12464
- ...params,
12465
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12466
- });
12467
- },
12468
- queryKey: ["customers"],
12469
- getOptions: (data) => {
12470
- return data.customers.map((customer) => {
12471
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12472
- return {
12473
- label: name ? `${name} (${customer.email})` : customer.email,
12474
- value: customer.id
12475
- };
12476
- });
12477
- }
12478
- });
12479
- return /* @__PURE__ */ jsxRuntime.jsx(
12480
- Form$2.Field,
12481
- {
12482
- name: "customer_id",
12483
- control,
12484
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12485
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12486
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12487
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12488
- ] }),
12489
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12490
- Combobox,
12491
- {
12492
- options: customers.options,
12493
- fetchNextPage: customers.fetchNextPage,
12494
- isFetchingNextPage: customers.isFetchingNextPage,
12495
- searchValue: customers.searchValue,
12496
- onSearchValueChange: customers.onSearchValueChange,
12497
- placeholder: "Select customer",
12498
- ...field
12499
- }
12500
- ) }),
12501
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12502
- ] })
12503
- }
12504
- );
12505
- };
12506
- const Illustration = () => {
12507
- return /* @__PURE__ */ jsxRuntime.jsxs(
12508
- "svg",
12509
- {
12510
- width: "280",
12511
- height: "180",
12512
- viewBox: "0 0 280 180",
12513
- fill: "none",
12514
- xmlns: "http://www.w3.org/2000/svg",
11893
+ width: "280",
11894
+ height: "180",
11895
+ viewBox: "0 0 280 180",
11896
+ fill: "none",
11897
+ xmlns: "http://www.w3.org/2000/svg",
12515
11898
  children: [
12516
11899
  /* @__PURE__ */ jsxRuntime.jsx(
12517
11900
  "rect",
@@ -12850,199 +12233,816 @@ const Illustration = () => {
12850
12233
  }
12851
12234
  );
12852
12235
  };
12853
- const schema$1 = objectType({
12236
+ const schema = objectType({
12854
12237
  customer_id: stringType().min(1)
12855
12238
  });
12856
- const BillingAddress = () => {
12239
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
12240
+ const Shipping = () => {
12241
+ var _a;
12857
12242
  const { id } = reactRouterDom.useParams();
12858
12243
  const { order, isPending, isError, error } = useOrder(id, {
12859
- fields: "+billing_address"
12244
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12860
12245
  });
12246
+ const {
12247
+ order: preview,
12248
+ isPending: isPreviewPending,
12249
+ isError: isPreviewError,
12250
+ error: previewError
12251
+ } = useOrderPreview(id);
12252
+ useInitiateOrderEdit({ preview });
12253
+ const { onCancel } = useCancelOrderEdit({ preview });
12861
12254
  if (isError) {
12862
12255
  throw error;
12863
12256
  }
12864
- const isReady = !isPending && !!order;
12865
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12866
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12867
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
12868
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12257
+ if (isPreviewError) {
12258
+ throw previewError;
12259
+ }
12260
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12261
+ const isReady = preview && !isPreviewPending && order && !isPending;
12262
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12263
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12264
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12265
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12266
+ /* @__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." }) })
12267
+ ] }) }) }),
12268
+ /* @__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" }) }) })
12269
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12270
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12271
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12272
+ ] }) });
12273
+ };
12274
+ const ShippingForm = ({ preview, order }) => {
12275
+ var _a;
12276
+ const { setIsOpen } = useStackedModal();
12277
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
12278
+ const [data, setData] = React.useState(null);
12279
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12280
+ const { shipping_options } = useShippingOptions(
12281
+ {
12282
+ id: appliedShippingOptionIds,
12283
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12284
+ },
12285
+ {
12286
+ enabled: appliedShippingOptionIds.length > 0
12287
+ }
12288
+ );
12289
+ const uniqueShippingProfiles = React.useMemo(() => {
12290
+ const profiles = /* @__PURE__ */ new Map();
12291
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
12292
+ profiles.set(profile.id, profile);
12293
+ });
12294
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12295
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
12296
+ });
12297
+ return Array.from(profiles.values());
12298
+ }, [order.items, shipping_options]);
12299
+ const { handleSuccess } = useRouteModal();
12300
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12301
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12302
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12303
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12304
+ const onSubmit = async () => {
12305
+ setIsSubmitting(true);
12306
+ let requestSucceeded = false;
12307
+ await requestOrderEdit(void 0, {
12308
+ onError: (e) => {
12309
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
12310
+ },
12311
+ onSuccess: () => {
12312
+ requestSucceeded = true;
12313
+ }
12314
+ });
12315
+ if (!requestSucceeded) {
12316
+ setIsSubmitting(false);
12317
+ return;
12318
+ }
12319
+ await confirmOrderEdit(void 0, {
12320
+ onError: (e) => {
12321
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12322
+ },
12323
+ onSuccess: () => {
12324
+ handleSuccess();
12325
+ },
12326
+ onSettled: () => {
12327
+ setIsSubmitting(false);
12328
+ }
12329
+ });
12330
+ };
12331
+ const onKeydown = React.useCallback(
12332
+ (e) => {
12333
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12334
+ if (data || isSubmitting) {
12335
+ return;
12336
+ }
12337
+ onSubmit();
12338
+ }
12339
+ },
12340
+ [data, isSubmitting, onSubmit]
12341
+ );
12342
+ React.useEffect(() => {
12343
+ document.addEventListener("keydown", onKeydown);
12344
+ return () => {
12345
+ document.removeEventListener("keydown", onKeydown);
12346
+ };
12347
+ }, [onKeydown]);
12348
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12349
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12350
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12351
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12352
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12353
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12354
+ /* @__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." }) })
12355
+ ] }),
12356
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12357
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
12358
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
12359
+ /* @__PURE__ */ jsxRuntime.jsx(
12360
+ ui.Text,
12361
+ {
12362
+ size: "xsmall",
12363
+ weight: "plus",
12364
+ className: "text-ui-fg-muted",
12365
+ children: "Shipping profile"
12366
+ }
12367
+ ),
12368
+ /* @__PURE__ */ jsxRuntime.jsx(
12369
+ ui.Text,
12370
+ {
12371
+ size: "xsmall",
12372
+ weight: "plus",
12373
+ className: "text-ui-fg-muted",
12374
+ children: "Action"
12375
+ }
12376
+ )
12377
+ ] }),
12378
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12379
+ var _a2, _b, _c, _d, _e, _f, _g;
12380
+ const items = getItemsWithShippingProfile(
12381
+ profile.id,
12382
+ order.items
12383
+ );
12384
+ const hasItems = items.length > 0;
12385
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12386
+ (option) => option.shipping_profile_id === profile.id
12387
+ );
12388
+ const shippingMethod = preview.shipping_methods.find(
12389
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12390
+ );
12391
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
12392
+ (action) => action.action === "SHIPPING_ADD"
12393
+ );
12394
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12395
+ radixUi.Accordion.Item,
12396
+ {
12397
+ value: profile.id,
12398
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12399
+ children: [
12400
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
12401
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
12402
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
12403
+ ui.IconButton,
12404
+ {
12405
+ size: "2xsmall",
12406
+ variant: "transparent",
12407
+ className: "group/trigger",
12408
+ disabled: !hasItems,
12409
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
12410
+ }
12411
+ ) }),
12412
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12413
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
12414
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
12415
+ /* @__PURE__ */ jsxRuntime.jsx(
12416
+ ui.Text,
12417
+ {
12418
+ size: "small",
12419
+ weight: "plus",
12420
+ leading: "compact",
12421
+ children: profile.name
12422
+ }
12423
+ ),
12424
+ /* @__PURE__ */ jsxRuntime.jsxs(
12425
+ ui.Text,
12426
+ {
12427
+ size: "small",
12428
+ leading: "compact",
12429
+ className: "text-ui-fg-subtle",
12430
+ children: [
12431
+ items.length,
12432
+ " ",
12433
+ pluralize(items.length, "items", "item")
12434
+ ]
12435
+ }
12436
+ )
12437
+ ] })
12438
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
12439
+ /* @__PURE__ */ jsxRuntime.jsx(
12440
+ ui.Tooltip,
12441
+ {
12442
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
12443
+ var _a3, _b2, _c2;
12444
+ return /* @__PURE__ */ jsxRuntime.jsx(
12445
+ "li",
12446
+ {
12447
+ 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})`
12448
+ },
12449
+ item.id
12450
+ );
12451
+ }) }),
12452
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12453
+ ui.Badge,
12454
+ {
12455
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12456
+ size: "xsmall",
12457
+ children: [
12458
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
12459
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
12460
+ items.reduce(
12461
+ (acc, item) => acc + item.quantity,
12462
+ 0
12463
+ ),
12464
+ "x",
12465
+ " ",
12466
+ pluralize(items.length, "items", "item")
12467
+ ] })
12468
+ ]
12469
+ }
12470
+ )
12471
+ }
12472
+ ),
12473
+ /* @__PURE__ */ jsxRuntime.jsx(
12474
+ ui.Tooltip,
12475
+ {
12476
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12477
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12478
+ ui.Badge,
12479
+ {
12480
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12481
+ size: "xsmall",
12482
+ children: [
12483
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
12484
+ /* @__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 })
12485
+ ]
12486
+ }
12487
+ )
12488
+ }
12489
+ ),
12490
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
12491
+ ui.Badge,
12492
+ {
12493
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12494
+ size: "xsmall",
12495
+ children: [
12496
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
12497
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
12498
+ ]
12499
+ }
12500
+ ) })
12501
+ ] })
12502
+ ] }),
12503
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
12504
+ ActionMenu,
12505
+ {
12506
+ groups: [
12507
+ {
12508
+ actions: [
12509
+ hasItems ? {
12510
+ label: "Edit shipping option",
12511
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
12512
+ onClick: () => {
12513
+ setIsOpen(
12514
+ STACKED_FOCUS_MODAL_ID,
12515
+ true
12516
+ );
12517
+ setData({
12518
+ shippingProfileId: profile.id,
12519
+ shippingOption,
12520
+ shippingMethod
12521
+ });
12522
+ }
12523
+ } : void 0,
12524
+ {
12525
+ label: "Remove shipping option",
12526
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
12527
+ onClick: () => {
12528
+ if (shippingMethod) {
12529
+ if (addShippingMethodAction) {
12530
+ removeActionShippingMethod(
12531
+ addShippingMethodAction.id
12532
+ );
12533
+ } else {
12534
+ removeShippingMethod(
12535
+ shippingMethod.id
12536
+ );
12537
+ }
12538
+ }
12539
+ }
12540
+ }
12541
+ ].filter(Boolean)
12542
+ }
12543
+ ]
12544
+ }
12545
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
12546
+ StackedModalTrigger,
12547
+ {
12548
+ shippingProfileId: profile.id,
12549
+ shippingOption,
12550
+ shippingMethod,
12551
+ setData,
12552
+ children: "Add shipping option"
12553
+ }
12554
+ )
12555
+ ] }),
12556
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
12557
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12558
+ items.map((item, idx) => {
12559
+ var _a3, _b2, _c2, _d2, _e2;
12560
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12561
+ /* @__PURE__ */ jsxRuntime.jsxs(
12562
+ "div",
12563
+ {
12564
+ className: "px-3 flex items-center gap-x-3",
12565
+ children: [
12566
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
12567
+ ui.Divider,
12568
+ {
12569
+ variant: "dashed",
12570
+ orientation: "vertical"
12571
+ }
12572
+ ) }),
12573
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
12574
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
12575
+ ui.Text,
12576
+ {
12577
+ size: "small",
12578
+ leading: "compact",
12579
+ className: "text-ui-fg-subtle",
12580
+ children: [
12581
+ item.quantity,
12582
+ "x"
12583
+ ]
12584
+ }
12585
+ ) }),
12586
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
12587
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12588
+ /* @__PURE__ */ jsxRuntime.jsxs(
12589
+ ui.Text,
12590
+ {
12591
+ size: "small",
12592
+ leading: "compact",
12593
+ weight: "plus",
12594
+ children: [
12595
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12596
+ " (",
12597
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12598
+ ")"
12599
+ ]
12600
+ }
12601
+ ),
12602
+ /* @__PURE__ */ jsxRuntime.jsx(
12603
+ ui.Text,
12604
+ {
12605
+ size: "small",
12606
+ leading: "compact",
12607
+ className: "text-ui-fg-subtle",
12608
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12609
+ }
12610
+ )
12611
+ ] })
12612
+ ] })
12613
+ ]
12614
+ },
12615
+ item.id
12616
+ ),
12617
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
12618
+ ] }, item.id);
12619
+ })
12620
+ ] })
12621
+ ]
12622
+ },
12623
+ profile.id
12624
+ );
12625
+ }) })
12626
+ ] }) })
12627
+ ] }) }),
12628
+ /* @__PURE__ */ jsxRuntime.jsx(
12629
+ StackedFocusModal,
12630
+ {
12631
+ id: STACKED_FOCUS_MODAL_ID,
12632
+ onOpenChangeCallback: (open) => {
12633
+ if (!open) {
12634
+ setData(null);
12635
+ }
12636
+ return open;
12637
+ },
12638
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12639
+ }
12640
+ )
12869
12641
  ] }),
12870
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
12642
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12643
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12644
+ /* @__PURE__ */ jsxRuntime.jsx(
12645
+ ui.Button,
12646
+ {
12647
+ size: "small",
12648
+ type: "button",
12649
+ isLoading: isSubmitting,
12650
+ onClick: onSubmit,
12651
+ children: "Save"
12652
+ }
12653
+ )
12654
+ ] }) })
12871
12655
  ] });
12872
12656
  };
12873
- const BillingAddressForm = ({ order }) => {
12874
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12657
+ const StackedModalTrigger = ({
12658
+ shippingProfileId,
12659
+ shippingOption,
12660
+ shippingMethod,
12661
+ setData,
12662
+ children
12663
+ }) => {
12664
+ const { setIsOpen, getIsOpen } = useStackedModal();
12665
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12666
+ const onToggle = () => {
12667
+ if (isOpen) {
12668
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12669
+ setData(null);
12670
+ } else {
12671
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12672
+ setData({
12673
+ shippingProfileId,
12674
+ shippingOption,
12675
+ shippingMethod
12676
+ });
12677
+ }
12678
+ };
12679
+ return /* @__PURE__ */ jsxRuntime.jsx(
12680
+ ui.Button,
12681
+ {
12682
+ size: "small",
12683
+ variant: "secondary",
12684
+ onClick: onToggle,
12685
+ className: "text-ui-fg-primary shrink-0",
12686
+ children
12687
+ }
12688
+ );
12689
+ };
12690
+ const ShippingProfileForm = ({
12691
+ data,
12692
+ order,
12693
+ preview
12694
+ }) => {
12695
+ var _a, _b, _c, _d, _e, _f;
12696
+ const { setIsOpen } = useStackedModal();
12875
12697
  const form = reactHookForm.useForm({
12698
+ resolver: zod.zodResolver(shippingMethodSchema),
12876
12699
  defaultValues: {
12877
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12878
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12879
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12880
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12881
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12882
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12883
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12884
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12885
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12886
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12887
- },
12888
- resolver: zod.zodResolver(schema)
12700
+ 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,
12701
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12702
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12703
+ }
12889
12704
  });
12890
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12891
- const { handleSuccess } = useRouteModal();
12892
- const onSubmit = form.handleSubmit(async (data) => {
12893
- await mutateAsync(
12894
- { billing_address: data },
12705
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12706
+ const {
12707
+ mutateAsync: updateShippingMethod,
12708
+ isPending: isUpdatingShippingMethod
12709
+ } = useDraftOrderUpdateShippingMethod(order.id);
12710
+ const onSubmit = form.handleSubmit(async (values) => {
12711
+ if (lodash.isEqual(values, form.formState.defaultValues)) {
12712
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12713
+ return;
12714
+ }
12715
+ if (data.shippingMethod) {
12716
+ await updateShippingMethod(
12717
+ {
12718
+ method_id: data.shippingMethod.id,
12719
+ shipping_option_id: values.shipping_option_id,
12720
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12721
+ },
12722
+ {
12723
+ onError: (e) => {
12724
+ ui.toast.error(e.message);
12725
+ },
12726
+ onSuccess: () => {
12727
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12728
+ }
12729
+ }
12730
+ );
12731
+ return;
12732
+ }
12733
+ await addShippingMethod(
12895
12734
  {
12896
- onSuccess: () => {
12897
- handleSuccess();
12735
+ shipping_option_id: values.shipping_option_id,
12736
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12737
+ },
12738
+ {
12739
+ onError: (e) => {
12740
+ ui.toast.error(e.message);
12898
12741
  },
12899
- onError: (error) => {
12900
- ui.toast.error(error.message);
12742
+ onSuccess: () => {
12743
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12901
12744
  }
12902
12745
  }
12903
12746
  );
12904
12747
  });
12905
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12748
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12906
12749
  KeyboundForm,
12907
12750
  {
12908
- className: "flex flex-1 flex-col overflow-hidden",
12751
+ className: "flex h-full flex-col overflow-hidden",
12909
12752
  onSubmit,
12910
12753
  children: [
12911
- /* @__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: [
12754
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12755
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12756
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12757
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12758
+ /* @__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." }) })
12759
+ ] }),
12760
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12912
12761
  /* @__PURE__ */ jsxRuntime.jsx(
12913
- Form$2.Field,
12762
+ LocationField,
12914
12763
  {
12915
12764
  control: form.control,
12916
- name: "country_code",
12917
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12918
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12919
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12920
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12921
- ] })
12765
+ setValue: form.setValue
12922
12766
  }
12923
12767
  ),
12924
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12925
- /* @__PURE__ */ jsxRuntime.jsx(
12926
- Form$2.Field,
12927
- {
12928
- control: form.control,
12929
- name: "first_name",
12930
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12931
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12932
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12933
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12934
- ] })
12935
- }
12936
- ),
12937
- /* @__PURE__ */ jsxRuntime.jsx(
12938
- Form$2.Field,
12939
- {
12940
- control: form.control,
12941
- name: "last_name",
12942
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12943
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12944
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12945
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12946
- ] })
12947
- }
12948
- )
12949
- ] }),
12768
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12950
12769
  /* @__PURE__ */ jsxRuntime.jsx(
12951
- Form$2.Field,
12770
+ ShippingOptionField,
12952
12771
  {
12953
- control: form.control,
12954
- name: "company",
12955
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12956
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12957
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12958
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12959
- ] })
12772
+ shippingProfileId: data.shippingProfileId,
12773
+ preview,
12774
+ control: form.control
12960
12775
  }
12961
12776
  ),
12777
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12962
12778
  /* @__PURE__ */ jsxRuntime.jsx(
12963
- Form$2.Field,
12779
+ CustomAmountField,
12964
12780
  {
12965
12781
  control: form.control,
12966
- name: "address_1",
12967
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12968
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12969
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12970
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12971
- ] })
12782
+ currencyCode: order.currency_code
12972
12783
  }
12973
12784
  ),
12785
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12974
12786
  /* @__PURE__ */ jsxRuntime.jsx(
12975
- Form$2.Field,
12787
+ ItemsPreview,
12976
12788
  {
12977
- control: form.control,
12978
- name: "address_2",
12979
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12980
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12981
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12982
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12789
+ order,
12790
+ shippingProfileId: data.shippingProfileId
12791
+ }
12792
+ )
12793
+ ] }) }) }),
12794
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12795
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12796
+ /* @__PURE__ */ jsxRuntime.jsx(
12797
+ ui.Button,
12798
+ {
12799
+ size: "small",
12800
+ type: "submit",
12801
+ isLoading: isPending || isUpdatingShippingMethod,
12802
+ children: data.shippingMethod ? "Update" : "Add"
12803
+ }
12804
+ )
12805
+ ] }) })
12806
+ ]
12807
+ }
12808
+ ) }) });
12809
+ };
12810
+ const shippingMethodSchema = objectType({
12811
+ location_id: stringType(),
12812
+ shipping_option_id: stringType(),
12813
+ custom_amount: unionType([numberType(), stringType()]).optional()
12814
+ });
12815
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12816
+ const matches = order.items.filter(
12817
+ (item) => {
12818
+ var _a, _b, _c;
12819
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12820
+ }
12821
+ );
12822
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12823
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12824
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12825
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12826
+ ] }) }),
12827
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12828
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12829
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12830
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12831
+ ] }),
12832
+ /* @__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(
12833
+ "div",
12834
+ {
12835
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12836
+ children: [
12837
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12838
+ /* @__PURE__ */ jsxRuntime.jsx(
12839
+ Thumbnail,
12840
+ {
12841
+ thumbnail: item.thumbnail,
12842
+ alt: item.product_title ?? void 0
12843
+ }
12844
+ ),
12845
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12846
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12847
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12848
+ /* @__PURE__ */ jsxRuntime.jsxs(
12849
+ ui.Text,
12850
+ {
12851
+ size: "small",
12852
+ leading: "compact",
12853
+ className: "text-ui-fg-subtle",
12854
+ children: [
12855
+ "(",
12856
+ item.variant_title,
12857
+ ")"
12858
+ ]
12859
+ }
12860
+ )
12861
+ ] }),
12862
+ /* @__PURE__ */ jsxRuntime.jsx(
12863
+ ui.Text,
12864
+ {
12865
+ size: "small",
12866
+ leading: "compact",
12867
+ className: "text-ui-fg-subtle",
12868
+ children: item.variant_sku
12869
+ }
12870
+ )
12983
12871
  ] })
12984
- }
12985
- ),
12986
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12987
- /* @__PURE__ */ jsxRuntime.jsx(
12988
- Form$2.Field,
12989
- {
12990
- control: form.control,
12991
- name: "postal_code",
12992
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12993
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12994
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12995
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12996
- ] })
12997
- }
12998
- ),
12999
- /* @__PURE__ */ jsxRuntime.jsx(
13000
- Form$2.Field,
12872
+ ] }),
12873
+ /* @__PURE__ */ jsxRuntime.jsxs(
12874
+ ui.Text,
13001
12875
  {
13002
- control: form.control,
13003
- name: "city",
13004
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13005
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13006
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13007
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13008
- ] })
12876
+ size: "small",
12877
+ leading: "compact",
12878
+ className: "text-ui-fg-subtle",
12879
+ children: [
12880
+ item.quantity,
12881
+ "x"
12882
+ ]
13009
12883
  }
13010
12884
  )
12885
+ ]
12886
+ },
12887
+ item.id
12888
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12889
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12890
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12891
+ 'No items found for "',
12892
+ query,
12893
+ '".'
12894
+ ] })
12895
+ ] }) })
12896
+ ] })
12897
+ ] });
12898
+ };
12899
+ const LocationField = ({ control, setValue }) => {
12900
+ const locations = useComboboxData({
12901
+ queryKey: ["locations"],
12902
+ queryFn: async (params) => {
12903
+ return await sdk.admin.stockLocation.list(params);
12904
+ },
12905
+ getOptions: (data) => {
12906
+ return data.stock_locations.map((location) => ({
12907
+ label: location.name,
12908
+ value: location.id
12909
+ }));
12910
+ }
12911
+ });
12912
+ return /* @__PURE__ */ jsxRuntime.jsx(
12913
+ Form$2.Field,
12914
+ {
12915
+ control,
12916
+ name: "location_id",
12917
+ render: ({ field: { onChange, ...field } }) => {
12918
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12919
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12920
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12921
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
13011
12922
  ] }),
13012
- /* @__PURE__ */ jsxRuntime.jsx(
13013
- Form$2.Field,
12923
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12924
+ Combobox,
13014
12925
  {
13015
- control: form.control,
13016
- name: "province",
13017
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13018
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13019
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13020
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13021
- ] })
12926
+ options: locations.options,
12927
+ fetchNextPage: locations.fetchNextPage,
12928
+ isFetchingNextPage: locations.isFetchingNextPage,
12929
+ searchValue: locations.searchValue,
12930
+ onSearchValueChange: locations.onSearchValueChange,
12931
+ placeholder: "Select location",
12932
+ onChange: (value) => {
12933
+ setValue("shipping_option_id", "", {
12934
+ shouldDirty: true,
12935
+ shouldTouch: true
12936
+ });
12937
+ onChange(value);
12938
+ },
12939
+ ...field
13022
12940
  }
13023
- ),
12941
+ ) })
12942
+ ] }) });
12943
+ }
12944
+ }
12945
+ );
12946
+ };
12947
+ const ShippingOptionField = ({
12948
+ shippingProfileId,
12949
+ preview,
12950
+ control
12951
+ }) => {
12952
+ var _a;
12953
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12954
+ const shippingOptions = useComboboxData({
12955
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12956
+ queryFn: async (params) => {
12957
+ return await sdk.admin.shippingOption.list({
12958
+ ...params,
12959
+ stock_location_id: locationId,
12960
+ shipping_profile_id: shippingProfileId
12961
+ });
12962
+ },
12963
+ getOptions: (data) => {
12964
+ return data.shipping_options.map((option) => {
12965
+ var _a2;
12966
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12967
+ (r) => r.attribute === "is_return" && r.value === "true"
12968
+ )) {
12969
+ return void 0;
12970
+ }
12971
+ return {
12972
+ label: option.name,
12973
+ value: option.id
12974
+ };
12975
+ }).filter(Boolean);
12976
+ },
12977
+ enabled: !!locationId && !!shippingProfileId,
12978
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12979
+ });
12980
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12981
+ return /* @__PURE__ */ jsxRuntime.jsx(
12982
+ Form$2.Field,
12983
+ {
12984
+ control,
12985
+ name: "shipping_option_id",
12986
+ render: ({ field }) => {
12987
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12988
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12989
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12990
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12991
+ ] }),
13024
12992
  /* @__PURE__ */ jsxRuntime.jsx(
13025
- Form$2.Field,
12993
+ ConditionalTooltip,
13026
12994
  {
13027
- control: form.control,
13028
- name: "phone",
13029
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13030
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13031
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13032
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13033
- ] })
12995
+ content: tooltipContent,
12996
+ showTooltip: !locationId || !shippingProfileId,
12997
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12998
+ Combobox,
12999
+ {
13000
+ options: shippingOptions.options,
13001
+ fetchNextPage: shippingOptions.fetchNextPage,
13002
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
13003
+ searchValue: shippingOptions.searchValue,
13004
+ onSearchValueChange: shippingOptions.onSearchValueChange,
13005
+ placeholder: "Select shipping option",
13006
+ ...field,
13007
+ disabled: !locationId || !shippingProfileId
13008
+ }
13009
+ ) }) })
13034
13010
  }
13035
13011
  )
13036
- ] }) }),
13037
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13038
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13039
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13040
- ] }) })
13041
- ]
13012
+ ] }) });
13013
+ }
13042
13014
  }
13043
- ) });
13015
+ );
13016
+ };
13017
+ const CustomAmountField = ({
13018
+ control,
13019
+ currencyCode
13020
+ }) => {
13021
+ return /* @__PURE__ */ jsxRuntime.jsx(
13022
+ Form$2.Field,
13023
+ {
13024
+ control,
13025
+ name: "custom_amount",
13026
+ render: ({ field: { onChange, ...field } }) => {
13027
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13028
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13029
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
13030
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
13031
+ ] }),
13032
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13033
+ ui.CurrencyInput,
13034
+ {
13035
+ ...field,
13036
+ onValueChange: (value) => onChange(value),
13037
+ symbol: getNativeSymbol(currencyCode),
13038
+ code: currencyCode
13039
+ }
13040
+ ) })
13041
+ ] });
13042
+ }
13043
+ }
13044
+ );
13044
13045
  };
13045
- const schema = addressSchema;
13046
13046
  const widgetModule = { widgets: [] };
13047
13047
  const routeModule = {
13048
13048
  routes: [
@@ -13063,6 +13063,10 @@ const routeModule = {
13063
13063
  handle,
13064
13064
  loader,
13065
13065
  children: [
13066
+ {
13067
+ Component: BillingAddress,
13068
+ path: "/draft-orders/:id/billing-address"
13069
+ },
13066
13070
  {
13067
13071
  Component: CustomItems,
13068
13072
  path: "/draft-orders/:id/custom-items"
@@ -13087,10 +13091,6 @@ const routeModule = {
13087
13091
  Component: SalesChannel,
13088
13092
  path: "/draft-orders/:id/sales-channel"
13089
13093
  },
13090
- {
13091
- Component: Shipping,
13092
- path: "/draft-orders/:id/shipping"
13093
- },
13094
13094
  {
13095
13095
  Component: ShippingAddress,
13096
13096
  path: "/draft-orders/:id/shipping-address"
@@ -13100,8 +13100,8 @@ const routeModule = {
13100
13100
  path: "/draft-orders/:id/transfer-ownership"
13101
13101
  },
13102
13102
  {
13103
- Component: BillingAddress,
13104
- path: "/draft-orders/:id/billing-address"
13103
+ Component: Shipping,
13104
+ path: "/draft-orders/:id/shipping"
13105
13105
  }
13106
13106
  ]
13107
13107
  }