From cf1b0bfccf3941cdaf67107e9af34f8795b5a3a6 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 24 Nov 2023 15:19:29 +0100
Subject: [PATCH] Fix link and currency input (#2697)

* fix link focus

* fix currency value null

* fix currency code nullable

* change in progress

* currency is working

* modify path
---
 .../ui/object/field/components/FieldInput.tsx |  2 -
 .../components/CurrencyFieldDisplay.tsx       |  4 +-
 .../components/CurrencyDisplay.tsx            | 13 +---
 .../meta-types/hooks/useCurrencyField.ts      | 43 ++++++++++--
 .../input/components/CurrencyFieldInput.tsx   | 68 ++++++++-----------
 .../input/components/LinkFieldInput.tsx       |  1 +
 .../ui/object/field/types/FieldMetadata.ts    |  5 +-
 .../types/guards/isFieldCurrencyValue.ts      |  4 +-
 front/src/utils/convert-currency-amount.ts    | 14 ++--
 9 files changed, 84 insertions(+), 70 deletions(-)

diff --git a/front/src/modules/ui/object/field/components/FieldInput.tsx b/front/src/modules/ui/object/field/components/FieldInput.tsx
index c3c7d6243f..2d1a01a480 100644
--- a/front/src/modules/ui/object/field/components/FieldInput.tsx
+++ b/front/src/modules/ui/object/field/components/FieldInput.tsx
@@ -48,8 +48,6 @@ export const FieldInput = ({
 }: FieldInputProps) => {
   const { fieldDefinition } = useContext(FieldContext);
 
-  console.log(fieldDefinition);
-
   return (
     <>
       {isFieldRelation(fieldDefinition) ? (
diff --git a/front/src/modules/ui/object/field/meta-types/display/components/CurrencyFieldDisplay.tsx b/front/src/modules/ui/object/field/meta-types/display/components/CurrencyFieldDisplay.tsx
index f649072e29..75f5ed13bb 100644
--- a/front/src/modules/ui/object/field/meta-types/display/components/CurrencyFieldDisplay.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/CurrencyFieldDisplay.tsx
@@ -2,7 +2,7 @@ import { useCurrencyField } from '../../hooks/useCurrencyField';
 import { CurrencyDisplay } from '../content-display/components/CurrencyDisplay';
 
 export const CurrencyFieldDisplay = () => {
-  const { fieldValue } = useCurrencyField();
+  const { initialAmount } = useCurrencyField();
 
-  return <CurrencyDisplay value={fieldValue} />;
+  return <CurrencyDisplay amount={initialAmount} />;
 };
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 fda2dc286c..80d3a968fd 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
@@ -1,17 +1,10 @@
-import { FieldCurrencyValue } from '@/ui/object/field/types/FieldMetadata';
-import { convertCurrencyMicrosToCurrency } from '~/utils/convert-currency-amount';
-
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 type CurrencyDisplayProps = {
-  value?: FieldCurrencyValue;
+  amount?: number | null;
 };
 
 // TODO: convert currencyCode to currency symbol
-export const CurrencyDisplay = ({ value }: CurrencyDisplayProps) => {
-  return (
-    <EllipsisDisplay>
-      {convertCurrencyMicrosToCurrency(value?.amountMicros)}
-    </EllipsisDisplay>
-  );
+export const CurrencyDisplay = ({ amount }: CurrencyDisplayProps) => {
+  return <EllipsisDisplay>{amount}</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 32f4a22c95..4cef066fec 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
@@ -2,6 +2,11 @@ import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { FieldInitialValue } from '@/ui/object/field/types/FieldInitialValue';
+import { canBeCastAsIntegerOrNull } from '~/utils/cast-as-integer-or-null';
+import {
+  convertCurrencyMicrosToCurrency,
+  convertCurrencyToCurrencyMicros,
+} from '~/utils/convert-currency-amount';
 
 import { FieldContext } from '../../contexts/FieldContext';
 import { useFieldInitialValue } from '../../hooks/useFieldInitialValue';
@@ -17,15 +22,18 @@ const initializeValue = (
   fieldValue: FieldCurrencyValue,
 ) => {
   if (fieldInitialValue?.isEmpty) {
-    return { amountMicros: 0, currencyCode: 'USD' };
+    return { amount: null, currencyCode: 'USD' };
   }
   if (!isNaN(Number(fieldInitialValue?.value))) {
     return {
-      amountMicros: Number(fieldInitialValue?.value),
+      amount: Number(fieldInitialValue?.value),
       currencyCode: 'USD',
     };
   }
-  return fieldValue;
+  return {
+    amount: convertCurrencyMicrosToCurrency(fieldValue.amountMicros),
+    currencyCode: fieldValue.currencyCode,
+  };
 };
 
 export const useCurrencyField = () => {
@@ -44,22 +52,43 @@ export const useCurrencyField = () => {
 
   const persistField = usePersistField();
 
-  const persistCurrencyField = (newValue: FieldCurrencyValue) => {
-    if (!isFieldCurrencyValue(newValue)) {
+  const persistCurrencyField = ({
+    amountText,
+    currencyCode,
+  }: {
+    amountText: string;
+    currencyCode: string;
+  }) => {
+    if (!canBeCastAsIntegerOrNull(amountText)) {
       return;
     }
+    const amount = parseFloat(amountText);
 
-    persistField(newValue);
+    const newCurrencyValue = {
+      amountMicros: isNaN(amount)
+        ? null
+        : convertCurrencyToCurrencyMicros(amount),
+      currencyCode: currencyCode,
+    };
+
+    if (!isFieldCurrencyValue(newCurrencyValue)) {
+      return;
+    }
+    persistField(newCurrencyValue);
   };
 
   const fieldInitialValue = useFieldInitialValue();
 
   const initialValue = initializeValue(fieldInitialValue, fieldValue);
 
+  const initialAmount = initialValue.amount;
+  const initialCurrencyCode = initialValue.currencyCode;
+
   return {
     fieldDefinition,
     fieldValue,
-    initialValue,
+    initialAmount,
+    initialCurrencyCode,
     setFieldValue,
     hotkeyScope,
     persistCurrencyField,
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 6ca1ebfcc5..4cd0f4aa05 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,8 +1,4 @@
 import { TextInput } from '@/ui/object/field/meta-types/input/components/internal/TextInput';
-import {
-  convertCurrencyMicrosToCurrency,
-  convertCurrencyToCurrencyMicros,
-} from '~/utils/convert-currency-amount';
 
 import { useCurrencyField } from '../../hooks/useCurrencyField';
 
@@ -24,58 +20,57 @@ export const CurrencyFieldInput = ({
   onTab,
   onShiftTab,
 }: CurrencyFieldInputProps) => {
-  const { hotkeyScope, initialValue, persistCurrencyField } =
-    useCurrencyField();
+  const {
+    hotkeyScope,
+    initialAmount,
+    initialCurrencyCode,
+    persistCurrencyField,
+  } = useCurrencyField();
 
   const handleEnter = (newValue: string) => {
-    onEnter?.(() =>
+    onEnter?.(() => {
       persistCurrencyField({
-        amountMicros:
-          convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
-        currencyCode: initialValue.currencyCode,
-      }),
-    );
+        amountText: newValue,
+        currencyCode: initialCurrencyCode,
+      });
+    });
   };
 
   const handleEscape = (newValue: string) => {
-    onEscape?.(() =>
+    onEscape?.(() => {
       persistCurrencyField({
-        amountMicros:
-          convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
-        currencyCode: initialValue.currencyCode,
-      }),
-    );
+        amountText: newValue,
+        currencyCode: initialCurrencyCode,
+      });
+    });
   };
 
   const handleClickOutside = (
     event: MouseEvent | TouchEvent,
     newValue: string,
   ) => {
-    onClickOutside?.(() =>
+    onClickOutside?.(() => {
       persistCurrencyField({
-        amountMicros:
-          convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
-        currencyCode: initialValue.currencyCode,
-      }),
-    );
+        amountText: newValue,
+        currencyCode: initialCurrencyCode,
+      });
+    });
   };
 
   const handleTab = (newValue: string) => {
-    onTab?.(() =>
+    onTab?.(() => {
       persistCurrencyField({
-        amountMicros:
-          convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
-        currencyCode: initialValue.currencyCode,
-      }),
-    );
+        amountText: newValue,
+        currencyCode: initialCurrencyCode,
+      });
+    });
   };
 
   const handleShiftTab = (newValue: string) => {
     onShiftTab?.(() =>
       persistCurrencyField({
-        amountMicros:
-          convertCurrencyToCurrencyMicros(parseFloat(newValue)) ?? 0,
-        currencyCode: initialValue.currencyCode,
+        amountText: newValue,
+        currencyCode: initialCurrencyCode,
       }),
     );
   };
@@ -83,11 +78,8 @@ export const CurrencyFieldInput = ({
   return (
     <FieldInputOverlay>
       <TextInput
-        value={
-          convertCurrencyMicrosToCurrency(
-            initialValue.amountMicros,
-          )?.toString() ?? ''
-        }
+        value={initialAmount?.toString() ?? ''}
+        autoFocus
         placeholder="Currency"
         onClickOutside={handleClickOutside}
         onEnter={handleEnter}
diff --git a/front/src/modules/ui/object/field/meta-types/input/components/LinkFieldInput.tsx b/front/src/modules/ui/object/field/meta-types/input/components/LinkFieldInput.tsx
index 3eb1d194fc..d24cf1e541 100644
--- a/front/src/modules/ui/object/field/meta-types/input/components/LinkFieldInput.tsx
+++ b/front/src/modules/ui/object/field/meta-types/input/components/LinkFieldInput.tsx
@@ -74,6 +74,7 @@ export const LinkFieldInput = ({
     <FieldInputOverlay>
       <TextInput
         value={initialValue.url}
+        autoFocus
         placeholder="URL"
         hotkeyScope={hotkeyScope}
         onClickOutside={handleClickOutside}
diff --git a/front/src/modules/ui/object/field/types/FieldMetadata.ts b/front/src/modules/ui/object/field/types/FieldMetadata.ts
index 40ca5e970b..2ebbacb93e 100644
--- a/front/src/modules/ui/object/field/types/FieldMetadata.ts
+++ b/front/src/modules/ui/object/field/types/FieldMetadata.ts
@@ -103,7 +103,10 @@ export type FieldBooleanValue = boolean;
 export type FieldPhoneValue = string;
 export type FieldEmailValue = string;
 export type FieldLinkValue = { url: string; label: string };
-export type FieldCurrencyValue = { currencyCode: string; amountMicros: number };
+export type FieldCurrencyValue = {
+  currencyCode: string;
+  amountMicros: number | null;
+};
 export type FieldFullNameValue = { firstName: string; lastName: string };
 export type FieldProbabilityValue = number;
 
diff --git a/front/src/modules/ui/object/field/types/guards/isFieldCurrencyValue.ts b/front/src/modules/ui/object/field/types/guards/isFieldCurrencyValue.ts
index 69378fd6e3..e46ab93d3d 100644
--- a/front/src/modules/ui/object/field/types/guards/isFieldCurrencyValue.ts
+++ b/front/src/modules/ui/object/field/types/guards/isFieldCurrencyValue.ts
@@ -3,8 +3,8 @@ import { z } from 'zod';
 import { FieldCurrencyValue } from '../FieldMetadata';
 
 const currencySchema = z.object({
-  currencyCode: z.string(),
-  amountMicros: z.number(),
+  currencyCode: z.string().nullable(),
+  amountMicros: z.number().nullable(),
 });
 
 export const isFieldCurrencyValue = (
diff --git a/front/src/utils/convert-currency-amount.ts b/front/src/utils/convert-currency-amount.ts
index b29bbae1c8..72814c672b 100644
--- a/front/src/utils/convert-currency-amount.ts
+++ b/front/src/utils/convert-currency-amount.ts
@@ -1,10 +1,8 @@
-import { isUndefined } from '@sniptt/guards';
-
 export const convertCurrencyToCurrencyMicros = (
-  currencyAmount: number | undefined,
+  currencyAmount: number | null | undefined,
 ) => {
-  if (!currencyAmount) {
-    return undefined;
+  if (currencyAmount == null) {
+    return null;
   }
   const currencyAmountAsNumber = +currencyAmount;
   if (isNaN(currencyAmountAsNumber)) {
@@ -18,10 +16,10 @@ export const convertCurrencyToCurrencyMicros = (
 };
 
 export const convertCurrencyMicrosToCurrency = (
-  currencyAmountMicros: number | undefined,
+  currencyAmountMicros: number | null | undefined,
 ) => {
-  if (isUndefined(currencyAmountMicros)) {
-    return undefined;
+  if (currencyAmountMicros == null) {
+    return null;
   }
   const currencyAmountMicrosAsNumber = +currencyAmountMicros;
   if (isNaN(currencyAmountMicrosAsNumber)) {