feat(Bonus Pagamenti Digitali): [#175797662] Display bancomat abi logo (

#2442)

* [#175797662] display abi images

* [#175797662] minor changes

* [#175797662] show bancomat icon when bancomat is in list

* [#175797662] update comment

* [#175797662] remove unsafe cast, used type guard instead

* [#175797662] renaming

* [#175797662] remove unsafe cast, used type guard instead

* [#175797662] refactoring

* [#175797662] refactoring

* [#175797662] refactoring

* [#175797662] improve

* [#175797662] remove useless imports

ts/features/wallet/onboarding/store/abi.ts

@@ -14,10 +14,21 @@ import {
 import { Action } from "../../../../store/actions/types";
 import { loadAbi } from "../bancomat/store/actions";
 import { GlobalState } from "../../../../store/reducers/types";
+import { getBancomatAbiIconUrl } from "../../../../utils/paymentMethod";
 
 // plain object where the key is the abi and the value is the abi object
 export type AbiState = RemoteValue<IndexedById<Abi>, Error>;
 
+const getIndexedAbi = (abis: ReadonlyArray<Abi>): IndexedById<Abi> =>
+  abis.reduce(
+    (acc: IndexedById<Abi>, curr: Abi) =>
+      fromNullable(curr.abi).fold(acc, abi => ({
+        ...acc,
+        [abi]: curr
+      })),
+    {}
+  );
+
 const abiReducer = (
   state: AbiState = remoteUndefined,
   action: Action
@@ -29,16 +40,7 @@ const abiReducer = (
       // since all fields are optional we ensure to index only entries those have abi defined
       const indexedAbi: IndexedById<Abi> = fromNullable(
         action.payload.data
-      ).fold({}, abis =>
-        abis.reduce(
-          (acc: IndexedById<Abi>, curr: Abi) =>
-            fromNullable(curr.abi).fold(acc, abi => ({
-              ...acc,
-              [abi]: curr
-            })),
-          {}
-        )
-      );
+      ).fold({}, getIndexedAbi);
       return remoteReady(indexedAbi);
     case getType(loadAbi.failure):
       return remoteError(action.payload);
@@ -48,12 +50,24 @@ const abiReducer = (
 
 export default abiReducer;
 
+const getAbiEnhanced = (indexedAbis: IndexedById<Abi>): IndexedById<Abi> => {
+  const abis: ReadonlyArray<Abi | undefined> = Object.keys(indexedAbis).map<
+    Abi | undefined
+  >(k => indexedAbis[k]);
+  return getIndexedAbi(
+    abis.map(a => ({
+      ...a,
+      logoUrl: a?.abi && getBancomatAbiIconUrl(a.abi)
+    }))
+  );
+};
 /**
  * AbiState, memoized
  */
 export const abiSelector = createSelector(
   [(state: GlobalState) => state.wallet.abi],
-  abi => abi
+  (abis: AbiState): AbiState =>
+    isReady(abis) ? remoteReady(getAbiEnhanced(abis.value)) : abis
 );
 
 // return the abi list as array

ts/store/reducers/wallet/wallets.ts

@@ -147,7 +147,6 @@ export const paymentMethodsSelector = createSelector(
         .filter(isDefined)
     )
 );
-
 export const rawCreditCardListSelector = createSelector(
   [paymentMethodsSelector],
   (

ts/utils/paymentMethod.ts

@@ -1,8 +1,9 @@
 import { fromNullable } from "fp-ts/lib/Option";
+import { ImageSourcePropType } from "react-native";
 import { Abi } from "../../definitions/pagopa/walletv2/Abi";
 import bPayImage from "../../img/wallet/cards-icons/bPay.png";
-import pagoBancomatImage from "../../img/wallet/cards-icons/pagobancomat.png";
 import satispayImage from "../../img/wallet/cards-icons/satispay.png";
+import pagoBancomatImage from "../../img/wallet/cards-icons/pagobancomat.png";
 import {
   cardIcons,
   getCardIconFromBrandLogo
@@ -20,6 +21,7 @@ import {
   RawCreditCardPaymentMethod,
   RawPaymentMethod
 } from "../types/pagopa";
+import { contentRepoUrl } from "../config";
 import { FOUR_UNICODE_CIRCLES } from "./wallet";
 
 export const getPaymentMethodHash = (
@@ -43,11 +45,16 @@ export const getPaymentMethodHash = (
 export const getTitleFromCard = (creditCard: RawCreditCardPaymentMethod) =>
   `${FOUR_UNICODE_CIRCLES} ${creditCard.info.blurredNumber}`;
 
+export const getBancomatAbiIconUrl = (abi: string) =>
+  `${contentRepoUrl}/logos/abi/${abi}.png`;
+
 /**
  * Choose an image to represent a {@link RawPaymentMethod}
  * @param paymentMethod
  */
-export const getImageFromPaymentMethod = (paymentMethod: RawPaymentMethod) => {
+export const getImageFromPaymentMethod = (
+  paymentMethod: RawPaymentMethod
+): ImageSourcePropType => {
   if (isRawCreditCard(paymentMethod)) {
     return getCardIconFromBrandLogo(paymentMethod.info);
   }