From 0c30d05cf3805515086dc589a0332b59b6df045f Mon Sep 17 00:00:00 2001
From: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com>
Date: Mon, 1 May 2023 09:48:51 +0200
Subject: [PATCH] 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                 |  5 +++++
 .../orders/details/detail-cards/summary.tsx     | 17 ++++++++++++++---
 .../domain/orders/details/order-line/index.tsx  | 10 ++++++++--
 3 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/quiet-wombats-hug.md

diff --git a/.changeset/quiet-wombats-hug.md b/.changeset/quiet-wombats-hug.md
new file mode 100644
index 0000000000..3db6427d93
--- /dev/null
+++ b/.changeset/quiet-wombats-hug.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): allocation status for cancelled and archived orders
diff --git a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx b/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx
index 509239788f..64cb77dea5 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx
+++ b/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
diff --git a/packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx
index 238eb56841..3b3f1dfef1 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx
+++ b/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">