diff --git a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx index 8a24acab92..c95f31fad2 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx @@ -1,4 +1,7 @@ import { useTheme } from '@emotion/react'; +import { useId, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display'; import { useNumberFormat } from '@/localization/hooks/useNumberFormat'; import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition'; @@ -22,10 +25,14 @@ export const CurrencyDisplay = ({ fieldDefinition, }: CurrencyDisplayProps) => { const theme = useTheme(); + const instanceId = useId(); + const [shouldRenderTooltip, setShouldRenderTooltip] = useState(false); - const CurrencyIcon = isDefined(currencyValue?.currencyCode) - ? SETTINGS_FIELD_CURRENCY_CODES[currencyValue?.currencyCode]?.Icon + const currencyCode = currencyValue?.currencyCode; + const currencyMetadata = isDefined(currencyCode) + ? SETTINGS_FIELD_CURRENCY_CODES[currencyCode] : null; + const CurrencyIcon = currencyMetadata?.Icon ?? null; const amountToDisplay = isUndefinedOrNull(currencyValue?.amountMicros) ? null @@ -36,23 +43,51 @@ export const CurrencyDisplay = ({ const decimalsToUse = decimals ?? DEFAULT_DECIMAL_VALUE; const { formatNumber } = useNumberFormat(); + const tooltipAnchorId = `currency-icon-${instanceId.replace(/[^a-zA-Z0-9-_]/g, '-')}`; + const currencyTooltipContent = isDefined(currencyCode) + ? `${currencyCode}${currencyMetadata?.label ? ` - ${currencyMetadata.label}` : ''}` + : undefined; + const shouldShowCurrencyTooltip = + isDefined(CurrencyIcon) && + amountToDisplay !== null && + isDefined(currencyTooltipContent); return ( - - {isDefined(CurrencyIcon) && amountToDisplay !== null && ( - <> - {' '} - - )} - {amountToDisplay !== null - ? !isDefined(format) || format === 'short' - ? formatToShortNumber(amountToDisplay) - : formatNumber(amountToDisplay, { decimals: decimalsToUse }) - : null} - + <> + + {shouldShowCurrencyTooltip && ( + <> + setShouldRenderTooltip(true)} + onMouseLeave={() => setShouldRenderTooltip(false)} + > + + {' '} + + )} + {amountToDisplay !== null + ? !isDefined(format) || format === 'short' + ? formatToShortNumber(amountToDisplay) + : formatNumber(amountToDisplay, { decimals: decimalsToUse }) + : null} + + {shouldRenderTooltip && + shouldShowCurrencyTooltip && + createPortal( + , + document.body, + )} + ); };