@medusajs/draft-order 2.10.4-preview-20251005180152 → 2.10.4-preview-20251005210149

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.
@@ -9567,6 +9567,196 @@ const ID = () => {
9567
9567
  /* @__PURE__ */ jsx(Outlet, {})
9568
9568
  ] });
9569
9569
  };
9570
+ const BillingAddress = () => {
9571
+ const { id } = useParams();
9572
+ const { order, isPending, isError, error } = useOrder(id, {
9573
+ fields: "+billing_address"
9574
+ });
9575
+ if (isError) {
9576
+ throw error;
9577
+ }
9578
+ const isReady = !isPending && !!order;
9579
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9580
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9581
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
9582
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9583
+ ] }),
9584
+ isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
9585
+ ] });
9586
+ };
9587
+ const BillingAddressForm = ({ order }) => {
9588
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9589
+ const form = useForm({
9590
+ defaultValues: {
9591
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9592
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9593
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9594
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9595
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9596
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9597
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9598
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9599
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9600
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9601
+ },
9602
+ resolver: zodResolver(schema$5)
9603
+ });
9604
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9605
+ const { handleSuccess } = useRouteModal();
9606
+ const onSubmit = form.handleSubmit(async (data) => {
9607
+ await mutateAsync(
9608
+ { billing_address: data },
9609
+ {
9610
+ onSuccess: () => {
9611
+ handleSuccess();
9612
+ },
9613
+ onError: (error) => {
9614
+ toast.error(error.message);
9615
+ }
9616
+ }
9617
+ );
9618
+ });
9619
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9620
+ KeyboundForm,
9621
+ {
9622
+ className: "flex flex-1 flex-col overflow-hidden",
9623
+ onSubmit,
9624
+ children: [
9625
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
9626
+ /* @__PURE__ */ jsx(
9627
+ Form$2.Field,
9628
+ {
9629
+ control: form.control,
9630
+ name: "country_code",
9631
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9632
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
9633
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
9634
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9635
+ ] })
9636
+ }
9637
+ ),
9638
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9639
+ /* @__PURE__ */ jsx(
9640
+ Form$2.Field,
9641
+ {
9642
+ control: form.control,
9643
+ name: "first_name",
9644
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9645
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
9646
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9647
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9648
+ ] })
9649
+ }
9650
+ ),
9651
+ /* @__PURE__ */ jsx(
9652
+ Form$2.Field,
9653
+ {
9654
+ control: form.control,
9655
+ name: "last_name",
9656
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9657
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
9658
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9659
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9660
+ ] })
9661
+ }
9662
+ )
9663
+ ] }),
9664
+ /* @__PURE__ */ jsx(
9665
+ Form$2.Field,
9666
+ {
9667
+ control: form.control,
9668
+ name: "company",
9669
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9670
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
9671
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9672
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9673
+ ] })
9674
+ }
9675
+ ),
9676
+ /* @__PURE__ */ jsx(
9677
+ Form$2.Field,
9678
+ {
9679
+ control: form.control,
9680
+ name: "address_1",
9681
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9682
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
9683
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9684
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9685
+ ] })
9686
+ }
9687
+ ),
9688
+ /* @__PURE__ */ jsx(
9689
+ Form$2.Field,
9690
+ {
9691
+ control: form.control,
9692
+ name: "address_2",
9693
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9694
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9695
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9696
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9697
+ ] })
9698
+ }
9699
+ ),
9700
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9701
+ /* @__PURE__ */ jsx(
9702
+ Form$2.Field,
9703
+ {
9704
+ control: form.control,
9705
+ name: "postal_code",
9706
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9707
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
9708
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9709
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9710
+ ] })
9711
+ }
9712
+ ),
9713
+ /* @__PURE__ */ jsx(
9714
+ Form$2.Field,
9715
+ {
9716
+ control: form.control,
9717
+ name: "city",
9718
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9719
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
9720
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9721
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9722
+ ] })
9723
+ }
9724
+ )
9725
+ ] }),
9726
+ /* @__PURE__ */ jsx(
9727
+ Form$2.Field,
9728
+ {
9729
+ control: form.control,
9730
+ name: "province",
9731
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9732
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9733
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9734
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9735
+ ] })
9736
+ }
9737
+ ),
9738
+ /* @__PURE__ */ jsx(
9739
+ Form$2.Field,
9740
+ {
9741
+ control: form.control,
9742
+ name: "phone",
9743
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9744
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
9745
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9746
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9747
+ ] })
9748
+ }
9749
+ )
9750
+ ] }) }),
9751
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9752
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9753
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9754
+ ] }) })
9755
+ ]
9756
+ }
9757
+ ) });
9758
+ };
9759
+ const schema$5 = addressSchema;
9570
9760
  const CustomItems = () => {
9571
9761
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9572
9762
  /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
@@ -9575,7 +9765,7 @@ const CustomItems = () => {
9575
9765
  };
9576
9766
  const CustomItemsForm = () => {
9577
9767
  const form = useForm({
9578
- resolver: zodResolver(schema$5)
9768
+ resolver: zodResolver(schema$4)
9579
9769
  });
9580
9770
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9581
9771
  /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
@@ -9585,7 +9775,7 @@ const CustomItemsForm = () => {
9585
9775
  ] }) })
9586
9776
  ] }) });
9587
9777
  };
9588
- const schema$5 = objectType({
9778
+ const schema$4 = objectType({
9589
9779
  email: stringType().email()
9590
9780
  });
9591
9781
  const Email = () => {
@@ -9610,7 +9800,7 @@ const EmailForm = ({ order }) => {
9610
9800
  defaultValues: {
9611
9801
  email: order.email ?? ""
9612
9802
  },
9613
- resolver: zodResolver(schema$4)
9803
+ resolver: zodResolver(schema$3)
9614
9804
  });
9615
9805
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9616
9806
  const { handleSuccess } = useRouteModal();
@@ -9653,7 +9843,7 @@ const EmailForm = ({ order }) => {
9653
9843
  }
9654
9844
  ) });
9655
9845
  };
9656
- const schema$4 = objectType({
9846
+ const schema$3 = objectType({
9657
9847
  email: stringType().email()
9658
9848
  });
9659
9849
  const NumberInput = forwardRef(
@@ -10630,283 +10820,6 @@ const customItemSchema = objectType({
10630
10820
  quantity: numberType(),
10631
10821
  unit_price: unionType([numberType(), stringType()])
10632
10822
  });
10633
- const PROMOTION_QUERY_KEY = "promotions";
10634
- const promotionsQueryKeys = {
10635
- list: (query2) => [
10636
- PROMOTION_QUERY_KEY,
10637
- query2 ? query2 : void 0
10638
- ],
10639
- detail: (id, query2) => [
10640
- PROMOTION_QUERY_KEY,
10641
- id,
10642
- query2 ? query2 : void 0
10643
- ]
10644
- };
10645
- const usePromotions = (query2, options) => {
10646
- const { data, ...rest } = useQuery({
10647
- queryKey: promotionsQueryKeys.list(query2),
10648
- queryFn: async () => sdk.admin.promotion.list(query2),
10649
- ...options
10650
- });
10651
- return { ...data, ...rest };
10652
- };
10653
- const Promotions = () => {
10654
- const { id } = useParams();
10655
- const {
10656
- order: preview,
10657
- isError: isPreviewError,
10658
- error: previewError
10659
- } = useOrderPreview(id, void 0);
10660
- useInitiateOrderEdit({ preview });
10661
- const { onCancel } = useCancelOrderEdit({ preview });
10662
- if (isPreviewError) {
10663
- throw previewError;
10664
- }
10665
- const isReady = !!preview;
10666
- return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
10667
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
10668
- isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
10669
- ] });
10670
- };
10671
- const PromotionForm = ({ preview }) => {
10672
- const { items, shipping_methods } = preview;
10673
- const [isSubmitting, setIsSubmitting] = useState(false);
10674
- const [comboboxValue, setComboboxValue] = useState("");
10675
- const { handleSuccess } = useRouteModal();
10676
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10677
- const promoIds = getPromotionIds(items, shipping_methods);
10678
- const { promotions, isPending, isError, error } = usePromotions(
10679
- {
10680
- id: promoIds
10681
- },
10682
- {
10683
- enabled: !!promoIds.length
10684
- }
10685
- );
10686
- const comboboxData = useComboboxData({
10687
- queryKey: ["promotions", "combobox", promoIds],
10688
- queryFn: async (params) => {
10689
- return await sdk.admin.promotion.list({
10690
- ...params,
10691
- id: {
10692
- $nin: promoIds
10693
- }
10694
- });
10695
- },
10696
- getOptions: (data) => {
10697
- return data.promotions.map((promotion) => ({
10698
- label: promotion.code,
10699
- value: promotion.code
10700
- }));
10701
- }
10702
- });
10703
- const add = async (value) => {
10704
- if (!value) {
10705
- return;
10706
- }
10707
- addPromotions(
10708
- {
10709
- promo_codes: [value]
10710
- },
10711
- {
10712
- onError: (e) => {
10713
- toast.error(e.message);
10714
- comboboxData.onSearchValueChange("");
10715
- setComboboxValue("");
10716
- },
10717
- onSuccess: () => {
10718
- comboboxData.onSearchValueChange("");
10719
- setComboboxValue("");
10720
- }
10721
- }
10722
- );
10723
- };
10724
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10725
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10726
- const onSubmit = async () => {
10727
- setIsSubmitting(true);
10728
- let requestSucceeded = false;
10729
- await requestOrderEdit(void 0, {
10730
- onError: (e) => {
10731
- toast.error(e.message);
10732
- },
10733
- onSuccess: () => {
10734
- requestSucceeded = true;
10735
- }
10736
- });
10737
- if (!requestSucceeded) {
10738
- setIsSubmitting(false);
10739
- return;
10740
- }
10741
- await confirmOrderEdit(void 0, {
10742
- onError: (e) => {
10743
- toast.error(e.message);
10744
- },
10745
- onSuccess: () => {
10746
- handleSuccess();
10747
- },
10748
- onSettled: () => {
10749
- setIsSubmitting(false);
10750
- }
10751
- });
10752
- };
10753
- if (isError) {
10754
- throw error;
10755
- }
10756
- return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
10757
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
10758
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
10759
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
10760
- /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
10761
- /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
10762
- ] }),
10763
- /* @__PURE__ */ jsx(
10764
- Combobox,
10765
- {
10766
- id: "promotion-combobox",
10767
- "aria-describedby": "promotion-combobox-hint",
10768
- isFetchingNextPage: comboboxData.isFetchingNextPage,
10769
- fetchNextPage: comboboxData.fetchNextPage,
10770
- options: comboboxData.options,
10771
- onSearchValueChange: comboboxData.onSearchValueChange,
10772
- searchValue: comboboxData.searchValue,
10773
- disabled: comboboxData.disabled || isAddingPromotions,
10774
- onChange: add,
10775
- value: comboboxValue
10776
- }
10777
- )
10778
- ] }),
10779
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10780
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
10781
- PromotionItem,
10782
- {
10783
- promotion,
10784
- orderId: preview.id,
10785
- isLoading: isPending
10786
- },
10787
- promotion.id
10788
- )) })
10789
- ] }) }),
10790
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10791
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10792
- /* @__PURE__ */ jsx(
10793
- Button,
10794
- {
10795
- size: "small",
10796
- type: "submit",
10797
- isLoading: isSubmitting || isAddingPromotions,
10798
- children: "Save"
10799
- }
10800
- )
10801
- ] }) })
10802
- ] });
10803
- };
10804
- const PromotionItem = ({
10805
- promotion,
10806
- orderId,
10807
- isLoading
10808
- }) => {
10809
- var _a;
10810
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
10811
- const onRemove = async () => {
10812
- removePromotions(
10813
- {
10814
- promo_codes: [promotion.code]
10815
- },
10816
- {
10817
- onError: (e) => {
10818
- toast.error(e.message);
10819
- }
10820
- }
10821
- );
10822
- };
10823
- const displayValue = getDisplayValue(promotion);
10824
- return /* @__PURE__ */ jsxs(
10825
- "div",
10826
- {
10827
- className: clx(
10828
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
10829
- {
10830
- "animate-pulse": isLoading
10831
- }
10832
- ),
10833
- children: [
10834
- /* @__PURE__ */ jsxs("div", { children: [
10835
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
10836
- /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
10837
- displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
10838
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
10839
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
10840
- ] }),
10841
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
10842
- ] })
10843
- ] }),
10844
- /* @__PURE__ */ jsx(
10845
- IconButton,
10846
- {
10847
- size: "small",
10848
- type: "button",
10849
- variant: "transparent",
10850
- onClick: onRemove,
10851
- isLoading: isPending || isLoading,
10852
- children: /* @__PURE__ */ jsx(XMark, {})
10853
- }
10854
- )
10855
- ]
10856
- },
10857
- promotion.id
10858
- );
10859
- };
10860
- function getDisplayValue(promotion) {
10861
- var _a, _b, _c, _d;
10862
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
10863
- if (!value) {
10864
- return null;
10865
- }
10866
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
10867
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
10868
- if (!currency) {
10869
- return null;
10870
- }
10871
- return getLocaleAmount(value, currency);
10872
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
10873
- return formatPercentage(value);
10874
- }
10875
- return null;
10876
- }
10877
- const formatter = new Intl.NumberFormat([], {
10878
- style: "percent",
10879
- minimumFractionDigits: 2
10880
- });
10881
- const formatPercentage = (value, isPercentageValue = false) => {
10882
- let val = value || 0;
10883
- if (!isPercentageValue) {
10884
- val = val / 100;
10885
- }
10886
- return formatter.format(val);
10887
- };
10888
- function getPromotionIds(items, shippingMethods) {
10889
- const promotionIds = /* @__PURE__ */ new Set();
10890
- for (const item of items) {
10891
- if (item.adjustments) {
10892
- for (const adjustment of item.adjustments) {
10893
- if (adjustment.promotion_id) {
10894
- promotionIds.add(adjustment.promotion_id);
10895
- }
10896
- }
10897
- }
10898
- }
10899
- for (const shippingMethod of shippingMethods) {
10900
- if (shippingMethod.adjustments) {
10901
- for (const adjustment of shippingMethod.adjustments) {
10902
- if (adjustment.promotion_id) {
10903
- promotionIds.add(adjustment.promotion_id);
10904
- }
10905
- }
10906
- }
10907
- }
10908
- return Array.from(promotionIds);
10909
- }
10910
10823
  const InlineTip = forwardRef(
10911
10824
  ({ variant = "tip", label, className, children, ...props }, ref) => {
10912
10825
  const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
@@ -11257,183 +11170,105 @@ function getHasUneditableRows(metadata) {
11257
11170
  (value) => !EDITABLE_TYPES.includes(typeof value)
11258
11171
  );
11259
11172
  }
11260
- const SalesChannel = () => {
11261
- const { id } = useParams();
11262
- const { draft_order, isPending, isError, error } = useDraftOrder(
11173
+ const PROMOTION_QUERY_KEY = "promotions";
11174
+ const promotionsQueryKeys = {
11175
+ list: (query2) => [
11176
+ PROMOTION_QUERY_KEY,
11177
+ query2 ? query2 : void 0
11178
+ ],
11179
+ detail: (id, query2) => [
11180
+ PROMOTION_QUERY_KEY,
11263
11181
  id,
11264
- {
11265
- fields: "+sales_channel_id"
11266
- },
11267
- {
11268
- enabled: !!id
11269
- }
11270
- );
11271
- if (isError) {
11272
- throw error;
11273
- }
11274
- const ISrEADY = !!draft_order && !isPending;
11275
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11276
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11277
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11278
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11279
- ] }),
11280
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11281
- ] });
11182
+ query2 ? query2 : void 0
11183
+ ]
11282
11184
  };
11283
- const SalesChannelForm = ({ order }) => {
11284
- const form = useForm({
11285
- defaultValues: {
11286
- sales_channel_id: order.sales_channel_id || ""
11287
- },
11288
- resolver: zodResolver(schema$3)
11289
- });
11290
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11291
- const { handleSuccess } = useRouteModal();
11292
- const onSubmit = form.handleSubmit(async (data) => {
11293
- await mutateAsync(
11294
- {
11295
- sales_channel_id: data.sales_channel_id
11296
- },
11297
- {
11298
- onSuccess: () => {
11299
- toast.success("Sales channel updated");
11300
- handleSuccess();
11301
- },
11302
- onError: (error) => {
11303
- toast.error(error.message);
11304
- }
11305
- }
11306
- );
11307
- });
11308
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11309
- KeyboundForm,
11310
- {
11311
- className: "flex flex-1 flex-col overflow-hidden",
11312
- onSubmit,
11313
- children: [
11314
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11315
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11316
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11317
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11318
- ] }) })
11319
- ]
11320
- }
11321
- ) });
11322
- };
11323
- const SalesChannelField = ({ control, order }) => {
11324
- const salesChannels = useComboboxData({
11325
- queryFn: async (params) => {
11326
- return await sdk.admin.salesChannel.list(params);
11327
- },
11328
- queryKey: ["sales-channels"],
11329
- getOptions: (data) => {
11330
- return data.sales_channels.map((salesChannel) => ({
11331
- label: salesChannel.name,
11332
- value: salesChannel.id
11333
- }));
11334
- },
11335
- defaultValue: order.sales_channel_id || void 0
11185
+ const usePromotions = (query2, options) => {
11186
+ const { data, ...rest } = useQuery({
11187
+ queryKey: promotionsQueryKeys.list(query2),
11188
+ queryFn: async () => sdk.admin.promotion.list(query2),
11189
+ ...options
11336
11190
  });
11337
- return /* @__PURE__ */ jsx(
11338
- Form$2.Field,
11339
- {
11340
- control,
11341
- name: "sales_channel_id",
11342
- render: ({ field }) => {
11343
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11344
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11345
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11346
- Combobox,
11347
- {
11348
- options: salesChannels.options,
11349
- fetchNextPage: salesChannels.fetchNextPage,
11350
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11351
- searchValue: salesChannels.searchValue,
11352
- onSearchValueChange: salesChannels.onSearchValueChange,
11353
- placeholder: "Select sales channel",
11354
- ...field
11355
- }
11356
- ) }),
11357
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11358
- ] });
11359
- }
11360
- }
11361
- );
11191
+ return { ...data, ...rest };
11362
11192
  };
11363
- const schema$3 = objectType({
11364
- sales_channel_id: stringType().min(1)
11365
- });
11366
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11367
- const Shipping = () => {
11368
- var _a;
11193
+ const Promotions = () => {
11369
11194
  const { id } = useParams();
11370
- const { order, isPending, isError, error } = useOrder(id, {
11371
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11372
- });
11373
11195
  const {
11374
11196
  order: preview,
11375
- isPending: isPreviewPending,
11376
11197
  isError: isPreviewError,
11377
11198
  error: previewError
11378
- } = useOrderPreview(id);
11199
+ } = useOrderPreview(id, void 0);
11379
11200
  useInitiateOrderEdit({ preview });
11380
11201
  const { onCancel } = useCancelOrderEdit({ preview });
11381
- if (isError) {
11382
- throw error;
11383
- }
11384
11202
  if (isPreviewError) {
11385
11203
  throw previewError;
11386
11204
  }
11387
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11388
- const isReady = preview && !isPreviewPending && order && !isPending;
11389
- return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11390
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11391
- /* @__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: [
11392
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11393
- /* @__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." }) })
11394
- ] }) }) }),
11395
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11396
- ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11397
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11398
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11399
- ] }) });
11205
+ const isReady = !!preview;
11206
+ return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
11207
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
11208
+ isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
11209
+ ] });
11400
11210
  };
11401
- const ShippingForm = ({ preview, order }) => {
11402
- var _a;
11403
- const { setIsOpen } = useStackedModal();
11211
+ const PromotionForm = ({ preview }) => {
11212
+ const { items, shipping_methods } = preview;
11404
11213
  const [isSubmitting, setIsSubmitting] = useState(false);
11405
- const [data, setData] = useState(null);
11406
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11407
- const { shipping_options } = useShippingOptions(
11214
+ const [comboboxValue, setComboboxValue] = useState("");
11215
+ const { handleSuccess } = useRouteModal();
11216
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11217
+ const promoIds = getPromotionIds(items, shipping_methods);
11218
+ const { promotions, isPending, isError, error } = usePromotions(
11408
11219
  {
11409
- id: appliedShippingOptionIds,
11410
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11220
+ id: promoIds
11411
11221
  },
11412
11222
  {
11413
- enabled: appliedShippingOptionIds.length > 0
11223
+ enabled: !!promoIds.length
11414
11224
  }
11415
11225
  );
11416
- const uniqueShippingProfiles = useMemo(() => {
11417
- const profiles = /* @__PURE__ */ new Map();
11418
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11419
- profiles.set(profile.id, profile);
11420
- });
11421
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11422
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11423
- });
11424
- return Array.from(profiles.values());
11425
- }, [order.items, shipping_options]);
11426
- const { handleSuccess } = useRouteModal();
11226
+ const comboboxData = useComboboxData({
11227
+ queryKey: ["promotions", "combobox", promoIds],
11228
+ queryFn: async (params) => {
11229
+ return await sdk.admin.promotion.list({
11230
+ ...params,
11231
+ id: {
11232
+ $nin: promoIds
11233
+ }
11234
+ });
11235
+ },
11236
+ getOptions: (data) => {
11237
+ return data.promotions.map((promotion) => ({
11238
+ label: promotion.code,
11239
+ value: promotion.code
11240
+ }));
11241
+ }
11242
+ });
11243
+ const add = async (value) => {
11244
+ if (!value) {
11245
+ return;
11246
+ }
11247
+ addPromotions(
11248
+ {
11249
+ promo_codes: [value]
11250
+ },
11251
+ {
11252
+ onError: (e) => {
11253
+ toast.error(e.message);
11254
+ comboboxData.onSearchValueChange("");
11255
+ setComboboxValue("");
11256
+ },
11257
+ onSuccess: () => {
11258
+ comboboxData.onSearchValueChange("");
11259
+ setComboboxValue("");
11260
+ }
11261
+ }
11262
+ );
11263
+ };
11427
11264
  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11428
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11429
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11430
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11265
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11431
11266
  const onSubmit = async () => {
11432
11267
  setIsSubmitting(true);
11433
11268
  let requestSucceeded = false;
11434
11269
  await requestOrderEdit(void 0, {
11435
11270
  onError: (e) => {
11436
- toast.error(`Failed to request order edit: ${e.message}`);
11271
+ toast.error(e.message);
11437
11272
  },
11438
11273
  onSuccess: () => {
11439
11274
  requestSucceeded = true;
@@ -11445,7 +11280,7 @@ const ShippingForm = ({ preview, order }) => {
11445
11280
  }
11446
11281
  await confirmOrderEdit(void 0, {
11447
11282
  onError: (e) => {
11448
- toast.error(`Failed to confirm order edit: ${e.message}`);
11283
+ toast.error(e.message);
11449
11284
  },
11450
11285
  onSuccess: () => {
11451
11286
  handleSuccess();
@@ -11455,924 +11290,1076 @@ const ShippingForm = ({ preview, order }) => {
11455
11290
  }
11456
11291
  });
11457
11292
  };
11458
- const onKeydown = useCallback(
11459
- (e) => {
11460
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11461
- if (data || isSubmitting) {
11462
- return;
11463
- }
11464
- onSubmit();
11465
- }
11466
- },
11467
- [data, isSubmitting, onSubmit]
11468
- );
11469
- useEffect(() => {
11470
- document.addEventListener("keydown", onKeydown);
11471
- return () => {
11472
- document.removeEventListener("keydown", onKeydown);
11473
- };
11474
- }, [onKeydown]);
11475
- return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11476
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11477
- /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11478
- /* @__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: [
11479
- /* @__PURE__ */ jsxs("div", { children: [
11480
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11481
- /* @__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." }) })
11293
+ if (isError) {
11294
+ throw error;
11295
+ }
11296
+ return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11297
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
11298
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
11299
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11300
+ /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11301
+ /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11482
11302
  ] }),
11483
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11484
- /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11485
- /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11486
- /* @__PURE__ */ jsx(
11487
- Text,
11488
- {
11489
- size: "xsmall",
11490
- weight: "plus",
11491
- className: "text-ui-fg-muted",
11492
- children: "Shipping profile"
11493
- }
11494
- ),
11495
- /* @__PURE__ */ jsx(
11496
- Text,
11497
- {
11498
- size: "xsmall",
11499
- weight: "plus",
11500
- className: "text-ui-fg-muted",
11501
- children: "Action"
11502
- }
11503
- )
11504
- ] }),
11505
- /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11506
- var _a2, _b, _c, _d, _e, _f, _g;
11507
- const items = getItemsWithShippingProfile(
11508
- profile.id,
11509
- order.items
11510
- );
11511
- const hasItems = items.length > 0;
11512
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11513
- (option) => option.shipping_profile_id === profile.id
11514
- );
11515
- const shippingMethod = preview.shipping_methods.find(
11516
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11517
- );
11518
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11519
- (action) => action.action === "SHIPPING_ADD"
11520
- );
11521
- return /* @__PURE__ */ jsxs(
11522
- Accordion.Item,
11523
- {
11524
- value: profile.id,
11525
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11526
- children: [
11527
- /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11528
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11529
- /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
11530
- IconButton,
11531
- {
11532
- size: "2xsmall",
11533
- variant: "transparent",
11534
- className: "group/trigger",
11535
- disabled: !hasItems,
11536
- children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11537
- }
11538
- ) }),
11539
- !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11540
- /* @__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" }) }) }),
11541
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
11542
- /* @__PURE__ */ jsx(
11543
- Text,
11544
- {
11545
- size: "small",
11546
- weight: "plus",
11547
- leading: "compact",
11548
- children: profile.name
11549
- }
11550
- ),
11551
- /* @__PURE__ */ jsxs(
11552
- Text,
11553
- {
11554
- size: "small",
11555
- leading: "compact",
11556
- className: "text-ui-fg-subtle",
11557
- children: [
11558
- items.length,
11559
- " ",
11560
- pluralize(items.length, "items", "item")
11561
- ]
11562
- }
11563
- )
11564
- ] })
11565
- ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11566
- /* @__PURE__ */ jsx(
11567
- Tooltip,
11568
- {
11569
- content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
11570
- var _a3, _b2, _c2;
11571
- return /* @__PURE__ */ jsx(
11572
- "li",
11573
- {
11574
- 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})`
11575
- },
11576
- item.id
11577
- );
11578
- }) }),
11579
- children: /* @__PURE__ */ jsxs(
11580
- Badge,
11581
- {
11582
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11583
- size: "xsmall",
11584
- children: [
11585
- /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
11586
- /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
11587
- items.reduce(
11588
- (acc, item) => acc + item.quantity,
11589
- 0
11590
- ),
11591
- "x",
11592
- " ",
11593
- pluralize(items.length, "items", "item")
11594
- ] })
11595
- ]
11596
- }
11597
- )
11598
- }
11599
- ),
11600
- /* @__PURE__ */ jsx(
11601
- Tooltip,
11602
- {
11603
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11604
- children: /* @__PURE__ */ jsxs(
11605
- Badge,
11606
- {
11607
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11608
- size: "xsmall",
11609
- children: [
11610
- /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
11611
- /* @__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 })
11612
- ]
11613
- }
11614
- )
11615
- }
11616
- ),
11617
- /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
11618
- Badge,
11619
- {
11620
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11621
- size: "xsmall",
11622
- children: [
11623
- /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
11624
- /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
11625
- ]
11626
- }
11627
- ) })
11628
- ] })
11629
- ] }),
11630
- shippingOption ? /* @__PURE__ */ jsx(
11631
- ActionMenu,
11632
- {
11633
- groups: [
11634
- {
11635
- actions: [
11636
- hasItems ? {
11637
- label: "Edit shipping option",
11638
- icon: /* @__PURE__ */ jsx(Channels, {}),
11639
- onClick: () => {
11640
- setIsOpen(
11641
- STACKED_FOCUS_MODAL_ID,
11642
- true
11643
- );
11644
- setData({
11645
- shippingProfileId: profile.id,
11646
- shippingOption,
11647
- shippingMethod
11648
- });
11649
- }
11650
- } : void 0,
11651
- {
11652
- label: "Remove shipping option",
11653
- icon: /* @__PURE__ */ jsx(Trash, {}),
11654
- onClick: () => {
11655
- if (shippingMethod) {
11656
- if (addShippingMethodAction) {
11657
- removeActionShippingMethod(
11658
- addShippingMethodAction.id
11659
- );
11660
- } else {
11661
- removeShippingMethod(
11662
- shippingMethod.id
11663
- );
11664
- }
11665
- }
11666
- }
11667
- }
11668
- ].filter(Boolean)
11669
- }
11670
- ]
11671
- }
11672
- ) : /* @__PURE__ */ jsx(
11673
- StackedModalTrigger,
11674
- {
11675
- shippingProfileId: profile.id,
11676
- shippingOption,
11677
- shippingMethod,
11678
- setData,
11679
- children: "Add shipping option"
11680
- }
11681
- )
11682
- ] }),
11683
- /* @__PURE__ */ jsxs(Accordion.Content, { children: [
11684
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11685
- items.map((item, idx) => {
11686
- var _a3, _b2, _c2, _d2, _e2;
11687
- return /* @__PURE__ */ jsxs("div", { children: [
11688
- /* @__PURE__ */ jsxs(
11689
- "div",
11690
- {
11691
- className: "px-3 flex items-center gap-x-3",
11692
- children: [
11693
- /* @__PURE__ */ jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(
11694
- Divider,
11695
- {
11696
- variant: "dashed",
11697
- orientation: "vertical"
11698
- }
11699
- ) }),
11700
- /* @__PURE__ */ jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11701
- /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
11702
- Text,
11703
- {
11704
- size: "small",
11705
- leading: "compact",
11706
- className: "text-ui-fg-subtle",
11707
- children: [
11708
- item.quantity,
11709
- "x"
11710
- ]
11711
- }
11712
- ) }),
11713
- /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
11714
- /* @__PURE__ */ jsxs("div", { children: [
11715
- /* @__PURE__ */ jsxs(
11716
- Text,
11717
- {
11718
- size: "small",
11719
- leading: "compact",
11720
- weight: "plus",
11721
- children: [
11722
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11723
- " (",
11724
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11725
- ")"
11726
- ]
11727
- }
11728
- ),
11729
- /* @__PURE__ */ jsx(
11730
- Text,
11731
- {
11732
- size: "small",
11733
- leading: "compact",
11734
- className: "text-ui-fg-subtle",
11735
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11736
- }
11737
- )
11738
- ] })
11739
- ] })
11740
- ]
11741
- },
11742
- item.id
11743
- ),
11744
- idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
11745
- ] }, item.id);
11746
- })
11747
- ] })
11748
- ]
11749
- },
11750
- profile.id
11751
- );
11752
- }) })
11753
- ] }) })
11754
- ] }) }),
11755
- /* @__PURE__ */ jsx(
11756
- StackedFocusModal,
11303
+ /* @__PURE__ */ jsx(
11304
+ Combobox,
11305
+ {
11306
+ id: "promotion-combobox",
11307
+ "aria-describedby": "promotion-combobox-hint",
11308
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
11309
+ fetchNextPage: comboboxData.fetchNextPage,
11310
+ options: comboboxData.options,
11311
+ onSearchValueChange: comboboxData.onSearchValueChange,
11312
+ searchValue: comboboxData.searchValue,
11313
+ disabled: comboboxData.disabled || isAddingPromotions,
11314
+ onChange: add,
11315
+ value: comboboxValue
11316
+ }
11317
+ )
11318
+ ] }),
11319
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11320
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
11321
+ PromotionItem,
11757
11322
  {
11758
- id: STACKED_FOCUS_MODAL_ID,
11759
- onOpenChangeCallback: (open) => {
11760
- if (!open) {
11761
- setData(null);
11762
- }
11763
- return open;
11764
- },
11765
- children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
11766
- }
11767
- )
11768
- ] }),
11769
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
11770
- /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11323
+ promotion,
11324
+ orderId: preview.id,
11325
+ isLoading: isPending
11326
+ },
11327
+ promotion.id
11328
+ )) })
11329
+ ] }) }),
11330
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11331
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11771
11332
  /* @__PURE__ */ jsx(
11772
11333
  Button,
11773
11334
  {
11774
11335
  size: "small",
11775
- type: "button",
11776
- isLoading: isSubmitting,
11777
- onClick: onSubmit,
11336
+ type: "submit",
11337
+ isLoading: isSubmitting || isAddingPromotions,
11778
11338
  children: "Save"
11779
11339
  }
11780
11340
  )
11781
11341
  ] }) })
11782
11342
  ] });
11783
11343
  };
11784
- const StackedModalTrigger = ({
11785
- shippingProfileId,
11786
- shippingOption,
11787
- shippingMethod,
11788
- setData,
11789
- children
11344
+ const PromotionItem = ({
11345
+ promotion,
11346
+ orderId,
11347
+ isLoading
11790
11348
  }) => {
11791
- const { setIsOpen, getIsOpen } = useStackedModal();
11792
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11793
- const onToggle = () => {
11794
- if (isOpen) {
11795
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11796
- setData(null);
11797
- } else {
11798
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11799
- setData({
11800
- shippingProfileId,
11801
- shippingOption,
11802
- shippingMethod
11803
- });
11804
- }
11349
+ var _a;
11350
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11351
+ const onRemove = async () => {
11352
+ removePromotions(
11353
+ {
11354
+ promo_codes: [promotion.code]
11355
+ },
11356
+ {
11357
+ onError: (e) => {
11358
+ toast.error(e.message);
11359
+ }
11360
+ }
11361
+ );
11805
11362
  };
11806
- return /* @__PURE__ */ jsx(
11807
- Button,
11363
+ const displayValue = getDisplayValue(promotion);
11364
+ return /* @__PURE__ */ jsxs(
11365
+ "div",
11808
11366
  {
11809
- size: "small",
11810
- variant: "secondary",
11811
- onClick: onToggle,
11812
- className: "text-ui-fg-primary shrink-0",
11813
- children
11814
- }
11367
+ className: clx(
11368
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11369
+ {
11370
+ "animate-pulse": isLoading
11371
+ }
11372
+ ),
11373
+ children: [
11374
+ /* @__PURE__ */ jsxs("div", { children: [
11375
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11376
+ /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11377
+ displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
11378
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
11379
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
11380
+ ] }),
11381
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11382
+ ] })
11383
+ ] }),
11384
+ /* @__PURE__ */ jsx(
11385
+ IconButton,
11386
+ {
11387
+ size: "small",
11388
+ type: "button",
11389
+ variant: "transparent",
11390
+ onClick: onRemove,
11391
+ isLoading: isPending || isLoading,
11392
+ children: /* @__PURE__ */ jsx(XMark, {})
11393
+ }
11394
+ )
11395
+ ]
11396
+ },
11397
+ promotion.id
11815
11398
  );
11816
11399
  };
11817
- const ShippingProfileForm = ({
11818
- data,
11819
- order,
11820
- preview
11821
- }) => {
11822
- var _a, _b, _c, _d, _e, _f;
11823
- const { setIsOpen } = useStackedModal();
11824
- const form = useForm({
11825
- resolver: zodResolver(shippingMethodSchema),
11826
- defaultValues: {
11827
- 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,
11828
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
11829
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
11400
+ function getDisplayValue(promotion) {
11401
+ var _a, _b, _c, _d;
11402
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11403
+ if (!value) {
11404
+ return null;
11405
+ }
11406
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11407
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11408
+ if (!currency) {
11409
+ return null;
11830
11410
  }
11831
- });
11832
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
11833
- const {
11834
- mutateAsync: updateShippingMethod,
11835
- isPending: isUpdatingShippingMethod
11836
- } = useDraftOrderUpdateShippingMethod(order.id);
11837
- const onSubmit = form.handleSubmit(async (values) => {
11838
- if (isEqual(values, form.formState.defaultValues)) {
11839
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11840
- return;
11411
+ return getLocaleAmount(value, currency);
11412
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11413
+ return formatPercentage(value);
11414
+ }
11415
+ return null;
11416
+ }
11417
+ const formatter = new Intl.NumberFormat([], {
11418
+ style: "percent",
11419
+ minimumFractionDigits: 2
11420
+ });
11421
+ const formatPercentage = (value, isPercentageValue = false) => {
11422
+ let val = value || 0;
11423
+ if (!isPercentageValue) {
11424
+ val = val / 100;
11425
+ }
11426
+ return formatter.format(val);
11427
+ };
11428
+ function getPromotionIds(items, shippingMethods) {
11429
+ const promotionIds = /* @__PURE__ */ new Set();
11430
+ for (const item of items) {
11431
+ if (item.adjustments) {
11432
+ for (const adjustment of item.adjustments) {
11433
+ if (adjustment.promotion_id) {
11434
+ promotionIds.add(adjustment.promotion_id);
11435
+ }
11436
+ }
11841
11437
  }
11842
- if (data.shippingMethod) {
11843
- await updateShippingMethod(
11844
- {
11845
- method_id: data.shippingMethod.id,
11846
- shipping_option_id: values.shipping_option_id,
11847
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11848
- },
11849
- {
11850
- onError: (e) => {
11851
- toast.error(e.message);
11852
- },
11853
- onSuccess: () => {
11854
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11855
- }
11438
+ }
11439
+ for (const shippingMethod of shippingMethods) {
11440
+ if (shippingMethod.adjustments) {
11441
+ for (const adjustment of shippingMethod.adjustments) {
11442
+ if (adjustment.promotion_id) {
11443
+ promotionIds.add(adjustment.promotion_id);
11856
11444
  }
11857
- );
11858
- return;
11445
+ }
11859
11446
  }
11860
- await addShippingMethod(
11447
+ }
11448
+ return Array.from(promotionIds);
11449
+ }
11450
+ const SalesChannel = () => {
11451
+ const { id } = useParams();
11452
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11453
+ id,
11454
+ {
11455
+ fields: "+sales_channel_id"
11456
+ },
11457
+ {
11458
+ enabled: !!id
11459
+ }
11460
+ );
11461
+ if (isError) {
11462
+ throw error;
11463
+ }
11464
+ const ISrEADY = !!draft_order && !isPending;
11465
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11466
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11467
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11468
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11469
+ ] }),
11470
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11471
+ ] });
11472
+ };
11473
+ const SalesChannelForm = ({ order }) => {
11474
+ const form = useForm({
11475
+ defaultValues: {
11476
+ sales_channel_id: order.sales_channel_id || ""
11477
+ },
11478
+ resolver: zodResolver(schema$2)
11479
+ });
11480
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11481
+ const { handleSuccess } = useRouteModal();
11482
+ const onSubmit = form.handleSubmit(async (data) => {
11483
+ await mutateAsync(
11861
11484
  {
11862
- shipping_option_id: values.shipping_option_id,
11863
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11485
+ sales_channel_id: data.sales_channel_id
11864
11486
  },
11865
11487
  {
11866
- onError: (e) => {
11867
- toast.error(e.message);
11868
- },
11869
11488
  onSuccess: () => {
11870
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11489
+ toast.success("Sales channel updated");
11490
+ handleSuccess();
11491
+ },
11492
+ onError: (error) => {
11493
+ toast.error(error.message);
11871
11494
  }
11872
11495
  }
11873
11496
  );
11874
11497
  });
11875
- return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
11876
- KeyboundForm,
11498
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11499
+ KeyboundForm,
11500
+ {
11501
+ className: "flex flex-1 flex-col overflow-hidden",
11502
+ onSubmit,
11503
+ children: [
11504
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11505
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11506
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11507
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11508
+ ] }) })
11509
+ ]
11510
+ }
11511
+ ) });
11512
+ };
11513
+ const SalesChannelField = ({ control, order }) => {
11514
+ const salesChannels = useComboboxData({
11515
+ queryFn: async (params) => {
11516
+ return await sdk.admin.salesChannel.list(params);
11517
+ },
11518
+ queryKey: ["sales-channels"],
11519
+ getOptions: (data) => {
11520
+ return data.sales_channels.map((salesChannel) => ({
11521
+ label: salesChannel.name,
11522
+ value: salesChannel.id
11523
+ }));
11524
+ },
11525
+ defaultValue: order.sales_channel_id || void 0
11526
+ });
11527
+ return /* @__PURE__ */ jsx(
11528
+ Form$2.Field,
11877
11529
  {
11878
- className: "flex h-full flex-col overflow-hidden",
11879
- onSubmit,
11880
- children: [
11881
- /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
11882
- /* @__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: [
11883
- /* @__PURE__ */ jsxs("div", { children: [
11884
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11885
- /* @__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." }) })
11886
- ] }),
11887
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11888
- /* @__PURE__ */ jsx(
11889
- LocationField,
11890
- {
11891
- control: form.control,
11892
- setValue: form.setValue
11893
- }
11894
- ),
11895
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11896
- /* @__PURE__ */ jsx(
11897
- ShippingOptionField,
11898
- {
11899
- shippingProfileId: data.shippingProfileId,
11900
- preview,
11901
- control: form.control
11902
- }
11903
- ),
11904
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11905
- /* @__PURE__ */ jsx(
11906
- CustomAmountField,
11907
- {
11908
- control: form.control,
11909
- currencyCode: order.currency_code
11910
- }
11911
- ),
11912
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11913
- /* @__PURE__ */ jsx(
11914
- ItemsPreview,
11915
- {
11916
- order,
11917
- shippingProfileId: data.shippingProfileId
11918
- }
11919
- )
11920
- ] }) }) }),
11921
- /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
11922
- /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11923
- /* @__PURE__ */ jsx(
11924
- Button,
11530
+ control,
11531
+ name: "sales_channel_id",
11532
+ render: ({ field }) => {
11533
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11534
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11535
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11536
+ Combobox,
11925
11537
  {
11926
- size: "small",
11927
- type: "submit",
11928
- isLoading: isPending || isUpdatingShippingMethod,
11929
- children: data.shippingMethod ? "Update" : "Add"
11538
+ options: salesChannels.options,
11539
+ fetchNextPage: salesChannels.fetchNextPage,
11540
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11541
+ searchValue: salesChannels.searchValue,
11542
+ onSearchValueChange: salesChannels.onSearchValueChange,
11543
+ placeholder: "Select sales channel",
11544
+ ...field
11930
11545
  }
11931
- )
11932
- ] }) })
11933
- ]
11546
+ ) }),
11547
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11548
+ ] });
11549
+ }
11934
11550
  }
11935
- ) }) });
11551
+ );
11936
11552
  };
11937
- const shippingMethodSchema = objectType({
11938
- location_id: stringType(),
11939
- shipping_option_id: stringType(),
11940
- custom_amount: unionType([numberType(), stringType()]).optional()
11553
+ const schema$2 = objectType({
11554
+ sales_channel_id: stringType().min(1)
11941
11555
  });
11942
- const ItemsPreview = ({ order, shippingProfileId }) => {
11943
- const matches = order.items.filter(
11944
- (item) => {
11945
- var _a, _b, _c;
11946
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
11556
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11557
+ const Shipping = () => {
11558
+ var _a;
11559
+ const { id } = useParams();
11560
+ const { order, isPending, isError, error } = useOrder(id, {
11561
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11562
+ });
11563
+ const {
11564
+ order: preview,
11565
+ isPending: isPreviewPending,
11566
+ isError: isPreviewError,
11567
+ error: previewError
11568
+ } = useOrderPreview(id);
11569
+ useInitiateOrderEdit({ preview });
11570
+ const { onCancel } = useCancelOrderEdit({ preview });
11571
+ if (isError) {
11572
+ throw error;
11573
+ }
11574
+ if (isPreviewError) {
11575
+ throw previewError;
11576
+ }
11577
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11578
+ const isReady = preview && !isPreviewPending && order && !isPending;
11579
+ return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11580
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11581
+ /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11582
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11583
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11584
+ ] }) }) }),
11585
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11586
+ ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11587
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11588
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11589
+ ] }) });
11590
+ };
11591
+ const ShippingForm = ({ preview, order }) => {
11592
+ var _a;
11593
+ const { setIsOpen } = useStackedModal();
11594
+ const [isSubmitting, setIsSubmitting] = useState(false);
11595
+ const [data, setData] = useState(null);
11596
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11597
+ const { shipping_options } = useShippingOptions(
11598
+ {
11599
+ id: appliedShippingOptionIds,
11600
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11601
+ },
11602
+ {
11603
+ enabled: appliedShippingOptionIds.length > 0
11947
11604
  }
11948
11605
  );
11949
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
11950
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11951
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
11952
- /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
11953
- ] }) }),
11954
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11955
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
11956
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
11957
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
11958
- ] }),
11959
- /* @__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(
11960
- "div",
11961
- {
11962
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
11963
- children: [
11964
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11965
- /* @__PURE__ */ jsx(
11966
- Thumbnail,
11967
- {
11968
- thumbnail: item.thumbnail,
11969
- alt: item.product_title ?? void 0
11970
- }
11971
- ),
11972
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11973
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
11974
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
11975
- /* @__PURE__ */ jsxs(
11976
- Text,
11977
- {
11978
- size: "small",
11979
- leading: "compact",
11980
- className: "text-ui-fg-subtle",
11981
- children: [
11982
- "(",
11983
- item.variant_title,
11984
- ")"
11985
- ]
11986
- }
11987
- )
11988
- ] }),
11989
- /* @__PURE__ */ jsx(
11990
- Text,
11991
- {
11992
- size: "small",
11993
- leading: "compact",
11994
- className: "text-ui-fg-subtle",
11995
- children: item.variant_sku
11996
- }
11997
- )
11998
- ] })
11999
- ] }),
12000
- /* @__PURE__ */ jsxs(
11606
+ const uniqueShippingProfiles = useMemo(() => {
11607
+ const profiles = /* @__PURE__ */ new Map();
11608
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11609
+ profiles.set(profile.id, profile);
11610
+ });
11611
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11612
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11613
+ });
11614
+ return Array.from(profiles.values());
11615
+ }, [order.items, shipping_options]);
11616
+ const { handleSuccess } = useRouteModal();
11617
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11618
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11619
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11620
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11621
+ const onSubmit = async () => {
11622
+ setIsSubmitting(true);
11623
+ let requestSucceeded = false;
11624
+ await requestOrderEdit(void 0, {
11625
+ onError: (e) => {
11626
+ toast.error(`Failed to request order edit: ${e.message}`);
11627
+ },
11628
+ onSuccess: () => {
11629
+ requestSucceeded = true;
11630
+ }
11631
+ });
11632
+ if (!requestSucceeded) {
11633
+ setIsSubmitting(false);
11634
+ return;
11635
+ }
11636
+ await confirmOrderEdit(void 0, {
11637
+ onError: (e) => {
11638
+ toast.error(`Failed to confirm order edit: ${e.message}`);
11639
+ },
11640
+ onSuccess: () => {
11641
+ handleSuccess();
11642
+ },
11643
+ onSettled: () => {
11644
+ setIsSubmitting(false);
11645
+ }
11646
+ });
11647
+ };
11648
+ const onKeydown = useCallback(
11649
+ (e) => {
11650
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11651
+ if (data || isSubmitting) {
11652
+ return;
11653
+ }
11654
+ onSubmit();
11655
+ }
11656
+ },
11657
+ [data, isSubmitting, onSubmit]
11658
+ );
11659
+ useEffect(() => {
11660
+ document.addEventListener("keydown", onKeydown);
11661
+ return () => {
11662
+ document.removeEventListener("keydown", onKeydown);
11663
+ };
11664
+ }, [onKeydown]);
11665
+ return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11666
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11667
+ /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11668
+ /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11669
+ /* @__PURE__ */ jsxs("div", { children: [
11670
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11671
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11672
+ ] }),
11673
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11674
+ /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11675
+ /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11676
+ /* @__PURE__ */ jsx(
12001
11677
  Text,
12002
11678
  {
12003
- size: "small",
12004
- leading: "compact",
12005
- className: "text-ui-fg-subtle",
11679
+ size: "xsmall",
11680
+ weight: "plus",
11681
+ className: "text-ui-fg-muted",
11682
+ children: "Shipping profile"
11683
+ }
11684
+ ),
11685
+ /* @__PURE__ */ jsx(
11686
+ Text,
11687
+ {
11688
+ size: "xsmall",
11689
+ weight: "plus",
11690
+ className: "text-ui-fg-muted",
11691
+ children: "Action"
11692
+ }
11693
+ )
11694
+ ] }),
11695
+ /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11696
+ var _a2, _b, _c, _d, _e, _f, _g;
11697
+ const items = getItemsWithShippingProfile(
11698
+ profile.id,
11699
+ order.items
11700
+ );
11701
+ const hasItems = items.length > 0;
11702
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11703
+ (option) => option.shipping_profile_id === profile.id
11704
+ );
11705
+ const shippingMethod = preview.shipping_methods.find(
11706
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11707
+ );
11708
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11709
+ (action) => action.action === "SHIPPING_ADD"
11710
+ );
11711
+ return /* @__PURE__ */ jsxs(
11712
+ Accordion.Item,
11713
+ {
11714
+ value: profile.id,
11715
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12006
11716
  children: [
12007
- item.quantity,
12008
- "x"
11717
+ /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11718
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11719
+ /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
11720
+ IconButton,
11721
+ {
11722
+ size: "2xsmall",
11723
+ variant: "transparent",
11724
+ className: "group/trigger",
11725
+ disabled: !hasItems,
11726
+ children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11727
+ }
11728
+ ) }),
11729
+ !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11730
+ /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) }),
11731
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
11732
+ /* @__PURE__ */ jsx(
11733
+ Text,
11734
+ {
11735
+ size: "small",
11736
+ weight: "plus",
11737
+ leading: "compact",
11738
+ children: profile.name
11739
+ }
11740
+ ),
11741
+ /* @__PURE__ */ jsxs(
11742
+ Text,
11743
+ {
11744
+ size: "small",
11745
+ leading: "compact",
11746
+ className: "text-ui-fg-subtle",
11747
+ children: [
11748
+ items.length,
11749
+ " ",
11750
+ pluralize(items.length, "items", "item")
11751
+ ]
11752
+ }
11753
+ )
11754
+ ] })
11755
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11756
+ /* @__PURE__ */ jsx(
11757
+ Tooltip,
11758
+ {
11759
+ content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
11760
+ var _a3, _b2, _c2;
11761
+ return /* @__PURE__ */ jsx(
11762
+ "li",
11763
+ {
11764
+ children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11765
+ },
11766
+ item.id
11767
+ );
11768
+ }) }),
11769
+ children: /* @__PURE__ */ jsxs(
11770
+ Badge,
11771
+ {
11772
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11773
+ size: "xsmall",
11774
+ children: [
11775
+ /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
11776
+ /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
11777
+ items.reduce(
11778
+ (acc, item) => acc + item.quantity,
11779
+ 0
11780
+ ),
11781
+ "x",
11782
+ " ",
11783
+ pluralize(items.length, "items", "item")
11784
+ ] })
11785
+ ]
11786
+ }
11787
+ )
11788
+ }
11789
+ ),
11790
+ /* @__PURE__ */ jsx(
11791
+ Tooltip,
11792
+ {
11793
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11794
+ children: /* @__PURE__ */ jsxs(
11795
+ Badge,
11796
+ {
11797
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11798
+ size: "xsmall",
11799
+ children: [
11800
+ /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
11801
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11802
+ ]
11803
+ }
11804
+ )
11805
+ }
11806
+ ),
11807
+ /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
11808
+ Badge,
11809
+ {
11810
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11811
+ size: "xsmall",
11812
+ children: [
11813
+ /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
11814
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
11815
+ ]
11816
+ }
11817
+ ) })
11818
+ ] })
11819
+ ] }),
11820
+ shippingOption ? /* @__PURE__ */ jsx(
11821
+ ActionMenu,
11822
+ {
11823
+ groups: [
11824
+ {
11825
+ actions: [
11826
+ hasItems ? {
11827
+ label: "Edit shipping option",
11828
+ icon: /* @__PURE__ */ jsx(Channels, {}),
11829
+ onClick: () => {
11830
+ setIsOpen(
11831
+ STACKED_FOCUS_MODAL_ID,
11832
+ true
11833
+ );
11834
+ setData({
11835
+ shippingProfileId: profile.id,
11836
+ shippingOption,
11837
+ shippingMethod
11838
+ });
11839
+ }
11840
+ } : void 0,
11841
+ {
11842
+ label: "Remove shipping option",
11843
+ icon: /* @__PURE__ */ jsx(Trash, {}),
11844
+ onClick: () => {
11845
+ if (shippingMethod) {
11846
+ if (addShippingMethodAction) {
11847
+ removeActionShippingMethod(
11848
+ addShippingMethodAction.id
11849
+ );
11850
+ } else {
11851
+ removeShippingMethod(
11852
+ shippingMethod.id
11853
+ );
11854
+ }
11855
+ }
11856
+ }
11857
+ }
11858
+ ].filter(Boolean)
11859
+ }
11860
+ ]
11861
+ }
11862
+ ) : /* @__PURE__ */ jsx(
11863
+ StackedModalTrigger,
11864
+ {
11865
+ shippingProfileId: profile.id,
11866
+ shippingOption,
11867
+ shippingMethod,
11868
+ setData,
11869
+ children: "Add shipping option"
11870
+ }
11871
+ )
11872
+ ] }),
11873
+ /* @__PURE__ */ jsxs(Accordion.Content, { children: [
11874
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11875
+ items.map((item, idx) => {
11876
+ var _a3, _b2, _c2, _d2, _e2;
11877
+ return /* @__PURE__ */ jsxs("div", { children: [
11878
+ /* @__PURE__ */ jsxs(
11879
+ "div",
11880
+ {
11881
+ className: "px-3 flex items-center gap-x-3",
11882
+ children: [
11883
+ /* @__PURE__ */ jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(
11884
+ Divider,
11885
+ {
11886
+ variant: "dashed",
11887
+ orientation: "vertical"
11888
+ }
11889
+ ) }),
11890
+ /* @__PURE__ */ jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11891
+ /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
11892
+ Text,
11893
+ {
11894
+ size: "small",
11895
+ leading: "compact",
11896
+ className: "text-ui-fg-subtle",
11897
+ children: [
11898
+ item.quantity,
11899
+ "x"
11900
+ ]
11901
+ }
11902
+ ) }),
11903
+ /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
11904
+ /* @__PURE__ */ jsxs("div", { children: [
11905
+ /* @__PURE__ */ jsxs(
11906
+ Text,
11907
+ {
11908
+ size: "small",
11909
+ leading: "compact",
11910
+ weight: "plus",
11911
+ children: [
11912
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11913
+ " (",
11914
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
11915
+ ")"
11916
+ ]
11917
+ }
11918
+ ),
11919
+ /* @__PURE__ */ jsx(
11920
+ Text,
11921
+ {
11922
+ size: "small",
11923
+ leading: "compact",
11924
+ className: "text-ui-fg-subtle",
11925
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11926
+ }
11927
+ )
11928
+ ] })
11929
+ ] })
11930
+ ]
11931
+ },
11932
+ item.id
11933
+ ),
11934
+ idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
11935
+ ] }, item.id);
11936
+ })
11937
+ ] })
12009
11938
  ]
12010
- }
12011
- )
12012
- ]
12013
- },
12014
- item.id
12015
- )) : /* @__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: [
12016
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12017
- /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12018
- 'No items found for "',
12019
- query,
12020
- '".'
12021
- ] })
12022
- ] }) })
12023
- ] })
12024
- ] });
12025
- };
12026
- const LocationField = ({ control, setValue }) => {
12027
- const locations = useComboboxData({
12028
- queryKey: ["locations"],
12029
- queryFn: async (params) => {
12030
- return await sdk.admin.stockLocation.list(params);
12031
- },
12032
- getOptions: (data) => {
12033
- return data.stock_locations.map((location) => ({
12034
- label: location.name,
12035
- value: location.id
12036
- }));
12037
- }
12038
- });
12039
- return /* @__PURE__ */ jsx(
12040
- Form$2.Field,
12041
- {
12042
- control,
12043
- name: "location_id",
12044
- render: ({ field: { onChange, ...field } }) => {
12045
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12046
- /* @__PURE__ */ jsxs("div", { children: [
12047
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12048
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12049
- ] }),
12050
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12051
- Combobox,
12052
- {
12053
- options: locations.options,
12054
- fetchNextPage: locations.fetchNextPage,
12055
- isFetchingNextPage: locations.isFetchingNextPage,
12056
- searchValue: locations.searchValue,
12057
- onSearchValueChange: locations.onSearchValueChange,
12058
- placeholder: "Select location",
12059
- onChange: (value) => {
12060
- setValue("shipping_option_id", "", {
12061
- shouldDirty: true,
12062
- shouldTouch: true
12063
- });
12064
- onChange(value);
12065
11939
  },
12066
- ...field
11940
+ profile.id
11941
+ );
11942
+ }) })
11943
+ ] }) })
11944
+ ] }) }),
11945
+ /* @__PURE__ */ jsx(
11946
+ StackedFocusModal,
11947
+ {
11948
+ id: STACKED_FOCUS_MODAL_ID,
11949
+ onOpenChangeCallback: (open) => {
11950
+ if (!open) {
11951
+ setData(null);
12067
11952
  }
12068
- ) })
12069
- ] }) });
12070
- }
12071
- }
12072
- );
11953
+ return open;
11954
+ },
11955
+ children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
11956
+ }
11957
+ )
11958
+ ] }),
11959
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
11960
+ /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11961
+ /* @__PURE__ */ jsx(
11962
+ Button,
11963
+ {
11964
+ size: "small",
11965
+ type: "button",
11966
+ isLoading: isSubmitting,
11967
+ onClick: onSubmit,
11968
+ children: "Save"
11969
+ }
11970
+ )
11971
+ ] }) })
11972
+ ] });
12073
11973
  };
12074
- const ShippingOptionField = ({
11974
+ const StackedModalTrigger = ({
12075
11975
  shippingProfileId,
12076
- preview,
12077
- control
11976
+ shippingOption,
11977
+ shippingMethod,
11978
+ setData,
11979
+ children
12078
11980
  }) => {
12079
- var _a;
12080
- const locationId = useWatch({ control, name: "location_id" });
12081
- const shippingOptions = useComboboxData({
12082
- queryKey: ["shipping_options", locationId, shippingProfileId],
12083
- queryFn: async (params) => {
12084
- return await sdk.admin.shippingOption.list({
12085
- ...params,
12086
- stock_location_id: locationId,
12087
- shipping_profile_id: shippingProfileId
11981
+ const { setIsOpen, getIsOpen } = useStackedModal();
11982
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11983
+ const onToggle = () => {
11984
+ if (isOpen) {
11985
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11986
+ setData(null);
11987
+ } else {
11988
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11989
+ setData({
11990
+ shippingProfileId,
11991
+ shippingOption,
11992
+ shippingMethod
12088
11993
  });
12089
- },
12090
- getOptions: (data) => {
12091
- return data.shipping_options.map((option) => {
12092
- var _a2;
12093
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12094
- (r) => r.attribute === "is_return" && r.value === "true"
12095
- )) {
12096
- return void 0;
12097
- }
12098
- return {
12099
- label: option.name,
12100
- value: option.id
12101
- };
12102
- }).filter(Boolean);
12103
- },
12104
- enabled: !!locationId && !!shippingProfileId,
12105
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12106
- });
12107
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12108
- return /* @__PURE__ */ jsx(
12109
- Form$2.Field,
12110
- {
12111
- control,
12112
- name: "shipping_option_id",
12113
- render: ({ field }) => {
12114
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12115
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12116
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12117
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12118
- ] }),
12119
- /* @__PURE__ */ jsx(
12120
- ConditionalTooltip,
12121
- {
12122
- content: tooltipContent,
12123
- showTooltip: !locationId || !shippingProfileId,
12124
- children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12125
- Combobox,
12126
- {
12127
- options: shippingOptions.options,
12128
- fetchNextPage: shippingOptions.fetchNextPage,
12129
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12130
- searchValue: shippingOptions.searchValue,
12131
- onSearchValueChange: shippingOptions.onSearchValueChange,
12132
- placeholder: "Select shipping option",
12133
- ...field,
12134
- disabled: !locationId || !shippingProfileId
12135
- }
12136
- ) }) })
12137
- }
12138
- )
12139
- ] }) });
12140
- }
12141
11994
  }
12142
- );
12143
- };
12144
- const CustomAmountField = ({
12145
- control,
12146
- currencyCode
12147
- }) => {
11995
+ };
12148
11996
  return /* @__PURE__ */ jsx(
12149
- Form$2.Field,
11997
+ Button,
12150
11998
  {
12151
- control,
12152
- name: "custom_amount",
12153
- render: ({ field: { onChange, ...field } }) => {
12154
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12155
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12156
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12157
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12158
- ] }),
12159
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12160
- CurrencyInput,
12161
- {
12162
- ...field,
12163
- onValueChange: (value) => onChange(value),
12164
- symbol: getNativeSymbol(currencyCode),
12165
- code: currencyCode
12166
- }
12167
- ) })
12168
- ] });
12169
- }
11999
+ size: "small",
12000
+ variant: "secondary",
12001
+ onClick: onToggle,
12002
+ className: "text-ui-fg-primary shrink-0",
12003
+ children
12170
12004
  }
12171
12005
  );
12172
12006
  };
12173
- const ShippingAddress = () => {
12174
- const { id } = useParams();
12175
- const { order, isPending, isError, error } = useOrder(id, {
12176
- fields: "+shipping_address"
12177
- });
12178
- if (isError) {
12179
- throw error;
12180
- }
12181
- const isReady = !isPending && !!order;
12182
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12183
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12184
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12185
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12186
- ] }),
12187
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12188
- ] });
12189
- };
12190
- const ShippingAddressForm = ({ order }) => {
12191
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12007
+ const ShippingProfileForm = ({
12008
+ data,
12009
+ order,
12010
+ preview
12011
+ }) => {
12012
+ var _a, _b, _c, _d, _e, _f;
12013
+ const { setIsOpen } = useStackedModal();
12192
12014
  const form = useForm({
12015
+ resolver: zodResolver(shippingMethodSchema),
12193
12016
  defaultValues: {
12194
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12195
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12196
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12197
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12198
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12199
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12200
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12201
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12202
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12203
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12204
- },
12205
- resolver: zodResolver(schema$2)
12017
+ location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12018
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12019
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12020
+ }
12206
12021
  });
12207
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12208
- const { handleSuccess } = useRouteModal();
12209
- const onSubmit = form.handleSubmit(async (data) => {
12210
- await mutateAsync(
12211
- {
12212
- shipping_address: {
12213
- first_name: data.first_name,
12214
- last_name: data.last_name,
12215
- company: data.company,
12216
- address_1: data.address_1,
12217
- address_2: data.address_2,
12218
- city: data.city,
12219
- province: data.province,
12220
- country_code: data.country_code,
12221
- postal_code: data.postal_code,
12222
- phone: data.phone
12022
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12023
+ const {
12024
+ mutateAsync: updateShippingMethod,
12025
+ isPending: isUpdatingShippingMethod
12026
+ } = useDraftOrderUpdateShippingMethod(order.id);
12027
+ const onSubmit = form.handleSubmit(async (values) => {
12028
+ if (isEqual(values, form.formState.defaultValues)) {
12029
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12030
+ return;
12031
+ }
12032
+ if (data.shippingMethod) {
12033
+ await updateShippingMethod(
12034
+ {
12035
+ method_id: data.shippingMethod.id,
12036
+ shipping_option_id: values.shipping_option_id,
12037
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12038
+ },
12039
+ {
12040
+ onError: (e) => {
12041
+ toast.error(e.message);
12042
+ },
12043
+ onSuccess: () => {
12044
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12045
+ }
12223
12046
  }
12047
+ );
12048
+ return;
12049
+ }
12050
+ await addShippingMethod(
12051
+ {
12052
+ shipping_option_id: values.shipping_option_id,
12053
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12224
12054
  },
12225
12055
  {
12226
- onSuccess: () => {
12227
- handleSuccess();
12056
+ onError: (e) => {
12057
+ toast.error(e.message);
12228
12058
  },
12229
- onError: (error) => {
12230
- toast.error(error.message);
12059
+ onSuccess: () => {
12060
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12231
12061
  }
12232
12062
  }
12233
12063
  );
12234
12064
  });
12235
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12065
+ return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12236
12066
  KeyboundForm,
12237
12067
  {
12238
- className: "flex flex-1 flex-col overflow-hidden",
12068
+ className: "flex h-full flex-col overflow-hidden",
12239
12069
  onSubmit,
12240
12070
  children: [
12241
- /* @__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: [
12071
+ /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12072
+ /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12073
+ /* @__PURE__ */ jsxs("div", { children: [
12074
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12075
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12076
+ ] }),
12077
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12242
12078
  /* @__PURE__ */ jsx(
12243
- Form$2.Field,
12079
+ LocationField,
12244
12080
  {
12245
12081
  control: form.control,
12246
- name: "country_code",
12247
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12248
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12249
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12250
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12251
- ] })
12082
+ setValue: form.setValue
12252
12083
  }
12253
12084
  ),
12254
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12255
- /* @__PURE__ */ jsx(
12256
- Form$2.Field,
12257
- {
12258
- control: form.control,
12259
- name: "first_name",
12260
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12261
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12262
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12263
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12264
- ] })
12265
- }
12266
- ),
12267
- /* @__PURE__ */ jsx(
12268
- Form$2.Field,
12269
- {
12270
- control: form.control,
12271
- name: "last_name",
12272
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12273
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12274
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12275
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12276
- ] })
12277
- }
12278
- )
12279
- ] }),
12085
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12280
12086
  /* @__PURE__ */ jsx(
12281
- Form$2.Field,
12087
+ ShippingOptionField,
12282
12088
  {
12283
- control: form.control,
12284
- name: "company",
12285
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12286
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12287
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12288
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12289
- ] })
12089
+ shippingProfileId: data.shippingProfileId,
12090
+ preview,
12091
+ control: form.control
12290
12092
  }
12291
12093
  ),
12094
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12292
12095
  /* @__PURE__ */ jsx(
12293
- Form$2.Field,
12096
+ CustomAmountField,
12294
12097
  {
12295
12098
  control: form.control,
12296
- name: "address_1",
12297
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12298
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12299
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12300
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12301
- ] })
12099
+ currencyCode: order.currency_code
12302
12100
  }
12303
12101
  ),
12102
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12304
12103
  /* @__PURE__ */ jsx(
12305
- Form$2.Field,
12104
+ ItemsPreview,
12306
12105
  {
12307
- control: form.control,
12308
- name: "address_2",
12309
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12310
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12311
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12312
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12313
- ] })
12106
+ order,
12107
+ shippingProfileId: data.shippingProfileId
12314
12108
  }
12315
- ),
12316
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12317
- /* @__PURE__ */ jsx(
12318
- Form$2.Field,
12319
- {
12320
- control: form.control,
12321
- name: "postal_code",
12322
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12323
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12324
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12325
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12326
- ] })
12327
- }
12328
- ),
12329
- /* @__PURE__ */ jsx(
12330
- Form$2.Field,
12331
- {
12332
- control: form.control,
12333
- name: "city",
12334
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12335
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12336
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12337
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12338
- ] })
12109
+ )
12110
+ ] }) }) }),
12111
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12112
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12113
+ /* @__PURE__ */ jsx(
12114
+ Button,
12115
+ {
12116
+ size: "small",
12117
+ type: "submit",
12118
+ isLoading: isPending || isUpdatingShippingMethod,
12119
+ children: data.shippingMethod ? "Update" : "Add"
12120
+ }
12121
+ )
12122
+ ] }) })
12123
+ ]
12124
+ }
12125
+ ) }) });
12126
+ };
12127
+ const shippingMethodSchema = objectType({
12128
+ location_id: stringType(),
12129
+ shipping_option_id: stringType(),
12130
+ custom_amount: unionType([numberType(), stringType()]).optional()
12131
+ });
12132
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12133
+ const matches = order.items.filter(
12134
+ (item) => {
12135
+ var _a, _b, _c;
12136
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12137
+ }
12138
+ );
12139
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12140
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12141
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12142
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12143
+ ] }) }),
12144
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12145
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12146
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12147
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12148
+ ] }),
12149
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
12150
+ "div",
12151
+ {
12152
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12153
+ children: [
12154
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12155
+ /* @__PURE__ */ jsx(
12156
+ Thumbnail,
12157
+ {
12158
+ thumbnail: item.thumbnail,
12159
+ alt: item.product_title ?? void 0
12160
+ }
12161
+ ),
12162
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12163
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12164
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12165
+ /* @__PURE__ */ jsxs(
12166
+ Text,
12167
+ {
12168
+ size: "small",
12169
+ leading: "compact",
12170
+ className: "text-ui-fg-subtle",
12171
+ children: [
12172
+ "(",
12173
+ item.variant_title,
12174
+ ")"
12175
+ ]
12176
+ }
12177
+ )
12178
+ ] }),
12179
+ /* @__PURE__ */ jsx(
12180
+ Text,
12181
+ {
12182
+ size: "small",
12183
+ leading: "compact",
12184
+ className: "text-ui-fg-subtle",
12185
+ children: item.variant_sku
12186
+ }
12187
+ )
12188
+ ] })
12189
+ ] }),
12190
+ /* @__PURE__ */ jsxs(
12191
+ Text,
12192
+ {
12193
+ size: "small",
12194
+ leading: "compact",
12195
+ className: "text-ui-fg-subtle",
12196
+ children: [
12197
+ item.quantity,
12198
+ "x"
12199
+ ]
12339
12200
  }
12340
12201
  )
12202
+ ]
12203
+ },
12204
+ item.id
12205
+ )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12206
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12207
+ /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12208
+ 'No items found for "',
12209
+ query,
12210
+ '".'
12211
+ ] })
12212
+ ] }) })
12213
+ ] })
12214
+ ] });
12215
+ };
12216
+ const LocationField = ({ control, setValue }) => {
12217
+ const locations = useComboboxData({
12218
+ queryKey: ["locations"],
12219
+ queryFn: async (params) => {
12220
+ return await sdk.admin.stockLocation.list(params);
12221
+ },
12222
+ getOptions: (data) => {
12223
+ return data.stock_locations.map((location) => ({
12224
+ label: location.name,
12225
+ value: location.id
12226
+ }));
12227
+ }
12228
+ });
12229
+ return /* @__PURE__ */ jsx(
12230
+ Form$2.Field,
12231
+ {
12232
+ control,
12233
+ name: "location_id",
12234
+ render: ({ field: { onChange, ...field } }) => {
12235
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12236
+ /* @__PURE__ */ jsxs("div", { children: [
12237
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12238
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12341
12239
  ] }),
12342
- /* @__PURE__ */ jsx(
12343
- Form$2.Field,
12240
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12241
+ Combobox,
12344
12242
  {
12345
- control: form.control,
12346
- name: "province",
12347
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12348
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12349
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12350
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12351
- ] })
12243
+ options: locations.options,
12244
+ fetchNextPage: locations.fetchNextPage,
12245
+ isFetchingNextPage: locations.isFetchingNextPage,
12246
+ searchValue: locations.searchValue,
12247
+ onSearchValueChange: locations.onSearchValueChange,
12248
+ placeholder: "Select location",
12249
+ onChange: (value) => {
12250
+ setValue("shipping_option_id", "", {
12251
+ shouldDirty: true,
12252
+ shouldTouch: true
12253
+ });
12254
+ onChange(value);
12255
+ },
12256
+ ...field
12352
12257
  }
12353
- ),
12258
+ ) })
12259
+ ] }) });
12260
+ }
12261
+ }
12262
+ );
12263
+ };
12264
+ const ShippingOptionField = ({
12265
+ shippingProfileId,
12266
+ preview,
12267
+ control
12268
+ }) => {
12269
+ var _a;
12270
+ const locationId = useWatch({ control, name: "location_id" });
12271
+ const shippingOptions = useComboboxData({
12272
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12273
+ queryFn: async (params) => {
12274
+ return await sdk.admin.shippingOption.list({
12275
+ ...params,
12276
+ stock_location_id: locationId,
12277
+ shipping_profile_id: shippingProfileId
12278
+ });
12279
+ },
12280
+ getOptions: (data) => {
12281
+ return data.shipping_options.map((option) => {
12282
+ var _a2;
12283
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12284
+ (r) => r.attribute === "is_return" && r.value === "true"
12285
+ )) {
12286
+ return void 0;
12287
+ }
12288
+ return {
12289
+ label: option.name,
12290
+ value: option.id
12291
+ };
12292
+ }).filter(Boolean);
12293
+ },
12294
+ enabled: !!locationId && !!shippingProfileId,
12295
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12296
+ });
12297
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12298
+ return /* @__PURE__ */ jsx(
12299
+ Form$2.Field,
12300
+ {
12301
+ control,
12302
+ name: "shipping_option_id",
12303
+ render: ({ field }) => {
12304
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12305
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12306
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12307
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12308
+ ] }),
12354
12309
  /* @__PURE__ */ jsx(
12355
- Form$2.Field,
12310
+ ConditionalTooltip,
12356
12311
  {
12357
- control: form.control,
12358
- name: "phone",
12359
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12360
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12361
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12362
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12363
- ] })
12312
+ content: tooltipContent,
12313
+ showTooltip: !locationId || !shippingProfileId,
12314
+ children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12315
+ Combobox,
12316
+ {
12317
+ options: shippingOptions.options,
12318
+ fetchNextPage: shippingOptions.fetchNextPage,
12319
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12320
+ searchValue: shippingOptions.searchValue,
12321
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12322
+ placeholder: "Select shipping option",
12323
+ ...field,
12324
+ disabled: !locationId || !shippingProfileId
12325
+ }
12326
+ ) }) })
12364
12327
  }
12365
12328
  )
12366
- ] }) }),
12367
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12368
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12369
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12370
- ] }) })
12371
- ]
12329
+ ] }) });
12330
+ }
12372
12331
  }
12373
- ) });
12332
+ );
12333
+ };
12334
+ const CustomAmountField = ({
12335
+ control,
12336
+ currencyCode
12337
+ }) => {
12338
+ return /* @__PURE__ */ jsx(
12339
+ Form$2.Field,
12340
+ {
12341
+ control,
12342
+ name: "custom_amount",
12343
+ render: ({ field: { onChange, ...field } }) => {
12344
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12345
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12346
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12347
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12348
+ ] }),
12349
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12350
+ CurrencyInput,
12351
+ {
12352
+ ...field,
12353
+ onValueChange: (value) => onChange(value),
12354
+ symbol: getNativeSymbol(currencyCode),
12355
+ code: currencyCode
12356
+ }
12357
+ ) })
12358
+ ] });
12359
+ }
12360
+ }
12361
+ );
12374
12362
  };
12375
- const schema$2 = addressSchema;
12376
12363
  const TransferOwnership = () => {
12377
12364
  const { id } = useParams();
12378
12365
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12849,10 +12836,10 @@ const Illustration = () => {
12849
12836
  const schema$1 = objectType({
12850
12837
  customer_id: stringType().min(1)
12851
12838
  });
12852
- const BillingAddress = () => {
12839
+ const ShippingAddress = () => {
12853
12840
  const { id } = useParams();
12854
12841
  const { order, isPending, isError, error } = useOrder(id, {
12855
- fields: "+billing_address"
12842
+ fields: "+shipping_address"
12856
12843
  });
12857
12844
  if (isError) {
12858
12845
  throw error;
@@ -12860,26 +12847,26 @@ const BillingAddress = () => {
12860
12847
  const isReady = !isPending && !!order;
12861
12848
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12862
12849
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12863
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
12864
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12850
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12851
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12865
12852
  ] }),
12866
- isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
12853
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12867
12854
  ] });
12868
12855
  };
12869
- const BillingAddressForm = ({ order }) => {
12856
+ const ShippingAddressForm = ({ order }) => {
12870
12857
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12871
12858
  const form = useForm({
12872
12859
  defaultValues: {
12873
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12874
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12875
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12876
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12877
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12878
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12879
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12880
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12881
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12882
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12860
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12861
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12862
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12863
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12864
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12865
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12866
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12867
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12868
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12869
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12883
12870
  },
12884
12871
  resolver: zodResolver(schema)
12885
12872
  });
@@ -12887,7 +12874,20 @@ const BillingAddressForm = ({ order }) => {
12887
12874
  const { handleSuccess } = useRouteModal();
12888
12875
  const onSubmit = form.handleSubmit(async (data) => {
12889
12876
  await mutateAsync(
12890
- { billing_address: data },
12877
+ {
12878
+ shipping_address: {
12879
+ first_name: data.first_name,
12880
+ last_name: data.last_name,
12881
+ company: data.company,
12882
+ address_1: data.address_1,
12883
+ address_2: data.address_2,
12884
+ city: data.city,
12885
+ province: data.province,
12886
+ country_code: data.country_code,
12887
+ postal_code: data.postal_code,
12888
+ phone: data.phone
12889
+ }
12890
+ },
12891
12891
  {
12892
12892
  onSuccess: () => {
12893
12893
  handleSuccess();
@@ -13059,6 +13059,10 @@ const routeModule = {
13059
13059
  handle,
13060
13060
  loader,
13061
13061
  children: [
13062
+ {
13063
+ Component: BillingAddress,
13064
+ path: "/draft-orders/:id/billing-address"
13065
+ },
13062
13066
  {
13063
13067
  Component: CustomItems,
13064
13068
  path: "/draft-orders/:id/custom-items"
@@ -13071,14 +13075,14 @@ const routeModule = {
13071
13075
  Component: Items,
13072
13076
  path: "/draft-orders/:id/items"
13073
13077
  },
13074
- {
13075
- Component: Promotions,
13076
- path: "/draft-orders/:id/promotions"
13077
- },
13078
13078
  {
13079
13079
  Component: Metadata,
13080
13080
  path: "/draft-orders/:id/metadata"
13081
13081
  },
13082
+ {
13083
+ Component: Promotions,
13084
+ path: "/draft-orders/:id/promotions"
13085
+ },
13082
13086
  {
13083
13087
  Component: SalesChannel,
13084
13088
  path: "/draft-orders/:id/sales-channel"
@@ -13087,17 +13091,13 @@ const routeModule = {
13087
13091
  Component: Shipping,
13088
13092
  path: "/draft-orders/:id/shipping"
13089
13093
  },
13090
- {
13091
- Component: ShippingAddress,
13092
- path: "/draft-orders/:id/shipping-address"
13093
- },
13094
13094
  {
13095
13095
  Component: TransferOwnership,
13096
13096
  path: "/draft-orders/:id/transfer-ownership"
13097
13097
  },
13098
13098
  {
13099
- Component: BillingAddress,
13100
- path: "/draft-orders/:id/billing-address"
13099
+ Component: ShippingAddress,
13100
+ path: "/draft-orders/:id/shipping-address"
13101
13101
  }
13102
13102
  ]
13103
13103
  }