@medusajs/draft-order 2.11.0-preview-20251016180154 → 2.11.0-preview-20251016210154

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