New field currency (#4338)

Closes #4122 
---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -1,10 +1,51 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
+import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
+import { formatAmount } from '~/utils/format/formatAmount';
+import { isDefined } from '~/utils/isDefined';
+
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 type CurrencyDisplayProps = {
-  amount?: number | null;
+  currencyValue: FieldCurrencyValue | null | undefined;
 };
 
-// TODO: convert currencyCode to currency symbol
-export const CurrencyDisplay = ({ amount }: CurrencyDisplayProps) => {
-  return <EllipsisDisplay>{amount}</EllipsisDisplay>;
+const StyledEllipsisDisplay = styled(EllipsisDisplay)`
+  align-items: center;
+  display: flex;
+`;
+
+export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
+  const theme = useTheme();
+
+  const shouldDisplayCurrency = isDefined(currencyValue?.currencyCode);
+
+  const CurrencyIcon = isDefined(currencyValue?.currencyCode)
+    ? SETTINGS_FIELD_CURRENCY_CODES[currencyValue?.currencyCode]?.Icon
+    : null;
+
+  const amountToDisplay = isDefined(currencyValue?.amountMicros)
+    ? currencyValue.amountMicros / 1000000
+    : 0;
+
+  if (!shouldDisplayCurrency) {
+    return <StyledEllipsisDisplay>{0}</StyledEllipsisDisplay>;
+  }
+
+  return (
+    <StyledEllipsisDisplay>
+      {isDefined(CurrencyIcon) && (
+        <>
+          <CurrencyIcon
+            color={theme.font.color.primary}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />{' '}
+        </>
+      )}
+      {amountToDisplay !== 0 ? formatAmount(amountToDisplay) : ''}
+    </StyledEllipsisDisplay>
+  );
 };

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

@@ -11,11 +11,15 @@ const StyledEllipsisDisplay = styled.div<{ maxWidth?: number }>`
 type EllipsisDisplayProps = {
   children: React.ReactNode;
   maxWidth?: number;
+  className?: string;
 };
 
 export const EllipsisDisplay = ({
   children,
   maxWidth,
+  className,
 }: EllipsisDisplayProps) => (
-  <StyledEllipsisDisplay style={{ maxWidth }}>{children}</StyledEllipsisDisplay>
+  <StyledEllipsisDisplay style={{ maxWidth }} className={className}>
+    {children}
+  </StyledEllipsisDisplay>
 );