chore: [IOBP-392] Refactor TimelineOperationListItem component (#5200)

## Short description
This PR refactors the `TimelineOperationListItem` component and
implements new logic to correctly display `CANCELLED` and `REVERSAL`
transactions and CIE onboarding operations.


https://github.com/pagopa/io-app/assets/6160324/e5557c07-ba53-4647-be0f-ad39965fb1c7

## List of changes proposed in this pull request
-
[ts/features/idpay/details/components/TimelineOperationListItem.tsx](https://github.com/pagopa/io-app/pull/5200/files#diff-bf0f0c12b0c8396401a112111f50ecd7d00a22d176641c354e3880e3879cbd51):
splitted `TimelineOperationListItem` into sub-component easier to
manage.

## How to test
- Tests should solve correctly. 
- You can test on a simulator/device with the `io-dev-server` on this
branch: pagopa/io-dev-api-server#316

---------

Co-authored-by: Martino Cesari Tomba <[email protected]>
Co-authored-by: Alessandro Izzo <[email protected]>

locales/en/index.yml

@@ -3359,20 +3359,18 @@ idpay:
             title: Lista operazioni
             lastUpdated: "Ultimo aggiornamento: "
             operationDescriptions:
-              QRCODE_TRANSACTION: "Pagamento"
-              ONBOARDING: "Adesione all'iniziativa"
-              ADD_IBAN: "Aggiunto IBAN"
-              ADD_INSTRUMENT: "Attivazione metodo ···· {{maskedPan}}"
-              ADD_INSTRUMENT_WITHOUT_MASKED_PAN: "Attivazione metodo"
               TRANSACTION: "Pagamento POS"
-              REVERSAL: "Pagamento POS"
-              DELETE_INSTRUMENT: "Disattivazione metodo ···· {{maskedPan}}"
-              DELETE_INSTRUMENT_WITHOUT_MASKED_PAN: "Disattivazione metodo"
-              REJECTED_ADD_INSTRUMENT: "Attivazione metodo"
-              PAID_REFUND: "Rimborso sul tuo conto"
-              REJECTED_REFUND: "Rimborso sul tuo conto"
+              TRANSACTION_ONLINE: "Pagamento online"
+              ONBOARDING: "Adesione all'iniziativa"
+              ADD_IBAN: "IBAN modificato"
+              ADD_INSTRUMENT: "Attivazione metodo {{maskedPan}}"
+              DELETE_INSTRUMENT: "Disattivazione metodo {{maskedPan}}"
+              REJECTED_ADD_INSTRUMENT: "Attivazione metodo {{maskedPan}}"
+              REJECTED_DELETE_INSTRUMENT: "Disattivazione metodo {{maskedPan}}"
+              REFUND: "Rimborso sul tuo conto"
               SUSPENDED: "Sospensione"
               READMITTED: "Riattivazione"
+              CIE: "Abilitazione carta d’identità elettronica"
     discountDetails:
       authorizeButton: Autorizza un pagamento
       IDPayCode:

locales/it/index.yml

@@ -3359,20 +3359,18 @@ idpay:
             title: Lista operazioni
             lastUpdated: "Ultimo aggiornamento: "
             operationDescriptions:
-              QRCODE_TRANSACTION: "Pagamento"
-              ONBOARDING: "Adesione all'iniziativa"
-              ADD_IBAN: "Aggiunto IBAN"
-              ADD_INSTRUMENT: "Attivazione metodo ···· {{maskedPan}}"
-              ADD_INSTRUMENT_WITHOUT_MASKED_PAN: "Attivazione metodo"
               TRANSACTION: "Pagamento POS"
-              REVERSAL: "Pagamento POS"
-              DELETE_INSTRUMENT: "Disattivazione metodo ···· {{maskedPan}}"
-              DELETE_INSTRUMENT_WITHOUT_MASKED_PAN: "Disattivazione metodo"
-              REJECTED_ADD_INSTRUMENT: "Attivazione metodo"
-              PAID_REFUND: "Rimborso sul tuo conto"
-              REJECTED_REFUND: "Rimborso sul tuo conto"
+              TRANSACTION_ONLINE: "Pagamento online"
+              ONBOARDING: "Adesione all'iniziativa"
+              ADD_IBAN: "IBAN modificato"
+              ADD_INSTRUMENT: "Attivazione metodo {{maskedPan}}"
+              DELETE_INSTRUMENT: "Disattivazione metodo {{maskedPan}}"
+              REJECTED_ADD_INSTRUMENT: "Attivazione metodo {{maskedPan}}"
+              REJECTED_DELETE_INSTRUMENT: "Disattivazione metodo {{maskedPan}}"
+              REFUND: "Rimborso sul tuo conto"
               SUSPENDED: "Sospensione"
               READMITTED: "Riattivazione"
+              CIE: "Abilitazione carta d’identità elettronica"
     discountDetails:
       authorizeButton: Autorizza un pagamento
       IDPayCode:

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

@@ -31,6 +31,29 @@ export const formatNumberCurrencyCentsOrDefault = (
     O.getOrElse(() => defaultValue)
   );
 
+/**
+ * Formats an absolute number amount or returns a default value if the input is undefined.
+ *
+ * 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 {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 = (
+  amount: number | undefined,
+  defaultValue: string = "-"
+) =>
+  pipe(
+    amount,
+    O.fromNullable,
+    O.map(Math.abs),
+    O.map(formatNumberAmount),
+    O.getOrElse(() => defaultValue)
+  );
+
 /**
  *   Takes a nullable date and formats it to a string.
  *   - Base default : '-'

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

@@ -19,10 +19,7 @@ import {
   idpayOperationListSelector,
   idpayPaginatedTimelineSelector
 } from "../store";
-import {
-  TimelineOperationListItem,
-  TimelineOperationListItemSkeleton
-} from "./TimelineOperationListItem";
+import { TimelineOperationListItem } from "./TimelineOperationListItem";
 
 type Props = {
   initiativeId: string;
@@ -100,7 +97,7 @@ const TimelineComponentSkeleton = ({ size = 3 }: Pick<Props, "size">) => (
   <View testID="IDPayTimelineSkeletonTestID">
     {Array.from({ length: size }).map((_, index) => (
       <React.Fragment key={index}>
-        <TimelineOperationListItemSkeleton />
+        <TimelineOperationListItem isLoading={true} />
         {index < size - 1 ? <Divider /> : undefined}
       </React.Fragment>
     ))}