fix: zero showing in record cell and page (#7384)

This PR fixes zero being displayed as empty in record cell and show page
in currency field #6802
I checked graphql resquests and the data is stored in the correct form
(0 or null). The problem only lies in the front end and how the field is
null checked.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx

@@ -7,6 +7,7 @@ import { CurrencyInput } from '@/ui/field/input/components/CurrencyInput';
 import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
 import { useCurrencyField } from '../../hooks/useCurrencyField';
 
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 import { FieldInputEvent } from './DateTimeFieldInput';
 
 type CurrencyFieldInputProps = {
@@ -108,7 +109,7 @@ export const CurrencyFieldInput = ({
 
   const handleSelect = (newValue: string) => {
     setDraftValue({
-      amount: draftValue?.amount ?? '',
+      amount: isUndefinedOrNull(draftValue?.amount) ? '' : draftValue?.amount,
       currencyCode: newValue as CurrencyCode,
     });
   };

packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts

@@ -9,6 +9,7 @@ import { isFieldRelation } from '@/object-record/record-field/types/guards/isFie
 import { computeEmptyDraftValue } from '@/object-record/record-field/utils/computeEmptyDraftValue';
 import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldValueEmpty';
 import { isDefined } from '~/utils/isDefined';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 type computeDraftValueFromFieldValueParams<FieldValue> = {
   fieldDefinition: Pick<FieldDefinition<FieldMetadata>, 'type'>;
@@ -32,7 +33,9 @@ export const computeDraftValueFromFieldValue = <FieldValue>({
     }
 
     return {
-      amount: fieldValue?.amountMicros ? fieldValue.amountMicros / 1000000 : '',
+      amount: isUndefinedOrNull(fieldValue?.amountMicros)
+        ? ''
+        : (fieldValue.amountMicros / 1000000).toString(),
       currencyCode: fieldValue?.currencyCode ?? '',
     } as unknown as FieldInputDraftValue<FieldValue>;
   }

packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx

@@ -29,7 +29,10 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
     ? SETTINGS_FIELD_CURRENCY_CODES[currencyValue?.currencyCode]?.Icon
     : null;
 
-  const amountToDisplay = (currencyValue?.amountMicros ?? 0) / 1000000;
+  const amountToDisplay =
+    currencyValue?.amountMicros != null
+      ? currencyValue?.amountMicros / 1000000
+      : null;
 
   if (!shouldDisplayCurrency) {
     return <StyledEllipsisDisplay>{0}</StyledEllipsisDisplay>;
@@ -46,7 +49,7 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
           />{' '}
         </>
       )}
-      {amountToDisplay !== 0 ? formatAmount(amountToDisplay) : ''}
+      {amountToDisplay !== null ? formatAmount(amountToDisplay) : ''}
     </StyledEllipsisDisplay>
   );
 };

packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { IMaskInput, IMaskInputProps } from 'react-imask';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { IMaskInput, IMaskInputProps } from 'react-imask';
 import { IconComponent, TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
@@ -138,7 +138,6 @@ export const CurrencyInput = ({
         mask={Number}
         thousandsSeparator={','}
         radix="."
-        unmask="typed"
         onAccept={(value: string) => handleChange(value)}
         inputRef={wrapperRef}
         autoComplete="off"