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

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.total - order.paid_total + requestedEditDifferenceDue
-      order.refunded_total -
-      order.paid_total +
-      requestedEditDifferenceDue
     : order.refunded_total - order.paid_total
 
   if (amount <= 0) {

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)
+              }
             />
           )}
 

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",