feat: ability to switch currency format (#12542)

Fixes #11927

I have added 'format' in the zod schema of currency, and for using it, I
am separately passing 'format' to 'currencyDisplay.'
The feature is working correctly.

---------

Co-authored-by: prastoin <paul@twenty.com>
Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com>
This commit is contained in:
Mohit Agrawal
2025-06-24 13:58:50 +05:30
committed by GitHub
parent 6651abae18
commit d0126e22ee
13 changed files with 122 additions and 33 deletions

View File

@ -1,17 +1,26 @@
import { useTheme } from '@emotion/react';
import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import {
FieldCurrencyMetadata,
FieldCurrencyValue,
} from '@/object-record/record-field/types/FieldMetadata';
import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { isDefined } from 'twenty-shared/utils';
import { formatAmount } from '~/utils/format/formatAmount';
import { formatNumber } from '~/utils/format/number';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
type CurrencyDisplayProps = {
currencyValue: FieldCurrencyValue | null | undefined;
fieldDefinition: FieldDefinition<FieldCurrencyMetadata>;
};
export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
export const CurrencyDisplay = ({
currencyValue,
fieldDefinition,
}: CurrencyDisplayProps) => {
const theme = useTheme();
const shouldDisplayCurrency = isDefined(currencyValue?.currencyCode);
@ -24,6 +33,8 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
? null
: currencyValue?.amountMicros / 1000000;
const format = fieldDefinition.metadata.settings?.format;
if (!shouldDisplayCurrency) {
return <EllipsisDisplay>{0}</EllipsisDisplay>;
}
@ -39,7 +50,11 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
/>{' '}
</>
)}
{amountToDisplay !== null ? formatAmount(amountToDisplay) : ''}
{amountToDisplay !== null
? !isDefined(format) || format === 'short'
? formatAmount(amountToDisplay)
: formatNumber(amountToDisplay)
: null}
</EllipsisDisplay>
);
};