From bd199d7f4422f1781397480de36b4b6752a588ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Fri, 24 Mar 2023 17:59:15 +0100
Subject: [PATCH] fix(admin): OrderEdit display of difference due with refund
 (#3487)

**What**
- fix `difference_due` in the OE modal to show the correct difference a user has to pay
- fix Timeline crashing due to returned line item being `undefined `(deleted after OE confirmation)

**Why**
We were taking into account `refunded_amount` when calculating "Difference Due"  and used the following formula:
`orderEdit.total - paidTotal + refundedTotal`.
The issue here is that  `orderEdit.total` is "overpriced" for the amount of items that are returned/refunded already (i.e. we are charging the user again for the returned items).

The straightforward solution would be to subtract `refunded_total` from the `orderEdit.total` to get the total cost of items the user is actually getting after the edit.

`difference_due = (orderEdit.total - refundedTotal) - (paidTotal - refundedTotal ) =  orderEdit.total - paidTotal`

But if we have partially refunded returns, we would have the same problem of returned items priced into the total.
In that case, general solution should be something like:
`diff_due_display = orderEdit_total_of_items_user_is_getting - paid_total + refunded_total`

Would like to hear what you guys think!

---

FIXES CORE-1246
---
 .../timeline-events/order-edit/payment-required.tsx    |  5 +----
 packages/admin-ui/ui/src/domain/orders/edit/modal.tsx  |  5 ++++-
 packages/admin-ui/ui/src/hooks/use-build-timeline.tsx  | 10 ++++++++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx
index 67130e0076..7864b3d24d 100644
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx
@@ -23,10 +23,7 @@ const PaymentRequired: React.FC<RequestedProps> = ({ event }) => {
   }
 
   const amount = requestedEditDifferenceDue
-    ? order.total +
-      order.refunded_total -
-      order.paid_total +
-      requestedEditDifferenceDue
+    ? order.total - order.paid_total + requestedEditDifferenceDue
     : order.refunded_total - order.paid_total
 
   if (amount <= 0) {
diff --git a/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx b/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx
index f7ddd456a8..a038f6eeb9 100644
--- a/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/edit/modal.tsx
@@ -336,7 +336,10 @@ function OrderEditModal(props: OrderEditModalProps) {
               currencyCode={currencyCode}
               amountPaid={paidTotal - refundedTotal}
               newTotal={orderEdit.total}
-              differenceDue={orderEdit.total - paidTotal + refundedTotal}
+              differenceDue={
+                // TODO: more correct would be to have => diff_due = orderEdit_total_of_items_user_is_getting - paid_total + refunded_total
+                orderEdit.total - paidTotal // (orderEdit_total - refunded_total) - (paidTotal - refundedTotal)
+              }
             />
           )}
 
diff --git a/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx b/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx
index 4710a6215b..94ef922be9 100644
--- a/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx
+++ b/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx
@@ -345,7 +345,10 @@ export const useBuildTimeline = (orderId: string) => {
     for (const event of order.returns) {
       events.push({
         id: event.id,
-        items: event.items.map((i) => getReturnItems(allItems, i)),
+        items: event.items
+          .map((i) => getReturnItems(allItems, i))
+          // After order edit is confirmed, line item that was returned can be deleted
+          .filter((i) => !!i),
         status: event.status,
         currentStatus: event.status,
         time: event.updated_at,
@@ -360,7 +363,10 @@ export const useBuildTimeline = (orderId: string) => {
       if (event.status !== "requested") {
         events.push({
           id: event.id,
-          items: event.items.map((i) => getReturnItems(allItems, i)),
+          items: event.items
+            .map((i) => getReturnItems(allItems, i))
+            // After order edit is confirmed, line item that was returned can be deleted
+            .filter((i) => !!i),
           status: "requested",
           time: event.created_at,
           type: "return",