From 0194f30dd80d4adfe7c47730bdc2f78537a6a262 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 23 Nov 2023 14:52:27 +0100
Subject: [PATCH] fix-currency-field-input (#2666)

* fix-currency-field-input

* modify according to comments
---
 .../components/CurrencyDisplay.tsx            |  3 +--
 .../meta-types/hooks/useCurrencyField.ts      | 24 +++++++++++++++----
 .../input/components/CurrencyFieldInput.tsx   | 11 +++++++--
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/front/src/modules/ui/object/field/meta-types/display/content-display/components/CurrencyDisplay.tsx b/front/src/modules/ui/object/field/meta-types/display/content-display/components/CurrencyDisplay.tsx
index c0cb53cc3..fda2dc286 100644
--- a/front/src/modules/ui/object/field/meta-types/display/content-display/components/CurrencyDisplay.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/content-display/components/CurrencyDisplay.tsx
@@ -11,8 +11,7 @@ type CurrencyDisplayProps = {
 export const CurrencyDisplay = ({ value }: CurrencyDisplayProps) => {
   return (
     <EllipsisDisplay>
-      {convertCurrencyMicrosToCurrency(value?.amountMicros)}{' '}
-      {value?.currencyCode}
+      {convertCurrencyMicrosToCurrency(value?.amountMicros)}
     </EllipsisDisplay>
   );
 };
diff --git a/front/src/modules/ui/object/field/meta-types/hooks/useCurrencyField.ts b/front/src/modules/ui/object/field/meta-types/hooks/useCurrencyField.ts
index 3bf2f29ae..32f4a22c9 100644
--- a/front/src/modules/ui/object/field/meta-types/hooks/useCurrencyField.ts
+++ b/front/src/modules/ui/object/field/meta-types/hooks/useCurrencyField.ts
@@ -1,6 +1,8 @@
 import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
+import { FieldInitialValue } from '@/ui/object/field/types/FieldInitialValue';
+
 import { FieldContext } from '../../contexts/FieldContext';
 import { useFieldInitialValue } from '../../hooks/useFieldInitialValue';
 import { usePersistField } from '../../hooks/usePersistField';
@@ -10,6 +12,22 @@ import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 import { isFieldCurrency } from '../../types/guards/isFieldCurrency';
 import { isFieldCurrencyValue } from '../../types/guards/isFieldCurrencyValue';
 
+const initializeValue = (
+  fieldInitialValue: FieldInitialValue | undefined,
+  fieldValue: FieldCurrencyValue,
+) => {
+  if (fieldInitialValue?.isEmpty) {
+    return { amountMicros: 0, currencyCode: 'USD' };
+  }
+  if (!isNaN(Number(fieldInitialValue?.value))) {
+    return {
+      amountMicros: Number(fieldInitialValue?.value),
+      currencyCode: 'USD',
+    };
+  }
+  return fieldValue;
+};
+
 export const useCurrencyField = () => {
   const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
 
@@ -36,11 +54,7 @@ export const useCurrencyField = () => {
 
   const fieldInitialValue = useFieldInitialValue();
 
-  const initialValue: FieldCurrencyValue = fieldInitialValue?.isEmpty
-    ? { amountMicros: 0, currencyCode: '' }
-    : !isNaN(Number(fieldInitialValue?.value))
-    ? { amountMicros: Number(fieldInitialValue?.value), currencyCode: '' }
-    : { amountMicros: 0, currencyCode: '' } ?? fieldValue;
+  const initialValue = initializeValue(fieldInitialValue, fieldValue);
 
   return {
     fieldDefinition,
diff --git a/front/src/modules/ui/object/field/meta-types/input/components/CurrencyFieldInput.tsx b/front/src/modules/ui/object/field/meta-types/input/components/CurrencyFieldInput.tsx
index dfe3bb290..6ca1ebfcc 100644
--- a/front/src/modules/ui/object/field/meta-types/input/components/CurrencyFieldInput.tsx
+++ b/front/src/modules/ui/object/field/meta-types/input/components/CurrencyFieldInput.tsx
@@ -1,5 +1,8 @@
 import { TextInput } from '@/ui/object/field/meta-types/input/components/internal/TextInput';
-import { convertCurrencyToCurrencyMicros } from '~/utils/convert-currency-amount';
+import {
+  convertCurrencyMicrosToCurrency,
+  convertCurrencyToCurrencyMicros,
+} from '~/utils/convert-currency-amount';
 
 import { useCurrencyField } from '../../hooks/useCurrencyField';
 
@@ -80,7 +83,11 @@ export const CurrencyFieldInput = ({
   return (
     <FieldInputOverlay>
       <TextInput
-        value={initialValue.amountMicros?.toString() ?? ''}
+        value={
+          convertCurrencyMicrosToCurrency(
+            initialValue.amountMicros,
+          )?.toString() ?? ''
+        }
         placeholder="Currency"
         onClickOutside={handleClickOutside}
         onEnter={handleEnter}