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

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