@medusajs/draft-order 2.11.3 → 2.11.4-preview-20251105180136

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.
@@ -9568,6 +9568,27 @@ const ID = () => {
9568
9568
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9569
9569
  ] });
9570
9570
  };
9571
+ const CustomItems = () => {
9572
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9573
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9574
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9575
+ ] });
9576
+ };
9577
+ const CustomItemsForm = () => {
9578
+ const form = reactHookForm.useForm({
9579
+ resolver: zod.zodResolver(schema$5)
9580
+ });
9581
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9582
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9583
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9584
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9585
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9586
+ ] }) })
9587
+ ] }) });
9588
+ };
9589
+ const schema$5 = objectType({
9590
+ email: stringType().email()
9591
+ });
9571
9592
  const BillingAddress = () => {
9572
9593
  const { id } = reactRouterDom.useParams();
9573
9594
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9600,7 +9621,7 @@ const BillingAddressForm = ({ order }) => {
9600
9621
  postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9601
9622
  phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9602
9623
  },
9603
- resolver: zod.zodResolver(schema$5)
9624
+ resolver: zod.zodResolver(schema$4)
9604
9625
  });
9605
9626
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9606
9627
  const { handleSuccess } = useRouteModal();
@@ -9757,28 +9778,7 @@ const BillingAddressForm = ({ order }) => {
9757
9778
  }
9758
9779
  ) });
9759
9780
  };
9760
- const schema$5 = addressSchema;
9761
- const CustomItems = () => {
9762
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9763
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9764
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9765
- ] });
9766
- };
9767
- const CustomItemsForm = () => {
9768
- const form = reactHookForm.useForm({
9769
- resolver: zod.zodResolver(schema$4)
9770
- });
9771
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9772
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9773
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9774
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9775
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9776
- ] }) })
9777
- ] }) });
9778
- };
9779
- const schema$4 = objectType({
9780
- email: stringType().email()
9781
- });
9781
+ const schema$4 = addressSchema;
9782
9782
  const Email = () => {
9783
9783
  const { id } = reactRouterDom.useParams();
9784
9784
  const { order, isPending, isError, error } = useOrder(id, {
@@ -11171,77 +11171,105 @@ function getHasUneditableRows(metadata) {
11171
11171
  (value) => !EDITABLE_TYPES.includes(typeof value)
11172
11172
  );
11173
11173
  }
11174
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11175
- const Shipping = () => {
11176
- var _a;
11177
- const { id } = reactRouterDom.useParams();
11178
- const { order, isPending, isError, error } = useOrder(id, {
11179
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11174
+ const PROMOTION_QUERY_KEY = "promotions";
11175
+ const promotionsQueryKeys = {
11176
+ list: (query2) => [
11177
+ PROMOTION_QUERY_KEY,
11178
+ query2 ? query2 : void 0
11179
+ ],
11180
+ detail: (id, query2) => [
11181
+ PROMOTION_QUERY_KEY,
11182
+ id,
11183
+ query2 ? query2 : void 0
11184
+ ]
11185
+ };
11186
+ const usePromotions = (query2, options) => {
11187
+ const { data, ...rest } = reactQuery.useQuery({
11188
+ queryKey: promotionsQueryKeys.list(query2),
11189
+ queryFn: async () => sdk.admin.promotion.list(query2),
11190
+ ...options
11180
11191
  });
11192
+ return { ...data, ...rest };
11193
+ };
11194
+ const Promotions = () => {
11195
+ const { id } = reactRouterDom.useParams();
11181
11196
  const {
11182
11197
  order: preview,
11183
- isPending: isPreviewPending,
11184
11198
  isError: isPreviewError,
11185
11199
  error: previewError
11186
- } = useOrderPreview(id);
11200
+ } = useOrderPreview(id, void 0);
11187
11201
  useInitiateOrderEdit({ preview });
11188
11202
  const { onCancel } = useCancelOrderEdit({ preview });
11189
- if (isError) {
11190
- throw error;
11191
- }
11192
11203
  if (isPreviewError) {
11193
11204
  throw previewError;
11194
11205
  }
11195
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11196
- const isReady = preview && !isPreviewPending && order && !isPending;
11197
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11198
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11199
- /* @__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: [
11200
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11201
- /* @__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." }) })
11202
- ] }) }) }),
11203
- /* @__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" }) }) })
11204
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11205
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11206
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11207
- ] }) });
11206
+ const isReady = !!preview;
11207
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
11208
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
11209
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
11210
+ ] });
11208
11211
  };
11209
- const ShippingForm = ({ preview, order }) => {
11210
- var _a;
11211
- const { setIsOpen } = useStackedModal();
11212
+ const PromotionForm = ({ preview }) => {
11213
+ const { items, shipping_methods } = preview;
11212
11214
  const [isSubmitting, setIsSubmitting] = React.useState(false);
11213
- const [data, setData] = React.useState(null);
11214
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11215
- const { shipping_options } = useShippingOptions(
11215
+ const [comboboxValue, setComboboxValue] = React.useState("");
11216
+ const { handleSuccess } = useRouteModal();
11217
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11218
+ const promoIds = getPromotionIds(items, shipping_methods);
11219
+ const { promotions, isPending, isError, error } = usePromotions(
11216
11220
  {
11217
- id: appliedShippingOptionIds,
11218
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11221
+ id: promoIds
11219
11222
  },
11220
11223
  {
11221
- enabled: appliedShippingOptionIds.length > 0
11224
+ enabled: !!promoIds.length
11222
11225
  }
11223
11226
  );
11224
- const uniqueShippingProfiles = React.useMemo(() => {
11225
- const profiles = /* @__PURE__ */ new Map();
11226
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11227
- profiles.set(profile.id, profile);
11228
- });
11229
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11230
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11231
- });
11232
- return Array.from(profiles.values());
11233
- }, [order.items, shipping_options]);
11234
- const { handleSuccess } = useRouteModal();
11227
+ const comboboxData = useComboboxData({
11228
+ queryKey: ["promotions", "combobox", promoIds],
11229
+ queryFn: async (params) => {
11230
+ return await sdk.admin.promotion.list({
11231
+ ...params,
11232
+ id: {
11233
+ $nin: promoIds
11234
+ }
11235
+ });
11236
+ },
11237
+ getOptions: (data) => {
11238
+ return data.promotions.map((promotion) => ({
11239
+ label: promotion.code,
11240
+ value: promotion.code
11241
+ }));
11242
+ }
11243
+ });
11244
+ const add = async (value) => {
11245
+ if (!value) {
11246
+ return;
11247
+ }
11248
+ addPromotions(
11249
+ {
11250
+ promo_codes: [value]
11251
+ },
11252
+ {
11253
+ onError: (e) => {
11254
+ ui.toast.error(e.message);
11255
+ comboboxData.onSearchValueChange("");
11256
+ setComboboxValue("");
11257
+ },
11258
+ onSuccess: () => {
11259
+ comboboxData.onSearchValueChange("");
11260
+ setComboboxValue("");
11261
+ }
11262
+ }
11263
+ );
11264
+ };
11235
11265
  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11236
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11237
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11238
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11266
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11239
11267
  const onSubmit = async () => {
11240
11268
  setIsSubmitting(true);
11241
11269
  let requestSucceeded = false;
11242
11270
  await requestOrderEdit(void 0, {
11243
11271
  onError: (e) => {
11244
- ui.toast.error(`Failed to request order edit: ${e.message}`);
11272
+ ui.toast.error(e.message);
11245
11273
  },
11246
11274
  onSuccess: () => {
11247
11275
  requestSucceeded = true;
@@ -11253,7 +11281,7 @@ const ShippingForm = ({ preview, order }) => {
11253
11281
  }
11254
11282
  await confirmOrderEdit(void 0, {
11255
11283
  onError: (e) => {
11256
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11284
+ ui.toast.error(e.message);
11257
11285
  },
11258
11286
  onSuccess: () => {
11259
11287
  handleSuccess();
@@ -11263,1296 +11291,340 @@ const ShippingForm = ({ preview, order }) => {
11263
11291
  }
11264
11292
  });
11265
11293
  };
11266
- const onKeydown = React.useCallback(
11267
- (e) => {
11268
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11269
- if (data || isSubmitting) {
11270
- return;
11294
+ if (isError) {
11295
+ throw error;
11296
+ }
11297
+ return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11298
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
11299
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
11300
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11301
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11302
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11303
+ ] }),
11304
+ /* @__PURE__ */ jsxRuntime.jsx(
11305
+ Combobox,
11306
+ {
11307
+ id: "promotion-combobox",
11308
+ "aria-describedby": "promotion-combobox-hint",
11309
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
11310
+ fetchNextPage: comboboxData.fetchNextPage,
11311
+ options: comboboxData.options,
11312
+ onSearchValueChange: comboboxData.onSearchValueChange,
11313
+ searchValue: comboboxData.searchValue,
11314
+ disabled: comboboxData.disabled || isAddingPromotions,
11315
+ onChange: add,
11316
+ value: comboboxValue
11317
+ }
11318
+ )
11319
+ ] }),
11320
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11321
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
11322
+ PromotionItem,
11323
+ {
11324
+ promotion,
11325
+ orderId: preview.id,
11326
+ isLoading: isPending
11327
+ },
11328
+ promotion.id
11329
+ )) })
11330
+ ] }) }),
11331
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11332
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11333
+ /* @__PURE__ */ jsxRuntime.jsx(
11334
+ ui.Button,
11335
+ {
11336
+ size: "small",
11337
+ type: "submit",
11338
+ isLoading: isSubmitting || isAddingPromotions,
11339
+ children: "Save"
11340
+ }
11341
+ )
11342
+ ] }) })
11343
+ ] });
11344
+ };
11345
+ const PromotionItem = ({
11346
+ promotion,
11347
+ orderId,
11348
+ isLoading
11349
+ }) => {
11350
+ var _a;
11351
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11352
+ const onRemove = async () => {
11353
+ removePromotions(
11354
+ {
11355
+ promo_codes: [promotion.code]
11356
+ },
11357
+ {
11358
+ onError: (e) => {
11359
+ ui.toast.error(e.message);
11271
11360
  }
11272
- onSubmit();
11273
11361
  }
11274
- },
11275
- [data, isSubmitting, onSubmit]
11276
- );
11277
- React.useEffect(() => {
11278
- document.addEventListener("keydown", onKeydown);
11279
- return () => {
11280
- document.removeEventListener("keydown", onKeydown);
11281
- };
11282
- }, [onKeydown]);
11283
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11284
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11285
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11286
- /* @__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: [
11287
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11288
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11289
- /* @__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." }) })
11290
- ] }),
11291
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11292
- /* @__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: [
11293
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
11294
- /* @__PURE__ */ jsxRuntime.jsx(
11295
- ui.Text,
11296
- {
11297
- size: "xsmall",
11298
- weight: "plus",
11299
- className: "text-ui-fg-muted",
11300
- children: "Shipping profile"
11301
- }
11302
- ),
11303
- /* @__PURE__ */ jsxRuntime.jsx(
11304
- ui.Text,
11305
- {
11306
- size: "xsmall",
11307
- weight: "plus",
11308
- className: "text-ui-fg-muted",
11309
- children: "Action"
11310
- }
11311
- )
11312
- ] }),
11313
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11314
- var _a2, _b, _c, _d, _e, _f, _g;
11315
- const items = getItemsWithShippingProfile(
11316
- profile.id,
11317
- order.items
11318
- );
11319
- const hasItems = items.length > 0;
11320
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11321
- (option) => option.shipping_profile_id === profile.id
11322
- );
11323
- const shippingMethod = preview.shipping_methods.find(
11324
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11325
- );
11326
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11327
- (action) => action.action === "SHIPPING_ADD"
11328
- );
11329
- return /* @__PURE__ */ jsxRuntime.jsxs(
11330
- radixUi.Accordion.Item,
11331
- {
11332
- value: profile.id,
11333
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11334
- children: [
11335
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
11336
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
11337
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11338
- ui.IconButton,
11339
- {
11340
- size: "2xsmall",
11341
- variant: "transparent",
11342
- className: "group/trigger",
11343
- disabled: !hasItems,
11344
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
11345
- }
11346
- ) }),
11347
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11348
- /* @__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" }) }) }),
11349
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
11350
- /* @__PURE__ */ jsxRuntime.jsx(
11351
- ui.Text,
11352
- {
11353
- size: "small",
11354
- weight: "plus",
11355
- leading: "compact",
11356
- children: profile.name
11357
- }
11358
- ),
11359
- /* @__PURE__ */ jsxRuntime.jsxs(
11360
- ui.Text,
11361
- {
11362
- size: "small",
11363
- leading: "compact",
11364
- className: "text-ui-fg-subtle",
11365
- children: [
11366
- items.length,
11367
- " ",
11368
- pluralize(items.length, "items", "item")
11369
- ]
11370
- }
11371
- )
11372
- ] })
11373
- ] }) : /* @__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: [
11374
- /* @__PURE__ */ jsxRuntime.jsx(
11375
- ui.Tooltip,
11376
- {
11377
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
11378
- var _a3, _b2, _c2;
11379
- return /* @__PURE__ */ jsxRuntime.jsx(
11380
- "li",
11381
- {
11382
- children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11383
- },
11384
- item.id
11385
- );
11386
- }) }),
11387
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11388
- ui.Badge,
11389
- {
11390
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11391
- size: "xsmall",
11392
- children: [
11393
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
11394
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
11395
- items.reduce(
11396
- (acc, item) => acc + item.quantity,
11397
- 0
11398
- ),
11399
- "x",
11400
- " ",
11401
- pluralize(items.length, "items", "item")
11402
- ] })
11403
- ]
11404
- }
11405
- )
11406
- }
11407
- ),
11408
- /* @__PURE__ */ jsxRuntime.jsx(
11409
- ui.Tooltip,
11410
- {
11411
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11412
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11413
- ui.Badge,
11414
- {
11415
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11416
- size: "xsmall",
11417
- children: [
11418
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
11419
- /* @__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 })
11420
- ]
11421
- }
11422
- )
11423
- }
11424
- ),
11425
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11426
- ui.Badge,
11427
- {
11428
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11429
- size: "xsmall",
11430
- children: [
11431
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
11432
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
11433
- ]
11434
- }
11435
- ) })
11436
- ] })
11437
- ] }),
11438
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
11439
- ActionMenu,
11440
- {
11441
- groups: [
11442
- {
11443
- actions: [
11444
- hasItems ? {
11445
- label: "Edit shipping option",
11446
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
11447
- onClick: () => {
11448
- setIsOpen(
11449
- STACKED_FOCUS_MODAL_ID,
11450
- true
11451
- );
11452
- setData({
11453
- shippingProfileId: profile.id,
11454
- shippingOption,
11455
- shippingMethod
11456
- });
11457
- }
11458
- } : void 0,
11459
- {
11460
- label: "Remove shipping option",
11461
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
11462
- onClick: () => {
11463
- if (shippingMethod) {
11464
- if (addShippingMethodAction) {
11465
- removeActionShippingMethod(
11466
- addShippingMethodAction.id
11467
- );
11468
- } else {
11469
- removeShippingMethod(
11470
- shippingMethod.id
11471
- );
11472
- }
11473
- }
11474
- }
11475
- }
11476
- ].filter(Boolean)
11477
- }
11478
- ]
11479
- }
11480
- ) : /* @__PURE__ */ jsxRuntime.jsx(
11481
- StackedModalTrigger,
11482
- {
11483
- shippingProfileId: profile.id,
11484
- shippingOption,
11485
- shippingMethod,
11486
- setData,
11487
- children: "Add shipping option"
11488
- }
11489
- )
11490
- ] }),
11491
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
11492
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11493
- items.map((item, idx) => {
11494
- var _a3, _b2, _c2, _d2, _e2;
11495
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11496
- /* @__PURE__ */ jsxRuntime.jsxs(
11497
- "div",
11498
- {
11499
- className: "flex items-center gap-x-3 px-3",
11500
- children: [
11501
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11502
- ui.Divider,
11503
- {
11504
- variant: "dashed",
11505
- orientation: "vertical"
11506
- }
11507
- ) }),
11508
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
11509
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11510
- ui.Text,
11511
- {
11512
- size: "small",
11513
- leading: "compact",
11514
- className: "text-ui-fg-subtle",
11515
- children: [
11516
- item.quantity,
11517
- "x"
11518
- ]
11519
- }
11520
- ) }),
11521
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
11522
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11523
- /* @__PURE__ */ jsxRuntime.jsxs(
11524
- ui.Text,
11525
- {
11526
- size: "small",
11527
- leading: "compact",
11528
- weight: "plus",
11529
- children: [
11530
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11531
- " (",
11532
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11533
- ")"
11534
- ]
11535
- }
11536
- ),
11537
- /* @__PURE__ */ jsxRuntime.jsx(
11538
- ui.Text,
11539
- {
11540
- size: "small",
11541
- leading: "compact",
11542
- className: "text-ui-fg-subtle",
11543
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11544
- }
11545
- )
11546
- ] })
11547
- ] })
11548
- ]
11549
- },
11550
- item.id
11551
- ),
11552
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
11553
- ] }, item.id);
11554
- })
11555
- ] })
11556
- ]
11557
- },
11558
- profile.id
11559
- );
11560
- }) })
11561
- ] }) })
11562
- ] }) }),
11563
- /* @__PURE__ */ jsxRuntime.jsx(
11564
- StackedFocusModal,
11565
- {
11566
- id: STACKED_FOCUS_MODAL_ID,
11567
- onOpenChangeCallback: (open) => {
11568
- if (!open) {
11569
- setData(null);
11570
- }
11571
- return open;
11572
- },
11573
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11574
- }
11575
- )
11576
- ] }),
11577
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11578
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11579
- /* @__PURE__ */ jsxRuntime.jsx(
11580
- ui.Button,
11581
- {
11582
- size: "small",
11583
- type: "button",
11584
- isLoading: isSubmitting,
11585
- onClick: onSubmit,
11586
- children: "Save"
11587
- }
11588
- )
11589
- ] }) })
11590
- ] });
11591
- };
11592
- const StackedModalTrigger = ({
11593
- shippingProfileId,
11594
- shippingOption,
11595
- shippingMethod,
11596
- setData,
11597
- children
11598
- }) => {
11599
- const { setIsOpen, getIsOpen } = useStackedModal();
11600
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11601
- const onToggle = () => {
11602
- if (isOpen) {
11603
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11604
- setData(null);
11605
- } else {
11606
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11607
- setData({
11608
- shippingProfileId,
11609
- shippingOption,
11610
- shippingMethod
11611
- });
11612
- }
11613
- };
11614
- return /* @__PURE__ */ jsxRuntime.jsx(
11615
- ui.Button,
11616
- {
11617
- size: "small",
11618
- variant: "secondary",
11619
- onClick: onToggle,
11620
- className: "text-ui-fg-primary shrink-0",
11621
- children
11622
- }
11623
- );
11624
- };
11625
- const ShippingProfileForm = ({
11626
- data,
11627
- order,
11628
- preview
11629
- }) => {
11630
- var _a, _b, _c, _d, _e, _f;
11631
- const { setIsOpen } = useStackedModal();
11632
- const form = reactHookForm.useForm({
11633
- resolver: zod.zodResolver(shippingMethodSchema),
11634
- defaultValues: {
11635
- location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
11636
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
11637
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
11638
- }
11639
- });
11640
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
11641
- const {
11642
- mutateAsync: updateShippingMethod,
11643
- isPending: isUpdatingShippingMethod
11644
- } = useDraftOrderUpdateShippingMethod(order.id);
11645
- const onSubmit = form.handleSubmit(async (values) => {
11646
- if (isEqual__default.default(values, form.formState.defaultValues)) {
11647
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11648
- return;
11649
- }
11650
- if (data.shippingMethod) {
11651
- await updateShippingMethod(
11652
- {
11653
- method_id: data.shippingMethod.id,
11654
- shipping_option_id: values.shipping_option_id,
11655
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11656
- },
11657
- {
11658
- onError: (e) => {
11659
- ui.toast.error(e.message);
11660
- },
11661
- onSuccess: () => {
11662
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11663
- }
11664
- }
11665
- );
11666
- return;
11667
- }
11668
- await addShippingMethod(
11669
- {
11670
- shipping_option_id: values.shipping_option_id,
11671
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11672
- },
11673
- {
11674
- onError: (e) => {
11675
- ui.toast.error(e.message);
11676
- },
11677
- onSuccess: () => {
11678
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11679
- }
11680
- }
11681
- );
11682
- });
11683
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11684
- KeyboundForm,
11685
- {
11686
- className: "flex h-full flex-col overflow-hidden",
11687
- onSubmit,
11688
- children: [
11689
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
11690
- /* @__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: [
11691
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11692
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11693
- /* @__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." }) })
11694
- ] }),
11695
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11696
- /* @__PURE__ */ jsxRuntime.jsx(
11697
- LocationField,
11698
- {
11699
- control: form.control,
11700
- setValue: form.setValue
11701
- }
11702
- ),
11703
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11704
- /* @__PURE__ */ jsxRuntime.jsx(
11705
- ShippingOptionField,
11706
- {
11707
- shippingProfileId: data.shippingProfileId,
11708
- preview,
11709
- control: form.control
11710
- }
11711
- ),
11712
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11713
- /* @__PURE__ */ jsxRuntime.jsx(
11714
- CustomAmountField,
11715
- {
11716
- control: form.control,
11717
- currencyCode: order.currency_code
11718
- }
11719
- ),
11720
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11721
- /* @__PURE__ */ jsxRuntime.jsx(
11722
- ItemsPreview,
11723
- {
11724
- order,
11725
- shippingProfileId: data.shippingProfileId
11726
- }
11727
- )
11728
- ] }) }) }),
11729
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11730
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11731
- /* @__PURE__ */ jsxRuntime.jsx(
11732
- ui.Button,
11733
- {
11734
- size: "small",
11735
- type: "submit",
11736
- isLoading: isPending || isUpdatingShippingMethod,
11737
- children: data.shippingMethod ? "Update" : "Add"
11738
- }
11739
- )
11740
- ] }) })
11741
- ]
11742
- }
11743
- ) }) });
11744
- };
11745
- const shippingMethodSchema = objectType({
11746
- location_id: stringType(),
11747
- shipping_option_id: stringType(),
11748
- custom_amount: unionType([numberType(), stringType()]).optional()
11749
- });
11750
- const ItemsPreview = ({ order, shippingProfileId }) => {
11751
- const matches = order.items.filter(
11752
- (item) => {
11753
- var _a, _b, _c;
11754
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
11755
- }
11756
- );
11757
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
11758
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11759
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
11760
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
11761
- ] }) }),
11762
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
11763
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
11764
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
11765
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
11766
- ] }),
11767
- /* @__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(
11768
- "div",
11769
- {
11770
- className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
11771
- children: [
11772
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11773
- /* @__PURE__ */ jsxRuntime.jsx(
11774
- Thumbnail,
11775
- {
11776
- thumbnail: item.thumbnail,
11777
- alt: item.product_title ?? void 0
11778
- }
11779
- ),
11780
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11781
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
11782
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
11783
- /* @__PURE__ */ jsxRuntime.jsxs(
11784
- ui.Text,
11785
- {
11786
- size: "small",
11787
- leading: "compact",
11788
- className: "text-ui-fg-subtle",
11789
- children: [
11790
- "(",
11791
- item.variant_title,
11792
- ")"
11793
- ]
11794
- }
11795
- )
11796
- ] }),
11797
- /* @__PURE__ */ jsxRuntime.jsx(
11798
- ui.Text,
11799
- {
11800
- size: "small",
11801
- leading: "compact",
11802
- className: "text-ui-fg-subtle",
11803
- children: item.variant_sku
11804
- }
11805
- )
11806
- ] })
11807
- ] }),
11808
- /* @__PURE__ */ jsxRuntime.jsxs(
11809
- ui.Text,
11810
- {
11811
- size: "small",
11812
- leading: "compact",
11813
- className: "text-ui-fg-subtle",
11814
- children: [
11815
- item.quantity,
11816
- "x"
11817
- ]
11818
- }
11819
- )
11820
- ]
11821
- },
11822
- item.id
11823
- )) : /* @__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: [
11824
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
11825
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
11826
- 'No items found for "',
11827
- query,
11828
- '".'
11829
- ] })
11830
- ] }) })
11831
- ] })
11832
- ] });
11833
- };
11834
- const LocationField = ({ control, setValue }) => {
11835
- const locations = useComboboxData({
11836
- queryKey: ["locations"],
11837
- queryFn: async (params) => {
11838
- return await sdk.admin.stockLocation.list(params);
11839
- },
11840
- getOptions: (data) => {
11841
- return data.stock_locations.map((location) => ({
11842
- label: location.name,
11843
- value: location.id
11844
- }));
11845
- }
11846
- });
11847
- return /* @__PURE__ */ jsxRuntime.jsx(
11848
- Form$2.Field,
11849
- {
11850
- control,
11851
- name: "location_id",
11852
- render: ({ field: { onChange, ...field } }) => {
11853
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11854
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11855
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
11856
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
11857
- ] }),
11858
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11859
- Combobox,
11860
- {
11861
- options: locations.options,
11862
- fetchNextPage: locations.fetchNextPage,
11863
- isFetchingNextPage: locations.isFetchingNextPage,
11864
- searchValue: locations.searchValue,
11865
- onSearchValueChange: locations.onSearchValueChange,
11866
- placeholder: "Select location",
11867
- onChange: (value) => {
11868
- setValue("shipping_option_id", "", {
11869
- shouldDirty: true,
11870
- shouldTouch: true
11871
- });
11872
- onChange(value);
11873
- },
11874
- ...field
11875
- }
11876
- ) })
11877
- ] }) });
11878
- }
11879
- }
11880
- );
11881
- };
11882
- const ShippingOptionField = ({
11883
- shippingProfileId,
11884
- preview,
11885
- control
11886
- }) => {
11887
- var _a;
11888
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
11889
- const shippingOptions = useComboboxData({
11890
- queryKey: ["shipping_options", locationId, shippingProfileId],
11891
- queryFn: async (params) => {
11892
- return await sdk.admin.shippingOption.list({
11893
- ...params,
11894
- stock_location_id: locationId,
11895
- shipping_profile_id: shippingProfileId
11896
- });
11897
- },
11898
- getOptions: (data) => {
11899
- return data.shipping_options.map((option) => {
11900
- var _a2;
11901
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
11902
- (r) => r.attribute === "is_return" && r.value === "true"
11903
- )) {
11904
- return void 0;
11905
- }
11906
- return {
11907
- label: option.name,
11908
- value: option.id
11909
- };
11910
- }).filter(Boolean);
11911
- },
11912
- enabled: !!locationId && !!shippingProfileId,
11913
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
11914
- });
11915
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
11916
- return /* @__PURE__ */ jsxRuntime.jsx(
11917
- Form$2.Field,
11918
- {
11919
- control,
11920
- name: "shipping_option_id",
11921
- render: ({ field }) => {
11922
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11923
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11924
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
11925
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
11926
- ] }),
11927
- /* @__PURE__ */ jsxRuntime.jsx(
11928
- ConditionalTooltip,
11929
- {
11930
- content: tooltipContent,
11931
- showTooltip: !locationId || !shippingProfileId,
11932
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11933
- Combobox,
11934
- {
11935
- options: shippingOptions.options,
11936
- fetchNextPage: shippingOptions.fetchNextPage,
11937
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
11938
- searchValue: shippingOptions.searchValue,
11939
- onSearchValueChange: shippingOptions.onSearchValueChange,
11940
- placeholder: "Select shipping option",
11941
- ...field,
11942
- disabled: !locationId || !shippingProfileId
11943
- }
11944
- ) }) })
11945
- }
11946
- )
11947
- ] }) });
11948
- }
11949
- }
11950
- );
11951
- };
11952
- const CustomAmountField = ({
11953
- control,
11954
- currencyCode
11955
- }) => {
11956
- return /* @__PURE__ */ jsxRuntime.jsx(
11957
- Form$2.Field,
11958
- {
11959
- control,
11960
- name: "custom_amount",
11961
- render: ({ field: { onChange, ...field } }) => {
11962
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11963
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11964
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
11965
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
11966
- ] }),
11967
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11968
- ui.CurrencyInput,
11969
- {
11970
- ...field,
11971
- onValueChange: (value) => onChange(value),
11972
- symbol: getNativeSymbol(currencyCode),
11973
- code: currencyCode
11974
- }
11975
- ) })
11976
- ] });
11977
- }
11978
- }
11979
- );
11980
- };
11981
- const TransferOwnership = () => {
11982
- const { id } = reactRouterDom.useParams();
11983
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11984
- fields: "id,customer_id,customer.*"
11985
- });
11986
- if (isError) {
11987
- throw error;
11988
- }
11989
- const isReady = !isPending && !!draft_order;
11990
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11991
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11992
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11993
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
11994
- ] }),
11995
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
11996
- ] });
11997
- };
11998
- const TransferOwnershipForm = ({ order }) => {
11999
- var _a, _b;
12000
- const form = reactHookForm.useForm({
12001
- defaultValues: {
12002
- customer_id: order.customer_id || ""
12003
- },
12004
- resolver: zod.zodResolver(schema$2)
12005
- });
12006
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12007
- const { handleSuccess } = useRouteModal();
12008
- const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12009
- const currentCustomer = order.customer ? {
12010
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
12011
- value: order.customer.id
12012
- } : null;
12013
- const onSubmit = form.handleSubmit(async (data) => {
12014
- await mutateAsync(
12015
- { customer_id: data.customer_id },
12016
- {
12017
- onSuccess: () => {
12018
- ui.toast.success("Customer updated");
12019
- handleSuccess();
12020
- },
12021
- onError: (error) => {
12022
- ui.toast.error(error.message);
12023
- }
12024
- }
12025
- );
12026
- });
12027
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12028
- KeyboundForm,
12029
- {
12030
- className: "flex flex-1 flex-col overflow-hidden",
12031
- onSubmit,
12032
- children: [
12033
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12034
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12035
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12036
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12037
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12038
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12039
- ] }),
12040
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12041
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12042
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12043
- ] })
12044
- ] }),
12045
- /* @__PURE__ */ jsxRuntime.jsx(
12046
- CustomerField,
12047
- {
12048
- control: form.control,
12049
- currentCustomerId: order.customer_id
12050
- }
12051
- )
12052
- ] }),
12053
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12054
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12055
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12056
- ] }) })
12057
- ]
12058
- }
12059
- ) });
12060
- };
12061
- const CustomerField = ({ control, currentCustomerId }) => {
12062
- const customers = useComboboxData({
12063
- queryFn: async (params) => {
12064
- return await sdk.admin.customer.list({
12065
- ...params,
12066
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12067
- });
12068
- },
12069
- queryKey: ["customers"],
12070
- getOptions: (data) => {
12071
- return data.customers.map((customer) => {
12072
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12073
- return {
12074
- label: name ? `${name} (${customer.email})` : customer.email,
12075
- value: customer.id
12076
- };
12077
- });
12078
- }
12079
- });
12080
- return /* @__PURE__ */ jsxRuntime.jsx(
12081
- Form$2.Field,
12082
- {
12083
- name: "customer_id",
12084
- control,
12085
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12086
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12087
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12088
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12089
- ] }),
12090
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12091
- Combobox,
12092
- {
12093
- options: customers.options,
12094
- fetchNextPage: customers.fetchNextPage,
12095
- isFetchingNextPage: customers.isFetchingNextPage,
12096
- searchValue: customers.searchValue,
12097
- onSearchValueChange: customers.onSearchValueChange,
12098
- placeholder: "Select customer",
12099
- ...field
12100
- }
12101
- ) }),
12102
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12103
- ] })
12104
- }
12105
- );
12106
- };
12107
- const Illustration = () => {
12108
- return /* @__PURE__ */ jsxRuntime.jsxs(
12109
- "svg",
12110
- {
12111
- width: "280",
12112
- height: "180",
12113
- viewBox: "0 0 280 180",
12114
- fill: "none",
12115
- xmlns: "http://www.w3.org/2000/svg",
12116
- children: [
12117
- /* @__PURE__ */ jsxRuntime.jsx(
12118
- "rect",
12119
- {
12120
- x: "0.00428286",
12121
- y: "-0.742904",
12122
- width: "33.5",
12123
- height: "65.5",
12124
- rx: "6.75",
12125
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
12126
- fill: "#D4D4D8",
12127
- stroke: "#52525B",
12128
- strokeWidth: "1.5"
12129
- }
12130
- ),
12131
- /* @__PURE__ */ jsxRuntime.jsx(
12132
- "rect",
12133
- {
12134
- x: "0.00428286",
12135
- y: "-0.742904",
12136
- width: "33.5",
12137
- height: "65.5",
12138
- rx: "6.75",
12139
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
12140
- fill: "white",
12141
- stroke: "#52525B",
12142
- strokeWidth: "1.5"
12143
- }
12144
- ),
12145
- /* @__PURE__ */ jsxRuntime.jsx(
12146
- "path",
12147
- {
12148
- d: "M180.579 107.142L179.126 107.959",
12149
- stroke: "#52525B",
12150
- strokeWidth: "1.5",
12151
- strokeLinecap: "round",
12152
- strokeLinejoin: "round"
12153
- }
12154
- ),
12155
- /* @__PURE__ */ jsxRuntime.jsx(
12156
- "path",
12157
- {
12158
- opacity: "0.88",
12159
- d: "M182.305 109.546L180.257 109.534",
12160
- stroke: "#52525B",
12161
- strokeWidth: "1.5",
12162
- strokeLinecap: "round",
12163
- strokeLinejoin: "round"
12164
- }
12165
- ),
12166
- /* @__PURE__ */ jsxRuntime.jsx(
12167
- "path",
12168
- {
12169
- opacity: "0.75",
12170
- d: "M180.551 111.93L179.108 111.096",
12171
- stroke: "#52525B",
12172
- strokeWidth: "1.5",
12173
- strokeLinecap: "round",
12174
- strokeLinejoin: "round"
12175
- }
12176
- ),
12177
- /* @__PURE__ */ jsxRuntime.jsx(
12178
- "path",
12179
- {
12180
- opacity: "0.63",
12181
- d: "M176.347 112.897L176.354 111.73",
12182
- stroke: "#52525B",
12183
- strokeWidth: "1.5",
12184
- strokeLinecap: "round",
12185
- strokeLinejoin: "round"
12186
- }
12187
- ),
12188
- /* @__PURE__ */ jsxRuntime.jsx(
12189
- "path",
12190
- {
12191
- opacity: "0.5",
12192
- d: "M172.153 111.881L173.606 111.064",
12193
- stroke: "#52525B",
12194
- strokeWidth: "1.5",
12195
- strokeLinecap: "round",
12196
- strokeLinejoin: "round"
12197
- }
12198
- ),
12199
- /* @__PURE__ */ jsxRuntime.jsx(
12200
- "path",
12201
- {
12202
- opacity: "0.38",
12203
- d: "M170.428 109.478L172.476 109.489",
12204
- stroke: "#52525B",
12205
- strokeWidth: "1.5",
12206
- strokeLinecap: "round",
12207
- strokeLinejoin: "round"
12208
- }
12209
- ),
12210
- /* @__PURE__ */ jsxRuntime.jsx(
12211
- "path",
12212
- {
12213
- opacity: "0.25",
12214
- d: "M172.181 107.094L173.624 107.928",
12215
- stroke: "#52525B",
12216
- strokeWidth: "1.5",
12217
- strokeLinecap: "round",
12218
- strokeLinejoin: "round"
12219
- }
12220
- ),
12221
- /* @__PURE__ */ jsxRuntime.jsx(
12222
- "path",
12223
- {
12224
- opacity: "0.13",
12225
- d: "M176.386 106.126L176.379 107.294",
12226
- stroke: "#52525B",
12227
- strokeWidth: "1.5",
12228
- strokeLinecap: "round",
12229
- strokeLinejoin: "round"
12230
- }
12231
- ),
12232
- /* @__PURE__ */ jsxRuntime.jsx(
12233
- "rect",
12234
- {
12235
- width: "12",
12236
- height: "3",
12237
- rx: "1.5",
12238
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12239
- fill: "#D4D4D8"
12240
- }
12241
- ),
12242
- /* @__PURE__ */ jsxRuntime.jsx(
12243
- "rect",
12244
- {
12245
- x: "0.00428286",
12246
- y: "-0.742904",
12247
- width: "33.5",
12248
- height: "65.5",
12249
- rx: "6.75",
12250
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12251
- fill: "#D4D4D8",
12252
- stroke: "#52525B",
12253
- strokeWidth: "1.5"
12254
- }
12255
- ),
12256
- /* @__PURE__ */ jsxRuntime.jsx(
12257
- "rect",
12258
- {
12259
- x: "0.00428286",
12260
- y: "-0.742904",
12261
- width: "33.5",
12262
- height: "65.5",
12263
- rx: "6.75",
12264
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12265
- fill: "white",
12266
- stroke: "#52525B",
12267
- strokeWidth: "1.5"
12268
- }
12269
- ),
12270
- /* @__PURE__ */ jsxRuntime.jsx(
12271
- "rect",
12272
- {
12273
- width: "12",
12274
- height: "3",
12275
- rx: "1.5",
12276
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12277
- fill: "#D4D4D8"
12278
- }
12279
- ),
12280
- /* @__PURE__ */ jsxRuntime.jsx(
12281
- "rect",
12282
- {
12283
- width: "17",
12284
- height: "3",
12285
- rx: "1.5",
12286
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12287
- fill: "#D4D4D8"
12288
- }
12289
- ),
12290
- /* @__PURE__ */ jsxRuntime.jsx(
12291
- "rect",
12292
- {
12293
- width: "12",
12294
- height: "3",
12295
- rx: "1.5",
12296
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12297
- fill: "#D4D4D8"
12298
- }
12299
- ),
12300
- /* @__PURE__ */ jsxRuntime.jsx(
12301
- "path",
12302
- {
12303
- d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12304
- fill: "#A1A1AA"
12305
- }
12306
- ),
12307
- /* @__PURE__ */ jsxRuntime.jsx(
12308
- "rect",
12309
- {
12310
- width: "17",
12311
- height: "3",
12312
- rx: "1.5",
12313
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12314
- fill: "#A1A1AA"
12315
- }
12316
- ),
12317
- /* @__PURE__ */ jsxRuntime.jsx(
12318
- "rect",
12319
- {
12320
- width: "12",
12321
- height: "3",
12322
- rx: "1.5",
12323
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12324
- fill: "#A1A1AA"
12325
- }
12326
- ),
11362
+ );
11363
+ };
11364
+ const displayValue = getDisplayValue(promotion);
11365
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11366
+ "div",
11367
+ {
11368
+ className: ui.clx(
11369
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11370
+ {
11371
+ "animate-pulse": isLoading
11372
+ }
11373
+ ),
11374
+ children: [
11375
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11376
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11377
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11378
+ displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11379
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11380
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11381
+ ] }),
11382
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11383
+ ] })
11384
+ ] }),
12327
11385
  /* @__PURE__ */ jsxRuntime.jsx(
12328
- "path",
12329
- {
12330
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12331
- fill: "#52525B"
12332
- }
12333
- ),
12334
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12335
- "path",
12336
- {
12337
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12338
- stroke: "#A1A1AA",
12339
- strokeWidth: "1.5",
12340
- strokeLinecap: "round",
12341
- strokeLinejoin: "round"
12342
- }
12343
- ) }),
12344
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12345
- "path",
12346
- {
12347
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12348
- stroke: "#A1A1AA",
12349
- strokeWidth: "1.5",
12350
- strokeLinecap: "round",
12351
- strokeLinejoin: "round"
12352
- }
12353
- ) }),
12354
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12355
- "path",
12356
- {
12357
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12358
- stroke: "#A1A1AA",
12359
- strokeWidth: "1.5",
12360
- strokeLinecap: "round",
12361
- strokeLinejoin: "round"
12362
- }
12363
- ) }),
12364
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12365
- "path",
12366
- {
12367
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12368
- stroke: "#A1A1AA",
12369
- strokeWidth: "1.5",
12370
- strokeLinecap: "round",
12371
- strokeLinejoin: "round"
12372
- }
12373
- ) }),
12374
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12375
- "path",
12376
- {
12377
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12378
- stroke: "#A1A1AA",
12379
- strokeWidth: "1.5",
12380
- strokeLinecap: "round",
12381
- strokeLinejoin: "round"
12382
- }
12383
- ) }),
12384
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12385
- "path",
11386
+ ui.IconButton,
12386
11387
  {
12387
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12388
- stroke: "#A1A1AA",
12389
- strokeWidth: "1.5",
12390
- strokeLinecap: "round",
12391
- strokeLinejoin: "round"
11388
+ size: "small",
11389
+ type: "button",
11390
+ variant: "transparent",
11391
+ onClick: onRemove,
11392
+ isLoading: isPending || isLoading,
11393
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
12392
11394
  }
12393
- ) }),
12394
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12395
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12396
- "rect",
12397
- {
12398
- width: "12",
12399
- height: "12",
12400
- fill: "white",
12401
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12402
- }
12403
- ) }),
12404
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12405
- "rect",
12406
- {
12407
- width: "12",
12408
- height: "12",
12409
- fill: "white",
12410
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12411
- }
12412
- ) }),
12413
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12414
- "rect",
12415
- {
12416
- width: "12",
12417
- height: "12",
12418
- fill: "white",
12419
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12420
- }
12421
- ) }),
12422
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12423
- "rect",
12424
- {
12425
- width: "12",
12426
- height: "12",
12427
- fill: "white",
12428
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12429
- }
12430
- ) }),
12431
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12432
- "rect",
11395
+ )
11396
+ ]
11397
+ },
11398
+ promotion.id
11399
+ );
11400
+ };
11401
+ function getDisplayValue(promotion) {
11402
+ var _a, _b, _c, _d;
11403
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11404
+ if (!value) {
11405
+ return null;
11406
+ }
11407
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11408
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11409
+ if (!currency) {
11410
+ return null;
11411
+ }
11412
+ return getLocaleAmount(value, currency);
11413
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11414
+ return formatPercentage(value);
11415
+ }
11416
+ return null;
11417
+ }
11418
+ const formatter = new Intl.NumberFormat([], {
11419
+ style: "percent",
11420
+ minimumFractionDigits: 2
11421
+ });
11422
+ const formatPercentage = (value, isPercentageValue = false) => {
11423
+ let val = value || 0;
11424
+ if (!isPercentageValue) {
11425
+ val = val / 100;
11426
+ }
11427
+ return formatter.format(val);
11428
+ };
11429
+ function getPromotionIds(items, shippingMethods) {
11430
+ const promotionIds = /* @__PURE__ */ new Set();
11431
+ for (const item of items) {
11432
+ if (item.adjustments) {
11433
+ for (const adjustment of item.adjustments) {
11434
+ if (adjustment.promotion_id) {
11435
+ promotionIds.add(adjustment.promotion_id);
11436
+ }
11437
+ }
11438
+ }
11439
+ }
11440
+ for (const shippingMethod of shippingMethods) {
11441
+ if (shippingMethod.adjustments) {
11442
+ for (const adjustment of shippingMethod.adjustments) {
11443
+ if (adjustment.promotion_id) {
11444
+ promotionIds.add(adjustment.promotion_id);
11445
+ }
11446
+ }
11447
+ }
11448
+ }
11449
+ return Array.from(promotionIds);
11450
+ }
11451
+ const SalesChannel = () => {
11452
+ const { id } = reactRouterDom.useParams();
11453
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11454
+ id,
11455
+ {
11456
+ fields: "+sales_channel_id"
11457
+ },
11458
+ {
11459
+ enabled: !!id
11460
+ }
11461
+ );
11462
+ if (isError) {
11463
+ throw error;
11464
+ }
11465
+ const ISrEADY = !!draft_order && !isPending;
11466
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11467
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11468
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11469
+ /* @__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" }) })
11470
+ ] }),
11471
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11472
+ ] });
11473
+ };
11474
+ const SalesChannelForm = ({ order }) => {
11475
+ const form = reactHookForm.useForm({
11476
+ defaultValues: {
11477
+ sales_channel_id: order.sales_channel_id || ""
11478
+ },
11479
+ resolver: zod.zodResolver(schema$2)
11480
+ });
11481
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11482
+ const { handleSuccess } = useRouteModal();
11483
+ const onSubmit = form.handleSubmit(async (data) => {
11484
+ await mutateAsync(
11485
+ {
11486
+ sales_channel_id: data.sales_channel_id
11487
+ },
11488
+ {
11489
+ onSuccess: () => {
11490
+ ui.toast.success("Sales channel updated");
11491
+ handleSuccess();
11492
+ },
11493
+ onError: (error) => {
11494
+ ui.toast.error(error.message);
11495
+ }
11496
+ }
11497
+ );
11498
+ });
11499
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11500
+ KeyboundForm,
11501
+ {
11502
+ className: "flex flex-1 flex-col overflow-hidden",
11503
+ onSubmit,
11504
+ children: [
11505
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11506
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11507
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11508
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11509
+ ] }) })
11510
+ ]
11511
+ }
11512
+ ) });
11513
+ };
11514
+ const SalesChannelField = ({ control, order }) => {
11515
+ const salesChannels = useComboboxData({
11516
+ queryFn: async (params) => {
11517
+ return await sdk.admin.salesChannel.list(params);
11518
+ },
11519
+ queryKey: ["sales-channels"],
11520
+ getOptions: (data) => {
11521
+ return data.sales_channels.map((salesChannel) => ({
11522
+ label: salesChannel.name,
11523
+ value: salesChannel.id
11524
+ }));
11525
+ },
11526
+ defaultValue: order.sales_channel_id || void 0
11527
+ });
11528
+ return /* @__PURE__ */ jsxRuntime.jsx(
11529
+ Form$2.Field,
11530
+ {
11531
+ control,
11532
+ name: "sales_channel_id",
11533
+ render: ({ field }) => {
11534
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11535
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11536
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11537
+ Combobox,
12433
11538
  {
12434
- width: "12",
12435
- height: "12",
12436
- fill: "white",
12437
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
11539
+ options: salesChannels.options,
11540
+ fetchNextPage: salesChannels.fetchNextPage,
11541
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11542
+ searchValue: salesChannels.searchValue,
11543
+ onSearchValueChange: salesChannels.onSearchValueChange,
11544
+ placeholder: "Select sales channel",
11545
+ ...field
12438
11546
  }
12439
11547
  ) }),
12440
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12441
- "rect",
12442
- {
12443
- width: "12",
12444
- height: "12",
12445
- fill: "white",
12446
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12447
- }
12448
- ) })
12449
- ] })
12450
- ]
11548
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11549
+ ] });
11550
+ }
12451
11551
  }
12452
11552
  );
12453
11553
  };
12454
11554
  const schema$2 = objectType({
12455
- customer_id: stringType().min(1)
11555
+ sales_channel_id: stringType().min(1)
12456
11556
  });
12457
- const PROMOTION_QUERY_KEY = "promotions";
12458
- const promotionsQueryKeys = {
12459
- list: (query2) => [
12460
- PROMOTION_QUERY_KEY,
12461
- query2 ? query2 : void 0
12462
- ],
12463
- detail: (id, query2) => [
12464
- PROMOTION_QUERY_KEY,
12465
- id,
12466
- query2 ? query2 : void 0
12467
- ]
12468
- };
12469
- const usePromotions = (query2, options) => {
12470
- const { data, ...rest } = reactQuery.useQuery({
12471
- queryKey: promotionsQueryKeys.list(query2),
12472
- queryFn: async () => sdk.admin.promotion.list(query2),
12473
- ...options
12474
- });
12475
- return { ...data, ...rest };
12476
- };
12477
- const Promotions = () => {
11557
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11558
+ const Shipping = () => {
11559
+ var _a;
12478
11560
  const { id } = reactRouterDom.useParams();
11561
+ const { order, isPending, isError, error } = useOrder(id, {
11562
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11563
+ });
12479
11564
  const {
12480
11565
  order: preview,
11566
+ isPending: isPreviewPending,
12481
11567
  isError: isPreviewError,
12482
11568
  error: previewError
12483
- } = useOrderPreview(id, void 0);
11569
+ } = useOrderPreview(id);
12484
11570
  useInitiateOrderEdit({ preview });
12485
11571
  const { onCancel } = useCancelOrderEdit({ preview });
11572
+ if (isError) {
11573
+ throw error;
11574
+ }
12486
11575
  if (isPreviewError) {
12487
11576
  throw previewError;
12488
11577
  }
12489
- const isReady = !!preview;
12490
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
12491
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
12492
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
12493
- ] });
11578
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11579
+ const isReady = preview && !isPreviewPending && order && !isPending;
11580
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11581
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11582
+ /* @__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: [
11583
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11584
+ /* @__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." }) })
11585
+ ] }) }) }),
11586
+ /* @__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" }) }) })
11587
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11588
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11589
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11590
+ ] }) });
12494
11591
  };
12495
- const PromotionForm = ({ preview }) => {
12496
- const { items, shipping_methods } = preview;
11592
+ const ShippingForm = ({ preview, order }) => {
11593
+ var _a;
11594
+ const { setIsOpen } = useStackedModal();
12497
11595
  const [isSubmitting, setIsSubmitting] = React.useState(false);
12498
- const [comboboxValue, setComboboxValue] = React.useState("");
12499
- const { handleSuccess } = useRouteModal();
12500
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
12501
- const promoIds = getPromotionIds(items, shipping_methods);
12502
- const { promotions, isPending, isError, error } = usePromotions(
11596
+ const [data, setData] = React.useState(null);
11597
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11598
+ const { shipping_options } = useShippingOptions(
12503
11599
  {
12504
- id: promoIds
11600
+ id: appliedShippingOptionIds,
11601
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12505
11602
  },
12506
11603
  {
12507
- enabled: !!promoIds.length
11604
+ enabled: appliedShippingOptionIds.length > 0
12508
11605
  }
12509
11606
  );
12510
- const comboboxData = useComboboxData({
12511
- queryKey: ["promotions", "combobox", promoIds],
12512
- queryFn: async (params) => {
12513
- return await sdk.admin.promotion.list({
12514
- ...params,
12515
- id: {
12516
- $nin: promoIds
12517
- }
12518
- });
12519
- },
12520
- getOptions: (data) => {
12521
- return data.promotions.map((promotion) => ({
12522
- label: promotion.code,
12523
- value: promotion.code
12524
- }));
12525
- }
12526
- });
12527
- const add = async (value) => {
12528
- if (!value) {
12529
- return;
12530
- }
12531
- addPromotions(
12532
- {
12533
- promo_codes: [value]
12534
- },
12535
- {
12536
- onError: (e) => {
12537
- ui.toast.error(e.message);
12538
- comboboxData.onSearchValueChange("");
12539
- setComboboxValue("");
12540
- },
12541
- onSuccess: () => {
12542
- comboboxData.onSearchValueChange("");
12543
- setComboboxValue("");
12544
- }
12545
- }
12546
- );
12547
- };
11607
+ const uniqueShippingProfiles = React.useMemo(() => {
11608
+ const profiles = /* @__PURE__ */ new Map();
11609
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11610
+ profiles.set(profile.id, profile);
11611
+ });
11612
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11613
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11614
+ });
11615
+ return Array.from(profiles.values());
11616
+ }, [order.items, shipping_options]);
11617
+ const { handleSuccess } = useRouteModal();
12548
11618
  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12549
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11619
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11620
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11621
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12550
11622
  const onSubmit = async () => {
12551
11623
  setIsSubmitting(true);
12552
11624
  let requestSucceeded = false;
12553
11625
  await requestOrderEdit(void 0, {
12554
11626
  onError: (e) => {
12555
- ui.toast.error(e.message);
11627
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
12556
11628
  },
12557
11629
  onSuccess: () => {
12558
11630
  requestSucceeded = true;
@@ -12564,7 +11636,7 @@ const PromotionForm = ({ preview }) => {
12564
11636
  }
12565
11637
  await confirmOrderEdit(void 0, {
12566
11638
  onError: (e) => {
12567
- ui.toast.error(e.message);
11639
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12568
11640
  },
12569
11641
  onSuccess: () => {
12570
11642
  handleSuccess();
@@ -12574,269 +11646,721 @@ const PromotionForm = ({ preview }) => {
12574
11646
  }
12575
11647
  });
12576
11648
  };
12577
- if (isError) {
12578
- throw error;
12579
- }
12580
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
12581
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
12582
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
12583
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12584
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
12585
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11649
+ const onKeydown = React.useCallback(
11650
+ (e) => {
11651
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11652
+ if (data || isSubmitting) {
11653
+ return;
11654
+ }
11655
+ onSubmit();
11656
+ }
11657
+ },
11658
+ [data, isSubmitting, onSubmit]
11659
+ );
11660
+ React.useEffect(() => {
11661
+ document.addEventListener("keydown", onKeydown);
11662
+ return () => {
11663
+ document.removeEventListener("keydown", onKeydown);
11664
+ };
11665
+ }, [onKeydown]);
11666
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11667
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11668
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11669
+ /* @__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: [
11670
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11671
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11672
+ /* @__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." }) })
12586
11673
  ] }),
12587
- /* @__PURE__ */ jsxRuntime.jsx(
12588
- Combobox,
12589
- {
12590
- id: "promotion-combobox",
12591
- "aria-describedby": "promotion-combobox-hint",
12592
- isFetchingNextPage: comboboxData.isFetchingNextPage,
12593
- fetchNextPage: comboboxData.fetchNextPage,
12594
- options: comboboxData.options,
12595
- onSearchValueChange: comboboxData.onSearchValueChange,
12596
- searchValue: comboboxData.searchValue,
12597
- disabled: comboboxData.disabled || isAddingPromotions,
12598
- onChange: add,
12599
- value: comboboxValue
12600
- }
12601
- )
12602
- ] }),
12603
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12604
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
12605
- PromotionItem,
11674
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11675
+ /* @__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: [
11676
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
11677
+ /* @__PURE__ */ jsxRuntime.jsx(
11678
+ ui.Text,
11679
+ {
11680
+ size: "xsmall",
11681
+ weight: "plus",
11682
+ className: "text-ui-fg-muted",
11683
+ children: "Shipping profile"
11684
+ }
11685
+ ),
11686
+ /* @__PURE__ */ jsxRuntime.jsx(
11687
+ ui.Text,
11688
+ {
11689
+ size: "xsmall",
11690
+ weight: "plus",
11691
+ className: "text-ui-fg-muted",
11692
+ children: "Action"
11693
+ }
11694
+ )
11695
+ ] }),
11696
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11697
+ var _a2, _b, _c, _d, _e, _f, _g;
11698
+ const items = getItemsWithShippingProfile(
11699
+ profile.id,
11700
+ order.items
11701
+ );
11702
+ const hasItems = items.length > 0;
11703
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11704
+ (option) => option.shipping_profile_id === profile.id
11705
+ );
11706
+ const shippingMethod = preview.shipping_methods.find(
11707
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11708
+ );
11709
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11710
+ (action) => action.action === "SHIPPING_ADD"
11711
+ );
11712
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11713
+ radixUi.Accordion.Item,
11714
+ {
11715
+ value: profile.id,
11716
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11717
+ children: [
11718
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
11719
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
11720
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11721
+ ui.IconButton,
11722
+ {
11723
+ size: "2xsmall",
11724
+ variant: "transparent",
11725
+ className: "group/trigger",
11726
+ disabled: !hasItems,
11727
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
11728
+ }
11729
+ ) }),
11730
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11731
+ /* @__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" }) }) }),
11732
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
11733
+ /* @__PURE__ */ jsxRuntime.jsx(
11734
+ ui.Text,
11735
+ {
11736
+ size: "small",
11737
+ weight: "plus",
11738
+ leading: "compact",
11739
+ children: profile.name
11740
+ }
11741
+ ),
11742
+ /* @__PURE__ */ jsxRuntime.jsxs(
11743
+ ui.Text,
11744
+ {
11745
+ size: "small",
11746
+ leading: "compact",
11747
+ className: "text-ui-fg-subtle",
11748
+ children: [
11749
+ items.length,
11750
+ " ",
11751
+ pluralize(items.length, "items", "item")
11752
+ ]
11753
+ }
11754
+ )
11755
+ ] })
11756
+ ] }) : /* @__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: [
11757
+ /* @__PURE__ */ jsxRuntime.jsx(
11758
+ ui.Tooltip,
11759
+ {
11760
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
11761
+ var _a3, _b2, _c2;
11762
+ return /* @__PURE__ */ jsxRuntime.jsx(
11763
+ "li",
11764
+ {
11765
+ children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11766
+ },
11767
+ item.id
11768
+ );
11769
+ }) }),
11770
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
11771
+ ui.Badge,
11772
+ {
11773
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11774
+ size: "xsmall",
11775
+ children: [
11776
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
11777
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
11778
+ items.reduce(
11779
+ (acc, item) => acc + item.quantity,
11780
+ 0
11781
+ ),
11782
+ "x",
11783
+ " ",
11784
+ pluralize(items.length, "items", "item")
11785
+ ] })
11786
+ ]
11787
+ }
11788
+ )
11789
+ }
11790
+ ),
11791
+ /* @__PURE__ */ jsxRuntime.jsx(
11792
+ ui.Tooltip,
11793
+ {
11794
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11795
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
11796
+ ui.Badge,
11797
+ {
11798
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11799
+ size: "xsmall",
11800
+ children: [
11801
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
11802
+ /* @__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 })
11803
+ ]
11804
+ }
11805
+ )
11806
+ }
11807
+ ),
11808
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11809
+ ui.Badge,
11810
+ {
11811
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
11812
+ size: "xsmall",
11813
+ children: [
11814
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
11815
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
11816
+ ]
11817
+ }
11818
+ ) })
11819
+ ] })
11820
+ ] }),
11821
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
11822
+ ActionMenu,
11823
+ {
11824
+ groups: [
11825
+ {
11826
+ actions: [
11827
+ hasItems ? {
11828
+ label: "Edit shipping option",
11829
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
11830
+ onClick: () => {
11831
+ setIsOpen(
11832
+ STACKED_FOCUS_MODAL_ID,
11833
+ true
11834
+ );
11835
+ setData({
11836
+ shippingProfileId: profile.id,
11837
+ shippingOption,
11838
+ shippingMethod
11839
+ });
11840
+ }
11841
+ } : void 0,
11842
+ {
11843
+ label: "Remove shipping option",
11844
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
11845
+ onClick: () => {
11846
+ if (shippingMethod) {
11847
+ if (addShippingMethodAction) {
11848
+ removeActionShippingMethod(
11849
+ addShippingMethodAction.id
11850
+ );
11851
+ } else {
11852
+ removeShippingMethod(
11853
+ shippingMethod.id
11854
+ );
11855
+ }
11856
+ }
11857
+ }
11858
+ }
11859
+ ].filter(Boolean)
11860
+ }
11861
+ ]
11862
+ }
11863
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
11864
+ StackedModalTrigger,
11865
+ {
11866
+ shippingProfileId: profile.id,
11867
+ shippingOption,
11868
+ shippingMethod,
11869
+ setData,
11870
+ children: "Add shipping option"
11871
+ }
11872
+ )
11873
+ ] }),
11874
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
11875
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11876
+ items.map((item, idx) => {
11877
+ var _a3, _b2, _c2, _d2, _e2;
11878
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11879
+ /* @__PURE__ */ jsxRuntime.jsxs(
11880
+ "div",
11881
+ {
11882
+ className: "flex items-center gap-x-3 px-3",
11883
+ children: [
11884
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11885
+ ui.Divider,
11886
+ {
11887
+ variant: "dashed",
11888
+ orientation: "vertical"
11889
+ }
11890
+ ) }),
11891
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
11892
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11893
+ ui.Text,
11894
+ {
11895
+ size: "small",
11896
+ leading: "compact",
11897
+ className: "text-ui-fg-subtle",
11898
+ children: [
11899
+ item.quantity,
11900
+ "x"
11901
+ ]
11902
+ }
11903
+ ) }),
11904
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
11905
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11906
+ /* @__PURE__ */ jsxRuntime.jsxs(
11907
+ ui.Text,
11908
+ {
11909
+ size: "small",
11910
+ leading: "compact",
11911
+ weight: "plus",
11912
+ children: [
11913
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11914
+ " (",
11915
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
11916
+ ")"
11917
+ ]
11918
+ }
11919
+ ),
11920
+ /* @__PURE__ */ jsxRuntime.jsx(
11921
+ ui.Text,
11922
+ {
11923
+ size: "small",
11924
+ leading: "compact",
11925
+ className: "text-ui-fg-subtle",
11926
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11927
+ }
11928
+ )
11929
+ ] })
11930
+ ] })
11931
+ ]
11932
+ },
11933
+ item.id
11934
+ ),
11935
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
11936
+ ] }, item.id);
11937
+ })
11938
+ ] })
11939
+ ]
11940
+ },
11941
+ profile.id
11942
+ );
11943
+ }) })
11944
+ ] }) })
11945
+ ] }) }),
11946
+ /* @__PURE__ */ jsxRuntime.jsx(
11947
+ StackedFocusModal,
12606
11948
  {
12607
- promotion,
12608
- orderId: preview.id,
12609
- isLoading: isPending
12610
- },
12611
- promotion.id
12612
- )) })
12613
- ] }) }),
12614
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12615
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11949
+ id: STACKED_FOCUS_MODAL_ID,
11950
+ onOpenChangeCallback: (open) => {
11951
+ if (!open) {
11952
+ setData(null);
11953
+ }
11954
+ return open;
11955
+ },
11956
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11957
+ }
11958
+ )
11959
+ ] }),
11960
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11961
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12616
11962
  /* @__PURE__ */ jsxRuntime.jsx(
12617
11963
  ui.Button,
12618
11964
  {
12619
11965
  size: "small",
12620
- type: "submit",
12621
- isLoading: isSubmitting || isAddingPromotions,
11966
+ type: "button",
11967
+ isLoading: isSubmitting,
11968
+ onClick: onSubmit,
12622
11969
  children: "Save"
12623
11970
  }
12624
11971
  )
12625
11972
  ] }) })
12626
11973
  ] });
12627
11974
  };
12628
- const PromotionItem = ({
12629
- promotion,
12630
- orderId,
12631
- isLoading
11975
+ const StackedModalTrigger = ({
11976
+ shippingProfileId,
11977
+ shippingOption,
11978
+ shippingMethod,
11979
+ setData,
11980
+ children
12632
11981
  }) => {
12633
- var _a;
12634
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
12635
- const onRemove = async () => {
12636
- removePromotions(
11982
+ const { setIsOpen, getIsOpen } = useStackedModal();
11983
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11984
+ const onToggle = () => {
11985
+ if (isOpen) {
11986
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11987
+ setData(null);
11988
+ } else {
11989
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11990
+ setData({
11991
+ shippingProfileId,
11992
+ shippingOption,
11993
+ shippingMethod
11994
+ });
11995
+ }
11996
+ };
11997
+ return /* @__PURE__ */ jsxRuntime.jsx(
11998
+ ui.Button,
11999
+ {
12000
+ size: "small",
12001
+ variant: "secondary",
12002
+ onClick: onToggle,
12003
+ className: "text-ui-fg-primary shrink-0",
12004
+ children
12005
+ }
12006
+ );
12007
+ };
12008
+ const ShippingProfileForm = ({
12009
+ data,
12010
+ order,
12011
+ preview
12012
+ }) => {
12013
+ var _a, _b, _c, _d, _e, _f;
12014
+ const { setIsOpen } = useStackedModal();
12015
+ const form = reactHookForm.useForm({
12016
+ resolver: zod.zodResolver(shippingMethodSchema),
12017
+ defaultValues: {
12018
+ location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12019
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12020
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12021
+ }
12022
+ });
12023
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12024
+ const {
12025
+ mutateAsync: updateShippingMethod,
12026
+ isPending: isUpdatingShippingMethod
12027
+ } = useDraftOrderUpdateShippingMethod(order.id);
12028
+ const onSubmit = form.handleSubmit(async (values) => {
12029
+ if (isEqual__default.default(values, form.formState.defaultValues)) {
12030
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12031
+ return;
12032
+ }
12033
+ if (data.shippingMethod) {
12034
+ await updateShippingMethod(
12035
+ {
12036
+ method_id: data.shippingMethod.id,
12037
+ shipping_option_id: values.shipping_option_id,
12038
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12039
+ },
12040
+ {
12041
+ onError: (e) => {
12042
+ ui.toast.error(e.message);
12043
+ },
12044
+ onSuccess: () => {
12045
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12046
+ }
12047
+ }
12048
+ );
12049
+ return;
12050
+ }
12051
+ await addShippingMethod(
12637
12052
  {
12638
- promo_codes: [promotion.code]
12053
+ shipping_option_id: values.shipping_option_id,
12054
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12639
12055
  },
12640
12056
  {
12641
12057
  onError: (e) => {
12642
12058
  ui.toast.error(e.message);
12059
+ },
12060
+ onSuccess: () => {
12061
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12643
12062
  }
12644
12063
  }
12645
12064
  );
12646
- };
12647
- const displayValue = getDisplayValue(promotion);
12648
- return /* @__PURE__ */ jsxRuntime.jsxs(
12649
- "div",
12065
+ });
12066
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12067
+ KeyboundForm,
12650
12068
  {
12651
- className: ui.clx(
12652
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
12653
- {
12654
- "animate-pulse": isLoading
12655
- }
12656
- ),
12069
+ className: "flex h-full flex-col overflow-hidden",
12070
+ onSubmit,
12657
12071
  children: [
12658
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12659
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
12660
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
12661
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
12662
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
12663
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
12664
- ] }),
12665
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
12666
- ] })
12667
- ] }),
12668
- /* @__PURE__ */ jsxRuntime.jsx(
12669
- ui.IconButton,
12670
- {
12671
- size: "small",
12672
- type: "button",
12673
- variant: "transparent",
12674
- onClick: onRemove,
12675
- isLoading: isPending || isLoading,
12676
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
12677
- }
12678
- )
12072
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12073
+ /* @__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: [
12074
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12075
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12076
+ /* @__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." }) })
12077
+ ] }),
12078
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12079
+ /* @__PURE__ */ jsxRuntime.jsx(
12080
+ LocationField,
12081
+ {
12082
+ control: form.control,
12083
+ setValue: form.setValue
12084
+ }
12085
+ ),
12086
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12087
+ /* @__PURE__ */ jsxRuntime.jsx(
12088
+ ShippingOptionField,
12089
+ {
12090
+ shippingProfileId: data.shippingProfileId,
12091
+ preview,
12092
+ control: form.control
12093
+ }
12094
+ ),
12095
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12096
+ /* @__PURE__ */ jsxRuntime.jsx(
12097
+ CustomAmountField,
12098
+ {
12099
+ control: form.control,
12100
+ currencyCode: order.currency_code
12101
+ }
12102
+ ),
12103
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12104
+ /* @__PURE__ */ jsxRuntime.jsx(
12105
+ ItemsPreview,
12106
+ {
12107
+ order,
12108
+ shippingProfileId: data.shippingProfileId
12109
+ }
12110
+ )
12111
+ ] }) }) }),
12112
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12113
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12114
+ /* @__PURE__ */ jsxRuntime.jsx(
12115
+ ui.Button,
12116
+ {
12117
+ size: "small",
12118
+ type: "submit",
12119
+ isLoading: isPending || isUpdatingShippingMethod,
12120
+ children: data.shippingMethod ? "Update" : "Add"
12121
+ }
12122
+ )
12123
+ ] }) })
12679
12124
  ]
12680
- },
12681
- promotion.id
12682
- );
12683
- };
12684
- function getDisplayValue(promotion) {
12685
- var _a, _b, _c, _d;
12686
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
12687
- if (!value) {
12688
- return null;
12689
- }
12690
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
12691
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
12692
- if (!currency) {
12693
- return null;
12694
12125
  }
12695
- return getLocaleAmount(value, currency);
12696
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
12697
- return formatPercentage(value);
12698
- }
12699
- return null;
12700
- }
12701
- const formatter = new Intl.NumberFormat([], {
12702
- style: "percent",
12703
- minimumFractionDigits: 2
12704
- });
12705
- const formatPercentage = (value, isPercentageValue = false) => {
12706
- let val = value || 0;
12707
- if (!isPercentageValue) {
12708
- val = val / 100;
12709
- }
12710
- return formatter.format(val);
12126
+ ) }) });
12711
12127
  };
12712
- function getPromotionIds(items, shippingMethods) {
12713
- const promotionIds = /* @__PURE__ */ new Set();
12714
- for (const item of items) {
12715
- if (item.adjustments) {
12716
- for (const adjustment of item.adjustments) {
12717
- if (adjustment.promotion_id) {
12718
- promotionIds.add(adjustment.promotion_id);
12719
- }
12720
- }
12721
- }
12722
- }
12723
- for (const shippingMethod of shippingMethods) {
12724
- if (shippingMethod.adjustments) {
12725
- for (const adjustment of shippingMethod.adjustments) {
12726
- if (adjustment.promotion_id) {
12727
- promotionIds.add(adjustment.promotion_id);
12728
- }
12729
- }
12730
- }
12731
- }
12732
- return Array.from(promotionIds);
12733
- }
12734
- const SalesChannel = () => {
12735
- const { id } = reactRouterDom.useParams();
12736
- const { draft_order, isPending, isError, error } = useDraftOrder(
12737
- id,
12738
- {
12739
- fields: "+sales_channel_id"
12740
- },
12741
- {
12742
- enabled: !!id
12128
+ const shippingMethodSchema = objectType({
12129
+ location_id: stringType(),
12130
+ shipping_option_id: stringType(),
12131
+ custom_amount: unionType([numberType(), stringType()]).optional()
12132
+ });
12133
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12134
+ const matches = order.items.filter(
12135
+ (item) => {
12136
+ var _a, _b, _c;
12137
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12743
12138
  }
12744
12139
  );
12745
- if (isError) {
12746
- throw error;
12747
- }
12748
- const ISrEADY = !!draft_order && !isPending;
12749
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12750
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12751
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
12752
- /* @__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" }) })
12753
- ] }),
12754
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
12140
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12141
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12142
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12143
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12144
+ ] }) }),
12145
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12146
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
12147
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12148
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12149
+ ] }),
12150
+ /* @__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(
12151
+ "div",
12152
+ {
12153
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
12154
+ children: [
12155
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12156
+ /* @__PURE__ */ jsxRuntime.jsx(
12157
+ Thumbnail,
12158
+ {
12159
+ thumbnail: item.thumbnail,
12160
+ alt: item.product_title ?? void 0
12161
+ }
12162
+ ),
12163
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12164
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12165
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12166
+ /* @__PURE__ */ jsxRuntime.jsxs(
12167
+ ui.Text,
12168
+ {
12169
+ size: "small",
12170
+ leading: "compact",
12171
+ className: "text-ui-fg-subtle",
12172
+ children: [
12173
+ "(",
12174
+ item.variant_title,
12175
+ ")"
12176
+ ]
12177
+ }
12178
+ )
12179
+ ] }),
12180
+ /* @__PURE__ */ jsxRuntime.jsx(
12181
+ ui.Text,
12182
+ {
12183
+ size: "small",
12184
+ leading: "compact",
12185
+ className: "text-ui-fg-subtle",
12186
+ children: item.variant_sku
12187
+ }
12188
+ )
12189
+ ] })
12190
+ ] }),
12191
+ /* @__PURE__ */ jsxRuntime.jsxs(
12192
+ ui.Text,
12193
+ {
12194
+ size: "small",
12195
+ leading: "compact",
12196
+ className: "text-ui-fg-subtle",
12197
+ children: [
12198
+ item.quantity,
12199
+ "x"
12200
+ ]
12201
+ }
12202
+ )
12203
+ ]
12204
+ },
12205
+ item.id
12206
+ )) : /* @__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: [
12207
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12208
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12209
+ 'No items found for "',
12210
+ query,
12211
+ '".'
12212
+ ] })
12213
+ ] }) })
12214
+ ] })
12755
12215
  ] });
12756
12216
  };
12757
- const SalesChannelForm = ({ order }) => {
12758
- const form = reactHookForm.useForm({
12759
- defaultValues: {
12760
- sales_channel_id: order.sales_channel_id || ""
12217
+ const LocationField = ({ control, setValue }) => {
12218
+ const locations = useComboboxData({
12219
+ queryKey: ["locations"],
12220
+ queryFn: async (params) => {
12221
+ return await sdk.admin.stockLocation.list(params);
12761
12222
  },
12762
- resolver: zod.zodResolver(schema$1)
12763
- });
12764
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12765
- const { handleSuccess } = useRouteModal();
12766
- const onSubmit = form.handleSubmit(async (data) => {
12767
- await mutateAsync(
12768
- {
12769
- sales_channel_id: data.sales_channel_id
12770
- },
12771
- {
12772
- onSuccess: () => {
12773
- ui.toast.success("Sales channel updated");
12774
- handleSuccess();
12775
- },
12776
- onError: (error) => {
12777
- ui.toast.error(error.message);
12778
- }
12779
- }
12780
- );
12223
+ getOptions: (data) => {
12224
+ return data.stock_locations.map((location) => ({
12225
+ label: location.name,
12226
+ value: location.id
12227
+ }));
12228
+ }
12781
12229
  });
12782
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12783
- KeyboundForm,
12230
+ return /* @__PURE__ */ jsxRuntime.jsx(
12231
+ Form$2.Field,
12784
12232
  {
12785
- className: "flex flex-1 flex-col overflow-hidden",
12786
- onSubmit,
12787
- children: [
12788
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
12789
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12790
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12791
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12792
- ] }) })
12793
- ]
12233
+ control,
12234
+ name: "location_id",
12235
+ render: ({ field: { onChange, ...field } }) => {
12236
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12237
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12238
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12239
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12240
+ ] }),
12241
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12242
+ Combobox,
12243
+ {
12244
+ options: locations.options,
12245
+ fetchNextPage: locations.fetchNextPage,
12246
+ isFetchingNextPage: locations.isFetchingNextPage,
12247
+ searchValue: locations.searchValue,
12248
+ onSearchValueChange: locations.onSearchValueChange,
12249
+ placeholder: "Select location",
12250
+ onChange: (value) => {
12251
+ setValue("shipping_option_id", "", {
12252
+ shouldDirty: true,
12253
+ shouldTouch: true
12254
+ });
12255
+ onChange(value);
12256
+ },
12257
+ ...field
12258
+ }
12259
+ ) })
12260
+ ] }) });
12261
+ }
12794
12262
  }
12795
- ) });
12263
+ );
12796
12264
  };
12797
- const SalesChannelField = ({ control, order }) => {
12798
- const salesChannels = useComboboxData({
12265
+ const ShippingOptionField = ({
12266
+ shippingProfileId,
12267
+ preview,
12268
+ control
12269
+ }) => {
12270
+ var _a;
12271
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12272
+ const shippingOptions = useComboboxData({
12273
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12799
12274
  queryFn: async (params) => {
12800
- return await sdk.admin.salesChannel.list(params);
12275
+ return await sdk.admin.shippingOption.list({
12276
+ ...params,
12277
+ stock_location_id: locationId,
12278
+ shipping_profile_id: shippingProfileId
12279
+ });
12801
12280
  },
12802
- queryKey: ["sales-channels"],
12803
12281
  getOptions: (data) => {
12804
- return data.sales_channels.map((salesChannel) => ({
12805
- label: salesChannel.name,
12806
- value: salesChannel.id
12807
- }));
12282
+ return data.shipping_options.map((option) => {
12283
+ var _a2;
12284
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12285
+ (r) => r.attribute === "is_return" && r.value === "true"
12286
+ )) {
12287
+ return void 0;
12288
+ }
12289
+ return {
12290
+ label: option.name,
12291
+ value: option.id
12292
+ };
12293
+ }).filter(Boolean);
12808
12294
  },
12809
- defaultValue: order.sales_channel_id || void 0
12295
+ enabled: !!locationId && !!shippingProfileId,
12296
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12810
12297
  });
12298
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12811
12299
  return /* @__PURE__ */ jsxRuntime.jsx(
12812
12300
  Form$2.Field,
12813
12301
  {
12814
12302
  control,
12815
- name: "sales_channel_id",
12303
+ name: "shipping_option_id",
12816
12304
  render: ({ field }) => {
12817
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12818
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
12305
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12306
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12307
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12308
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12309
+ ] }),
12310
+ /* @__PURE__ */ jsxRuntime.jsx(
12311
+ ConditionalTooltip,
12312
+ {
12313
+ content: tooltipContent,
12314
+ showTooltip: !locationId || !shippingProfileId,
12315
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12316
+ Combobox,
12317
+ {
12318
+ options: shippingOptions.options,
12319
+ fetchNextPage: shippingOptions.fetchNextPage,
12320
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12321
+ searchValue: shippingOptions.searchValue,
12322
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12323
+ placeholder: "Select shipping option",
12324
+ ...field,
12325
+ disabled: !locationId || !shippingProfileId
12326
+ }
12327
+ ) }) })
12328
+ }
12329
+ )
12330
+ ] }) });
12331
+ }
12332
+ }
12333
+ );
12334
+ };
12335
+ const CustomAmountField = ({
12336
+ control,
12337
+ currencyCode
12338
+ }) => {
12339
+ return /* @__PURE__ */ jsxRuntime.jsx(
12340
+ Form$2.Field,
12341
+ {
12342
+ control,
12343
+ name: "custom_amount",
12344
+ render: ({ field: { onChange, ...field } }) => {
12345
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12346
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12347
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12348
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12349
+ ] }),
12819
12350
  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12820
- Combobox,
12351
+ ui.CurrencyInput,
12821
12352
  {
12822
- options: salesChannels.options,
12823
- fetchNextPage: salesChannels.fetchNextPage,
12824
- isFetchingNextPage: salesChannels.isFetchingNextPage,
12825
- searchValue: salesChannels.searchValue,
12826
- onSearchValueChange: salesChannels.onSearchValueChange,
12827
- placeholder: "Select sales channel",
12828
- ...field
12353
+ ...field,
12354
+ onValueChange: (value) => onChange(value),
12355
+ symbol: getNativeSymbol(currencyCode),
12356
+ code: currencyCode
12829
12357
  }
12830
- ) }),
12831
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12358
+ ) })
12832
12359
  ] });
12833
12360
  }
12834
12361
  }
12835
12362
  );
12836
12363
  };
12837
- const schema$1 = objectType({
12838
- sales_channel_id: stringType().min(1)
12839
- });
12840
12364
  const ShippingAddress = () => {
12841
12365
  const { id } = reactRouterDom.useParams();
12842
12366
  const { order, isPending, isError, error } = useOrder(id, {
@@ -12869,7 +12393,7 @@ const ShippingAddressForm = ({ order }) => {
12869
12393
  postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12870
12394
  phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12871
12395
  },
12872
- resolver: zod.zodResolver(schema)
12396
+ resolver: zod.zodResolver(schema$1)
12873
12397
  });
12874
12398
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12875
12399
  const { handleSuccess } = useRouteModal();
@@ -12899,147 +12423,623 @@ const ShippingAddressForm = ({ order }) => {
12899
12423
  }
12900
12424
  );
12901
12425
  });
12902
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12903
- KeyboundForm,
12426
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12427
+ KeyboundForm,
12428
+ {
12429
+ className: "flex flex-1 flex-col overflow-hidden",
12430
+ onSubmit,
12431
+ children: [
12432
+ /* @__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: [
12433
+ /* @__PURE__ */ jsxRuntime.jsx(
12434
+ Form$2.Field,
12435
+ {
12436
+ control: form.control,
12437
+ name: "country_code",
12438
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12439
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12440
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12441
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12442
+ ] })
12443
+ }
12444
+ ),
12445
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12446
+ /* @__PURE__ */ jsxRuntime.jsx(
12447
+ Form$2.Field,
12448
+ {
12449
+ control: form.control,
12450
+ name: "first_name",
12451
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12452
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12453
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12454
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12455
+ ] })
12456
+ }
12457
+ ),
12458
+ /* @__PURE__ */ jsxRuntime.jsx(
12459
+ Form$2.Field,
12460
+ {
12461
+ control: form.control,
12462
+ name: "last_name",
12463
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12464
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12465
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12466
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12467
+ ] })
12468
+ }
12469
+ )
12470
+ ] }),
12471
+ /* @__PURE__ */ jsxRuntime.jsx(
12472
+ Form$2.Field,
12473
+ {
12474
+ control: form.control,
12475
+ name: "company",
12476
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12477
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12478
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12479
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12480
+ ] })
12481
+ }
12482
+ ),
12483
+ /* @__PURE__ */ jsxRuntime.jsx(
12484
+ Form$2.Field,
12485
+ {
12486
+ control: form.control,
12487
+ name: "address_1",
12488
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12489
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12490
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12491
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12492
+ ] })
12493
+ }
12494
+ ),
12495
+ /* @__PURE__ */ jsxRuntime.jsx(
12496
+ Form$2.Field,
12497
+ {
12498
+ control: form.control,
12499
+ name: "address_2",
12500
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12501
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12502
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12503
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12504
+ ] })
12505
+ }
12506
+ ),
12507
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12508
+ /* @__PURE__ */ jsxRuntime.jsx(
12509
+ Form$2.Field,
12510
+ {
12511
+ control: form.control,
12512
+ name: "postal_code",
12513
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12514
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12515
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12516
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12517
+ ] })
12518
+ }
12519
+ ),
12520
+ /* @__PURE__ */ jsxRuntime.jsx(
12521
+ Form$2.Field,
12522
+ {
12523
+ control: form.control,
12524
+ name: "city",
12525
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12526
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12527
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12528
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12529
+ ] })
12530
+ }
12531
+ )
12532
+ ] }),
12533
+ /* @__PURE__ */ jsxRuntime.jsx(
12534
+ Form$2.Field,
12535
+ {
12536
+ control: form.control,
12537
+ name: "province",
12538
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12539
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12540
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12541
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12542
+ ] })
12543
+ }
12544
+ ),
12545
+ /* @__PURE__ */ jsxRuntime.jsx(
12546
+ Form$2.Field,
12547
+ {
12548
+ control: form.control,
12549
+ name: "phone",
12550
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12551
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12552
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12553
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12554
+ ] })
12555
+ }
12556
+ )
12557
+ ] }) }),
12558
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12559
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12560
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12561
+ ] }) })
12562
+ ]
12563
+ }
12564
+ ) });
12565
+ };
12566
+ const schema$1 = addressSchema;
12567
+ const TransferOwnership = () => {
12568
+ const { id } = reactRouterDom.useParams();
12569
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12570
+ fields: "id,customer_id,customer.*"
12571
+ });
12572
+ if (isError) {
12573
+ throw error;
12574
+ }
12575
+ const isReady = !isPending && !!draft_order;
12576
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12577
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12578
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12579
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
12580
+ ] }),
12581
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12582
+ ] });
12583
+ };
12584
+ const TransferOwnershipForm = ({ order }) => {
12585
+ var _a, _b;
12586
+ const form = reactHookForm.useForm({
12587
+ defaultValues: {
12588
+ customer_id: order.customer_id || ""
12589
+ },
12590
+ resolver: zod.zodResolver(schema)
12591
+ });
12592
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12593
+ const { handleSuccess } = useRouteModal();
12594
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12595
+ const currentCustomer = order.customer ? {
12596
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
12597
+ value: order.customer.id
12598
+ } : null;
12599
+ const onSubmit = form.handleSubmit(async (data) => {
12600
+ await mutateAsync(
12601
+ { customer_id: data.customer_id },
12602
+ {
12603
+ onSuccess: () => {
12604
+ ui.toast.success("Customer updated");
12605
+ handleSuccess();
12606
+ },
12607
+ onError: (error) => {
12608
+ ui.toast.error(error.message);
12609
+ }
12610
+ }
12611
+ );
12612
+ });
12613
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12614
+ KeyboundForm,
12615
+ {
12616
+ className: "flex flex-1 flex-col overflow-hidden",
12617
+ onSubmit,
12618
+ children: [
12619
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12620
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12621
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12622
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12623
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12624
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12625
+ ] }),
12626
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12627
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12628
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12629
+ ] })
12630
+ ] }),
12631
+ /* @__PURE__ */ jsxRuntime.jsx(
12632
+ CustomerField,
12633
+ {
12634
+ control: form.control,
12635
+ currentCustomerId: order.customer_id
12636
+ }
12637
+ )
12638
+ ] }),
12639
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12640
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12641
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12642
+ ] }) })
12643
+ ]
12644
+ }
12645
+ ) });
12646
+ };
12647
+ const CustomerField = ({ control, currentCustomerId }) => {
12648
+ const customers = useComboboxData({
12649
+ queryFn: async (params) => {
12650
+ return await sdk.admin.customer.list({
12651
+ ...params,
12652
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12653
+ });
12654
+ },
12655
+ queryKey: ["customers"],
12656
+ getOptions: (data) => {
12657
+ return data.customers.map((customer) => {
12658
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12659
+ return {
12660
+ label: name ? `${name} (${customer.email})` : customer.email,
12661
+ value: customer.id
12662
+ };
12663
+ });
12664
+ }
12665
+ });
12666
+ return /* @__PURE__ */ jsxRuntime.jsx(
12667
+ Form$2.Field,
12904
12668
  {
12905
- className: "flex flex-1 flex-col overflow-hidden",
12906
- onSubmit,
12669
+ name: "customer_id",
12670
+ control,
12671
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12672
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12673
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12674
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12675
+ ] }),
12676
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12677
+ Combobox,
12678
+ {
12679
+ options: customers.options,
12680
+ fetchNextPage: customers.fetchNextPage,
12681
+ isFetchingNextPage: customers.isFetchingNextPage,
12682
+ searchValue: customers.searchValue,
12683
+ onSearchValueChange: customers.onSearchValueChange,
12684
+ placeholder: "Select customer",
12685
+ ...field
12686
+ }
12687
+ ) }),
12688
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12689
+ ] })
12690
+ }
12691
+ );
12692
+ };
12693
+ const Illustration = () => {
12694
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12695
+ "svg",
12696
+ {
12697
+ width: "280",
12698
+ height: "180",
12699
+ viewBox: "0 0 280 180",
12700
+ fill: "none",
12701
+ xmlns: "http://www.w3.org/2000/svg",
12907
12702
  children: [
12908
- /* @__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: [
12909
- /* @__PURE__ */ jsxRuntime.jsx(
12910
- Form$2.Field,
12703
+ /* @__PURE__ */ jsxRuntime.jsx(
12704
+ "rect",
12705
+ {
12706
+ x: "0.00428286",
12707
+ y: "-0.742904",
12708
+ width: "33.5",
12709
+ height: "65.5",
12710
+ rx: "6.75",
12711
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
12712
+ fill: "#D4D4D8",
12713
+ stroke: "#52525B",
12714
+ strokeWidth: "1.5"
12715
+ }
12716
+ ),
12717
+ /* @__PURE__ */ jsxRuntime.jsx(
12718
+ "rect",
12719
+ {
12720
+ x: "0.00428286",
12721
+ y: "-0.742904",
12722
+ width: "33.5",
12723
+ height: "65.5",
12724
+ rx: "6.75",
12725
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
12726
+ fill: "white",
12727
+ stroke: "#52525B",
12728
+ strokeWidth: "1.5"
12729
+ }
12730
+ ),
12731
+ /* @__PURE__ */ jsxRuntime.jsx(
12732
+ "path",
12733
+ {
12734
+ d: "M180.579 107.142L179.126 107.959",
12735
+ stroke: "#52525B",
12736
+ strokeWidth: "1.5",
12737
+ strokeLinecap: "round",
12738
+ strokeLinejoin: "round"
12739
+ }
12740
+ ),
12741
+ /* @__PURE__ */ jsxRuntime.jsx(
12742
+ "path",
12743
+ {
12744
+ opacity: "0.88",
12745
+ d: "M182.305 109.546L180.257 109.534",
12746
+ stroke: "#52525B",
12747
+ strokeWidth: "1.5",
12748
+ strokeLinecap: "round",
12749
+ strokeLinejoin: "round"
12750
+ }
12751
+ ),
12752
+ /* @__PURE__ */ jsxRuntime.jsx(
12753
+ "path",
12754
+ {
12755
+ opacity: "0.75",
12756
+ d: "M180.551 111.93L179.108 111.096",
12757
+ stroke: "#52525B",
12758
+ strokeWidth: "1.5",
12759
+ strokeLinecap: "round",
12760
+ strokeLinejoin: "round"
12761
+ }
12762
+ ),
12763
+ /* @__PURE__ */ jsxRuntime.jsx(
12764
+ "path",
12765
+ {
12766
+ opacity: "0.63",
12767
+ d: "M176.347 112.897L176.354 111.73",
12768
+ stroke: "#52525B",
12769
+ strokeWidth: "1.5",
12770
+ strokeLinecap: "round",
12771
+ strokeLinejoin: "round"
12772
+ }
12773
+ ),
12774
+ /* @__PURE__ */ jsxRuntime.jsx(
12775
+ "path",
12776
+ {
12777
+ opacity: "0.5",
12778
+ d: "M172.153 111.881L173.606 111.064",
12779
+ stroke: "#52525B",
12780
+ strokeWidth: "1.5",
12781
+ strokeLinecap: "round",
12782
+ strokeLinejoin: "round"
12783
+ }
12784
+ ),
12785
+ /* @__PURE__ */ jsxRuntime.jsx(
12786
+ "path",
12787
+ {
12788
+ opacity: "0.38",
12789
+ d: "M170.428 109.478L172.476 109.489",
12790
+ stroke: "#52525B",
12791
+ strokeWidth: "1.5",
12792
+ strokeLinecap: "round",
12793
+ strokeLinejoin: "round"
12794
+ }
12795
+ ),
12796
+ /* @__PURE__ */ jsxRuntime.jsx(
12797
+ "path",
12798
+ {
12799
+ opacity: "0.25",
12800
+ d: "M172.181 107.094L173.624 107.928",
12801
+ stroke: "#52525B",
12802
+ strokeWidth: "1.5",
12803
+ strokeLinecap: "round",
12804
+ strokeLinejoin: "round"
12805
+ }
12806
+ ),
12807
+ /* @__PURE__ */ jsxRuntime.jsx(
12808
+ "path",
12809
+ {
12810
+ opacity: "0.13",
12811
+ d: "M176.386 106.126L176.379 107.294",
12812
+ stroke: "#52525B",
12813
+ strokeWidth: "1.5",
12814
+ strokeLinecap: "round",
12815
+ strokeLinejoin: "round"
12816
+ }
12817
+ ),
12818
+ /* @__PURE__ */ jsxRuntime.jsx(
12819
+ "rect",
12820
+ {
12821
+ width: "12",
12822
+ height: "3",
12823
+ rx: "1.5",
12824
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12825
+ fill: "#D4D4D8"
12826
+ }
12827
+ ),
12828
+ /* @__PURE__ */ jsxRuntime.jsx(
12829
+ "rect",
12830
+ {
12831
+ x: "0.00428286",
12832
+ y: "-0.742904",
12833
+ width: "33.5",
12834
+ height: "65.5",
12835
+ rx: "6.75",
12836
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12837
+ fill: "#D4D4D8",
12838
+ stroke: "#52525B",
12839
+ strokeWidth: "1.5"
12840
+ }
12841
+ ),
12842
+ /* @__PURE__ */ jsxRuntime.jsx(
12843
+ "rect",
12844
+ {
12845
+ x: "0.00428286",
12846
+ y: "-0.742904",
12847
+ width: "33.5",
12848
+ height: "65.5",
12849
+ rx: "6.75",
12850
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12851
+ fill: "white",
12852
+ stroke: "#52525B",
12853
+ strokeWidth: "1.5"
12854
+ }
12855
+ ),
12856
+ /* @__PURE__ */ jsxRuntime.jsx(
12857
+ "rect",
12858
+ {
12859
+ width: "12",
12860
+ height: "3",
12861
+ rx: "1.5",
12862
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12863
+ fill: "#D4D4D8"
12864
+ }
12865
+ ),
12866
+ /* @__PURE__ */ jsxRuntime.jsx(
12867
+ "rect",
12868
+ {
12869
+ width: "17",
12870
+ height: "3",
12871
+ rx: "1.5",
12872
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12873
+ fill: "#D4D4D8"
12874
+ }
12875
+ ),
12876
+ /* @__PURE__ */ jsxRuntime.jsx(
12877
+ "rect",
12878
+ {
12879
+ width: "12",
12880
+ height: "3",
12881
+ rx: "1.5",
12882
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12883
+ fill: "#D4D4D8"
12884
+ }
12885
+ ),
12886
+ /* @__PURE__ */ jsxRuntime.jsx(
12887
+ "path",
12888
+ {
12889
+ d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12890
+ fill: "#A1A1AA"
12891
+ }
12892
+ ),
12893
+ /* @__PURE__ */ jsxRuntime.jsx(
12894
+ "rect",
12895
+ {
12896
+ width: "17",
12897
+ height: "3",
12898
+ rx: "1.5",
12899
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12900
+ fill: "#A1A1AA"
12901
+ }
12902
+ ),
12903
+ /* @__PURE__ */ jsxRuntime.jsx(
12904
+ "rect",
12905
+ {
12906
+ width: "12",
12907
+ height: "3",
12908
+ rx: "1.5",
12909
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12910
+ fill: "#A1A1AA"
12911
+ }
12912
+ ),
12913
+ /* @__PURE__ */ jsxRuntime.jsx(
12914
+ "path",
12915
+ {
12916
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12917
+ fill: "#52525B"
12918
+ }
12919
+ ),
12920
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12921
+ "path",
12922
+ {
12923
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12924
+ stroke: "#A1A1AA",
12925
+ strokeWidth: "1.5",
12926
+ strokeLinecap: "round",
12927
+ strokeLinejoin: "round"
12928
+ }
12929
+ ) }),
12930
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12931
+ "path",
12932
+ {
12933
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12934
+ stroke: "#A1A1AA",
12935
+ strokeWidth: "1.5",
12936
+ strokeLinecap: "round",
12937
+ strokeLinejoin: "round"
12938
+ }
12939
+ ) }),
12940
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12941
+ "path",
12942
+ {
12943
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12944
+ stroke: "#A1A1AA",
12945
+ strokeWidth: "1.5",
12946
+ strokeLinecap: "round",
12947
+ strokeLinejoin: "round"
12948
+ }
12949
+ ) }),
12950
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12951
+ "path",
12952
+ {
12953
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12954
+ stroke: "#A1A1AA",
12955
+ strokeWidth: "1.5",
12956
+ strokeLinecap: "round",
12957
+ strokeLinejoin: "round"
12958
+ }
12959
+ ) }),
12960
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12961
+ "path",
12962
+ {
12963
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12964
+ stroke: "#A1A1AA",
12965
+ strokeWidth: "1.5",
12966
+ strokeLinecap: "round",
12967
+ strokeLinejoin: "round"
12968
+ }
12969
+ ) }),
12970
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12971
+ "path",
12972
+ {
12973
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12974
+ stroke: "#A1A1AA",
12975
+ strokeWidth: "1.5",
12976
+ strokeLinecap: "round",
12977
+ strokeLinejoin: "round"
12978
+ }
12979
+ ) }),
12980
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12981
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12982
+ "rect",
12911
12983
  {
12912
- control: form.control,
12913
- name: "country_code",
12914
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12915
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12916
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12917
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12918
- ] })
12984
+ width: "12",
12985
+ height: "12",
12986
+ fill: "white",
12987
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12919
12988
  }
12920
- ),
12921
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12922
- /* @__PURE__ */ jsxRuntime.jsx(
12923
- Form$2.Field,
12924
- {
12925
- control: form.control,
12926
- name: "first_name",
12927
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12928
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12929
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12930
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12931
- ] })
12932
- }
12933
- ),
12934
- /* @__PURE__ */ jsxRuntime.jsx(
12935
- Form$2.Field,
12936
- {
12937
- control: form.control,
12938
- name: "last_name",
12939
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12940
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12941
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12942
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12943
- ] })
12944
- }
12945
- )
12946
- ] }),
12947
- /* @__PURE__ */ jsxRuntime.jsx(
12948
- Form$2.Field,
12989
+ ) }),
12990
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12991
+ "rect",
12949
12992
  {
12950
- control: form.control,
12951
- name: "company",
12952
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12953
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12954
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12955
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12956
- ] })
12993
+ width: "12",
12994
+ height: "12",
12995
+ fill: "white",
12996
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12957
12997
  }
12958
- ),
12959
- /* @__PURE__ */ jsxRuntime.jsx(
12960
- Form$2.Field,
12998
+ ) }),
12999
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13000
+ "rect",
12961
13001
  {
12962
- control: form.control,
12963
- name: "address_1",
12964
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12965
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12966
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12967
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12968
- ] })
13002
+ width: "12",
13003
+ height: "12",
13004
+ fill: "white",
13005
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12969
13006
  }
12970
- ),
12971
- /* @__PURE__ */ jsxRuntime.jsx(
12972
- Form$2.Field,
13007
+ ) }),
13008
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13009
+ "rect",
12973
13010
  {
12974
- control: form.control,
12975
- name: "address_2",
12976
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12977
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12978
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12979
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12980
- ] })
13011
+ width: "12",
13012
+ height: "12",
13013
+ fill: "white",
13014
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12981
13015
  }
12982
- ),
12983
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12984
- /* @__PURE__ */ jsxRuntime.jsx(
12985
- Form$2.Field,
12986
- {
12987
- control: form.control,
12988
- name: "postal_code",
12989
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12990
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12991
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12992
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12993
- ] })
12994
- }
12995
- ),
12996
- /* @__PURE__ */ jsxRuntime.jsx(
12997
- Form$2.Field,
12998
- {
12999
- control: form.control,
13000
- name: "city",
13001
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13002
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13003
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13004
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13005
- ] })
13006
- }
13007
- )
13008
- ] }),
13009
- /* @__PURE__ */ jsxRuntime.jsx(
13010
- Form$2.Field,
13016
+ ) }),
13017
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13018
+ "rect",
13011
13019
  {
13012
- control: form.control,
13013
- name: "province",
13014
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13015
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13016
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13017
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13018
- ] })
13020
+ width: "12",
13021
+ height: "12",
13022
+ fill: "white",
13023
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
13019
13024
  }
13020
- ),
13021
- /* @__PURE__ */ jsxRuntime.jsx(
13022
- Form$2.Field,
13025
+ ) }),
13026
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13027
+ "rect",
13023
13028
  {
13024
- control: form.control,
13025
- name: "phone",
13026
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13027
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13028
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13029
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13030
- ] })
13029
+ width: "12",
13030
+ height: "12",
13031
+ fill: "white",
13032
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13031
13033
  }
13032
- )
13033
- ] }) }),
13034
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13035
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13036
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13037
- ] }) })
13034
+ ) })
13035
+ ] })
13038
13036
  ]
13039
13037
  }
13040
- ) });
13038
+ );
13041
13039
  };
13042
- const schema = addressSchema;
13040
+ const schema = objectType({
13041
+ customer_id: stringType().min(1)
13042
+ });
13043
13043
  const widgetModule = { widgets: [] };
13044
13044
  const routeModule = {
13045
13045
  routes: [
@@ -13060,14 +13060,14 @@ const routeModule = {
13060
13060
  handle,
13061
13061
  loader,
13062
13062
  children: [
13063
- {
13064
- Component: BillingAddress,
13065
- path: "/draft-orders/:id/billing-address"
13066
- },
13067
13063
  {
13068
13064
  Component: CustomItems,
13069
13065
  path: "/draft-orders/:id/custom-items"
13070
13066
  },
13067
+ {
13068
+ Component: BillingAddress,
13069
+ path: "/draft-orders/:id/billing-address"
13070
+ },
13071
13071
  {
13072
13072
  Component: Email,
13073
13073
  path: "/draft-orders/:id/email"
@@ -13080,14 +13080,6 @@ const routeModule = {
13080
13080
  Component: Metadata,
13081
13081
  path: "/draft-orders/:id/metadata"
13082
13082
  },
13083
- {
13084
- Component: Shipping,
13085
- path: "/draft-orders/:id/shipping"
13086
- },
13087
- {
13088
- Component: TransferOwnership,
13089
- path: "/draft-orders/:id/transfer-ownership"
13090
- },
13091
13083
  {
13092
13084
  Component: Promotions,
13093
13085
  path: "/draft-orders/:id/promotions"
@@ -13096,9 +13088,17 @@ const routeModule = {
13096
13088
  Component: SalesChannel,
13097
13089
  path: "/draft-orders/:id/sales-channel"
13098
13090
  },
13091
+ {
13092
+ Component: Shipping,
13093
+ path: "/draft-orders/:id/shipping"
13094
+ },
13099
13095
  {
13100
13096
  Component: ShippingAddress,
13101
13097
  path: "/draft-orders/:id/shipping-address"
13098
+ },
13099
+ {
13100
+ Component: TransferOwnership,
13101
+ path: "/draft-orders/:id/transfer-ownership"
13102
13102
  }
13103
13103
  ]
13104
13104
  }