@medusajs/draft-order 2.10.4-preview-20250920031000 → 2.10.4-preview-20250920090150

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