@medusajs/draft-order 2.11.0-snapshot-20251017170018 → 2.11.0-snapshot-20251017211629

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