fix(dashboard): allocation UI for orders with more than 20 reservation items (medusajs#12989)

Author: fPolic

.changeset/perfect-penguins-chew.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): allocation UI for orders with more than 20 reservation items

packages/admin/dashboard/src/lib/orders.ts

@@ -1,8 +1,23 @@
-import { HttpTypes } from "@medusajs/types"
+import { AdminOrder, AdminOrderLineItem, HttpTypes } from "@medusajs/types"
 
 export const getPaymentsFromOrder = (order: HttpTypes.AdminOrder) => {
   return order.payment_collections
     .map((collection: HttpTypes.AdminPaymentCollection) => collection.payments)
     .flat(1)
     .filter(Boolean) as HttpTypes.AdminPayment[]
 }
+
+/**
+ * Returns a limit for number of reservations that order can have.
+ */
+export function getReservationsLimitCount(order: AdminOrder) {
+  if (!order?.items?.length) {
+    return 0
+  }
+
+  return order.items.reduce(
+    (acc: number, item: AdminOrderLineItem) =>
+      acc + (item.variant?.inventory_items?.length || 1),
+    0
+  )
+}

packages/admin/dashboard/src/routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/order-create-fulfillment-form.tsx

@@ -23,6 +23,7 @@ import {
   useReservationItems,
   useShippingOptions,
 } from "../../../../../hooks/api"
+import { getReservationsLimitCount } from "../../../../../lib/orders"
 
 type OrderCreateFulfillmentFormProps = {
   order: AdminOrder
@@ -41,6 +42,7 @@ export function OrderCreateFulfillmentForm({
 
   const { reservations } = useReservationItems({
     line_item_id: order.items.map((i) => i.id),
+    limit: getReservationsLimitCount(order),
   })
 
   const itemReservedQuantitiesMap = useMemo(

packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx

@@ -51,6 +51,7 @@ import { useReturns } from "../../../../../hooks/api/returns"
 import { useDate } from "../../../../../hooks/use-date"
 import { getTotalCreditLines } from "../../../../../lib/credit-line"
 import { formatCurrency } from "../../../../../lib/format-currency"
+import { getReservationsLimitCount } from "../../../../../lib/orders"
 import {
   getLocaleAmount,
   getStylizedAmount,
@@ -78,6 +79,7 @@ export const OrderSummarySection = ({
   const { reservations } = useReservationItems(
     {
       line_item_id: order?.items?.map((i) => i.id),
+      limit: getReservationsLimitCount(order),
     },
     { enabled: Array.isArray(order?.items) }
   )