From 69bb775f284936189e8f76d93e4d52b84b604814 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Thu, 27 Mar 2025 16:20:22 +0100
Subject: [PATCH] fix(dashboard): refund form input (#11993)

**What**
- fix refund form input issues
---
 .../create-refund-form/create-refund-form.tsx | 47 +++++++++----------
 1 file changed, 22 insertions(+), 25 deletions(-)

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 6c285cc061..60befe28c4 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
@@ -8,7 +8,7 @@ import {
   Textarea,
   toast,
 } from "@medusajs/ui"
-import { useEffect } from "react"
+import { useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { useNavigate, useSearchParams } from "react-router-dom"
@@ -17,10 +17,11 @@ import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useRefundPayment } from "../../../../../hooks/api"
-import { getCurrencySymbol } from "../../../../../lib/data/currencies"
+import { currencies } from "../../../../../lib/data/currencies"
 import { formatCurrency } from "../../../../../lib/format-currency"
 import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
 import { getPaymentsFromOrder } from "../../../order-detail/components/order-payment-section"
+import { formatValue } from "react-currency-input-field"
 
 type CreateRefundFormProps = {
   order: HttpTypes.AdminOrder
@@ -28,7 +29,7 @@ type CreateRefundFormProps = {
 }
 
 const CreateRefundSchema = zod.object({
-  amount: zod.number(),
+  amount: zod.string().or(zod.number()),
   refund_reason_id: zod.string().nullish(),
   note: zod.string().optional(),
 })
@@ -45,6 +46,12 @@ export const CreateRefundForm = ({
   const payments = getPaymentsFromOrder(order)
   const payment = payments.find((p) => p.id === paymentId)!
   const paymentAmount = payment?.amount || 0
+
+  const currency = useMemo(
+    () => currencies[order.currency_code.toUpperCase()],
+    [order.currency_code]
+  )
+
   const form = useForm<zod.infer<typeof CreateRefundSchema>>({
     defaultValues: {
       amount: paymentAmount,
@@ -72,7 +79,7 @@ export const CreateRefundForm = ({
   const handleSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(
       {
-        amount: data.amount,
+        amount: parseFloat(data.amount as string),
         refund_reason_id: data.refund_reason_id,
         note: data.note,
       },
@@ -166,28 +173,18 @@ export const CreateRefundForm = ({
                       <CurrencyInput
                         {...field}
                         min={0}
-                        onValueChange={(value) => {
-                          const fieldValue = value ? parseInt(value) : ""
-
-                          if (fieldValue && !isNaN(fieldValue)) {
-                            if (fieldValue < 0 || fieldValue > paymentAmount) {
-                              form.setError(`amount`, {
-                                type: "manual",
-                                message: t(
-                                  "orders.payment.createRefundWrongQuantity",
-                                  { number: paymentAmount }
-                                ),
-                              })
-                            } else {
-                              form.clearErrors(`amount`)
-                            }
-                          }
-
-                          onChange(fieldValue)
-                        }}
-                        code={order.currency_code}
-                        symbol={getCurrencySymbol(order.currency_code)}
+                        placeholder={formatValue({
+                          value: "0",
+                          decimalScale: currency.decimal_digits,
+                        })}
+                        decimalScale={currency.decimal_digits}
+                        symbol={currency.symbol_native}
+                        code={currency.code}
                         value={field.value}
+                        onValueChange={(_value, _name, values) =>
+                          onChange(values?.value ? values?.value : "")
+                        }
+                        autoFocus
                       />
                     </Form.Control>