fix: [IOBP-908] Timeline amount format in cents (#6242)

## Short description
This PR fixes the timeline amount format considering the amount as cents

## List of changes proposed in this pull request
- Used the `formatNumberCentsToAmount` function inside the
`formatAbsNumberAmountCentsOrDefault` to format the amount from cents
into correct string.

## How to test
- The related unit tests should pass correctly
- Checkout the dev-server with this PR:
pagopa/io-dev-api-server#416
- After that enable IDPay feature flag from the profile settings
- With the dev-server started you should be able to see into
"Portafoglio" section two mocked initiatives

---------

Co-authored-by: Mario Perrotta <mario.perrotta@pagopa.it>

ts/features/idpay/common/utils/strings.ts

@@ -1,6 +1,9 @@
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { formatNumberAmount } from "../../../../utils/stringBuilder";
+import {
+  formatNumberAmount,
+  formatNumberCentsToAmount
+} from "../../../../utils/stringBuilder";
 import { format } from "../../../../utils/dates";
 
 export const formatNumberCurrency = (amount: number) =>
@@ -37,20 +40,20 @@ export const formatNumberCurrencyCentsOrDefault = (
  * This function takes a number and converts it into its absolute value, then formats it as a string
  * using the 'formatNumberAmount' function. If the input is undefined, it returns the specified default value.
  *
- * @param {number | undefined} amount - The number to be formatted, or undefined if not available.
+ * @param {number | undefined} amount - The number amount in cents to be formatted, or undefined if not available.
  * @param {string} [defaultValue='-'] - The default value to be returned when the input 'amount' is undefined.
  *
  * @returns {string} - The formatted absolute number as a string or the default value.
  */
-export const formatAbsNumberAmountOrDefault = (
+export const formatAbsNumberAmountCentsOrDefault = (
   amount: number | undefined,
   defaultValue: string = "-"
 ) =>
   pipe(
     amount,
     O.fromNullable,
     O.map(Math.abs),
-    O.map(formatNumberAmount),
+    O.map(formatNumberCentsToAmount),
     O.getOrElse(() => defaultValue)
   );
 

ts/features/idpay/details/components/TimelineOperationListItem.tsx

@@ -49,7 +49,7 @@ import I18n from "../../../../i18n";
 import { hoursAndMinutesToAccessibilityReadableFormat } from "../../../../utils/accessibility";
 import { localeDateFormat } from "../../../../utils/locale";
 import { getBadgeTextByTransactionStatus } from "../../../payments/common/utils";
-import { formatAbsNumberAmountOrDefault } from "../../common/utils/strings";
+import { formatAbsNumberAmountCentsOrDefault } from "../../common/utils/strings";
 
 export type TimelineOperationListItemProps = WithTestID<
   | {
@@ -155,7 +155,9 @@ const getTransactionOperationProps = (
 
   const getAccruedString = () => {
     const signString = isReversal ? "" : "-";
-    const accruedString = `${formatAbsNumberAmountOrDefault(accruedCents)} €`;
+    const accruedString = `${formatAbsNumberAmountCentsOrDefault(
+      accruedCents
+    )} €`;
 
     return `${signString}${accruedString}`;
   };
@@ -305,7 +307,7 @@ const getRefundOperationProps = (
     subtitle,
     paymentLogoIcon,
     transactionStatus: "success",
-    transactionAmount: `${formatAbsNumberAmountOrDefault(amountCents)} €`
+    transactionAmount: `${formatAbsNumberAmountCentsOrDefault(amountCents)} €`
   };
 };
 
@@ -371,7 +373,7 @@ export const getOperationSubtitleWithAmount = (
   withMinusSign: boolean = false
 ): string => {
   const signString = withMinusSign ? "-" : "";
-  const amountString = `${formatAbsNumberAmountOrDefault(amount)} €`;
+  const amountString = `${formatAbsNumberAmountCentsOrDefault(amount)} €`;
 
   return `${getOperationSubtitle(
     operationDate

ts/features/idpay/details/components/__tests__/TimelineOperationListItem.test.tsx

@@ -93,7 +93,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_SUBTITLE = getOperationSubtitle(T_DATE);
-        const T_AMOUNT = 4578.74;
+        const T_AMOUNT = 457874;
         const T_AMOUNT_STRING = "4.578,74 €";
 
         const mockOnPress = jest.fn();
@@ -137,7 +137,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_SUBTITLE = getOperationSubtitle(T_DATE);
-        const T_AMOUNT = 4578.74;
+        const T_AMOUNT = 457874;
         const T_AMOUNT_STRING = "4.578,74 €";
 
         const mockOnPress = jest.fn();
@@ -420,7 +420,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_AMOUNT = 3456.1;
-        const T_ACCRUED = 234.56;
+        const T_ACCRUED = 23456;
         const T_ACCRUED_STRING = "-234,56 €";
         const T_SUBTITLE = getOperationSubtitleWithAmount(T_DATE, T_AMOUNT);
 
@@ -450,7 +450,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly with business name", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_AMOUNT = 3456.1;
-        const T_ACCRUED = 234.56;
+        const T_ACCRUED = 23456;
         const T_ACCRUED_STRING = "-234,56 €";
         const T_SUBTITLE = getOperationSubtitleWithAmount(T_DATE, T_AMOUNT);
         const T_BUSINESS_NAME = "Business name";
@@ -483,7 +483,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly if transaction is cancelled", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_AMOUNT = 3456.1;
-        const T_ACCRUED = 234.56;
+        const T_ACCRUED = 23456;
         const T_ACCRUED_STRING = "-234,56 €";
         const T_SUBTITLE = getOperationSubtitleWithAmount(
           T_DATE,
@@ -521,7 +521,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_AMOUNT = 3456.1;
-        const T_ACCRUED = 234.56;
+        const T_ACCRUED = 23456;
         const T_ACCRUED_STRING = "-234,56 €";
         const T_SUBTITLE = getOperationSubtitleWithAmount(
           T_DATE,
@@ -558,7 +558,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly with business name", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_AMOUNT = 3456.1;
-        const T_ACCRUED = 234.56;
+        const T_ACCRUED = 23456;
         const T_ACCRUED_STRING = "-234,56 €";
         const T_SUBTITLE = getOperationSubtitleWithAmount(
           T_DATE,
@@ -598,7 +598,7 @@ describe("Test TimelineOperationListItem", () => {
       it("should render the component correctly if transaction is cancelled", () => {
         const T_DATE = new Date(2023, 4, 5, 16, 31);
         const T_AMOUNT = 3456.1;
-        const T_ACCRUED = 234.56;
+        const T_ACCRUED = 23456;
         const T_ACCRUED_STRING = "-234,56 €";
         const T_SUBTITLE = getOperationSubtitleWithAmount(
           T_DATE,
@@ -649,7 +649,7 @@ describe("Test getOperationSubtitle", () => {
 describe("Test getOperationSubtitleWithAmount", () => {
   it("should return the correct date string with positive number", () => {
     const T_DATE = new Date(2023, 4, 5, 16, 31);
-    const T_AMOUNT = 4135.67;
+    const T_AMOUNT = 413567;
     const T_RESULT = "05 mag 2023, 16:31 · 4.135,67 €";
 
     const result = getOperationSubtitleWithAmount(T_DATE, T_AMOUNT);
@@ -659,7 +659,7 @@ describe("Test getOperationSubtitleWithAmount", () => {
 
   it("should return the correct date string with negative number", () => {
     const T_DATE = new Date(2023, 4, 5, 16, 31);
-    const T_AMOUNT = 4135.67;
+    const T_AMOUNT = 413567;
     const T_RESULT = "05 mag 2023, 16:31 · -4.135,67 €";
 
     const result = getOperationSubtitleWithAmount(T_DATE, T_AMOUNT, true);