From 2176ff5027d04623e737191992352adc4015cfa2 Mon Sep 17 00:00:00 2001
From: Rares Stefan <rares.capilnar@gmail.com>
Date: Mon, 20 Mar 2023 14:01:17 +0100
Subject: [PATCH] fix(admin-ui): Hide create fulfilment button when nothing
 left to fulfil (#3515)

Previously, if an order had two fulfilments that fully satisfied the order, then only one was shipped, the status would change to `partially_shipped` and show the "Create Fulfillment" button again, which would open a buggy modal with no items to fulfil. Added another check that looks at the items in the order and compares `quantity` and `fulfilled_quantity`, so that we can hide the button based on this as well, rather than just the order's `fulfillment_status`, which can be misleading.

Also added a status icon to the Fulfillment card's title bar for the `partially_shipped` status, as this area was blank before in that state.

Resolves CORE-1262
---
 .../ui/src/domain/orders/details/index.tsx        | 15 ++++++++++++---
 .../details/templates/fulfillment-status.tsx      |  2 ++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/admin-ui/ui/src/domain/orders/details/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/index.tsx
index c018368a77..16707caa29 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/index.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/index.tsx
@@ -1,4 +1,10 @@
-import { Address, ClaimOrder, Fulfillment, Swap } from "@medusajs/medusa"
+import {
+  Address,
+  ClaimOrder,
+  Fulfillment,
+  LineItem,
+  Swap,
+} from "@medusajs/medusa"
 import {
   DisplayTotal,
   FormattedAddress,
@@ -261,6 +267,10 @@ const OrderDetails = () => {
     navigate("/404")
   }
 
+  const anyItemsToFulfil = order.items.some(
+    (item: LineItem) => item.quantity > (item.fulfilled_quantity ?? 0)
+  )
+
   return (
     <div>
       <OrderEditProvider orderId={id!}>
@@ -415,9 +425,8 @@ const OrderDetails = () => {
                     />
                   }
                   customActionable={
-                    order.fulfillment_status !== "fulfilled" &&
                     order.status !== "canceled" &&
-                    order.fulfillment_status !== "shipped" && (
+                    anyItemsToFulfil && (
                       <Button
                         variant="secondary"
                         size="small"
diff --git a/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx b/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx
index e1f7352dc8..b495377b23 100644
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment-status.tsx
@@ -14,6 +14,8 @@ export const FulfillmentStatusComponent = ({ status }) => {
       return <StatusDot title="Requires Action" variant="danger" />
     case "not_fulfilled":
       return <StatusDot title="Awaiting fulfillment" variant="danger" />
+    case "partially_shipped":
+      return <StatusDot title="Partially Shipped" variant="warning" />
     default:
       return null
   }