fix(admin): display correct items in the timeline after OE (#3895)

.changeset/nasty-sloths-serve.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin): display correct items in the timeline after OE

packages/admin-ui/ui/src/hooks/use-build-timeline.tsx

@@ -323,7 +323,9 @@ export const useBuildTimeline = (orderId: string) => {
         id: event.id,
         time: event.created_at,
         type: "fulfilled",
-        items: event.items.map((item) => getFulfilmentItem(allItems, item)),
+        items: event.items.map((item) =>
+          getFulfilmentItem(allItems, edits, item)
+        ),
         noNotification: event.no_notification,
         orderId: order.id,
         locationName: getLocationNameById(event.location_id),
@@ -334,7 +336,9 @@ export const useBuildTimeline = (orderId: string) => {
           id: event.id,
           time: event.shipped_at,
           type: "shipped",
-          items: event.items.map((item) => getFulfilmentItem(allItems, item)),
+          items: event.items.map((item) =>
+            getFulfilmentItem(allItems, edits, item)
+          ),
           noNotification: event.no_notification,
           orderId: order.id,
           locationName: getLocationNameById(event.location_id),
@@ -346,8 +350,8 @@ export const useBuildTimeline = (orderId: string) => {
       events.push({
         id: event.id,
         items: event.items
-          .map((i) => getReturnItems(allItems, i))
+          .map((i) => getReturnItems(allItems, edits, i))
-          // After order edit is confirmed, line item that was returned can be deleted
+          // Can be undefined while `edits` is loading
           .filter((i) => !!i),
         status: event.status,
         currentStatus: event.status,
@@ -364,8 +368,8 @@ export const useBuildTimeline = (orderId: string) => {
         events.push({
           id: event.id,
           items: event.items
-            .map((i) => getReturnItems(allItems, i))
+            .map((i) => getReturnItems(allItems, edits, i))
-            // After order edit is confirmed, line item that was returned can be deleted
+            // Can be undefined while `edits` is loading
             .filter((i) => !!i),
           status: "requested",
           time: event.created_at,
@@ -391,7 +395,7 @@ export const useBuildTimeline = (orderId: string) => {
         type: "exchange",
         newItems: event.additional_items.map((i) => getSwapItem(i)),
         returnItems: event.return_order.items.map((i) =>
-          getReturnItems(allItems, i)
+          getReturnItems(allItems, edits, i)
         ),
         exchangeCartId:
           event.payment_status !== "captured" ? event.cart_id : undefined,
@@ -557,8 +561,32 @@ function getLineItem(allItems, itemId) {
   }
 }
 
-function getReturnItems(allItems, item) {
+function findOriginalItemId(edits, originalId) {
-  const line = allItems.find((li) => li.id === item.item_id)
+  let currentId = originalId
+
+  edits = edits
+    .filter((e) => !!e.confirmed_at) // only confirmed OEs are cloning line items
+    .sort((a, b) => new Date(a.confirmed_at) - new Date(b.confirmed_at))
+
+  for (const edit of edits) {
+    const clonedItem = edit.items.find((e) => e.original_item_id === currentId)
+    if (clonedItem) {
+      currentId = clonedItem.id
+    } else {
+      break
+    }
+  }
+
+  return currentId
+}
+
+function getReturnItems(allItems, edits, item) {
+  let id = item.item_id
+  if (edits) {
+    id = findOriginalItemId(edits, id)
+  }
+
+  const line = allItems.find((li) => li.id === id)
 
   if (!line) {
     return
@@ -606,8 +634,13 @@ function getWasRefundClaim(claimId, order) {
   return claim.type === "refund"
 }
 
-function getFulfilmentItem(allItems, item) {
+function getFulfilmentItem(allItems, edits, item) {
-  const line = allItems.find((line) => line.id === item.item_id)
+  let id = item.item_id
+  if (edits) {
+    id = findOriginalItemId(edits, id)
+  }
+
+  const line = allItems.find((line) => line.id === id)
 
   if (!line) {
     return