fix(admin-ui): allocated badge for orders with statuses cancelled and archived (#3950)

* fix allocated badge for orders with statuses cancelled and archived

* add changeset

.changeset/quiet-wombats-hug.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): allocation status for cancelled and archived orders

packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx

@@ -164,6 +164,8 @@ const SummaryCard: React.FC<SummaryCardProps> = ({ order, reservations }) => {
     return actionables
   }, [showModal, isFeatureEnabled, showAllocationModal, allItemsReserved])
 
+  const isAllocatable = !["canceled", "archived"].includes(order.status)
+
   return (
     <BodyCard
       className={"mb-4 h-auto min-h-0 w-full"}
@@ -172,9 +174,17 @@ const SummaryCard: React.FC<SummaryCardProps> = ({ order, reservations }) => {
         isFeatureEnabled("inventoryService") &&
         Array.isArray(reservations) && (
           <StatusIndicator
-            onClick={allItemsReserved ? undefined : showAllocationModal}
-            variant={allItemsReserved ? "success" : "danger"}
-            title={allItemsReserved ? "Allocated" : "Awaits allocation"}
+            onClick={
+              allItemsReserved || !isAllocatable
+                ? undefined
+                : showAllocationModal
+            }
+            variant={allItemsReserved || !isAllocatable ? "success" : "danger"}
+            title={
+              allItemsReserved || !isAllocatable
+                ? "Allocated"
+                : "Awaits allocation"
+            }
             className="rounded-rounded border px-3 py-1.5"
           />
         )
@@ -188,6 +198,7 @@ const SummaryCard: React.FC<SummaryCardProps> = ({ order, reservations }) => {
             item={item}
             currencyCode={order.currency_code}
             reservations={reservationItemsMap[item.id]}
+            isAllocatable={isAllocatable}
           />
         ))}
         <DisplayTotal

packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx

@@ -10,9 +10,15 @@ type OrderLineProps = {
   item: LineItem
   currencyCode: string
   reservations?: ReservationItemDTO[]
+  isAllocatable?: boolean
 }
 
-const OrderLine = ({ item, currencyCode, reservations }: OrderLineProps) => {
+const OrderLine = ({
+  item,
+  currencyCode,
+  reservations,
+  isAllocatable = true,
+}: OrderLineProps) => {
   const { isFeatureEnabled } = useFeatureFlag()
   return (
     <div className="hover:bg-grey-5 rounded-rounded mx-[-5px] mb-1 flex h-[64px] justify-between py-2 px-[5px]">
@@ -50,7 +56,7 @@ const OrderLine = ({ item, currencyCode, reservations }: OrderLineProps) => {
           <div className="inter-small-regular text-grey-50">
             x {item.quantity}
           </div>
-          {isFeatureEnabled("inventoryService") && (
+          {isFeatureEnabled("inventoryService") && isAllocatable && (
             <ReservationIndicator reservations={reservations} lineItem={item} />
           )}
           <div className="inter-small-regular text-grey-90 min-w-[55px] text-right">