From d58c056c533e1e29b1450baf8cbb33b1ca123510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Fri, 7 Feb 2025 16:24:43 +0100
Subject: [PATCH] fix:(dashboard) pending difference rounding on order details
 page (#11336)

**Why**
- if pending difference is lass then the rounding threshold for currency the page would show for example "Refund -0.00$"

**What**
- example: hide the refund button if the pending difference in USD is -0.004
- example: show refund button if pending difference on USD is -0.007

---

CLOSES SUP-811
CLOSES https://github.com/medusajs/medusa/issues/11331
---
 .../dashboard/src/lib/money-amount-helpers.ts | 22 +++++++++++++++++++
 .../create-refund-form/create-refund-form.tsx |  2 +-
 .../order-summary-section.tsx                 | 14 +++++++++---
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/admin/dashboard/src/lib/money-amount-helpers.ts b/packages/admin/dashboard/src/lib/money-amount-helpers.ts
index 128104b454..a2545908a4 100644
--- a/packages/admin/dashboard/src/lib/money-amount-helpers.ts
+++ b/packages/admin/dashboard/src/lib/money-amount-helpers.ts
@@ -44,10 +44,32 @@ export const getStylizedAmount = (amount: number, currencyCode: string) => {
   const symbol = getNativeSymbol(currencyCode)
   const decimalDigits = getDecimalDigits(currencyCode)
 
+  const lessThanRoundingPrecission = isAmountLessThenRoundingError(
+    amount,
+    currencyCode
+  )
+
   const total = amount.toLocaleString(undefined, {
     minimumFractionDigits: decimalDigits,
     maximumFractionDigits: decimalDigits,
+    signDisplay: lessThanRoundingPrecission ? "exceptZero" : "auto",
   })
 
   return `${symbol} ${total} ${currencyCode.toUpperCase()}`
 }
+
+/**
+ * Returns true if the amount is less than the rounding error for the currency
+ * @param amount - The amount to check
+ * @param currencyCode - The currency code to check the amount in
+ * @returns - True if the amount is less than the rounding error, false otherwise
+ *
+ * For example returns true if amount is < 0.005 for a USD | EUR etc.
+ */
+export const isAmountLessThenRoundingError = (
+  amount: number,
+  currencyCode: string
+) => {
+  const decimalDigits = getDecimalDigits(currencyCode)
+  return Math.abs(amount) < 1 / 10 ** decimalDigits / 2
+}
diff --git a/packages/admin/dashboard/src/routes/orders/order-create-refund/components/create-refund-form/create-refund-form.tsx b/packages/admin/dashboard/src/routes/orders/order-create-refund/components/create-refund-form/create-refund-form.tsx
index c9121b33bf..6c285cc061 100644
--- a/packages/admin/dashboard/src/routes/orders/order-create-refund/components/create-refund-form/create-refund-form.tsx
+++ b/packages/admin/dashboard/src/routes/orders/order-create-refund/components/create-refund-form/create-refund-form.tsx
@@ -44,7 +44,7 @@ export const CreateRefundForm = ({
   const paymentId = searchParams.get("paymentId")
   const payments = getPaymentsFromOrder(order)
   const payment = payments.find((p) => p.id === paymentId)!
-  const paymentAmount = payment.amount || 0
+  const paymentAmount = payment?.amount || 0
   const form = useForm<zod.infer<typeof CreateRefundSchema>>({
     defaultValues: {
       amount: paymentAmount,
diff --git a/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx b/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
index 64c69dfb9b..2d412c8b51 100644
--- a/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
+++ b/packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx
@@ -50,6 +50,7 @@ import { formatCurrency } from "../../../../../lib/format-currency"
 import {
   getLocaleAmount,
   getStylizedAmount,
+  isAmountLessThenRoundingError,
 } from "../../../../../lib/money-amount-helpers"
 import { getTotalCaptured } from "../../../../../lib/payment"
 import { getReturnableQuantity } from "../../../../../lib/rma"
@@ -125,9 +126,16 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
     unpaidPaymentCollection?.id!
   )
 
+  const pendingDifference = order.summary?.pending_difference || 0
+  const isAmountSignificant = !isAmountLessThenRoundingError(
+    pendingDifference,
+    order.currency_code
+  )
+
   const showPayment =
-    unpaidPaymentCollection && (order?.summary?.pending_difference || 0) > 0
-  const showRefund = (order?.summary?.pending_difference || 0) < 0
+    unpaidPaymentCollection && pendingDifference > 0 && isAmountSignificant
+  const showRefund =
+    unpaidPaymentCollection && pendingDifference < 0 && isAmountSignificant
 
   const handleMarkAsPaid = async (
     paymentCollection: AdminPaymentCollection
@@ -261,7 +269,7 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
             >
               {t("orders.payment.refundAmount", {
                 amount: getStylizedAmount(
-                  (order?.summary?.pending_difference || 0) * -1,
+                  pendingDifference * -1,
                   order?.currency_code
                 ),
               })}