@medusajs/draft-order 2.10.3-preview-20250914060200 → 2.10.3-preview-20250914120159

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/.medusa/server/src/admin/index.js +1345 -1345
  2. package/.medusa/server/src/admin/index.mjs +1345 -1345
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.mjs CHANGED
@@ -9567,6 +9567,196 @@ const ID = () => {
9567
9567
  /* @__PURE__ */ jsx(Outlet, {})
9568
9568
  ] });
9569
9569
  };
9570
+ const BillingAddress = () => {
9571
+ const { id } = useParams();
9572
+ const { order, isPending, isError, error } = useOrder(id, {
9573
+ fields: "+billing_address"
9574
+ });
9575
+ if (isError) {
9576
+ throw error;
9577
+ }
9578
+ const isReady = !isPending && !!order;
9579
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9580
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9581
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
9582
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9583
+ ] }),
9584
+ isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
9585
+ ] });
9586
+ };
9587
+ const BillingAddressForm = ({ order }) => {
9588
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9589
+ const form = useForm({
9590
+ defaultValues: {
9591
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9592
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9593
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9594
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9595
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9596
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9597
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9598
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9599
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9600
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9601
+ },
9602
+ resolver: zodResolver(schema$5)
9603
+ });
9604
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9605
+ const { handleSuccess } = useRouteModal();
9606
+ const onSubmit = form.handleSubmit(async (data) => {
9607
+ await mutateAsync(
9608
+ { billing_address: data },
9609
+ {
9610
+ onSuccess: () => {
9611
+ handleSuccess();
9612
+ },
9613
+ onError: (error) => {
9614
+ toast.error(error.message);
9615
+ }
9616
+ }
9617
+ );
9618
+ });
9619
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9620
+ KeyboundForm,
9621
+ {
9622
+ className: "flex flex-1 flex-col overflow-hidden",
9623
+ onSubmit,
9624
+ children: [
9625
+ /* @__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: [
9626
+ /* @__PURE__ */ jsx(
9627
+ Form$2.Field,
9628
+ {
9629
+ control: form.control,
9630
+ name: "country_code",
9631
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9632
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
9633
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
9634
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9635
+ ] })
9636
+ }
9637
+ ),
9638
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9639
+ /* @__PURE__ */ jsx(
9640
+ Form$2.Field,
9641
+ {
9642
+ control: form.control,
9643
+ name: "first_name",
9644
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9645
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
9646
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9647
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9648
+ ] })
9649
+ }
9650
+ ),
9651
+ /* @__PURE__ */ jsx(
9652
+ Form$2.Field,
9653
+ {
9654
+ control: form.control,
9655
+ name: "last_name",
9656
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9657
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
9658
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9659
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9660
+ ] })
9661
+ }
9662
+ )
9663
+ ] }),
9664
+ /* @__PURE__ */ jsx(
9665
+ Form$2.Field,
9666
+ {
9667
+ control: form.control,
9668
+ name: "company",
9669
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9670
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
9671
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9672
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9673
+ ] })
9674
+ }
9675
+ ),
9676
+ /* @__PURE__ */ jsx(
9677
+ Form$2.Field,
9678
+ {
9679
+ control: form.control,
9680
+ name: "address_1",
9681
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9682
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
9683
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9684
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9685
+ ] })
9686
+ }
9687
+ ),
9688
+ /* @__PURE__ */ jsx(
9689
+ Form$2.Field,
9690
+ {
9691
+ control: form.control,
9692
+ name: "address_2",
9693
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9694
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9695
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9696
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9697
+ ] })
9698
+ }
9699
+ ),
9700
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9701
+ /* @__PURE__ */ jsx(
9702
+ Form$2.Field,
9703
+ {
9704
+ control: form.control,
9705
+ name: "postal_code",
9706
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9707
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
9708
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9709
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9710
+ ] })
9711
+ }
9712
+ ),
9713
+ /* @__PURE__ */ jsx(
9714
+ Form$2.Field,
9715
+ {
9716
+ control: form.control,
9717
+ name: "city",
9718
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9719
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
9720
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9721
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9722
+ ] })
9723
+ }
9724
+ )
9725
+ ] }),
9726
+ /* @__PURE__ */ jsx(
9727
+ Form$2.Field,
9728
+ {
9729
+ control: form.control,
9730
+ name: "province",
9731
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9732
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9733
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9734
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9735
+ ] })
9736
+ }
9737
+ ),
9738
+ /* @__PURE__ */ jsx(
9739
+ Form$2.Field,
9740
+ {
9741
+ control: form.control,
9742
+ name: "phone",
9743
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9744
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
9745
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9746
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9747
+ ] })
9748
+ }
9749
+ )
9750
+ ] }) }),
9751
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9752
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9753
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9754
+ ] }) })
9755
+ ]
9756
+ }
9757
+ ) });
9758
+ };
9759
+ const schema$5 = addressSchema;
9570
9760
  const CustomItems = () => {
9571
9761
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9572
9762
  /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
@@ -9575,7 +9765,7 @@ const CustomItems = () => {
9575
9765
  };
9576
9766
  const CustomItemsForm = () => {
9577
9767
  const form = useForm({
9578
- resolver: zodResolver(schema$5)
9768
+ resolver: zodResolver(schema$4)
9579
9769
  });
9580
9770
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9581
9771
  /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
@@ -9585,7 +9775,7 @@ const CustomItemsForm = () => {
9585
9775
  ] }) })
9586
9776
  ] }) });
9587
9777
  };
9588
- const schema$5 = objectType({
9778
+ const schema$4 = objectType({
9589
9779
  email: stringType().email()
9590
9780
  });
9591
9781
  const Email = () => {
@@ -9610,7 +9800,7 @@ const EmailForm = ({ order }) => {
9610
9800
  defaultValues: {
9611
9801
  email: order.email ?? ""
9612
9802
  },
9613
- resolver: zodResolver(schema$4)
9803
+ resolver: zodResolver(schema$3)
9614
9804
  });
9615
9805
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9616
9806
  const { handleSuccess } = useRouteModal();
@@ -9653,7 +9843,7 @@ const EmailForm = ({ order }) => {
9653
9843
  }
9654
9844
  ) });
9655
9845
  };
9656
- const schema$4 = objectType({
9846
+ const schema$3 = objectType({
9657
9847
  email: stringType().email()
9658
9848
  });
9659
9849
  const NumberInput = forwardRef(
@@ -11285,7 +11475,7 @@ const SalesChannelForm = ({ order }) => {
11285
11475
  defaultValues: {
11286
11476
  sales_channel_id: order.sales_channel_id || ""
11287
11477
  },
11288
- resolver: zodResolver(schema$3)
11478
+ resolver: zodResolver(schema$2)
11289
11479
  });
11290
11480
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11291
11481
  const { handleSuccess } = useRouteModal();
@@ -11360,845 +11550,166 @@ const SalesChannelField = ({ control, order }) => {
11360
11550
  }
11361
11551
  );
11362
11552
  };
11363
- const schema$3 = objectType({
11553
+ const schema$2 = objectType({
11364
11554
  sales_channel_id: stringType().min(1)
11365
11555
  });
11366
- const ShippingAddress = () => {
11556
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11557
+ const Shipping = () => {
11558
+ var _a;
11367
11559
  const { id } = useParams();
11368
11560
  const { order, isPending, isError, error } = useOrder(id, {
11369
- fields: "+shipping_address"
11561
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11370
11562
  });
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 });
11371
11571
  if (isError) {
11372
11572
  throw error;
11373
11573
  }
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
- ] });
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
+ ] }) });
11382
11590
  };
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) ?? ""
11397
- },
11398
- resolver: zodResolver(schema$2)
11399
- });
11400
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11401
- const { handleSuccess } = useRouteModal();
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
- }
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.*"
11601
+ },
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]);
11616
+ 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}`);
11417
11627
  },
11418
- {
11419
- onSuccess: () => {
11420
- handleSuccess();
11421
- },
11422
- onError: (error) => {
11423
- toast.error(error.message);
11628
+ onSuccess: () => {
11629
+ requestSucceeded = true;
11630
+ }
11631
+ });
11632
+ if (!requestSucceeded) {
11633
+ setIsSubmitting(false);
11634
+ return;
11635
+ }
11636
+ await confirmOrderEdit(void 0, {
11637
+ onError: (e) => {
11638
+ toast.error(`Failed to confirm order edit: ${e.message}`);
11639
+ },
11640
+ onSuccess: () => {
11641
+ handleSuccess();
11642
+ },
11643
+ onSettled: () => {
11644
+ setIsSubmitting(false);
11645
+ }
11646
+ });
11647
+ };
11648
+ const onKeydown = useCallback(
11649
+ (e) => {
11650
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11651
+ if (data || isSubmitting) {
11652
+ return;
11424
11653
  }
11654
+ onSubmit();
11425
11655
  }
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: [
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: [
11448
11676
  /* @__PURE__ */ jsx(
11449
- Form$2.Field,
11677
+ Text,
11450
11678
  {
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
- ] })
11679
+ size: "xsmall",
11680
+ weight: "plus",
11681
+ className: "text-ui-fg-muted",
11682
+ children: "Shipping profile"
11458
11683
  }
11459
11684
  ),
11460
11685
  /* @__PURE__ */ jsx(
11461
- Form$2.Field,
11686
+ Text,
11462
11687
  {
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
- ] })
11688
+ size: "xsmall",
11689
+ weight: "plus",
11690
+ className: "text-ui-fg-muted",
11691
+ children: "Action"
11470
11692
  }
11471
11693
  )
11472
11694
  ] }),
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,
11512
- {
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
- ] })
11545
- }
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
- ) });
11567
- };
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
- ] });
11585
- };
11586
- const TransferOwnershipForm = ({ order }) => {
11587
- var _a, _b;
11588
- const form = useForm({
11589
- defaultValues: {
11590
- customer_id: order.customer_id || ""
11591
- },
11592
- resolver: zodResolver(schema$1)
11593
- });
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 },
11604
- {
11605
- onSuccess: () => {
11606
- toast.success("Customer updated");
11607
- handleSuccess();
11608
- },
11609
- onError: (error) => {
11610
- toast.error(error.message);
11611
- }
11612
- }
11613
- );
11614
- });
11615
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11616
- KeyboundForm,
11617
- {
11618
- className: "flex flex-1 flex-col overflow-hidden",
11619
- onSubmit,
11620
- children: [
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
- ] })
11632
- ] }),
11633
- /* @__PURE__ */ jsx(
11634
- CustomerField,
11635
- {
11636
- control: form.control,
11637
- currentCustomerId: order.customer_id
11638
- }
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" })
11644
- ] }) })
11645
- ]
11646
- }
11647
- ) });
11648
- };
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
- ] })
11692
- }
11693
- );
11694
- };
11695
- const Illustration = () => {
11696
- return /* @__PURE__ */ jsxs(
11697
- "svg",
11698
- {
11699
- width: "280",
11700
- height: "180",
11701
- viewBox: "0 0 280 180",
11702
- fill: "none",
11703
- xmlns: "http://www.w3.org/2000/svg",
11704
- children: [
11705
- /* @__PURE__ */ jsx(
11706
- "rect",
11707
- {
11708
- x: "0.00428286",
11709
- y: "-0.742904",
11710
- width: "33.5",
11711
- height: "65.5",
11712
- rx: "6.75",
11713
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
11714
- fill: "#D4D4D8",
11715
- stroke: "#52525B",
11716
- strokeWidth: "1.5"
11717
- }
11718
- ),
11719
- /* @__PURE__ */ jsx(
11720
- "rect",
11721
- {
11722
- x: "0.00428286",
11723
- y: "-0.742904",
11724
- width: "33.5",
11725
- height: "65.5",
11726
- rx: "6.75",
11727
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
11728
- fill: "white",
11729
- stroke: "#52525B",
11730
- strokeWidth: "1.5"
11731
- }
11732
- ),
11733
- /* @__PURE__ */ jsx(
11734
- "path",
11735
- {
11736
- d: "M180.579 107.142L179.126 107.959",
11737
- stroke: "#52525B",
11738
- strokeWidth: "1.5",
11739
- strokeLinecap: "round",
11740
- strokeLinejoin: "round"
11741
- }
11742
- ),
11743
- /* @__PURE__ */ jsx(
11744
- "path",
11745
- {
11746
- opacity: "0.88",
11747
- d: "M182.305 109.546L180.257 109.534",
11748
- stroke: "#52525B",
11749
- strokeWidth: "1.5",
11750
- strokeLinecap: "round",
11751
- strokeLinejoin: "round"
11752
- }
11753
- ),
11754
- /* @__PURE__ */ jsx(
11755
- "path",
11756
- {
11757
- opacity: "0.75",
11758
- d: "M180.551 111.93L179.108 111.096",
11759
- stroke: "#52525B",
11760
- strokeWidth: "1.5",
11761
- strokeLinecap: "round",
11762
- strokeLinejoin: "round"
11763
- }
11764
- ),
11765
- /* @__PURE__ */ jsx(
11766
- "path",
11767
- {
11768
- opacity: "0.63",
11769
- d: "M176.347 112.897L176.354 111.73",
11770
- stroke: "#52525B",
11771
- strokeWidth: "1.5",
11772
- strokeLinecap: "round",
11773
- strokeLinejoin: "round"
11774
- }
11775
- ),
11776
- /* @__PURE__ */ jsx(
11777
- "path",
11778
- {
11779
- opacity: "0.5",
11780
- d: "M172.153 111.881L173.606 111.064",
11781
- stroke: "#52525B",
11782
- strokeWidth: "1.5",
11783
- strokeLinecap: "round",
11784
- strokeLinejoin: "round"
11785
- }
11786
- ),
11787
- /* @__PURE__ */ jsx(
11788
- "path",
11789
- {
11790
- opacity: "0.38",
11791
- d: "M170.428 109.478L172.476 109.489",
11792
- stroke: "#52525B",
11793
- strokeWidth: "1.5",
11794
- strokeLinecap: "round",
11795
- strokeLinejoin: "round"
11796
- }
11797
- ),
11798
- /* @__PURE__ */ jsx(
11799
- "path",
11800
- {
11801
- opacity: "0.25",
11802
- d: "M172.181 107.094L173.624 107.928",
11803
- stroke: "#52525B",
11804
- strokeWidth: "1.5",
11805
- strokeLinecap: "round",
11806
- strokeLinejoin: "round"
11807
- }
11808
- ),
11809
- /* @__PURE__ */ jsx(
11810
- "path",
11811
- {
11812
- opacity: "0.13",
11813
- d: "M176.386 106.126L176.379 107.294",
11814
- stroke: "#52525B",
11815
- strokeWidth: "1.5",
11816
- strokeLinecap: "round",
11817
- strokeLinejoin: "round"
11818
- }
11819
- ),
11820
- /* @__PURE__ */ jsx(
11821
- "rect",
11822
- {
11823
- width: "12",
11824
- height: "3",
11825
- rx: "1.5",
11826
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
11827
- fill: "#D4D4D8"
11828
- }
11829
- ),
11830
- /* @__PURE__ */ jsx(
11831
- "rect",
11832
- {
11833
- x: "0.00428286",
11834
- y: "-0.742904",
11835
- width: "33.5",
11836
- height: "65.5",
11837
- rx: "6.75",
11838
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
11839
- fill: "#D4D4D8",
11840
- stroke: "#52525B",
11841
- strokeWidth: "1.5"
11842
- }
11843
- ),
11844
- /* @__PURE__ */ jsx(
11845
- "rect",
11846
- {
11847
- x: "0.00428286",
11848
- y: "-0.742904",
11849
- width: "33.5",
11850
- height: "65.5",
11851
- rx: "6.75",
11852
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
11853
- fill: "white",
11854
- stroke: "#52525B",
11855
- strokeWidth: "1.5"
11856
- }
11857
- ),
11858
- /* @__PURE__ */ jsx(
11859
- "rect",
11860
- {
11861
- width: "12",
11862
- height: "3",
11863
- rx: "1.5",
11864
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
11865
- fill: "#D4D4D8"
11866
- }
11867
- ),
11868
- /* @__PURE__ */ jsx(
11869
- "rect",
11870
- {
11871
- width: "17",
11872
- height: "3",
11873
- rx: "1.5",
11874
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
11875
- fill: "#D4D4D8"
11876
- }
11877
- ),
11878
- /* @__PURE__ */ jsx(
11879
- "rect",
11880
- {
11881
- width: "12",
11882
- height: "3",
11883
- rx: "1.5",
11884
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
11885
- fill: "#D4D4D8"
11886
- }
11887
- ),
11888
- /* @__PURE__ */ jsx(
11889
- "path",
11890
- {
11891
- d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
11892
- fill: "#A1A1AA"
11893
- }
11894
- ),
11895
- /* @__PURE__ */ jsx(
11896
- "rect",
11897
- {
11898
- width: "17",
11899
- height: "3",
11900
- rx: "1.5",
11901
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
11902
- fill: "#A1A1AA"
11903
- }
11904
- ),
11905
- /* @__PURE__ */ jsx(
11906
- "rect",
11907
- {
11908
- width: "12",
11909
- height: "3",
11910
- rx: "1.5",
11911
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
11912
- fill: "#A1A1AA"
11913
- }
11914
- ),
11915
- /* @__PURE__ */ jsx(
11916
- "path",
11917
- {
11918
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
11919
- fill: "#52525B"
11920
- }
11921
- ),
11922
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
11923
- "path",
11924
- {
11925
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
11926
- stroke: "#A1A1AA",
11927
- strokeWidth: "1.5",
11928
- strokeLinecap: "round",
11929
- strokeLinejoin: "round"
11930
- }
11931
- ) }),
11932
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
11933
- "path",
11934
- {
11935
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
11936
- stroke: "#A1A1AA",
11937
- strokeWidth: "1.5",
11938
- strokeLinecap: "round",
11939
- strokeLinejoin: "round"
11940
- }
11941
- ) }),
11942
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
11943
- "path",
11944
- {
11945
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
11946
- stroke: "#A1A1AA",
11947
- strokeWidth: "1.5",
11948
- strokeLinecap: "round",
11949
- strokeLinejoin: "round"
11950
- }
11951
- ) }),
11952
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
11953
- "path",
11954
- {
11955
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
11956
- stroke: "#A1A1AA",
11957
- strokeWidth: "1.5",
11958
- strokeLinecap: "round",
11959
- strokeLinejoin: "round"
11960
- }
11961
- ) }),
11962
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
11963
- "path",
11964
- {
11965
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
11966
- stroke: "#A1A1AA",
11967
- strokeWidth: "1.5",
11968
- strokeLinecap: "round",
11969
- strokeLinejoin: "round"
11970
- }
11971
- ) }),
11972
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
11973
- "path",
11974
- {
11975
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
11976
- stroke: "#A1A1AA",
11977
- strokeWidth: "1.5",
11978
- strokeLinecap: "round",
11979
- strokeLinejoin: "round"
11980
- }
11981
- ) }),
11982
- /* @__PURE__ */ jsxs("defs", { children: [
11983
- /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
11984
- "rect",
11985
- {
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,
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,
12202
11713
  {
12203
11714
  value: profile.id,
12204
11715
  className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
@@ -12426,470 +11937,670 @@ const ShippingForm = ({ preview, order }) => {
12426
11937
  ] })
12427
11938
  ]
12428
11939
  },
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);
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);
11952
+ }
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
+ ] });
11973
+ };
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
+ );
12006
+ };
12007
+ const ShippingProfileForm = ({
12008
+ data,
12009
+ order,
12010
+ preview
12011
+ }) => {
12012
+ var _a, _b, _c, _d, _e, _f;
12013
+ const { setIsOpen } = useStackedModal();
12014
+ const form = useForm({
12015
+ resolver: zodResolver(shippingMethodSchema),
12016
+ defaultValues: {
12017
+ location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12018
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12019
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12020
+ }
12021
+ });
12022
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12023
+ const {
12024
+ mutateAsync: updateShippingMethod,
12025
+ isPending: isUpdatingShippingMethod
12026
+ } = useDraftOrderUpdateShippingMethod(order.id);
12027
+ const onSubmit = form.handleSubmit(async (values) => {
12028
+ if (isEqual(values, form.formState.defaultValues)) {
12029
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12030
+ return;
12031
+ }
12032
+ if (data.shippingMethod) {
12033
+ await updateShippingMethod(
12034
+ {
12035
+ method_id: data.shippingMethod.id,
12036
+ shipping_option_id: values.shipping_option_id,
12037
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12038
+ },
12039
+ {
12040
+ onError: (e) => {
12041
+ toast.error(e.message);
12042
+ },
12043
+ onSuccess: () => {
12044
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12045
+ }
12046
+ }
12047
+ );
12048
+ return;
12049
+ }
12050
+ await addShippingMethod(
12051
+ {
12052
+ shipping_option_id: values.shipping_option_id,
12053
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12054
+ },
12055
+ {
12056
+ onError: (e) => {
12057
+ toast.error(e.message);
12058
+ },
12059
+ onSuccess: () => {
12060
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12061
+ }
12062
+ }
12063
+ );
12064
+ });
12065
+ return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12066
+ KeyboundForm,
12067
+ {
12068
+ className: "flex h-full flex-col overflow-hidden",
12069
+ onSubmit,
12070
+ children: [
12071
+ /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12072
+ /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12073
+ /* @__PURE__ */ jsxs("div", { children: [
12074
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12075
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12076
+ ] }),
12077
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12078
+ /* @__PURE__ */ jsx(
12079
+ LocationField,
12080
+ {
12081
+ control: form.control,
12082
+ setValue: form.setValue
12083
+ }
12084
+ ),
12085
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12086
+ /* @__PURE__ */ jsx(
12087
+ ShippingOptionField,
12088
+ {
12089
+ shippingProfileId: data.shippingProfileId,
12090
+ preview,
12091
+ control: form.control
12092
+ }
12093
+ ),
12094
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12095
+ /* @__PURE__ */ jsx(
12096
+ CustomAmountField,
12097
+ {
12098
+ control: form.control,
12099
+ currencyCode: order.currency_code
12100
+ }
12101
+ ),
12102
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12103
+ /* @__PURE__ */ jsx(
12104
+ ItemsPreview,
12105
+ {
12106
+ order,
12107
+ shippingProfileId: data.shippingProfileId
12108
+ }
12109
+ )
12110
+ ] }) }) }),
12111
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12112
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12113
+ /* @__PURE__ */ jsx(
12114
+ Button,
12115
+ {
12116
+ size: "small",
12117
+ type: "submit",
12118
+ isLoading: isPending || isUpdatingShippingMethod,
12119
+ children: data.shippingMethod ? "Update" : "Add"
12120
+ }
12121
+ )
12122
+ ] }) })
12123
+ ]
12124
+ }
12125
+ ) }) });
12126
+ };
12127
+ const shippingMethodSchema = objectType({
12128
+ location_id: stringType(),
12129
+ shipping_option_id: stringType(),
12130
+ custom_amount: unionType([numberType(), stringType()]).optional()
12131
+ });
12132
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12133
+ const matches = order.items.filter(
12134
+ (item) => {
12135
+ var _a, _b, _c;
12136
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12137
+ }
12138
+ );
12139
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12140
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12141
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12142
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12143
+ ] }) }),
12144
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12145
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12146
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12147
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12148
+ ] }),
12149
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
12150
+ "div",
12151
+ {
12152
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12153
+ children: [
12154
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12155
+ /* @__PURE__ */ jsx(
12156
+ Thumbnail,
12157
+ {
12158
+ thumbnail: item.thumbnail,
12159
+ alt: item.product_title ?? void 0
12160
+ }
12161
+ ),
12162
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12163
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12164
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12165
+ /* @__PURE__ */ jsxs(
12166
+ Text,
12167
+ {
12168
+ size: "small",
12169
+ leading: "compact",
12170
+ className: "text-ui-fg-subtle",
12171
+ children: [
12172
+ "(",
12173
+ item.variant_title,
12174
+ ")"
12175
+ ]
12176
+ }
12177
+ )
12178
+ ] }),
12179
+ /* @__PURE__ */ jsx(
12180
+ Text,
12181
+ {
12182
+ size: "small",
12183
+ leading: "compact",
12184
+ className: "text-ui-fg-subtle",
12185
+ children: item.variant_sku
12186
+ }
12187
+ )
12188
+ ] })
12189
+ ] }),
12190
+ /* @__PURE__ */ jsxs(
12191
+ Text,
12192
+ {
12193
+ size: "small",
12194
+ leading: "compact",
12195
+ className: "text-ui-fg-subtle",
12196
+ children: [
12197
+ item.quantity,
12198
+ "x"
12199
+ ]
12200
+ }
12201
+ )
12202
+ ]
12203
+ },
12204
+ item.id
12205
+ )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12206
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12207
+ /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12208
+ 'No items found for "',
12209
+ query,
12210
+ '".'
12211
+ ] })
12212
+ ] }) })
12213
+ ] })
12214
+ ] });
12215
+ };
12216
+ const LocationField = ({ control, setValue }) => {
12217
+ const locations = useComboboxData({
12218
+ queryKey: ["locations"],
12219
+ queryFn: async (params) => {
12220
+ return await sdk.admin.stockLocation.list(params);
12221
+ },
12222
+ getOptions: (data) => {
12223
+ return data.stock_locations.map((location) => ({
12224
+ label: location.name,
12225
+ value: location.id
12226
+ }));
12227
+ }
12228
+ });
12229
+ return /* @__PURE__ */ jsx(
12230
+ Form$2.Field,
12231
+ {
12232
+ control,
12233
+ name: "location_id",
12234
+ render: ({ field: { onChange, ...field } }) => {
12235
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12236
+ /* @__PURE__ */ jsxs("div", { children: [
12237
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12238
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12239
+ ] }),
12240
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12241
+ Combobox,
12242
+ {
12243
+ options: locations.options,
12244
+ fetchNextPage: locations.fetchNextPage,
12245
+ isFetchingNextPage: locations.isFetchingNextPage,
12246
+ searchValue: locations.searchValue,
12247
+ onSearchValueChange: locations.onSearchValueChange,
12248
+ placeholder: "Select location",
12249
+ onChange: (value) => {
12250
+ setValue("shipping_option_id", "", {
12251
+ shouldDirty: true,
12252
+ shouldTouch: true
12253
+ });
12254
+ onChange(value);
12255
+ },
12256
+ ...field
12441
12257
  }
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
- ] });
12258
+ ) })
12259
+ ] }) });
12260
+ }
12261
+ }
12262
+ );
12462
12263
  };
12463
- const StackedModalTrigger = ({
12264
+ const ShippingOptionField = ({
12464
12265
  shippingProfileId,
12465
- shippingOption,
12466
- shippingMethod,
12467
- setData,
12468
- children
12266
+ preview,
12267
+ control
12469
12268
  }) => {
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
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
12482
12278
  });
12483
- }
12484
- };
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.";
12485
12298
  return /* @__PURE__ */ jsx(
12486
- Button,
12299
+ Form$2.Field,
12487
12300
  {
12488
- size: "small",
12489
- variant: "secondary",
12490
- onClick: onToggle,
12491
- className: "text-ui-fg-primary shrink-0",
12492
- children
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
+ }
12493
12331
  }
12494
12332
  );
12495
12333
  };
12496
- const ShippingProfileForm = ({
12497
- data,
12498
- order,
12499
- preview
12334
+ const CustomAmountField = ({
12335
+ control,
12336
+ currencyCode
12500
12337
  }) => {
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;
12338
+ return /* @__PURE__ */ jsx(
12339
+ Form$2.Field,
12340
+ {
12341
+ control,
12342
+ name: "custom_amount",
12343
+ render: ({ field: { onChange, ...field } }) => {
12344
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12345
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12346
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12347
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12348
+ ] }),
12349
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12350
+ CurrencyInput,
12351
+ {
12352
+ ...field,
12353
+ onValueChange: (value) => onChange(value),
12354
+ symbol: getNativeSymbol(currencyCode),
12355
+ code: currencyCode
12356
+ }
12357
+ ) })
12358
+ ] });
12359
+ }
12538
12360
  }
12539
- await addShippingMethod(
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(
12540
12401
  {
12541
- shipping_option_id: values.shipping_option_id,
12542
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
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
+ }
12543
12414
  },
12544
12415
  {
12545
- onError: (e) => {
12546
- toast.error(e.message);
12547
- },
12548
12416
  onSuccess: () => {
12549
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12417
+ handleSuccess();
12418
+ },
12419
+ onError: (error) => {
12420
+ toast.error(error.message);
12550
12421
  }
12551
12422
  }
12552
12423
  );
12553
12424
  });
12554
- return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12425
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12555
12426
  KeyboundForm,
12556
12427
  {
12557
- className: "flex h-full flex-col overflow-hidden",
12428
+ className: "flex flex-1 flex-col overflow-hidden",
12558
12429
  onSubmit,
12559
12430
  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" }),
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: [
12567
12432
  /* @__PURE__ */ jsx(
12568
- LocationField,
12433
+ Form$2.Field,
12569
12434
  {
12570
12435
  control: form.control,
12571
- setValue: form.setValue
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
+ ] })
12572
12442
  }
12573
12443
  ),
12574
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
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
+ ] }),
12575
12470
  /* @__PURE__ */ jsx(
12576
- ShippingOptionField,
12471
+ Form$2.Field,
12577
12472
  {
12578
- shippingProfileId: data.shippingProfileId,
12579
- preview,
12580
- control: form.control
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
+ ] })
12581
12480
  }
12582
12481
  ),
12583
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12584
12482
  /* @__PURE__ */ jsx(
12585
- CustomAmountField,
12483
+ Form$2.Field,
12586
12484
  {
12587
12485
  control: form.control,
12588
- currencyCode: order.currency_code
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
+ ] })
12589
12492
  }
12590
12493
  ),
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
12494
  /* @__PURE__ */ jsx(
12603
- Button,
12495
+ Form$2.Field,
12604
12496
  {
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
- )
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, {})
12677
12503
  ] })
12678
- ] }),
12679
- /* @__PURE__ */ jsxs(
12680
- Text,
12504
+ }
12505
+ ),
12506
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12507
+ /* @__PURE__ */ jsx(
12508
+ Form$2.Field,
12681
12509
  {
12682
- size: "small",
12683
- leading: "compact",
12684
- className: "text-ui-fg-subtle",
12685
- children: [
12686
- item.quantity,
12687
- "x"
12688
- ]
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
+ ] })
12689
12529
  }
12690
12530
  )
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
12531
  ] }),
12729
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12730
- Combobox,
12532
+ /* @__PURE__ */ jsx(
12533
+ Form$2.Field,
12731
12534
  {
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
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
+ ] })
12746
12542
  }
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
- ] }),
12543
+ ),
12798
12544
  /* @__PURE__ */ jsx(
12799
- ConditionalTooltip,
12545
+ Form$2.Field,
12800
12546
  {
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
- ) }) })
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
+ ] })
12816
12554
  }
12817
12555
  )
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
12845
- }
12846
- ) })
12847
- ] });
12848
- }
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
+ ]
12849
12562
  }
12850
- );
12563
+ ) });
12851
12564
  };
12852
- const BillingAddress = () => {
12565
+ const schema$1 = addressSchema;
12566
+ const TransferOwnership = () => {
12853
12567
  const { id } = useParams();
12854
- const { order, isPending, isError, error } = useOrder(id, {
12855
- fields: "+billing_address"
12568
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12569
+ fields: "id,customer_id,customer.*"
12856
12570
  });
12857
12571
  if (isError) {
12858
12572
  throw error;
12859
12573
  }
12860
- const isReady = !isPending && !!order;
12574
+ const isReady = !isPending && !!draft_order;
12861
12575
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12862
12576
  /* @__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" }) })
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" }) })
12865
12579
  ] }),
12866
- isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
12580
+ isReady && /* @__PURE__ */ jsx(TransferOwnershipForm, { order: draft_order })
12867
12581
  ] });
12868
12582
  };
12869
- const BillingAddressForm = ({ order }) => {
12870
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12583
+ const TransferOwnershipForm = ({ order }) => {
12584
+ var _a, _b;
12871
12585
  const form = useForm({
12872
12586
  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) ?? ""
12587
+ customer_id: order.customer_id || ""
12883
12588
  },
12884
12589
  resolver: zodResolver(schema)
12885
12590
  });
12886
12591
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12887
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;
12888
12598
  const onSubmit = form.handleSubmit(async (data) => {
12889
12599
  await mutateAsync(
12890
- { billing_address: data },
12600
+ { customer_id: data.customer_id },
12891
12601
  {
12892
12602
  onSuccess: () => {
12603
+ toast.success("Customer updated");
12893
12604
  handleSuccess();
12894
12605
  },
12895
12606
  onError: (error) => {
@@ -12898,147 +12609,436 @@ const BillingAddressForm = ({ order }) => {
12898
12609
  }
12899
12610
  );
12900
12611
  });
12901
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12902
- KeyboundForm,
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,
12903
12667
  {
12904
- className: "flex flex-1 flex-col overflow-hidden",
12905
- onSubmit,
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",
12906
12701
  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,
12702
+ /* @__PURE__ */ jsx(
12703
+ "rect",
12704
+ {
12705
+ x: "0.00428286",
12706
+ y: "-0.742904",
12707
+ width: "33.5",
12708
+ height: "65.5",
12709
+ rx: "6.75",
12710
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
12711
+ fill: "#D4D4D8",
12712
+ stroke: "#52525B",
12713
+ strokeWidth: "1.5"
12714
+ }
12715
+ ),
12716
+ /* @__PURE__ */ jsx(
12717
+ "rect",
12718
+ {
12719
+ x: "0.00428286",
12720
+ y: "-0.742904",
12721
+ width: "33.5",
12722
+ height: "65.5",
12723
+ rx: "6.75",
12724
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
12725
+ fill: "white",
12726
+ stroke: "#52525B",
12727
+ strokeWidth: "1.5"
12728
+ }
12729
+ ),
12730
+ /* @__PURE__ */ jsx(
12731
+ "path",
12732
+ {
12733
+ d: "M180.579 107.142L179.126 107.959",
12734
+ stroke: "#52525B",
12735
+ strokeWidth: "1.5",
12736
+ strokeLinecap: "round",
12737
+ strokeLinejoin: "round"
12738
+ }
12739
+ ),
12740
+ /* @__PURE__ */ jsx(
12741
+ "path",
12742
+ {
12743
+ opacity: "0.88",
12744
+ d: "M182.305 109.546L180.257 109.534",
12745
+ stroke: "#52525B",
12746
+ strokeWidth: "1.5",
12747
+ strokeLinecap: "round",
12748
+ strokeLinejoin: "round"
12749
+ }
12750
+ ),
12751
+ /* @__PURE__ */ jsx(
12752
+ "path",
12753
+ {
12754
+ opacity: "0.75",
12755
+ d: "M180.551 111.93L179.108 111.096",
12756
+ stroke: "#52525B",
12757
+ strokeWidth: "1.5",
12758
+ strokeLinecap: "round",
12759
+ strokeLinejoin: "round"
12760
+ }
12761
+ ),
12762
+ /* @__PURE__ */ jsx(
12763
+ "path",
12764
+ {
12765
+ opacity: "0.63",
12766
+ d: "M176.347 112.897L176.354 111.73",
12767
+ stroke: "#52525B",
12768
+ strokeWidth: "1.5",
12769
+ strokeLinecap: "round",
12770
+ strokeLinejoin: "round"
12771
+ }
12772
+ ),
12773
+ /* @__PURE__ */ jsx(
12774
+ "path",
12775
+ {
12776
+ opacity: "0.5",
12777
+ d: "M172.153 111.881L173.606 111.064",
12778
+ stroke: "#52525B",
12779
+ strokeWidth: "1.5",
12780
+ strokeLinecap: "round",
12781
+ strokeLinejoin: "round"
12782
+ }
12783
+ ),
12784
+ /* @__PURE__ */ jsx(
12785
+ "path",
12786
+ {
12787
+ opacity: "0.38",
12788
+ d: "M170.428 109.478L172.476 109.489",
12789
+ stroke: "#52525B",
12790
+ strokeWidth: "1.5",
12791
+ strokeLinecap: "round",
12792
+ strokeLinejoin: "round"
12793
+ }
12794
+ ),
12795
+ /* @__PURE__ */ jsx(
12796
+ "path",
12797
+ {
12798
+ opacity: "0.25",
12799
+ d: "M172.181 107.094L173.624 107.928",
12800
+ stroke: "#52525B",
12801
+ strokeWidth: "1.5",
12802
+ strokeLinecap: "round",
12803
+ strokeLinejoin: "round"
12804
+ }
12805
+ ),
12806
+ /* @__PURE__ */ jsx(
12807
+ "path",
12808
+ {
12809
+ opacity: "0.13",
12810
+ d: "M176.386 106.126L176.379 107.294",
12811
+ stroke: "#52525B",
12812
+ strokeWidth: "1.5",
12813
+ strokeLinecap: "round",
12814
+ strokeLinejoin: "round"
12815
+ }
12816
+ ),
12817
+ /* @__PURE__ */ jsx(
12818
+ "rect",
12819
+ {
12820
+ width: "12",
12821
+ height: "3",
12822
+ rx: "1.5",
12823
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12824
+ fill: "#D4D4D8"
12825
+ }
12826
+ ),
12827
+ /* @__PURE__ */ jsx(
12828
+ "rect",
12829
+ {
12830
+ x: "0.00428286",
12831
+ y: "-0.742904",
12832
+ width: "33.5",
12833
+ height: "65.5",
12834
+ rx: "6.75",
12835
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12836
+ fill: "#D4D4D8",
12837
+ stroke: "#52525B",
12838
+ strokeWidth: "1.5"
12839
+ }
12840
+ ),
12841
+ /* @__PURE__ */ jsx(
12842
+ "rect",
12843
+ {
12844
+ x: "0.00428286",
12845
+ y: "-0.742904",
12846
+ width: "33.5",
12847
+ height: "65.5",
12848
+ rx: "6.75",
12849
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12850
+ fill: "white",
12851
+ stroke: "#52525B",
12852
+ strokeWidth: "1.5"
12853
+ }
12854
+ ),
12855
+ /* @__PURE__ */ jsx(
12856
+ "rect",
12857
+ {
12858
+ width: "12",
12859
+ height: "3",
12860
+ rx: "1.5",
12861
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12862
+ fill: "#D4D4D8"
12863
+ }
12864
+ ),
12865
+ /* @__PURE__ */ jsx(
12866
+ "rect",
12867
+ {
12868
+ width: "17",
12869
+ height: "3",
12870
+ rx: "1.5",
12871
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12872
+ fill: "#D4D4D8"
12873
+ }
12874
+ ),
12875
+ /* @__PURE__ */ jsx(
12876
+ "rect",
12877
+ {
12878
+ width: "12",
12879
+ height: "3",
12880
+ rx: "1.5",
12881
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12882
+ fill: "#D4D4D8"
12883
+ }
12884
+ ),
12885
+ /* @__PURE__ */ jsx(
12886
+ "path",
12887
+ {
12888
+ d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12889
+ fill: "#A1A1AA"
12890
+ }
12891
+ ),
12892
+ /* @__PURE__ */ jsx(
12893
+ "rect",
12894
+ {
12895
+ width: "17",
12896
+ height: "3",
12897
+ rx: "1.5",
12898
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12899
+ fill: "#A1A1AA"
12900
+ }
12901
+ ),
12902
+ /* @__PURE__ */ jsx(
12903
+ "rect",
12904
+ {
12905
+ width: "12",
12906
+ height: "3",
12907
+ rx: "1.5",
12908
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12909
+ fill: "#A1A1AA"
12910
+ }
12911
+ ),
12912
+ /* @__PURE__ */ jsx(
12913
+ "path",
12914
+ {
12915
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12916
+ fill: "#52525B"
12917
+ }
12918
+ ),
12919
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
12920
+ "path",
12921
+ {
12922
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12923
+ stroke: "#A1A1AA",
12924
+ strokeWidth: "1.5",
12925
+ strokeLinecap: "round",
12926
+ strokeLinejoin: "round"
12927
+ }
12928
+ ) }),
12929
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
12930
+ "path",
12931
+ {
12932
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12933
+ stroke: "#A1A1AA",
12934
+ strokeWidth: "1.5",
12935
+ strokeLinecap: "round",
12936
+ strokeLinejoin: "round"
12937
+ }
12938
+ ) }),
12939
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
12940
+ "path",
12941
+ {
12942
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12943
+ stroke: "#A1A1AA",
12944
+ strokeWidth: "1.5",
12945
+ strokeLinecap: "round",
12946
+ strokeLinejoin: "round"
12947
+ }
12948
+ ) }),
12949
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
12950
+ "path",
12951
+ {
12952
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12953
+ stroke: "#A1A1AA",
12954
+ strokeWidth: "1.5",
12955
+ strokeLinecap: "round",
12956
+ strokeLinejoin: "round"
12957
+ }
12958
+ ) }),
12959
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
12960
+ "path",
12961
+ {
12962
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12963
+ stroke: "#A1A1AA",
12964
+ strokeWidth: "1.5",
12965
+ strokeLinecap: "round",
12966
+ strokeLinejoin: "round"
12967
+ }
12968
+ ) }),
12969
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
12970
+ "path",
12971
+ {
12972
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12973
+ stroke: "#A1A1AA",
12974
+ strokeWidth: "1.5",
12975
+ strokeLinecap: "round",
12976
+ strokeLinejoin: "round"
12977
+ }
12978
+ ) }),
12979
+ /* @__PURE__ */ jsxs("defs", { children: [
12980
+ /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
12981
+ "rect",
12910
12982
  {
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
- ] })
12983
+ width: "12",
12984
+ height: "12",
12985
+ fill: "white",
12986
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12918
12987
  }
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,
12988
+ ) }),
12989
+ /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
12990
+ "rect",
12948
12991
  {
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
- ] })
12992
+ width: "12",
12993
+ height: "12",
12994
+ fill: "white",
12995
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12956
12996
  }
12957
- ),
12958
- /* @__PURE__ */ jsx(
12959
- Form$2.Field,
12997
+ ) }),
12998
+ /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
12999
+ "rect",
12960
13000
  {
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
- ] })
13001
+ width: "12",
13002
+ height: "12",
13003
+ fill: "white",
13004
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12968
13005
  }
12969
- ),
12970
- /* @__PURE__ */ jsx(
12971
- Form$2.Field,
13006
+ ) }),
13007
+ /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
13008
+ "rect",
12972
13009
  {
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
- ] })
13010
+ width: "12",
13011
+ height: "12",
13012
+ fill: "white",
13013
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12980
13014
  }
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,
13015
+ ) }),
13016
+ /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
13017
+ "rect",
13010
13018
  {
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
- ] })
13019
+ width: "12",
13020
+ height: "12",
13021
+ fill: "white",
13022
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
13018
13023
  }
13019
- ),
13020
- /* @__PURE__ */ jsx(
13021
- Form$2.Field,
13024
+ ) }),
13025
+ /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
13026
+ "rect",
13022
13027
  {
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
- ] })
13028
+ width: "12",
13029
+ height: "12",
13030
+ fill: "white",
13031
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13030
13032
  }
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
- ] }) })
13033
+ ) })
13034
+ ] })
13037
13035
  ]
13038
13036
  }
13039
- ) });
13037
+ );
13040
13038
  };
13041
- const schema = addressSchema;
13039
+ const schema = objectType({
13040
+ customer_id: stringType().min(1)
13041
+ });
13042
13042
  const widgetModule = { widgets: [] };
13043
13043
  const routeModule = {
13044
13044
  routes: [
@@ -13059,6 +13059,10 @@ const routeModule = {
13059
13059
  handle,
13060
13060
  loader,
13061
13061
  children: [
13062
+ {
13063
+ Component: BillingAddress,
13064
+ path: "/draft-orders/:id/billing-address"
13065
+ },
13062
13066
  {
13063
13067
  Component: CustomItems,
13064
13068
  path: "/draft-orders/:id/custom-items"
@@ -13083,6 +13087,10 @@ const routeModule = {
13083
13087
  Component: SalesChannel,
13084
13088
  path: "/draft-orders/:id/sales-channel"
13085
13089
  },
13090
+ {
13091
+ Component: Shipping,
13092
+ path: "/draft-orders/:id/shipping"
13093
+ },
13086
13094
  {
13087
13095
  Component: ShippingAddress,
13088
13096
  path: "/draft-orders/:id/shipping-address"
@@ -13090,14 +13098,6 @@ const routeModule = {
13090
13098
  {
13091
13099
  Component: TransferOwnership,
13092
13100
  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
  }