@medusajs/draft-order 2.15.0 → 2.15.1-preview-20260511155840

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.
@@ -9899,27 +9899,6 @@ const ID = () => {
9899
9899
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9900
9900
  ] });
9901
9901
  };
9902
- const CustomItems = () => {
9903
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9904
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9905
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9906
- ] });
9907
- };
9908
- const CustomItemsForm = () => {
9909
- const form = reactHookForm.useForm({
9910
- resolver: zod.zodResolver(schema$5)
9911
- });
9912
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9913
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9914
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9915
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9916
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9917
- ] }) })
9918
- ] }) });
9919
- };
9920
- const schema$5 = object({
9921
- email: string().email()
9922
- });
9923
9902
  const BillingAddress = () => {
9924
9903
  const { id } = reactRouterDom.useParams();
9925
9904
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9952,7 +9931,7 @@ const BillingAddressForm = ({ order }) => {
9952
9931
  postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9953
9932
  phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9954
9933
  },
9955
- resolver: zod.zodResolver(schema$4)
9934
+ resolver: zod.zodResolver(schema$5)
9956
9935
  });
9957
9936
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9958
9937
  const { handleSuccess } = useRouteModal();
@@ -10109,7 +10088,96 @@ const BillingAddressForm = ({ order }) => {
10109
10088
  }
10110
10089
  ) });
10111
10090
  };
10112
- const schema$4 = addressSchema;
10091
+ const schema$5 = addressSchema;
10092
+ const CustomItems = () => {
10093
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10094
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
10095
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
10096
+ ] });
10097
+ };
10098
+ const CustomItemsForm = () => {
10099
+ const form = reactHookForm.useForm({
10100
+ resolver: zod.zodResolver(schema$4)
10101
+ });
10102
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
10103
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
10104
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10105
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10106
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
10107
+ ] }) })
10108
+ ] }) });
10109
+ };
10110
+ const schema$4 = object({
10111
+ email: string().email()
10112
+ });
10113
+ const Email = () => {
10114
+ const { id } = reactRouterDom.useParams();
10115
+ const { order, isPending, isError, error } = useOrder(id, {
10116
+ fields: "+email"
10117
+ });
10118
+ if (isError) {
10119
+ throw error;
10120
+ }
10121
+ const isReady = !isPending && !!order;
10122
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10123
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10124
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
10125
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10126
+ ] }),
10127
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
10128
+ ] });
10129
+ };
10130
+ const EmailForm = ({ order }) => {
10131
+ const form = reactHookForm.useForm({
10132
+ defaultValues: {
10133
+ email: order.email ?? ""
10134
+ },
10135
+ resolver: zod.zodResolver(schema$3)
10136
+ });
10137
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10138
+ const { handleSuccess } = useRouteModal();
10139
+ const onSubmit = form.handleSubmit(async (data) => {
10140
+ await mutateAsync(
10141
+ { email: data.email },
10142
+ {
10143
+ onSuccess: () => {
10144
+ handleSuccess();
10145
+ },
10146
+ onError: (error) => {
10147
+ ui.toast.error(error.message);
10148
+ }
10149
+ }
10150
+ );
10151
+ });
10152
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10153
+ KeyboundForm,
10154
+ {
10155
+ className: "flex flex-1 flex-col overflow-hidden",
10156
+ onSubmit,
10157
+ children: [
10158
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
10159
+ Form$2.Field,
10160
+ {
10161
+ control: form.control,
10162
+ name: "email",
10163
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10164
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
10165
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10166
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10167
+ ] })
10168
+ }
10169
+ ) }),
10170
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10171
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10172
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10173
+ ] }) })
10174
+ ]
10175
+ }
10176
+ ) });
10177
+ };
10178
+ const schema$3 = object({
10179
+ email: string().email()
10180
+ });
10113
10181
  const NumberInput = React.forwardRef(
10114
10182
  ({
10115
10183
  value,
@@ -11084,74 +11152,6 @@ const customItemSchema = object({
11084
11152
  quantity: number(),
11085
11153
  unit_price: union([number(), string()])
11086
11154
  });
11087
- const Email = () => {
11088
- const { id } = reactRouterDom.useParams();
11089
- const { order, isPending, isError, error } = useOrder(id, {
11090
- fields: "+email"
11091
- });
11092
- if (isError) {
11093
- throw error;
11094
- }
11095
- const isReady = !isPending && !!order;
11096
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11097
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11098
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
11099
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
11100
- ] }),
11101
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
11102
- ] });
11103
- };
11104
- const EmailForm = ({ order }) => {
11105
- const form = reactHookForm.useForm({
11106
- defaultValues: {
11107
- email: order.email ?? ""
11108
- },
11109
- resolver: zod.zodResolver(schema$3)
11110
- });
11111
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11112
- const { handleSuccess } = useRouteModal();
11113
- const onSubmit = form.handleSubmit(async (data) => {
11114
- await mutateAsync(
11115
- { email: data.email },
11116
- {
11117
- onSuccess: () => {
11118
- handleSuccess();
11119
- },
11120
- onError: (error) => {
11121
- ui.toast.error(error.message);
11122
- }
11123
- }
11124
- );
11125
- });
11126
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11127
- KeyboundForm,
11128
- {
11129
- className: "flex flex-1 flex-col overflow-hidden",
11130
- onSubmit,
11131
- children: [
11132
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
11133
- Form$2.Field,
11134
- {
11135
- control: form.control,
11136
- name: "email",
11137
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11138
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
11139
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11140
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11141
- ] })
11142
- }
11143
- ) }),
11144
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11145
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11146
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11147
- ] }) })
11148
- ]
11149
- }
11150
- ) });
11151
- };
11152
- const schema$3 = object({
11153
- email: string().email()
11154
- });
11155
11155
  const InlineTip = React.forwardRef(
11156
11156
  ({ variant = "tip", label, className, children, ...props }, ref) => {
11157
11157
  const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
@@ -11502,77 +11502,105 @@ function getHasUneditableRows(metadata) {
11502
11502
  (value) => !EDITABLE_TYPES.includes(typeof value)
11503
11503
  );
11504
11504
  }
11505
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11506
- const Shipping = () => {
11507
- var _a2;
11508
- const { id } = reactRouterDom.useParams();
11509
- const { order, isPending, isError, error } = useOrder(id, {
11510
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11505
+ const PROMOTION_QUERY_KEY = "promotions";
11506
+ const promotionsQueryKeys = {
11507
+ list: (query2) => [
11508
+ PROMOTION_QUERY_KEY,
11509
+ query2 ? query2 : void 0
11510
+ ],
11511
+ detail: (id, query2) => [
11512
+ PROMOTION_QUERY_KEY,
11513
+ id,
11514
+ query2 ? query2 : void 0
11515
+ ]
11516
+ };
11517
+ const usePromotions = (query2, options) => {
11518
+ const { data, ...rest } = reactQuery.useQuery({
11519
+ queryKey: promotionsQueryKeys.list(query2),
11520
+ queryFn: async () => sdk.admin.promotion.list(query2),
11521
+ ...options
11511
11522
  });
11523
+ return { ...data, ...rest };
11524
+ };
11525
+ const Promotions = () => {
11526
+ const { id } = reactRouterDom.useParams();
11512
11527
  const {
11513
11528
  order: preview,
11514
- isPending: isPreviewPending,
11515
11529
  isError: isPreviewError,
11516
11530
  error: previewError
11517
- } = useOrderPreview(id);
11531
+ } = useOrderPreview(id, void 0);
11518
11532
  useInitiateOrderEdit({ preview });
11519
11533
  const { onCancel } = useCancelOrderEdit({ preview });
11520
- if (isError) {
11521
- throw error;
11522
- }
11523
11534
  if (isPreviewError) {
11524
11535
  throw previewError;
11525
11536
  }
11526
- const orderHasItems = (((_a2 = order == null ? void 0 : order.items) == null ? void 0 : _a2.length) || 0) > 0;
11527
- const isReady = preview && !isPreviewPending && order && !isPending;
11528
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11529
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11530
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11531
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11532
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11533
- ] }) }) }),
11534
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11535
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11536
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11537
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11538
- ] }) });
11537
+ const isReady = !!preview;
11538
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
11539
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
11540
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
11541
+ ] });
11539
11542
  };
11540
- const ShippingForm = ({ preview, order }) => {
11541
- var _a2;
11542
- const { setIsOpen } = useStackedModal();
11543
+ const PromotionForm = ({ preview }) => {
11544
+ const { items, shipping_methods } = preview;
11543
11545
  const [isSubmitting, setIsSubmitting] = React.useState(false);
11544
- const [data, setData] = React.useState(null);
11545
- const appliedShippingOptionIds = (_a2 = preview.shipping_methods) == null ? void 0 : _a2.map((method) => method.shipping_option_id).filter(Boolean);
11546
- const { shipping_options } = useShippingOptions(
11546
+ const [comboboxValue, setComboboxValue] = React.useState("");
11547
+ const { handleSuccess } = useRouteModal();
11548
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11549
+ const promoIds = getPromotionIds(items, shipping_methods);
11550
+ const { promotions, isPending, isError, error } = usePromotions(
11547
11551
  {
11548
- id: appliedShippingOptionIds,
11549
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11552
+ id: promoIds
11550
11553
  },
11551
11554
  {
11552
- enabled: appliedShippingOptionIds.length > 0
11555
+ enabled: !!promoIds.length
11553
11556
  }
11554
11557
  );
11555
- const uniqueShippingProfiles = React.useMemo(() => {
11556
- const profiles = /* @__PURE__ */ new Map();
11557
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11558
- profiles.set(profile.id, profile);
11559
- });
11560
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11561
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11562
- });
11563
- return Array.from(profiles.values());
11564
- }, [order.items, shipping_options]);
11565
- const { handleSuccess } = useRouteModal();
11558
+ const comboboxData = useComboboxData({
11559
+ queryKey: ["promotions", "combobox", promoIds],
11560
+ queryFn: async (params) => {
11561
+ return await sdk.admin.promotion.list({
11562
+ ...params,
11563
+ id: {
11564
+ $nin: promoIds
11565
+ }
11566
+ });
11567
+ },
11568
+ getOptions: (data) => {
11569
+ return data.promotions.map((promotion) => ({
11570
+ label: promotion.code,
11571
+ value: promotion.code
11572
+ }));
11573
+ }
11574
+ });
11575
+ const add = async (value) => {
11576
+ if (!value) {
11577
+ return;
11578
+ }
11579
+ addPromotions(
11580
+ {
11581
+ promo_codes: [value]
11582
+ },
11583
+ {
11584
+ onError: (e) => {
11585
+ ui.toast.error(e.message);
11586
+ comboboxData.onSearchValueChange("");
11587
+ setComboboxValue("");
11588
+ },
11589
+ onSuccess: () => {
11590
+ comboboxData.onSearchValueChange("");
11591
+ setComboboxValue("");
11592
+ }
11593
+ }
11594
+ );
11595
+ };
11566
11596
  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11567
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11568
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11569
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11597
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11570
11598
  const onSubmit = async () => {
11571
11599
  setIsSubmitting(true);
11572
11600
  let requestSucceeded = false;
11573
11601
  await requestOrderEdit(void 0, {
11574
11602
  onError: (e) => {
11575
- ui.toast.error(`Failed to request order edit: ${e.message}`);
11603
+ ui.toast.error(e.message);
11576
11604
  },
11577
11605
  onSuccess: () => {
11578
11606
  requestSucceeded = true;
@@ -11584,7 +11612,7 @@ const ShippingForm = ({ preview, order }) => {
11584
11612
  }
11585
11613
  await confirmOrderEdit(void 0, {
11586
11614
  onError: (e) => {
11587
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11615
+ ui.toast.error(e.message);
11588
11616
  },
11589
11617
  onSuccess: () => {
11590
11618
  handleSuccess();
@@ -11594,1201 +11622,1076 @@ const ShippingForm = ({ preview, order }) => {
11594
11622
  }
11595
11623
  });
11596
11624
  };
11597
- const onKeydown = React.useCallback(
11598
- (e) => {
11599
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11600
- if (data || isSubmitting) {
11601
- return;
11625
+ if (isError) {
11626
+ throw error;
11627
+ }
11628
+ return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11629
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
11630
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
11631
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11632
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11633
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11634
+ ] }),
11635
+ /* @__PURE__ */ jsxRuntime.jsx(
11636
+ Combobox,
11637
+ {
11638
+ id: "promotion-combobox",
11639
+ "aria-describedby": "promotion-combobox-hint",
11640
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
11641
+ fetchNextPage: comboboxData.fetchNextPage,
11642
+ options: comboboxData.options,
11643
+ onSearchValueChange: comboboxData.onSearchValueChange,
11644
+ searchValue: comboboxData.searchValue,
11645
+ disabled: comboboxData.disabled || isAddingPromotions,
11646
+ onChange: add,
11647
+ value: comboboxValue
11648
+ }
11649
+ )
11650
+ ] }),
11651
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11652
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
11653
+ PromotionItem,
11654
+ {
11655
+ promotion,
11656
+ orderId: preview.id,
11657
+ isLoading: isPending
11658
+ },
11659
+ promotion.id
11660
+ )) })
11661
+ ] }) }),
11662
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11663
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11664
+ /* @__PURE__ */ jsxRuntime.jsx(
11665
+ ui.Button,
11666
+ {
11667
+ size: "small",
11668
+ type: "submit",
11669
+ isLoading: isSubmitting || isAddingPromotions,
11670
+ children: "Save"
11671
+ }
11672
+ )
11673
+ ] }) })
11674
+ ] });
11675
+ };
11676
+ const PromotionItem = ({
11677
+ promotion,
11678
+ orderId,
11679
+ isLoading
11680
+ }) => {
11681
+ var _a2;
11682
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11683
+ const onRemove = async () => {
11684
+ removePromotions(
11685
+ {
11686
+ promo_codes: [promotion.code]
11687
+ },
11688
+ {
11689
+ onError: (e) => {
11690
+ ui.toast.error(e.message);
11602
11691
  }
11603
- onSubmit();
11604
11692
  }
11605
- },
11606
- [data, isSubmitting, onSubmit]
11607
- );
11608
- React.useEffect(() => {
11609
- document.addEventListener("keydown", onKeydown);
11610
- return () => {
11611
- document.removeEventListener("keydown", onKeydown);
11612
- };
11613
- }, [onKeydown]);
11614
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11615
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11616
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11617
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11693
+ );
11694
+ };
11695
+ const displayValue = getDisplayValue(promotion);
11696
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11697
+ "div",
11698
+ {
11699
+ className: ui.clx(
11700
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11701
+ {
11702
+ "animate-pulse": isLoading
11703
+ }
11704
+ ),
11705
+ children: [
11618
11706
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11619
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11620
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11707
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11708
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11709
+ displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11710
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11711
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11712
+ ] }),
11713
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a2 = promotion.application_method) == null ? void 0 : _a2.allocation })
11714
+ ] })
11621
11715
  ] }),
11622
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11623
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11624
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
11625
- /* @__PURE__ */ jsxRuntime.jsx(
11626
- ui.Text,
11627
- {
11628
- size: "xsmall",
11629
- weight: "plus",
11630
- className: "text-ui-fg-muted",
11631
- children: "Shipping profile"
11632
- }
11633
- ),
11634
- /* @__PURE__ */ jsxRuntime.jsx(
11635
- ui.Text,
11636
- {
11637
- size: "xsmall",
11638
- weight: "plus",
11639
- className: "text-ui-fg-muted",
11640
- children: "Action"
11641
- }
11642
- )
11643
- ] }),
11644
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11645
- var _a3, _b, _c, _d, _e, _f, _g;
11646
- const items = getItemsWithShippingProfile(
11647
- profile.id,
11648
- order.items
11649
- );
11650
- const hasItems = items.length > 0;
11651
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11652
- (option) => option.shipping_profile_id === profile.id
11653
- );
11654
- const shippingMethod = preview.shipping_methods.find(
11655
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11656
- );
11657
- const addShippingMethodAction = (_a3 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a3.find(
11658
- (action) => action.action === "SHIPPING_ADD"
11659
- );
11660
- return /* @__PURE__ */ jsxRuntime.jsxs(
11661
- radixUi.Accordion.Item,
11662
- {
11663
- value: profile.id,
11664
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11665
- children: [
11666
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
11667
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
11668
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11669
- ui.IconButton,
11670
- {
11671
- size: "2xsmall",
11672
- variant: "transparent",
11673
- className: "group/trigger",
11674
- disabled: !hasItems,
11675
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
11676
- }
11677
- ) }),
11678
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11679
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
11680
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
11681
- /* @__PURE__ */ jsxRuntime.jsx(
11682
- ui.Text,
11683
- {
11684
- size: "small",
11685
- weight: "plus",
11686
- leading: "compact",
11687
- children: profile.name
11688
- }
11689
- ),
11690
- /* @__PURE__ */ jsxRuntime.jsxs(
11691
- ui.Text,
11692
- {
11693
- size: "small",
11694
- leading: "compact",
11695
- className: "text-ui-fg-subtle",
11696
- children: [
11697
- items.length,
11698
- " ",
11699
- pluralize(items.length, "items", "item")
11700
- ]
11701
- }
11702
- )
11703
- ] })
11704
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
11705
- /* @__PURE__ */ jsxRuntime.jsx(
11706
- ui.Tooltip,
11707
- {
11708
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
11709
- var _a4, _b2, _c2;
11710
- return /* @__PURE__ */ jsxRuntime.jsx(
11711
- "li",
11712
- {
11713
- children: `${item.quantity}x ${(_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11714
- },
11715
- item.id
11716
- );
11717
- }) }),
11718
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11719
- ui.Badge,
11720
- {
11721
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11722
- size: "xsmall",
11723
- children: [
11724
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
11725
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
11726
- items.reduce(
11727
- (acc, item) => acc + item.quantity,
11728
- 0
11729
- ),
11730
- "x",
11731
- " ",
11732
- pluralize(items.length, "items", "item")
11733
- ] })
11734
- ]
11735
- }
11736
- )
11737
- }
11738
- ),
11739
- /* @__PURE__ */ jsxRuntime.jsx(
11740
- ui.Tooltip,
11741
- {
11742
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11743
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11744
- ui.Badge,
11745
- {
11746
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11747
- size: "xsmall",
11748
- children: [
11749
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
11750
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11751
- ]
11752
- }
11753
- )
11754
- }
11755
- ),
11756
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11757
- ui.Badge,
11758
- {
11759
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11760
- size: "xsmall",
11761
- children: [
11762
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
11763
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
11764
- ]
11765
- }
11766
- ) })
11767
- ] })
11768
- ] }),
11769
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
11770
- ActionMenu,
11771
- {
11772
- groups: [
11773
- {
11774
- actions: [
11775
- hasItems ? {
11776
- label: "Edit shipping option",
11777
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
11778
- onClick: () => {
11779
- setIsOpen(
11780
- STACKED_FOCUS_MODAL_ID,
11781
- true
11782
- );
11783
- setData({
11784
- shippingProfileId: profile.id,
11785
- shippingOption,
11786
- shippingMethod
11787
- });
11788
- }
11789
- } : void 0,
11790
- {
11791
- label: "Remove shipping option",
11792
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
11793
- onClick: () => {
11794
- if (shippingMethod) {
11795
- if (addShippingMethodAction) {
11796
- removeActionShippingMethod(
11797
- addShippingMethodAction.id
11798
- );
11799
- } else {
11800
- removeShippingMethod(
11801
- shippingMethod.id
11802
- );
11803
- }
11804
- }
11805
- }
11806
- }
11807
- ].filter(Boolean)
11808
- }
11809
- ]
11810
- }
11811
- ) : /* @__PURE__ */ jsxRuntime.jsx(
11812
- StackedModalTrigger,
11813
- {
11814
- shippingProfileId: profile.id,
11815
- shippingOption,
11816
- shippingMethod,
11817
- setData,
11818
- children: "Add shipping option"
11819
- }
11820
- )
11821
- ] }),
11822
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
11823
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11824
- items.map((item, idx) => {
11825
- var _a4, _b2, _c2, _d2, _e2;
11826
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11827
- /* @__PURE__ */ jsxRuntime.jsxs(
11828
- "div",
11829
- {
11830
- className: "flex items-center gap-x-3 px-3",
11831
- children: [
11832
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11833
- ui.Divider,
11834
- {
11835
- variant: "dashed",
11836
- orientation: "vertical"
11837
- }
11838
- ) }),
11839
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
11840
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11841
- ui.Text,
11842
- {
11843
- size: "small",
11844
- leading: "compact",
11845
- className: "text-ui-fg-subtle",
11846
- children: [
11847
- item.quantity,
11848
- "x"
11849
- ]
11850
- }
11851
- ) }),
11852
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
11853
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11854
- /* @__PURE__ */ jsxRuntime.jsxs(
11855
- ui.Text,
11856
- {
11857
- size: "small",
11858
- leading: "compact",
11859
- weight: "plus",
11860
- children: [
11861
- (_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title,
11862
- " (",
11863
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11864
- ")"
11865
- ]
11866
- }
11867
- ),
11868
- /* @__PURE__ */ jsxRuntime.jsx(
11869
- ui.Text,
11870
- {
11871
- size: "small",
11872
- leading: "compact",
11873
- className: "text-ui-fg-subtle",
11874
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11875
- }
11876
- )
11877
- ] })
11878
- ] })
11879
- ]
11880
- },
11881
- item.id
11882
- ),
11883
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
11884
- ] }, item.id);
11885
- })
11886
- ] })
11887
- ]
11888
- },
11889
- profile.id
11890
- );
11891
- }) })
11892
- ] }) })
11893
- ] }) }),
11894
- /* @__PURE__ */ jsxRuntime.jsx(
11895
- StackedFocusModal,
11896
- {
11897
- id: STACKED_FOCUS_MODAL_ID,
11898
- onOpenChangeCallback: (open) => {
11899
- if (!open) {
11900
- setData(null);
11901
- }
11902
- return open;
11903
- },
11904
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11716
+ /* @__PURE__ */ jsxRuntime.jsx(
11717
+ ui.IconButton,
11718
+ {
11719
+ size: "small",
11720
+ type: "button",
11721
+ variant: "transparent",
11722
+ onClick: onRemove,
11723
+ isLoading: isPending || isLoading,
11724
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
11725
+ }
11726
+ )
11727
+ ]
11728
+ },
11729
+ promotion.id
11730
+ );
11731
+ };
11732
+ function getDisplayValue(promotion) {
11733
+ var _a2, _b, _c, _d;
11734
+ const value = (_a2 = promotion.application_method) == null ? void 0 : _a2.value;
11735
+ if (!value) {
11736
+ return null;
11737
+ }
11738
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11739
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11740
+ if (!currency) {
11741
+ return null;
11742
+ }
11743
+ return getLocaleAmount(value, currency);
11744
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11745
+ return formatPercentage(value);
11746
+ }
11747
+ return null;
11748
+ }
11749
+ const formatter = new Intl.NumberFormat([], {
11750
+ style: "percent",
11751
+ minimumFractionDigits: 2
11752
+ });
11753
+ const formatPercentage = (value, isPercentageValue = false) => {
11754
+ let val = value || 0;
11755
+ if (!isPercentageValue) {
11756
+ val = val / 100;
11757
+ }
11758
+ return formatter.format(val);
11759
+ };
11760
+ function getPromotionIds(items, shippingMethods) {
11761
+ const promotionIds = /* @__PURE__ */ new Set();
11762
+ for (const item of items) {
11763
+ if (item.adjustments) {
11764
+ for (const adjustment of item.adjustments) {
11765
+ if (adjustment.promotion_id) {
11766
+ promotionIds.add(adjustment.promotion_id);
11905
11767
  }
11906
- )
11907
- ] }),
11908
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11909
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11910
- /* @__PURE__ */ jsxRuntime.jsx(
11911
- ui.Button,
11912
- {
11913
- size: "small",
11914
- type: "button",
11915
- isLoading: isSubmitting,
11916
- onClick: onSubmit,
11917
- children: "Save"
11768
+ }
11769
+ }
11770
+ }
11771
+ for (const shippingMethod of shippingMethods) {
11772
+ if (shippingMethod.adjustments) {
11773
+ for (const adjustment of shippingMethod.adjustments) {
11774
+ if (adjustment.promotion_id) {
11775
+ promotionIds.add(adjustment.promotion_id);
11918
11776
  }
11919
- )
11920
- ] }) })
11921
- ] });
11922
- };
11923
- const StackedModalTrigger = ({
11924
- shippingProfileId,
11925
- shippingOption,
11926
- shippingMethod,
11927
- setData,
11928
- children
11929
- }) => {
11930
- const { setIsOpen, getIsOpen } = useStackedModal();
11931
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11932
- const onToggle = () => {
11933
- if (isOpen) {
11934
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11935
- setData(null);
11936
- } else {
11937
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11938
- setData({
11939
- shippingProfileId,
11940
- shippingOption,
11941
- shippingMethod
11942
- });
11777
+ }
11943
11778
  }
11944
- };
11945
- return /* @__PURE__ */ jsxRuntime.jsx(
11946
- ui.Button,
11779
+ }
11780
+ return Array.from(promotionIds);
11781
+ }
11782
+ const SalesChannel = () => {
11783
+ const { id } = reactRouterDom.useParams();
11784
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11785
+ id,
11947
11786
  {
11948
- size: "small",
11949
- variant: "secondary",
11950
- onClick: onToggle,
11951
- className: "text-ui-fg-primary shrink-0",
11952
- children
11787
+ fields: "+sales_channel_id"
11788
+ },
11789
+ {
11790
+ enabled: !!id
11953
11791
  }
11954
11792
  );
11793
+ if (isError) {
11794
+ throw error;
11795
+ }
11796
+ const ISrEADY = !!draft_order && !isPending;
11797
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11798
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11799
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11800
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11801
+ ] }),
11802
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11803
+ ] });
11955
11804
  };
11956
- const ShippingProfileForm = ({
11957
- data,
11958
- order,
11959
- preview
11960
- }) => {
11961
- var _a2, _b, _c, _d, _e, _f;
11962
- const { setIsOpen } = useStackedModal();
11805
+ const SalesChannelForm = ({ order }) => {
11963
11806
  const form = reactHookForm.useForm({
11964
- resolver: zod.zodResolver(shippingMethodSchema),
11965
11807
  defaultValues: {
11966
- location_id: (_d = (_c = (_b = (_a2 = data.shippingOption) == null ? void 0 : _a2.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
11967
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
11968
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
11969
- }
11808
+ sales_channel_id: order.sales_channel_id || ""
11809
+ },
11810
+ resolver: zod.zodResolver(schema$2)
11970
11811
  });
11971
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
11972
- const {
11973
- mutateAsync: updateShippingMethod,
11974
- isPending: isUpdatingShippingMethod
11975
- } = useDraftOrderUpdateShippingMethod(order.id);
11976
- const onSubmit = form.handleSubmit(async (values) => {
11977
- if (isEqual__default.default(values, form.formState.defaultValues)) {
11978
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11979
- return;
11980
- }
11981
- if (data.shippingMethod) {
11982
- await updateShippingMethod(
11983
- {
11984
- method_id: data.shippingMethod.id,
11985
- shipping_option_id: values.shipping_option_id,
11986
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11987
- },
11988
- {
11989
- onError: (e) => {
11990
- ui.toast.error(e.message);
11991
- },
11992
- onSuccess: () => {
11993
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11994
- }
11995
- }
11996
- );
11997
- return;
11998
- }
11999
- await addShippingMethod(
11812
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11813
+ const { handleSuccess } = useRouteModal();
11814
+ const onSubmit = form.handleSubmit(async (data) => {
11815
+ await mutateAsync(
12000
11816
  {
12001
- shipping_option_id: values.shipping_option_id,
12002
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11817
+ sales_channel_id: data.sales_channel_id
12003
11818
  },
12004
11819
  {
12005
- onError: (e) => {
12006
- ui.toast.error(e.message);
12007
- },
12008
11820
  onSuccess: () => {
12009
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11821
+ ui.toast.success("Sales channel updated");
11822
+ handleSuccess();
11823
+ },
11824
+ onError: (error) => {
11825
+ ui.toast.error(error.message);
12010
11826
  }
12011
11827
  }
12012
11828
  );
12013
11829
  });
12014
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11830
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12015
11831
  KeyboundForm,
12016
11832
  {
12017
- className: "flex h-full flex-col overflow-hidden",
11833
+ className: "flex flex-1 flex-col overflow-hidden",
12018
11834
  onSubmit,
12019
11835
  children: [
12020
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12021
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12022
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12023
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12024
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12025
- ] }),
12026
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12027
- /* @__PURE__ */ jsxRuntime.jsx(
12028
- LocationField,
12029
- {
12030
- control: form.control,
12031
- setValue: form.setValue
12032
- }
12033
- ),
12034
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12035
- /* @__PURE__ */ jsxRuntime.jsx(
12036
- ShippingOptionField,
12037
- {
12038
- shippingProfileId: data.shippingProfileId,
12039
- preview,
12040
- control: form.control
12041
- }
12042
- ),
12043
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12044
- /* @__PURE__ */ jsxRuntime.jsx(
12045
- CustomAmountField,
12046
- {
12047
- control: form.control,
12048
- currencyCode: order.currency_code
12049
- }
12050
- ),
12051
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12052
- /* @__PURE__ */ jsxRuntime.jsx(
12053
- ItemsPreview,
12054
- {
12055
- order,
12056
- shippingProfileId: data.shippingProfileId
12057
- }
12058
- )
12059
- ] }) }) }),
12060
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12061
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12062
- /* @__PURE__ */ jsxRuntime.jsx(
12063
- ui.Button,
12064
- {
12065
- size: "small",
12066
- type: "submit",
12067
- isLoading: isPending || isUpdatingShippingMethod,
12068
- children: data.shippingMethod ? "Update" : "Add"
12069
- }
12070
- )
11836
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11837
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11838
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11839
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12071
11840
  ] }) })
12072
11841
  ]
12073
11842
  }
12074
- ) }) });
11843
+ ) });
12075
11844
  };
12076
- const shippingMethodSchema = object({
12077
- location_id: string(),
12078
- shipping_option_id: string(),
12079
- custom_amount: union([number(), string()]).optional()
11845
+ const SalesChannelField = ({ control, order }) => {
11846
+ const salesChannels = useComboboxData({
11847
+ queryFn: async (params) => {
11848
+ return await sdk.admin.salesChannel.list(params);
11849
+ },
11850
+ queryKey: ["sales-channels"],
11851
+ getOptions: (data) => {
11852
+ return data.sales_channels.map((salesChannel) => ({
11853
+ label: salesChannel.name,
11854
+ value: salesChannel.id
11855
+ }));
11856
+ },
11857
+ defaultValue: order.sales_channel_id || void 0
11858
+ });
11859
+ return /* @__PURE__ */ jsxRuntime.jsx(
11860
+ Form$2.Field,
11861
+ {
11862
+ control,
11863
+ name: "sales_channel_id",
11864
+ render: ({ field }) => {
11865
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11866
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11867
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11868
+ Combobox,
11869
+ {
11870
+ options: salesChannels.options,
11871
+ fetchNextPage: salesChannels.fetchNextPage,
11872
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11873
+ searchValue: salesChannels.searchValue,
11874
+ onSearchValueChange: salesChannels.onSearchValueChange,
11875
+ placeholder: "Select sales channel",
11876
+ ...field
11877
+ }
11878
+ ) }),
11879
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11880
+ ] });
11881
+ }
11882
+ }
11883
+ );
11884
+ };
11885
+ const schema$2 = object({
11886
+ sales_channel_id: string().min(1)
12080
11887
  });
12081
- const ItemsPreview = ({ order, shippingProfileId }) => {
12082
- const matches = order.items.filter(
12083
- (item) => {
12084
- var _a2, _b, _c;
12085
- return ((_c = (_b = (_a2 = item.variant) == null ? void 0 : _a2.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
11888
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11889
+ const Shipping = () => {
11890
+ var _a2;
11891
+ const { id } = reactRouterDom.useParams();
11892
+ const { order, isPending, isError, error } = useOrder(id, {
11893
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11894
+ });
11895
+ const {
11896
+ order: preview,
11897
+ isPending: isPreviewPending,
11898
+ isError: isPreviewError,
11899
+ error: previewError
11900
+ } = useOrderPreview(id);
11901
+ useInitiateOrderEdit({ preview });
11902
+ const { onCancel } = useCancelOrderEdit({ preview });
11903
+ if (isError) {
11904
+ throw error;
11905
+ }
11906
+ if (isPreviewError) {
11907
+ throw previewError;
11908
+ }
11909
+ const orderHasItems = (((_a2 = order == null ? void 0 : order.items) == null ? void 0 : _a2.length) || 0) > 0;
11910
+ const isReady = preview && !isPreviewPending && order && !isPending;
11911
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11912
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11913
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
11914
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11915
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11916
+ ] }) }) }),
11917
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11918
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11919
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11920
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11921
+ ] }) });
11922
+ };
11923
+ const ShippingForm = ({ preview, order }) => {
11924
+ var _a2;
11925
+ const { setIsOpen } = useStackedModal();
11926
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11927
+ const [data, setData] = React.useState(null);
11928
+ const appliedShippingOptionIds = (_a2 = preview.shipping_methods) == null ? void 0 : _a2.map((method) => method.shipping_option_id).filter(Boolean);
11929
+ const { shipping_options } = useShippingOptions(
11930
+ {
11931
+ id: appliedShippingOptionIds,
11932
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11933
+ },
11934
+ {
11935
+ enabled: appliedShippingOptionIds.length > 0
12086
11936
  }
12087
11937
  );
12088
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12089
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12090
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12091
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12092
- ] }) }),
12093
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12094
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12095
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12096
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12097
- ] }),
12098
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12099
- "div",
12100
- {
12101
- className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12102
- children: [
12103
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12104
- /* @__PURE__ */ jsxRuntime.jsx(
12105
- Thumbnail,
12106
- {
12107
- thumbnail: item.thumbnail,
12108
- alt: item.product_title ?? void 0
12109
- }
12110
- ),
12111
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12112
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12113
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12114
- /* @__PURE__ */ jsxRuntime.jsxs(
12115
- ui.Text,
12116
- {
12117
- size: "small",
12118
- leading: "compact",
12119
- className: "text-ui-fg-subtle",
12120
- children: [
12121
- "(",
12122
- item.variant_title,
12123
- ")"
12124
- ]
12125
- }
12126
- )
12127
- ] }),
12128
- /* @__PURE__ */ jsxRuntime.jsx(
12129
- ui.Text,
12130
- {
12131
- size: "small",
12132
- leading: "compact",
12133
- className: "text-ui-fg-subtle",
12134
- children: item.variant_sku
12135
- }
12136
- )
12137
- ] })
12138
- ] }),
12139
- /* @__PURE__ */ jsxRuntime.jsxs(
11938
+ const uniqueShippingProfiles = React.useMemo(() => {
11939
+ const profiles = /* @__PURE__ */ new Map();
11940
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11941
+ profiles.set(profile.id, profile);
11942
+ });
11943
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11944
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11945
+ });
11946
+ return Array.from(profiles.values());
11947
+ }, [order.items, shipping_options]);
11948
+ const { handleSuccess } = useRouteModal();
11949
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11950
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11951
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11952
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11953
+ const onSubmit = async () => {
11954
+ setIsSubmitting(true);
11955
+ let requestSucceeded = false;
11956
+ await requestOrderEdit(void 0, {
11957
+ onError: (e) => {
11958
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
11959
+ },
11960
+ onSuccess: () => {
11961
+ requestSucceeded = true;
11962
+ }
11963
+ });
11964
+ if (!requestSucceeded) {
11965
+ setIsSubmitting(false);
11966
+ return;
11967
+ }
11968
+ await confirmOrderEdit(void 0, {
11969
+ onError: (e) => {
11970
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11971
+ },
11972
+ onSuccess: () => {
11973
+ handleSuccess();
11974
+ },
11975
+ onSettled: () => {
11976
+ setIsSubmitting(false);
11977
+ }
11978
+ });
11979
+ };
11980
+ const onKeydown = React.useCallback(
11981
+ (e) => {
11982
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11983
+ if (data || isSubmitting) {
11984
+ return;
11985
+ }
11986
+ onSubmit();
11987
+ }
11988
+ },
11989
+ [data, isSubmitting, onSubmit]
11990
+ );
11991
+ React.useEffect(() => {
11992
+ document.addEventListener("keydown", onKeydown);
11993
+ return () => {
11994
+ document.removeEventListener("keydown", onKeydown);
11995
+ };
11996
+ }, [onKeydown]);
11997
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11998
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11999
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12000
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12001
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12002
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12003
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
12004
+ ] }),
12005
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12006
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12007
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
12008
+ /* @__PURE__ */ jsxRuntime.jsx(
12140
12009
  ui.Text,
12141
12010
  {
12142
- size: "small",
12143
- leading: "compact",
12144
- className: "text-ui-fg-subtle",
12011
+ size: "xsmall",
12012
+ weight: "plus",
12013
+ className: "text-ui-fg-muted",
12014
+ children: "Shipping profile"
12015
+ }
12016
+ ),
12017
+ /* @__PURE__ */ jsxRuntime.jsx(
12018
+ ui.Text,
12019
+ {
12020
+ size: "xsmall",
12021
+ weight: "plus",
12022
+ className: "text-ui-fg-muted",
12023
+ children: "Action"
12024
+ }
12025
+ )
12026
+ ] }),
12027
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12028
+ var _a3, _b, _c, _d, _e, _f, _g;
12029
+ const items = getItemsWithShippingProfile(
12030
+ profile.id,
12031
+ order.items
12032
+ );
12033
+ const hasItems = items.length > 0;
12034
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12035
+ (option) => option.shipping_profile_id === profile.id
12036
+ );
12037
+ const shippingMethod = preview.shipping_methods.find(
12038
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12039
+ );
12040
+ const addShippingMethodAction = (_a3 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a3.find(
12041
+ (action) => action.action === "SHIPPING_ADD"
12042
+ );
12043
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12044
+ radixUi.Accordion.Item,
12045
+ {
12046
+ value: profile.id,
12047
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12145
12048
  children: [
12146
- item.quantity,
12147
- "x"
12049
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
12050
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
12051
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
12052
+ ui.IconButton,
12053
+ {
12054
+ size: "2xsmall",
12055
+ variant: "transparent",
12056
+ className: "group/trigger",
12057
+ disabled: !hasItems,
12058
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
12059
+ }
12060
+ ) }),
12061
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12062
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
12063
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
12064
+ /* @__PURE__ */ jsxRuntime.jsx(
12065
+ ui.Text,
12066
+ {
12067
+ size: "small",
12068
+ weight: "plus",
12069
+ leading: "compact",
12070
+ children: profile.name
12071
+ }
12072
+ ),
12073
+ /* @__PURE__ */ jsxRuntime.jsxs(
12074
+ ui.Text,
12075
+ {
12076
+ size: "small",
12077
+ leading: "compact",
12078
+ className: "text-ui-fg-subtle",
12079
+ children: [
12080
+ items.length,
12081
+ " ",
12082
+ pluralize(items.length, "items", "item")
12083
+ ]
12084
+ }
12085
+ )
12086
+ ] })
12087
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
12088
+ /* @__PURE__ */ jsxRuntime.jsx(
12089
+ ui.Tooltip,
12090
+ {
12091
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
12092
+ var _a4, _b2, _c2;
12093
+ return /* @__PURE__ */ jsxRuntime.jsx(
12094
+ "li",
12095
+ {
12096
+ children: `${item.quantity}x ${(_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
12097
+ },
12098
+ item.id
12099
+ );
12100
+ }) }),
12101
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12102
+ ui.Badge,
12103
+ {
12104
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12105
+ size: "xsmall",
12106
+ children: [
12107
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
12108
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
12109
+ items.reduce(
12110
+ (acc, item) => acc + item.quantity,
12111
+ 0
12112
+ ),
12113
+ "x",
12114
+ " ",
12115
+ pluralize(items.length, "items", "item")
12116
+ ] })
12117
+ ]
12118
+ }
12119
+ )
12120
+ }
12121
+ ),
12122
+ /* @__PURE__ */ jsxRuntime.jsx(
12123
+ ui.Tooltip,
12124
+ {
12125
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12126
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12127
+ ui.Badge,
12128
+ {
12129
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12130
+ size: "xsmall",
12131
+ children: [
12132
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
12133
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
12134
+ ]
12135
+ }
12136
+ )
12137
+ }
12138
+ ),
12139
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
12140
+ ui.Badge,
12141
+ {
12142
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
12143
+ size: "xsmall",
12144
+ children: [
12145
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
12146
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
12147
+ ]
12148
+ }
12149
+ ) })
12150
+ ] })
12151
+ ] }),
12152
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
12153
+ ActionMenu,
12154
+ {
12155
+ groups: [
12156
+ {
12157
+ actions: [
12158
+ hasItems ? {
12159
+ label: "Edit shipping option",
12160
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
12161
+ onClick: () => {
12162
+ setIsOpen(
12163
+ STACKED_FOCUS_MODAL_ID,
12164
+ true
12165
+ );
12166
+ setData({
12167
+ shippingProfileId: profile.id,
12168
+ shippingOption,
12169
+ shippingMethod
12170
+ });
12171
+ }
12172
+ } : void 0,
12173
+ {
12174
+ label: "Remove shipping option",
12175
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
12176
+ onClick: () => {
12177
+ if (shippingMethod) {
12178
+ if (addShippingMethodAction) {
12179
+ removeActionShippingMethod(
12180
+ addShippingMethodAction.id
12181
+ );
12182
+ } else {
12183
+ removeShippingMethod(
12184
+ shippingMethod.id
12185
+ );
12186
+ }
12187
+ }
12188
+ }
12189
+ }
12190
+ ].filter(Boolean)
12191
+ }
12192
+ ]
12193
+ }
12194
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
12195
+ StackedModalTrigger,
12196
+ {
12197
+ shippingProfileId: profile.id,
12198
+ shippingOption,
12199
+ shippingMethod,
12200
+ setData,
12201
+ children: "Add shipping option"
12202
+ }
12203
+ )
12204
+ ] }),
12205
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
12206
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12207
+ items.map((item, idx) => {
12208
+ var _a4, _b2, _c2, _d2, _e2;
12209
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12210
+ /* @__PURE__ */ jsxRuntime.jsxs(
12211
+ "div",
12212
+ {
12213
+ className: "flex items-center gap-x-3 px-3",
12214
+ children: [
12215
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
12216
+ ui.Divider,
12217
+ {
12218
+ variant: "dashed",
12219
+ orientation: "vertical"
12220
+ }
12221
+ ) }),
12222
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
12223
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
12224
+ ui.Text,
12225
+ {
12226
+ size: "small",
12227
+ leading: "compact",
12228
+ className: "text-ui-fg-subtle",
12229
+ children: [
12230
+ item.quantity,
12231
+ "x"
12232
+ ]
12233
+ }
12234
+ ) }),
12235
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
12236
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12237
+ /* @__PURE__ */ jsxRuntime.jsxs(
12238
+ ui.Text,
12239
+ {
12240
+ size: "small",
12241
+ leading: "compact",
12242
+ weight: "plus",
12243
+ children: [
12244
+ (_b2 = (_a4 = item.variant) == null ? void 0 : _a4.product) == null ? void 0 : _b2.title,
12245
+ " (",
12246
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12247
+ ")"
12248
+ ]
12249
+ }
12250
+ ),
12251
+ /* @__PURE__ */ jsxRuntime.jsx(
12252
+ ui.Text,
12253
+ {
12254
+ size: "small",
12255
+ leading: "compact",
12256
+ className: "text-ui-fg-subtle",
12257
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12258
+ }
12259
+ )
12260
+ ] })
12261
+ ] })
12262
+ ]
12263
+ },
12264
+ item.id
12265
+ ),
12266
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
12267
+ ] }, item.id);
12268
+ })
12269
+ ] })
12148
12270
  ]
12149
- }
12150
- )
12151
- ]
12152
- },
12153
- item.id
12154
- )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12155
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12156
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12157
- 'No items found for "',
12158
- query,
12159
- '".'
12160
- ] })
12161
- ] }) })
12162
- ] })
12163
- ] });
12164
- };
12165
- const LocationField = ({ control, setValue }) => {
12166
- const locations = useComboboxData({
12167
- queryKey: ["locations"],
12168
- queryFn: async (params) => {
12169
- return await sdk.admin.stockLocation.list(params);
12170
- },
12171
- getOptions: (data) => {
12172
- return data.stock_locations.map((location) => ({
12173
- label: location.name,
12174
- value: location.id
12175
- }));
12176
- }
12177
- });
12178
- return /* @__PURE__ */ jsxRuntime.jsx(
12179
- Form$2.Field,
12180
- {
12181
- control,
12182
- name: "location_id",
12183
- render: ({ field: { onChange, ...field } }) => {
12184
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12185
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12186
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12187
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12188
- ] }),
12189
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12190
- Combobox,
12191
- {
12192
- options: locations.options,
12193
- fetchNextPage: locations.fetchNextPage,
12194
- isFetchingNextPage: locations.isFetchingNextPage,
12195
- searchValue: locations.searchValue,
12196
- onSearchValueChange: locations.onSearchValueChange,
12197
- placeholder: "Select location",
12198
- onChange: (value) => {
12199
- setValue("shipping_option_id", "", {
12200
- shouldDirty: true,
12201
- shouldTouch: true
12202
- });
12203
- onChange(value);
12204
12271
  },
12205
- ...field
12206
- }
12207
- ) })
12208
- ] }) });
12209
- }
12210
- }
12211
- );
12212
- };
12213
- const ShippingOptionField = ({
12214
- shippingProfileId,
12215
- preview,
12216
- control
12217
- }) => {
12218
- var _a2;
12219
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12220
- const shippingOptions = useComboboxData({
12221
- queryKey: ["shipping_options", locationId, shippingProfileId],
12222
- queryFn: async (params) => {
12223
- return await sdk.admin.shippingOption.list({
12224
- ...params,
12225
- stock_location_id: locationId,
12226
- shipping_profile_id: shippingProfileId
12227
- });
12228
- },
12229
- getOptions: (data) => {
12230
- return data.shipping_options.map((option) => {
12231
- var _a3;
12232
- if ((_a3 = option.rules) == null ? void 0 : _a3.find(
12233
- (r) => r.attribute === "is_return" && r.value === "true"
12234
- )) {
12235
- return void 0;
12236
- }
12237
- return {
12238
- label: option.name,
12239
- value: option.id
12240
- };
12241
- }).filter(Boolean);
12242
- },
12243
- enabled: !!locationId && !!shippingProfileId,
12244
- defaultValue: ((_a2 = preview.shipping_methods[0]) == null ? void 0 : _a2.shipping_option_id) || void 0
12245
- });
12246
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12247
- return /* @__PURE__ */ jsxRuntime.jsx(
12248
- Form$2.Field,
12249
- {
12250
- control,
12251
- name: "shipping_option_id",
12252
- render: ({ field }) => {
12253
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12254
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12255
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12256
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12257
- ] }),
12258
- /* @__PURE__ */ jsxRuntime.jsx(
12259
- ConditionalTooltip,
12260
- {
12261
- content: tooltipContent,
12262
- showTooltip: !locationId || !shippingProfileId,
12263
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12264
- Combobox,
12265
- {
12266
- options: shippingOptions.options,
12267
- fetchNextPage: shippingOptions.fetchNextPage,
12268
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12269
- searchValue: shippingOptions.searchValue,
12270
- onSearchValueChange: shippingOptions.onSearchValueChange,
12271
- placeholder: "Select shipping option",
12272
- ...field,
12273
- disabled: !locationId || !shippingProfileId
12274
- }
12275
- ) }) })
12276
- }
12277
- )
12278
- ] }) });
12279
- }
12280
- }
12281
- );
12282
- };
12283
- const CustomAmountField = ({
12284
- control,
12285
- currencyCode
12286
- }) => {
12287
- return /* @__PURE__ */ jsxRuntime.jsx(
12288
- Form$2.Field,
12289
- {
12290
- control,
12291
- name: "custom_amount",
12292
- render: ({ field: { onChange, ...field } }) => {
12293
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12294
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12295
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12296
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12297
- ] }),
12298
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12299
- ui.CurrencyInput,
12300
- {
12301
- ...field,
12302
- onValueChange: (value) => onChange(value),
12303
- symbol: getNativeSymbol(currencyCode),
12304
- code: currencyCode
12305
- }
12306
- ) })
12307
- ] });
12308
- }
12309
- }
12310
- );
12311
- };
12312
- const ShippingAddress = () => {
12313
- const { id } = reactRouterDom.useParams();
12314
- const { order, isPending, isError, error } = useOrder(id, {
12315
- fields: "+shipping_address"
12316
- });
12317
- if (isError) {
12318
- throw error;
12319
- }
12320
- const isReady = !isPending && !!order;
12321
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12322
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12323
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12324
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12325
- ] }),
12326
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12327
- ] });
12328
- };
12329
- const ShippingAddressForm = ({ order }) => {
12330
- var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12331
- const form = reactHookForm.useForm({
12332
- defaultValues: {
12333
- first_name: ((_a2 = order.shipping_address) == null ? void 0 : _a2.first_name) ?? "",
12334
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12335
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12336
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12337
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12338
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12339
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12340
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12341
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12342
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12343
- },
12344
- resolver: zod.zodResolver(schema$2)
12345
- });
12346
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12347
- const { handleSuccess } = useRouteModal();
12348
- const onSubmit = form.handleSubmit(async (data) => {
12349
- await mutateAsync(
12350
- {
12351
- shipping_address: {
12352
- first_name: data.first_name,
12353
- last_name: data.last_name,
12354
- company: data.company,
12355
- address_1: data.address_1,
12356
- address_2: data.address_2,
12357
- city: data.city,
12358
- province: data.province,
12359
- country_code: data.country_code,
12360
- postal_code: data.postal_code,
12361
- phone: data.phone
12272
+ profile.id
12273
+ );
12274
+ }) })
12275
+ ] }) })
12276
+ ] }) }),
12277
+ /* @__PURE__ */ jsxRuntime.jsx(
12278
+ StackedFocusModal,
12279
+ {
12280
+ id: STACKED_FOCUS_MODAL_ID,
12281
+ onOpenChangeCallback: (open) => {
12282
+ if (!open) {
12283
+ setData(null);
12284
+ }
12285
+ return open;
12286
+ },
12287
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12362
12288
  }
12363
- },
12364
- {
12365
- onSuccess: () => {
12366
- handleSuccess();
12367
- },
12368
- onError: (error) => {
12369
- ui.toast.error(error.message);
12289
+ )
12290
+ ] }),
12291
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12292
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12293
+ /* @__PURE__ */ jsxRuntime.jsx(
12294
+ ui.Button,
12295
+ {
12296
+ size: "small",
12297
+ type: "button",
12298
+ isLoading: isSubmitting,
12299
+ onClick: onSubmit,
12300
+ children: "Save"
12370
12301
  }
12371
- }
12372
- );
12373
- });
12374
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12375
- KeyboundForm,
12376
- {
12377
- className: "flex flex-1 flex-col overflow-hidden",
12378
- onSubmit,
12379
- children: [
12380
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12381
- /* @__PURE__ */ jsxRuntime.jsx(
12382
- Form$2.Field,
12383
- {
12384
- control: form.control,
12385
- name: "country_code",
12386
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12387
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12388
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12389
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12390
- ] })
12391
- }
12392
- ),
12393
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12394
- /* @__PURE__ */ jsxRuntime.jsx(
12395
- Form$2.Field,
12396
- {
12397
- control: form.control,
12398
- name: "first_name",
12399
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12400
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12401
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12402
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12403
- ] })
12404
- }
12405
- ),
12406
- /* @__PURE__ */ jsxRuntime.jsx(
12407
- Form$2.Field,
12408
- {
12409
- control: form.control,
12410
- name: "last_name",
12411
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12412
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12413
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12414
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12415
- ] })
12416
- }
12417
- )
12418
- ] }),
12419
- /* @__PURE__ */ jsxRuntime.jsx(
12420
- Form$2.Field,
12421
- {
12422
- control: form.control,
12423
- name: "company",
12424
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12425
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12426
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12427
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12428
- ] })
12429
- }
12430
- ),
12431
- /* @__PURE__ */ jsxRuntime.jsx(
12432
- Form$2.Field,
12433
- {
12434
- control: form.control,
12435
- name: "address_1",
12436
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12437
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12438
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12439
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12440
- ] })
12441
- }
12442
- ),
12443
- /* @__PURE__ */ jsxRuntime.jsx(
12444
- Form$2.Field,
12445
- {
12446
- control: form.control,
12447
- name: "address_2",
12448
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12449
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12450
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12451
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12452
- ] })
12453
- }
12454
- ),
12455
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12456
- /* @__PURE__ */ jsxRuntime.jsx(
12457
- Form$2.Field,
12458
- {
12459
- control: form.control,
12460
- name: "postal_code",
12461
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12462
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12463
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12464
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12465
- ] })
12466
- }
12467
- ),
12468
- /* @__PURE__ */ jsxRuntime.jsx(
12469
- Form$2.Field,
12470
- {
12471
- control: form.control,
12472
- name: "city",
12473
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12474
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12475
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12476
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12477
- ] })
12478
- }
12479
- )
12480
- ] }),
12481
- /* @__PURE__ */ jsxRuntime.jsx(
12482
- Form$2.Field,
12483
- {
12484
- control: form.control,
12485
- name: "province",
12486
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12487
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12488
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12489
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12490
- ] })
12491
- }
12492
- ),
12493
- /* @__PURE__ */ jsxRuntime.jsx(
12494
- Form$2.Field,
12495
- {
12496
- control: form.control,
12497
- name: "phone",
12498
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12499
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12500
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12501
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12502
- ] })
12503
- }
12504
- )
12505
- ] }) }),
12506
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12507
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12508
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12509
- ] }) })
12510
- ]
12511
- }
12512
- ) });
12513
- };
12514
- const schema$2 = addressSchema;
12515
- const PROMOTION_QUERY_KEY = "promotions";
12516
- const promotionsQueryKeys = {
12517
- list: (query2) => [
12518
- PROMOTION_QUERY_KEY,
12519
- query2 ? query2 : void 0
12520
- ],
12521
- detail: (id, query2) => [
12522
- PROMOTION_QUERY_KEY,
12523
- id,
12524
- query2 ? query2 : void 0
12525
- ]
12526
- };
12527
- const usePromotions = (query2, options) => {
12528
- const { data, ...rest } = reactQuery.useQuery({
12529
- queryKey: promotionsQueryKeys.list(query2),
12530
- queryFn: async () => sdk.admin.promotion.list(query2),
12531
- ...options
12532
- });
12533
- return { ...data, ...rest };
12534
- };
12535
- const Promotions = () => {
12536
- const { id } = reactRouterDom.useParams();
12537
- const {
12538
- order: preview,
12539
- isError: isPreviewError,
12540
- error: previewError
12541
- } = useOrderPreview(id, void 0);
12542
- useInitiateOrderEdit({ preview });
12543
- const { onCancel } = useCancelOrderEdit({ preview });
12544
- if (isPreviewError) {
12545
- throw previewError;
12546
- }
12547
- const isReady = !!preview;
12548
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
12549
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
12550
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
12302
+ )
12303
+ ] }) })
12551
12304
  ] });
12552
12305
  };
12553
- const PromotionForm = ({ preview }) => {
12554
- const { items, shipping_methods } = preview;
12555
- const [isSubmitting, setIsSubmitting] = React.useState(false);
12556
- const [comboboxValue, setComboboxValue] = React.useState("");
12557
- const { handleSuccess } = useRouteModal();
12558
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
12559
- const promoIds = getPromotionIds(items, shipping_methods);
12560
- const { promotions, isPending, isError, error } = usePromotions(
12561
- {
12562
- id: promoIds
12563
- },
12564
- {
12565
- enabled: !!promoIds.length
12566
- }
12567
- );
12568
- const comboboxData = useComboboxData({
12569
- queryKey: ["promotions", "combobox", promoIds],
12570
- queryFn: async (params) => {
12571
- return await sdk.admin.promotion.list({
12572
- ...params,
12573
- id: {
12574
- $nin: promoIds
12575
- }
12306
+ const StackedModalTrigger = ({
12307
+ shippingProfileId,
12308
+ shippingOption,
12309
+ shippingMethod,
12310
+ setData,
12311
+ children
12312
+ }) => {
12313
+ const { setIsOpen, getIsOpen } = useStackedModal();
12314
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12315
+ const onToggle = () => {
12316
+ if (isOpen) {
12317
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12318
+ setData(null);
12319
+ } else {
12320
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12321
+ setData({
12322
+ shippingProfileId,
12323
+ shippingOption,
12324
+ shippingMethod
12576
12325
  });
12577
- },
12578
- getOptions: (data) => {
12579
- return data.promotions.map((promotion) => ({
12580
- label: promotion.code,
12581
- value: promotion.code
12582
- }));
12326
+ }
12327
+ };
12328
+ return /* @__PURE__ */ jsxRuntime.jsx(
12329
+ ui.Button,
12330
+ {
12331
+ size: "small",
12332
+ variant: "secondary",
12333
+ onClick: onToggle,
12334
+ className: "text-ui-fg-primary shrink-0",
12335
+ children
12336
+ }
12337
+ );
12338
+ };
12339
+ const ShippingProfileForm = ({
12340
+ data,
12341
+ order,
12342
+ preview
12343
+ }) => {
12344
+ var _a2, _b, _c, _d, _e, _f;
12345
+ const { setIsOpen } = useStackedModal();
12346
+ const form = reactHookForm.useForm({
12347
+ resolver: zod.zodResolver(shippingMethodSchema),
12348
+ defaultValues: {
12349
+ location_id: (_d = (_c = (_b = (_a2 = data.shippingOption) == null ? void 0 : _a2.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12350
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12351
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12583
12352
  }
12584
12353
  });
12585
- const add = async (value) => {
12586
- if (!value) {
12354
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12355
+ const {
12356
+ mutateAsync: updateShippingMethod,
12357
+ isPending: isUpdatingShippingMethod
12358
+ } = useDraftOrderUpdateShippingMethod(order.id);
12359
+ const onSubmit = form.handleSubmit(async (values) => {
12360
+ if (isEqual__default.default(values, form.formState.defaultValues)) {
12361
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12587
12362
  return;
12588
12363
  }
12589
- addPromotions(
12364
+ if (data.shippingMethod) {
12365
+ await updateShippingMethod(
12366
+ {
12367
+ method_id: data.shippingMethod.id,
12368
+ shipping_option_id: values.shipping_option_id,
12369
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12370
+ },
12371
+ {
12372
+ onError: (e) => {
12373
+ ui.toast.error(e.message);
12374
+ },
12375
+ onSuccess: () => {
12376
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12377
+ }
12378
+ }
12379
+ );
12380
+ return;
12381
+ }
12382
+ await addShippingMethod(
12590
12383
  {
12591
- promo_codes: [value]
12384
+ shipping_option_id: values.shipping_option_id,
12385
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12592
12386
  },
12593
12387
  {
12594
12388
  onError: (e) => {
12595
12389
  ui.toast.error(e.message);
12596
- comboboxData.onSearchValueChange("");
12597
- setComboboxValue("");
12598
12390
  },
12599
12391
  onSuccess: () => {
12600
- comboboxData.onSearchValueChange("");
12601
- setComboboxValue("");
12392
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12602
12393
  }
12603
12394
  }
12604
12395
  );
12605
- };
12606
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12607
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
12608
- const onSubmit = async () => {
12609
- setIsSubmitting(true);
12610
- let requestSucceeded = false;
12611
- await requestOrderEdit(void 0, {
12612
- onError: (e) => {
12613
- ui.toast.error(e.message);
12614
- },
12615
- onSuccess: () => {
12616
- requestSucceeded = true;
12617
- }
12618
- });
12619
- if (!requestSucceeded) {
12620
- setIsSubmitting(false);
12621
- return;
12396
+ });
12397
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12398
+ KeyboundForm,
12399
+ {
12400
+ className: "flex h-full flex-col overflow-hidden",
12401
+ onSubmit,
12402
+ children: [
12403
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12404
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12405
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12406
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12407
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12408
+ ] }),
12409
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12410
+ /* @__PURE__ */ jsxRuntime.jsx(
12411
+ LocationField,
12412
+ {
12413
+ control: form.control,
12414
+ setValue: form.setValue
12415
+ }
12416
+ ),
12417
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12418
+ /* @__PURE__ */ jsxRuntime.jsx(
12419
+ ShippingOptionField,
12420
+ {
12421
+ shippingProfileId: data.shippingProfileId,
12422
+ preview,
12423
+ control: form.control
12424
+ }
12425
+ ),
12426
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12427
+ /* @__PURE__ */ jsxRuntime.jsx(
12428
+ CustomAmountField,
12429
+ {
12430
+ control: form.control,
12431
+ currencyCode: order.currency_code
12432
+ }
12433
+ ),
12434
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12435
+ /* @__PURE__ */ jsxRuntime.jsx(
12436
+ ItemsPreview,
12437
+ {
12438
+ order,
12439
+ shippingProfileId: data.shippingProfileId
12440
+ }
12441
+ )
12442
+ ] }) }) }),
12443
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12444
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12445
+ /* @__PURE__ */ jsxRuntime.jsx(
12446
+ ui.Button,
12447
+ {
12448
+ size: "small",
12449
+ type: "submit",
12450
+ isLoading: isPending || isUpdatingShippingMethod,
12451
+ children: data.shippingMethod ? "Update" : "Add"
12452
+ }
12453
+ )
12454
+ ] }) })
12455
+ ]
12622
12456
  }
12623
- await confirmOrderEdit(void 0, {
12624
- onError: (e) => {
12625
- ui.toast.error(e.message);
12626
- },
12627
- onSuccess: () => {
12628
- handleSuccess();
12629
- },
12630
- onSettled: () => {
12631
- setIsSubmitting(false);
12632
- }
12633
- });
12634
- };
12635
- if (isError) {
12636
- throw error;
12637
- }
12638
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
12639
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
12640
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
12641
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12642
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
12643
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
12644
- ] }),
12645
- /* @__PURE__ */ jsxRuntime.jsx(
12646
- Combobox,
12647
- {
12648
- id: "promotion-combobox",
12649
- "aria-describedby": "promotion-combobox-hint",
12650
- isFetchingNextPage: comboboxData.isFetchingNextPage,
12651
- fetchNextPage: comboboxData.fetchNextPage,
12652
- options: comboboxData.options,
12653
- onSearchValueChange: comboboxData.onSearchValueChange,
12654
- searchValue: comboboxData.searchValue,
12655
- disabled: comboboxData.disabled || isAddingPromotions,
12656
- onChange: add,
12657
- value: comboboxValue
12658
- }
12659
- )
12457
+ ) }) });
12458
+ };
12459
+ const shippingMethodSchema = object({
12460
+ location_id: string(),
12461
+ shipping_option_id: string(),
12462
+ custom_amount: union([number(), string()]).optional()
12463
+ });
12464
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12465
+ const matches = order.items.filter(
12466
+ (item) => {
12467
+ var _a2, _b, _c;
12468
+ return ((_c = (_b = (_a2 = item.variant) == null ? void 0 : _a2.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12469
+ }
12470
+ );
12471
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12472
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12473
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12474
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12475
+ ] }) }),
12476
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12477
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12478
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12479
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12660
12480
  ] }),
12661
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12662
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
12663
- PromotionItem,
12481
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12482
+ "div",
12664
12483
  {
12665
- promotion,
12666
- orderId: preview.id,
12667
- isLoading: isPending
12484
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12485
+ children: [
12486
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12487
+ /* @__PURE__ */ jsxRuntime.jsx(
12488
+ Thumbnail,
12489
+ {
12490
+ thumbnail: item.thumbnail,
12491
+ alt: item.product_title ?? void 0
12492
+ }
12493
+ ),
12494
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12495
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12496
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12497
+ /* @__PURE__ */ jsxRuntime.jsxs(
12498
+ ui.Text,
12499
+ {
12500
+ size: "small",
12501
+ leading: "compact",
12502
+ className: "text-ui-fg-subtle",
12503
+ children: [
12504
+ "(",
12505
+ item.variant_title,
12506
+ ")"
12507
+ ]
12508
+ }
12509
+ )
12510
+ ] }),
12511
+ /* @__PURE__ */ jsxRuntime.jsx(
12512
+ ui.Text,
12513
+ {
12514
+ size: "small",
12515
+ leading: "compact",
12516
+ className: "text-ui-fg-subtle",
12517
+ children: item.variant_sku
12518
+ }
12519
+ )
12520
+ ] })
12521
+ ] }),
12522
+ /* @__PURE__ */ jsxRuntime.jsxs(
12523
+ ui.Text,
12524
+ {
12525
+ size: "small",
12526
+ leading: "compact",
12527
+ className: "text-ui-fg-subtle",
12528
+ children: [
12529
+ item.quantity,
12530
+ "x"
12531
+ ]
12532
+ }
12533
+ )
12534
+ ]
12668
12535
  },
12669
- promotion.id
12670
- )) })
12671
- ] }) }),
12672
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12673
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12674
- /* @__PURE__ */ jsxRuntime.jsx(
12675
- ui.Button,
12676
- {
12677
- size: "small",
12678
- type: "submit",
12679
- isLoading: isSubmitting || isAddingPromotions,
12680
- children: "Save"
12681
- }
12682
- )
12683
- ] }) })
12536
+ item.id
12537
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12538
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12539
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12540
+ 'No items found for "',
12541
+ query,
12542
+ '".'
12543
+ ] })
12544
+ ] }) })
12545
+ ] })
12684
12546
  ] });
12685
12547
  };
12686
- const PromotionItem = ({
12687
- promotion,
12688
- orderId,
12689
- isLoading
12690
- }) => {
12691
- var _a2;
12692
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
12693
- const onRemove = async () => {
12694
- removePromotions(
12695
- {
12696
- promo_codes: [promotion.code]
12697
- },
12698
- {
12699
- onError: (e) => {
12700
- ui.toast.error(e.message);
12701
- }
12702
- }
12703
- );
12704
- };
12705
- const displayValue = getDisplayValue(promotion);
12706
- return /* @__PURE__ */ jsxRuntime.jsxs(
12707
- "div",
12708
- {
12709
- className: ui.clx(
12710
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
12711
- {
12712
- "animate-pulse": isLoading
12713
- }
12714
- ),
12715
- children: [
12716
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12717
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
12718
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
12719
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
12720
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
12721
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
12722
- ] }),
12723
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a2 = promotion.application_method) == null ? void 0 : _a2.allocation })
12724
- ] })
12725
- ] }),
12726
- /* @__PURE__ */ jsxRuntime.jsx(
12727
- ui.IconButton,
12728
- {
12729
- size: "small",
12730
- type: "button",
12731
- variant: "transparent",
12732
- onClick: onRemove,
12733
- isLoading: isPending || isLoading,
12734
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
12735
- }
12736
- )
12737
- ]
12548
+ const LocationField = ({ control, setValue }) => {
12549
+ const locations = useComboboxData({
12550
+ queryKey: ["locations"],
12551
+ queryFn: async (params) => {
12552
+ return await sdk.admin.stockLocation.list(params);
12738
12553
  },
12739
- promotion.id
12740
- );
12741
- };
12742
- function getDisplayValue(promotion) {
12743
- var _a2, _b, _c, _d;
12744
- const value = (_a2 = promotion.application_method) == null ? void 0 : _a2.value;
12745
- if (!value) {
12746
- return null;
12747
- }
12748
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
12749
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
12750
- if (!currency) {
12751
- return null;
12554
+ getOptions: (data) => {
12555
+ return data.stock_locations.map((location) => ({
12556
+ label: location.name,
12557
+ value: location.id
12558
+ }));
12752
12559
  }
12753
- return getLocaleAmount(value, currency);
12754
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
12755
- return formatPercentage(value);
12756
- }
12757
- return null;
12758
- }
12759
- const formatter = new Intl.NumberFormat([], {
12760
- style: "percent",
12761
- minimumFractionDigits: 2
12762
- });
12763
- const formatPercentage = (value, isPercentageValue = false) => {
12764
- let val = value || 0;
12765
- if (!isPercentageValue) {
12766
- val = val / 100;
12767
- }
12768
- return formatter.format(val);
12560
+ });
12561
+ return /* @__PURE__ */ jsxRuntime.jsx(
12562
+ Form$2.Field,
12563
+ {
12564
+ control,
12565
+ name: "location_id",
12566
+ render: ({ field: { onChange, ...field } }) => {
12567
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12568
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12569
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12570
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12571
+ ] }),
12572
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12573
+ Combobox,
12574
+ {
12575
+ options: locations.options,
12576
+ fetchNextPage: locations.fetchNextPage,
12577
+ isFetchingNextPage: locations.isFetchingNextPage,
12578
+ searchValue: locations.searchValue,
12579
+ onSearchValueChange: locations.onSearchValueChange,
12580
+ placeholder: "Select location",
12581
+ onChange: (value) => {
12582
+ setValue("shipping_option_id", "", {
12583
+ shouldDirty: true,
12584
+ shouldTouch: true
12585
+ });
12586
+ onChange(value);
12587
+ },
12588
+ ...field
12589
+ }
12590
+ ) })
12591
+ ] }) });
12592
+ }
12593
+ }
12594
+ );
12769
12595
  };
12770
- function getPromotionIds(items, shippingMethods) {
12771
- const promotionIds = /* @__PURE__ */ new Set();
12772
- for (const item of items) {
12773
- if (item.adjustments) {
12774
- for (const adjustment of item.adjustments) {
12775
- if (adjustment.promotion_id) {
12776
- promotionIds.add(adjustment.promotion_id);
12596
+ const ShippingOptionField = ({
12597
+ shippingProfileId,
12598
+ preview,
12599
+ control
12600
+ }) => {
12601
+ var _a2;
12602
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12603
+ const shippingOptions = useComboboxData({
12604
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12605
+ queryFn: async (params) => {
12606
+ return await sdk.admin.shippingOption.list({
12607
+ ...params,
12608
+ stock_location_id: locationId,
12609
+ shipping_profile_id: shippingProfileId
12610
+ });
12611
+ },
12612
+ getOptions: (data) => {
12613
+ return data.shipping_options.map((option) => {
12614
+ var _a3;
12615
+ if ((_a3 = option.rules) == null ? void 0 : _a3.find(
12616
+ (r) => r.attribute === "is_return" && r.value === "true"
12617
+ )) {
12618
+ return void 0;
12777
12619
  }
12620
+ return {
12621
+ label: option.name,
12622
+ value: option.id
12623
+ };
12624
+ }).filter(Boolean);
12625
+ },
12626
+ enabled: !!locationId && !!shippingProfileId,
12627
+ defaultValue: ((_a2 = preview.shipping_methods[0]) == null ? void 0 : _a2.shipping_option_id) || void 0
12628
+ });
12629
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12630
+ return /* @__PURE__ */ jsxRuntime.jsx(
12631
+ Form$2.Field,
12632
+ {
12633
+ control,
12634
+ name: "shipping_option_id",
12635
+ render: ({ field }) => {
12636
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12637
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12638
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12639
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12640
+ ] }),
12641
+ /* @__PURE__ */ jsxRuntime.jsx(
12642
+ ConditionalTooltip,
12643
+ {
12644
+ content: tooltipContent,
12645
+ showTooltip: !locationId || !shippingProfileId,
12646
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12647
+ Combobox,
12648
+ {
12649
+ options: shippingOptions.options,
12650
+ fetchNextPage: shippingOptions.fetchNextPage,
12651
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12652
+ searchValue: shippingOptions.searchValue,
12653
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12654
+ placeholder: "Select shipping option",
12655
+ ...field,
12656
+ disabled: !locationId || !shippingProfileId
12657
+ }
12658
+ ) }) })
12659
+ }
12660
+ )
12661
+ ] }) });
12778
12662
  }
12779
12663
  }
12780
- }
12781
- for (const shippingMethod of shippingMethods) {
12782
- if (shippingMethod.adjustments) {
12783
- for (const adjustment of shippingMethod.adjustments) {
12784
- if (adjustment.promotion_id) {
12785
- promotionIds.add(adjustment.promotion_id);
12786
- }
12664
+ );
12665
+ };
12666
+ const CustomAmountField = ({
12667
+ control,
12668
+ currencyCode
12669
+ }) => {
12670
+ return /* @__PURE__ */ jsxRuntime.jsx(
12671
+ Form$2.Field,
12672
+ {
12673
+ control,
12674
+ name: "custom_amount",
12675
+ render: ({ field: { onChange, ...field } }) => {
12676
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12677
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12678
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12679
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12680
+ ] }),
12681
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12682
+ ui.CurrencyInput,
12683
+ {
12684
+ ...field,
12685
+ onValueChange: (value) => onChange(value),
12686
+ symbol: getNativeSymbol(currencyCode),
12687
+ code: currencyCode
12688
+ }
12689
+ ) })
12690
+ ] });
12787
12691
  }
12788
12692
  }
12789
- }
12790
- return Array.from(promotionIds);
12791
- }
12693
+ );
12694
+ };
12792
12695
  const TransferOwnership = () => {
12793
12696
  const { id } = reactRouterDom.useParams();
12794
12697
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -13265,33 +13168,37 @@ const Illustration = () => {
13265
13168
  const schema$1 = object({
13266
13169
  customer_id: string().min(1)
13267
13170
  });
13268
- const SalesChannel = () => {
13171
+ const ShippingAddress = () => {
13269
13172
  const { id } = reactRouterDom.useParams();
13270
- const { draft_order, isPending, isError, error } = useDraftOrder(
13271
- id,
13272
- {
13273
- fields: "+sales_channel_id"
13274
- },
13275
- {
13276
- enabled: !!id
13277
- }
13278
- );
13173
+ const { order, isPending, isError, error } = useOrder(id, {
13174
+ fields: "+shipping_address"
13175
+ });
13279
13176
  if (isError) {
13280
13177
  throw error;
13281
13178
  }
13282
- const ISrEADY = !!draft_order && !isPending;
13179
+ const isReady = !isPending && !!order;
13283
13180
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
13284
13181
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
13285
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
13286
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
13182
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
13183
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
13287
13184
  ] }),
13288
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
13185
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
13289
13186
  ] });
13290
13187
  };
13291
- const SalesChannelForm = ({ order }) => {
13188
+ const ShippingAddressForm = ({ order }) => {
13189
+ var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
13292
13190
  const form = reactHookForm.useForm({
13293
13191
  defaultValues: {
13294
- sales_channel_id: order.sales_channel_id || ""
13192
+ first_name: ((_a2 = order.shipping_address) == null ? void 0 : _a2.first_name) ?? "",
13193
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
13194
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
13195
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
13196
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
13197
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
13198
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
13199
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
13200
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
13201
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
13295
13202
  },
13296
13203
  resolver: zod.zodResolver(schema)
13297
13204
  });
@@ -13300,11 +13207,21 @@ const SalesChannelForm = ({ order }) => {
13300
13207
  const onSubmit = form.handleSubmit(async (data) => {
13301
13208
  await mutateAsync(
13302
13209
  {
13303
- sales_channel_id: data.sales_channel_id
13210
+ shipping_address: {
13211
+ first_name: data.first_name,
13212
+ last_name: data.last_name,
13213
+ company: data.company,
13214
+ address_1: data.address_1,
13215
+ address_2: data.address_2,
13216
+ city: data.city,
13217
+ province: data.province,
13218
+ country_code: data.country_code,
13219
+ postal_code: data.postal_code,
13220
+ phone: data.phone
13221
+ }
13304
13222
  },
13305
13223
  {
13306
13224
  onSuccess: () => {
13307
- ui.toast.success("Sales channel updated");
13308
13225
  handleSuccess();
13309
13226
  },
13310
13227
  onError: (error) => {
@@ -13319,7 +13236,132 @@ const SalesChannelForm = ({ order }) => {
13319
13236
  className: "flex flex-1 flex-col overflow-hidden",
13320
13237
  onSubmit,
13321
13238
  children: [
13322
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
13239
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
13240
+ /* @__PURE__ */ jsxRuntime.jsx(
13241
+ Form$2.Field,
13242
+ {
13243
+ control: form.control,
13244
+ name: "country_code",
13245
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13246
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
13247
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
13248
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13249
+ ] })
13250
+ }
13251
+ ),
13252
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
13253
+ /* @__PURE__ */ jsxRuntime.jsx(
13254
+ Form$2.Field,
13255
+ {
13256
+ control: form.control,
13257
+ name: "first_name",
13258
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13259
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
13260
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13261
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13262
+ ] })
13263
+ }
13264
+ ),
13265
+ /* @__PURE__ */ jsxRuntime.jsx(
13266
+ Form$2.Field,
13267
+ {
13268
+ control: form.control,
13269
+ name: "last_name",
13270
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13271
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
13272
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13273
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13274
+ ] })
13275
+ }
13276
+ )
13277
+ ] }),
13278
+ /* @__PURE__ */ jsxRuntime.jsx(
13279
+ Form$2.Field,
13280
+ {
13281
+ control: form.control,
13282
+ name: "company",
13283
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13284
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
13285
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13286
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13287
+ ] })
13288
+ }
13289
+ ),
13290
+ /* @__PURE__ */ jsxRuntime.jsx(
13291
+ Form$2.Field,
13292
+ {
13293
+ control: form.control,
13294
+ name: "address_1",
13295
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13296
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
13297
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13298
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13299
+ ] })
13300
+ }
13301
+ ),
13302
+ /* @__PURE__ */ jsxRuntime.jsx(
13303
+ Form$2.Field,
13304
+ {
13305
+ control: form.control,
13306
+ name: "address_2",
13307
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13308
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
13309
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13310
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13311
+ ] })
13312
+ }
13313
+ ),
13314
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
13315
+ /* @__PURE__ */ jsxRuntime.jsx(
13316
+ Form$2.Field,
13317
+ {
13318
+ control: form.control,
13319
+ name: "postal_code",
13320
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13321
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
13322
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13323
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13324
+ ] })
13325
+ }
13326
+ ),
13327
+ /* @__PURE__ */ jsxRuntime.jsx(
13328
+ Form$2.Field,
13329
+ {
13330
+ control: form.control,
13331
+ name: "city",
13332
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13333
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13334
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13335
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13336
+ ] })
13337
+ }
13338
+ )
13339
+ ] }),
13340
+ /* @__PURE__ */ jsxRuntime.jsx(
13341
+ Form$2.Field,
13342
+ {
13343
+ control: form.control,
13344
+ name: "province",
13345
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13346
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13347
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13348
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13349
+ ] })
13350
+ }
13351
+ ),
13352
+ /* @__PURE__ */ jsxRuntime.jsx(
13353
+ Form$2.Field,
13354
+ {
13355
+ control: form.control,
13356
+ name: "phone",
13357
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13358
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13359
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13360
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13361
+ ] })
13362
+ }
13363
+ )
13364
+ ] }) }),
13323
13365
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13324
13366
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13325
13367
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
@@ -13328,49 +13370,7 @@ const SalesChannelForm = ({ order }) => {
13328
13370
  }
13329
13371
  ) });
13330
13372
  };
13331
- const SalesChannelField = ({ control, order }) => {
13332
- const salesChannels = useComboboxData({
13333
- queryFn: async (params) => {
13334
- return await sdk.admin.salesChannel.list(params);
13335
- },
13336
- queryKey: ["sales-channels"],
13337
- getOptions: (data) => {
13338
- return data.sales_channels.map((salesChannel) => ({
13339
- label: salesChannel.name,
13340
- value: salesChannel.id
13341
- }));
13342
- },
13343
- defaultValue: order.sales_channel_id || void 0
13344
- });
13345
- return /* @__PURE__ */ jsxRuntime.jsx(
13346
- Form$2.Field,
13347
- {
13348
- control,
13349
- name: "sales_channel_id",
13350
- render: ({ field }) => {
13351
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13352
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
13353
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13354
- Combobox,
13355
- {
13356
- options: salesChannels.options,
13357
- fetchNextPage: salesChannels.fetchNextPage,
13358
- isFetchingNextPage: salesChannels.isFetchingNextPage,
13359
- searchValue: salesChannels.searchValue,
13360
- onSearchValueChange: salesChannels.onSearchValueChange,
13361
- placeholder: "Select sales channel",
13362
- ...field
13363
- }
13364
- ) }),
13365
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13366
- ] });
13367
- }
13368
- }
13369
- );
13370
- };
13371
- const schema = object({
13372
- sales_channel_id: string().min(1)
13373
- });
13373
+ const schema = addressSchema;
13374
13374
  const widgetModule = { widgets: [] };
13375
13375
  const routeModule = {
13376
13376
  routes: [
@@ -13391,45 +13391,45 @@ const routeModule = {
13391
13391
  handle,
13392
13392
  loader,
13393
13393
  children: [
13394
- {
13395
- Component: CustomItems,
13396
- path: "/draft-orders/:id/custom-items"
13397
- },
13398
13394
  {
13399
13395
  Component: BillingAddress,
13400
13396
  path: "/draft-orders/:id/billing-address"
13401
13397
  },
13402
13398
  {
13403
- Component: Items,
13404
- path: "/draft-orders/:id/items"
13399
+ Component: CustomItems,
13400
+ path: "/draft-orders/:id/custom-items"
13405
13401
  },
13406
13402
  {
13407
13403
  Component: Email,
13408
13404
  path: "/draft-orders/:id/email"
13409
13405
  },
13406
+ {
13407
+ Component: Items,
13408
+ path: "/draft-orders/:id/items"
13409
+ },
13410
13410
  {
13411
13411
  Component: Metadata,
13412
13412
  path: "/draft-orders/:id/metadata"
13413
13413
  },
13414
13414
  {
13415
- Component: Shipping,
13416
- path: "/draft-orders/:id/shipping"
13415
+ Component: Promotions,
13416
+ path: "/draft-orders/:id/promotions"
13417
13417
  },
13418
13418
  {
13419
- Component: ShippingAddress,
13420
- path: "/draft-orders/:id/shipping-address"
13419
+ Component: SalesChannel,
13420
+ path: "/draft-orders/:id/sales-channel"
13421
13421
  },
13422
13422
  {
13423
- Component: Promotions,
13424
- path: "/draft-orders/:id/promotions"
13423
+ Component: Shipping,
13424
+ path: "/draft-orders/:id/shipping"
13425
13425
  },
13426
13426
  {
13427
13427
  Component: TransferOwnership,
13428
13428
  path: "/draft-orders/:id/transfer-ownership"
13429
13429
  },
13430
13430
  {
13431
- Component: SalesChannel,
13432
- path: "/draft-orders/:id/sales-channel"
13431
+ Component: ShippingAddress,
13432
+ path: "/draft-orders/:id/shipping-address"
13433
13433
  }
13434
13434
  ]
13435
13435
  }