diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormCurrencyFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormCurrencyFieldInput.tsx index c664184c10..12c619f47a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormCurrencyFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormCurrencyFieldInput.tsx @@ -9,6 +9,34 @@ import { InputLabel } from '@/ui/input/components/InputLabel'; import { useMemo } from 'react'; import { type CurrencyCode } from 'twenty-shared/constants'; import { IconCircleOff } from 'twenty-ui/display'; +import { + convertCurrencyAmountToCurrencyMicros, + convertCurrencyMicrosToCurrencyAmount, +} from '~/utils/convertCurrencyToCurrencyMicros'; + +const formatMicrosToDisplayAmount = ( + amountMicros: string | number | null | undefined, +): string | number => { + if (amountMicros == null) { + return ''; + } + if (Number.isFinite(+amountMicros)) { + return convertCurrencyMicrosToCurrencyAmount(+amountMicros); + } + return amountMicros; +}; + +const parseDisplayAmountToMicros = ( + displayAmount: string | number | null, +): number | null => { + if (displayAmount == null) { + return null; + } + if (Number.isFinite(+displayAmount)) { + return convertCurrencyAmountToCurrencyMicros(Number(displayAmount)); + } + return null; +}; type FormCurrencyFieldInputProps = { label?: string; @@ -41,7 +69,7 @@ export const FormCurrencyFieldInput = ({ ) => { onChange({ currencyCode: defaultValue?.currencyCode ?? null, - amountMicros: newAmountMicros ?? null, + amountMicros: parseDisplayAmountToMicros(newAmountMicros), }); }; @@ -65,11 +93,11 @@ export const FormCurrencyFieldInput = ({ readonly={readonly} /> diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx index 89dcbed214..fab08b77d8 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx @@ -32,7 +32,7 @@ export const Default: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); await canvas.findByText('Currency Code'); - await canvas.findByText('Amount Micros'); + await canvas.findByText('Amount'); }, }; @@ -81,7 +81,7 @@ export const Disabled: Story = { const currency = await canvas.findByText(/USD/); expect(currency).toBeVisible(); - const amountInput = await canvas.findByDisplayValue('44000000'); + const amountInput = await canvas.findByDisplayValue('44'); expect(amountInput).toBeVisible(); expect(amountInput).toBeDisabled();