refactor: harmonise float to currency conversions (hl-1506) (#3550)

* fix: typescript issue

* chore: add function shorthand from float to zero decimal euro format

* refactor: switch to even euro float conversion

* refactor: use default "EUR" instead of explicit argument

* test: fix browser test for alteration

frontend/benefit/applicant/browser-tests/utils/fieldMaps.ts

@@ -9,13 +9,13 @@ export type ApplicationField = {
 
 const formatFloatToCurrency = (
   value: string | number,
-  currency: 'EUR' | null,
+  currency: 'EUR' | null = 'EUR',
   locale = 'fi-FI'
 ): string => {
   const parsedValue = typeof value === 'string' ? parseFloat(value) : value;
   const currencyOptions = currency
     ? {
-        style: 'currency',
+        style: 'currency' as const,
         currency,
       }
     : {};
@@ -72,15 +72,15 @@ export const mapRequiredForm = (
   },
   {
     testId: 'application-field-monthlyPay',
-    value: formatFloatToCurrency(form.employee.monthlyPay, 'EUR'),
+    value: formatFloatToCurrency(form.employee.monthlyPay),
   },
   {
     testId: 'application-field-vacationMoney',
-    value: formatFloatToCurrency(form.employee.vacationMoney, 'EUR'),
+    value: formatFloatToCurrency(form.employee.vacationMoney),
   },
   {
     testId: 'application-field-otherExpenses',
-    value: formatFloatToCurrency(form.employee.otherExpenses, 'EUR'),
+    value: formatFloatToCurrency(form.employee.otherExpenses),
   },
   { testId: 'application-field-paySubsidyGranted', value: 'Palkkatuki' },
   { testId: 'application-field-apprenticeshipProgram', value: null },

frontend/benefit/applicant/src/components/applications/alteration/AlterationAccordionItem.tsx

@@ -4,9 +4,7 @@ import useDeleteApplicationAlterationQuery from 'benefit/applicant/hooks/useDele
 import useLocale from 'benefit/applicant/hooks/useLocale';
 import { useTranslation } from 'benefit/applicant/i18n';
 import { ALTERATION_STATE, ALTERATION_TYPE } from 'benefit-shared/constants';
-import {
-  AlterationAccordionItemProps,
-} from 'benefit-shared/types/application';
+import { AlterationAccordionItemProps } from 'benefit-shared/types/application';
 import { prettyPrintObject } from 'benefit-shared/utils/errors';
 import camelcaseKeys from 'camelcase-keys';
 import { Button, IconTrash } from 'hds-react';
@@ -17,7 +15,7 @@ import {
 } from 'shared/components/forms/section/FormSection.sc';
 import hdsToast from 'shared/components/toast/Toast';
 import { convertToUIDateFormat } from 'shared/utils/date.utils';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 
 const AlterationAccordionItem = ({
   alteration,
@@ -107,7 +105,7 @@ const AlterationAccordionItem = ({
                   'common:applications.decision.alterationList.item.recoveryAmount'
                 )}
               </dt>
-              <dd>{formatFloatToCurrency(alteration.recoveryAmount)}</dd>
+              <dd>{formatFloatToEvenEuros(alteration.recoveryAmount)}</dd>
             </$GridCell>
             <$GridCell $colSpan={6}>
               <dt>

frontend/benefit/applicant/src/components/applications/forms/application/step5/companyInfoView/CompanyInfoView.tsx

@@ -234,7 +234,7 @@ const CompanyInfoView: React.FC<CompanyInfoViewProps> = ({
                 </$GridCell>
                 <$GridCell $colSpan={2}>
                   <$SummaryTableValue data-testid="application-field-deMinimisAidsAmount">
-                    {formatFloatToCurrency(aid.amount, 'EUR')}
+                    {formatFloatToCurrency(aid.amount)}
                   </$SummaryTableValue>
                 </$GridCell>
                 <$GridCell>

frontend/benefit/applicant/src/components/applications/forms/application/step5/employeeView/EmployeeView.tsx

@@ -178,7 +178,7 @@ const EmployeeView: React.FC<EmployeeViewProps> = ({
                   {t(`${translationsBase}.employee.fields.monthlyPay.label`)}
                 </$ApplicationDetailLabel>
                 <$ApplicationDetailValue>
-                  {formatFloatToCurrency(data.employee?.monthlyPay, 'EUR')}
+                  {formatFloatToCurrency(data.employee?.monthlyPay)}
                 </$ApplicationDetailValue>
               </$ApplicationDetailRow>
 
@@ -187,7 +187,7 @@ const EmployeeView: React.FC<EmployeeViewProps> = ({
                   {t(`${translationsBase}.employee.fields.vacationMoney.label`)}
                 </$ApplicationDetailLabel>
                 <$ApplicationDetailValue>
-                  {formatFloatToCurrency(data.employee?.vacationMoney, 'EUR')}
+                  {formatFloatToCurrency(data.employee?.vacationMoney)}
                 </$ApplicationDetailValue>
               </$ApplicationDetailRow>
               <$ApplicationDetailRow data-testid="application-field-otherExpenses">
@@ -196,7 +196,7 @@ const EmployeeView: React.FC<EmployeeViewProps> = ({
                 </$ApplicationDetailLabel>
 
                 <$ApplicationDetailValue>
-                  {formatFloatToCurrency(data.employee?.otherExpenses, 'EUR')}
+                  {formatFloatToCurrency(data.employee?.otherExpenses)}
                 </$ApplicationDetailValue>
               </$ApplicationDetailRow>
               {data.paySubsidyGranted && (

frontend/benefit/applicant/src/components/applications/pageContent/PageContent.tsx

@@ -42,7 +42,7 @@ import {
   convertToUIDateAndTimeFormat,
   convertToUIDateFormat,
 } from 'shared/utils/date.utils';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 import { useTheme } from 'styled-components';
 
 import ErrorPage from '../../errorPage/ErrorPage';
@@ -105,7 +105,7 @@ const PageContent: React.FC = () => {
         key: 'status',
       },
       {
-        accessor: (app) => formatFloatToCurrency(app?.calculatedBenefitAmount),
+        accessor: (app) => formatFloatToEvenEuros(app?.calculatedBenefitAmount),
         key: 'benefitAmount',
         showIf: () => showMonetaryFields,
       },

frontend/benefit/handler/browser-tests/pages/7-handle-alteration.testcafe.ts

@@ -288,9 +288,11 @@ test('Handler handles the alteration from the last test properly', async (t: Tes
   // Recalculate and verify that the calculation is not zero
   await t.click(calculateButton);
   resultText = await calculationResult.textContent;
-  const expectedAmount = 68 * (0.03 / 0.27);
+  const expectedAmount = (68 * (0.03 / 0.27)).toFixed(0);
   await t
-    .expect(resultText.includes(getCurrencyString(expectedAmount, 0)))
+    .expect(
+      resultText.includes(getCurrencyString(parseInt(expectedAmount, 10), 0))
+    )
     .ok();
 
   // Select manual calculation mode

frontend/benefit/handler/src/components/alterationHandling/AlterationHandlingConfirmationModal.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next';
 import React from 'react';
 import Modal from 'shared/components/modal/Modal';
 import theme from 'shared/styles/theme';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 
 type Props = {
   onClose: () => void;
@@ -50,7 +50,7 @@ const AlterationHandlingConfirmationModal = ({
               {t(`${translationBase}.description`, {
                 startDate: values.recoveryStartDate,
                 endDate: values.recoveryEndDate,
-                amount: formatFloatToCurrency(values.recoveryAmount),
+                amount: formatFloatToEvenEuros(values.recoveryAmount),
               })}
             </p>
           </Dialog.Content>

frontend/benefit/handler/src/components/applicationForm/review/companySection/CompanySection.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
 import { getFullName } from 'shared/utils/application.utils';
 import { convertToUIDateFormat } from 'shared/utils/date.utils';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 import { useTheme } from 'styled-components';
 
 import {
@@ -177,7 +177,7 @@ const CompanySection: React.FC<ReviewChildProps> = ({
               </$GridCell>
               <$GridCell $colSpan={2}>
                 <$SummaryTableValue>
-                  {formatFloatToCurrency(amount, 'EUR', 'FI-fi', 0)}
+                  {formatFloatToEvenEuros(amount)}
                 </$SummaryTableValue>
               </$GridCell>
               <$GridCell>
@@ -194,12 +194,7 @@ const CompanySection: React.FC<ReviewChildProps> = ({
           </$GridCell>
           <$GridCell $colSpan={2}>
             <$SummaryTableLastLine>
-              {formatFloatToCurrency(
-                data.totalDeminimisAmount,
-                'EUR',
-                'FI-fi',
-                0
-              )}
+              {formatFloatToEvenEuros(data.totalDeminimisAmount)}
             </$SummaryTableLastLine>
           </$GridCell>
         </SummarySection>

frontend/benefit/handler/src/components/applicationForm/review/employmentSection/EmploymentSection.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next';
 import React from 'react';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
 import { convertToUIDateFormat } from 'shared/utils/date.utils';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 
 import { $ViewField, $ViewFieldBold } from '../../ApplicationForm.sc';
 import EditButton from '../summarySection/EditButton';
@@ -52,12 +52,7 @@ const EmploymentSection: React.FC<ReviewChildProps> = ({
           <$ViewField>
             {data.employee?.monthlyPay &&
               t(`${translationsBase}.fields.monthlyPay.review`, {
-                monthlyPay: formatFloatToCurrency(
-                  data.employee.monthlyPay,
-                  'EUR',
-                  'FI-fi',
-                  0
-                ),
+                monthlyPay: formatFloatToEvenEuros(data.employee.monthlyPay),
               })}
           </$ViewField>
         </$GridCell>
@@ -68,11 +63,8 @@ const EmploymentSection: React.FC<ReviewChildProps> = ({
           <$ViewField>
             {data.employee?.vacationMoney &&
               t(`${translationsBase}.fields.vacationMoney.review`, {
-                vacationMoney: formatFloatToCurrency(
-                  data.employee.vacationMoney,
-                  'EUR',
-                  'FI-fi',
-                  0
+                vacationMoney: formatFloatToEvenEuros(
+                  data.employee.vacationMoney
                 ),
               })}
           </$ViewField>
@@ -84,11 +76,8 @@ const EmploymentSection: React.FC<ReviewChildProps> = ({
           <$ViewField>
             {data.employee?.otherExpenses &&
               t(`${translationsBase}.fields.otherExpenses.review`, {
-                otherExpenses: formatFloatToCurrency(
-                  data.employee.otherExpenses,
-                  'EUR',
-                  'FI-fi',
-                  0
+                otherExpenses: formatFloatToEvenEuros(
+                  data.employee.otherExpenses
                 ),
               })}
           </$ViewField>

frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx

@@ -20,7 +20,7 @@ import {
   sortFinnishDate,
   sortFinnishDateTime,
 } from 'shared/utils/date.utils';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 import { useTheme } from 'styled-components';
 
 import {
@@ -81,16 +81,13 @@ const getFirstInstalmentTotalAmount = (
   }
   return pendingInstalment ? (
     <>
-      {formatFloatToCurrency(firstInstalment, null, 'fi-FI', 0)} /{' '}
-      {formatFloatToCurrency(
-        parseInt(calculatedBenefitAmount, 10) - recoveryAmount,
-        'EUR',
-        'fi-FI',
-        0
+      {formatFloatToEvenEuros(firstInstalment)} /{' '}
+      {formatFloatToEvenEuros(
+        parseInt(calculatedBenefitAmount, 10) - recoveryAmount
       )}
     </>
   ) : (
-    formatFloatToCurrency(firstInstalment, 'EUR', 'fi-FI', 0)
+    formatFloatToEvenEuros(firstInstalment)
   );
 };
 const dateForAdditionalInformationNeededBy = (

frontend/benefit/handler/src/components/applicationList/ApplicationListForInstalments.tsx

@@ -33,7 +33,7 @@ import {
   convertToUIDateFormat,
   sortFinnishDate,
 } from 'shared/utils/date.utils';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 import { useTheme } from 'styled-components';
 
 import ConfirmModalContent from '../applicationReview/actions/ConfirmModalContent/confirm';
@@ -158,30 +158,18 @@ const ApplicationListForInstalments: React.FC<ApplicationListProps> = ({
         transform: ({ pendingInstalment }: ApplicationListTableTransforms) =>
           pendingInstalment?.amountAfterRecoveries > 0 ? (
             <>
-              {formatFloatToCurrency(
-                Math.max(0, pendingInstalment?.amountAfterRecoveries),
-                null,
-                'fi-FI',
-                0
+              {formatFloatToEvenEuros(
+                Math.max(0, pendingInstalment?.amountAfterRecoveries)
               )}
-
               {' / '}
-              {formatFloatToCurrency(
-                pendingInstalment.amount,
-                'EUR',
-                'fi-FI',
-                0
-              )}
+              {formatFloatToEvenEuros(pendingInstalment.amount)}
             </>
           ) : (
             <$Wrapper>
               <$Column>
                 <IconErrorFill color="var(--color-alert)" />{' '}
-                {formatFloatToCurrency(
-                  pendingInstalment.amountAfterRecoveries,
-                  'EUR',
-                  'fi-FI',
-                  0
+                {formatFloatToEvenEuros(
+                  pendingInstalment.amountAfterRecoveries
                 )}
               </$Column>
             </$Wrapper>
@@ -340,12 +328,7 @@ const ApplicationListForInstalments: React.FC<ApplicationListProps> = ({
                   'common:instalments.dialog.cancelInstalment.heading'
                 )}
                 text={t('common:instalments.dialog.cancelInstalment.text', {
-                  sum: formatFloatToCurrency(
-                    selectedInstalment?.amount,
-                    'EUR',
-                    'fi-FI',
-                    0
-                  ),
+                  sum: formatFloatToEvenEuros(selectedInstalment?.amount),
                   details: `${selectedApplication?.applicationNum}, ${selectedApplication?.companyName} / ${selectedApplication?.employeeName}`,
                 })}
                 onClose={() => setIsInstalmentCancelModalShown(false)}

frontend/benefit/handler/src/components/applicationReview/CalculationReview.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 import Heading from 'shared/components/forms/heading/Heading';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
 import theme from 'shared/styles/theme';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 
 import { $HorizontalList } from '../table/TableExtras.sc';
 
@@ -93,7 +93,7 @@ const CalculationReview: React.FC<ApplicationReviewStepProps> = ({
             <>
               <div>
                 <dt>{t('common:review.decisionProposal.list.totalAmount')}</dt>
-                <dd>{formatFloatToCurrency(totalSum, 'EUR', 'fi-FI', 0)}</dd>
+                <dd>{formatFloatToEvenEuros(totalSum)}</dd>
               </div>
               <div>
                 <dt>

frontend/benefit/handler/src/components/applicationReview/actions/handlingApplicationActions/DoneModalContent/DoneModalContent.tsx

@@ -9,7 +9,7 @@ import {
   $Grid,
   $GridCell,
 } from 'shared/components/forms/section/FormSection.sc';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 
 import { $Header, $Text } from '../HandlingApplicationActions.sc';
 
@@ -53,19 +53,14 @@ const DoneModalContent: React.FC<ComponentProps> = ({
               <$GridCell $colSpan={12}>
                 <$Text>
                   {t(`${translationsBase}.eurosTotal`, {
-                    total: formatFloatToCurrency(
-                      totalRow.amount,
-                      null,
-                      'fi-FI',
-                      0
-                    ),
+                    total: formatFloatToEvenEuros(totalRow.amount),
                   })}
                 </$Text>
               </$GridCell>
               {helsinkiBenefitMonthlyRows.map((row, index) => (
                 <$Text key={row.id}>
                   {t(`${translationsBase}.eurosPerMonth`, {
-                    euros: formatFloatToCurrency(row.amount, null, 'fi-FI', 0),
+                    euros: formatFloatToEvenEuros(row.amount),
                     dateRange:
                       dateRangeRows[index]?.descriptionFi.toLocaleLowerCase(),
                   })}

frontend/benefit/handler/src/components/applicationReview/applicationProcessingView/ApplicationProcessingView.tsx

@@ -17,7 +17,7 @@ import {
   $GridCell,
 } from 'shared/components/forms/section/FormSection.sc';
 import theme from 'shared/styles/theme';
-import { formatFloatToCurrency } from 'shared/utils/string.utils';
+import { formatFloatToEvenEuros } from 'shared/utils/string.utils';
 
 import {
   $CalculatorHr,
@@ -186,7 +186,7 @@ const ApplicationProcessingView: React.FC<{ data: Application }> = ({
                   <$CalculatorTableRow style={{ backgroundColor: 'white' }}>
                     <$ViewField>{totalRow.descriptionFi}</$ViewField>
                     <$ViewField isBold>
-                      {formatFloatToCurrency(totalRow.amount)}
+                      {formatFloatToEvenEuros(totalRow.amount)}
                     </$ViewField>
                   </$CalculatorTableRow>
                   {dateRangeRows.length === helsinkiBenefitMonthlyRows.length &&
@@ -197,7 +197,7 @@ const ApplicationProcessingView: React.FC<{ data: Application }> = ({
                       >
                         <$ViewField>{row.descriptionFi}</$ViewField>
                         <$ViewField isBold>
-                          {formatFloatToCurrency(
+                          {formatFloatToEvenEuros(
                             helsinkiBenefitMonthlyRows[index].amount
                           )}
                           {t('common:utility.perMonth')}