chore: [IOBP-665,IOBP-570] PayPal metadata and latest used payment me…

…thod adaption (#5803)

## Short description
This PR adds the metadata for fast PayPal payment by adding the masked
email and the pspBusinessName if both are present. In addition, the
selector has been adapted to handle the “recently used” logic by taking
into account the `lastUsage` attribute of the `clients` map

## List of changes proposed in this pull request
- Upgraded the new openapi for wallet & ecommerce
- Changed the selector to filter the "recently used" payment method
following the new openapi definitions
- Added metadata to the "Pagamento veloce con PayPal" with the
pspBusinessName and maskedEmail if both present.

## How to test
- Checkout this PR: pagopa/io-dev-api-server#384
- Start a new payment and when you are in the payment selection step,
you should be able to see a pre-selected method. If in the list of saved
methods or the "recently used" there is a "Pagamento veloce con PayPal",
you should be able even to see metadata in the list item description


## Preview
<img
src="https://github.com/pagopa/io-app/assets/34343582/f2dcd4ae-276d-4f32-b6bf-81fd75911ca3"
width="350px" />

locales/en/index.yml

@@ -1714,6 +1714,8 @@ wallet:
       title: Vuoi interrompere l'operazione?
       confirm: Sì, interrompi
       cancel: No, torna indietro
+    methodType:
+      fastPayPalPayment: Pagamento veloce con PayPal
     methodSelection:
       header: Seleziona un metodo
       yourMethods: Saved

locales/it/index.yml

@@ -1714,6 +1714,8 @@ wallet:
       title: Vuoi interrompere l'operazione?
       confirm: Sì, interrompi
       cancel: No, torna indietro
+    methodType:
+      fastPayPalPayment: Pagamento veloce con PayPal
     methodSelection:
       header: Seleziona un metodo
       yourMethods: Salvati

package.json

@@ -20,8 +20,8 @@
   "services_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.35.0-RELEASE/api_services_app_backend.yaml",
   "lollipop_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.35.0-RELEASE/api_lollipop_first_consumer.yaml",
   "fast_login_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.35.0-RELEASE/openapi/generated/api_fast_login.yaml",
-  "pagopa_api_walletv3": "https://raw.githubusercontent.com/pagopa/pagopa-infra/95477f43e87016a979d26b5a81eee32c308af96d/src/domains/wallet-app/api/payment-wallet/v1/_openapi.json.tpl",
-  "pagopa_api_ecommerce": "https://raw.githubusercontent.com/pagopa/pagopa-infra/95477f43e87016a979d26b5a81eee32c308af96d/src/domains/ecommerce-app/api/ecommerce-io/v1/_openapi.json.tpl",
+  "pagopa_api_walletv3": "https://raw.githubusercontent.com/pagopa/pagopa-infra/4ecc4c41f0a0692361d6d93ab7481a22c99bc21d/src/domains/wallet-app/api/payment-wallet/v1/_openapi.json.tpl",
+  "pagopa_api_ecommerce": "https://raw.githubusercontent.com/pagopa/pagopa-infra/4ecc4c41f0a0692361d6d93ab7481a22c99bc21d/src/domains/ecommerce-app/api/ecommerce-io/v1/_openapi.json.tpl",
   "trial_system": "https://raw.githubusercontent.com/pagopa/io-backend/features/add-openapi-trial-service/api_trial_system.yaml",
   "private": true,
   "scripts": {

ts/features/payments/checkout/components/CheckoutPaymentMethodsList.tsx

@@ -228,10 +228,16 @@ const mapUserWalletToRadioItem = (
       startImage
     };
   } else if (details.maskedEmail !== undefined) {
+    const details = method.details as UIWalletInfoDetails;
+    const description =
+      details.pspBusinessName && details.maskedEmail
+        ? `${details.pspBusinessName} · ${details.maskedEmail}`
+        : undefined;
     return {
       id: method.walletId,
-      value: "PayPal",
-      startImage
+      value: I18n.t("wallet.payment.methodType.fastPayPalPayment"),
+      startImage,
+      description
     };
   } else if (details.maskedNumber !== undefined) {
     return {

ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetUserWallets.test.ts

@@ -9,6 +9,7 @@ import { getGenericError } from "../../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { WalletStatusEnum } from "../../../../../../../definitions/pagopa/ecommerce/WalletStatus";
 import { selectWalletPaymentSessionToken } from "../../../store/selectors";
+import { WalletClientStatusEnum } from "../../../../../../../definitions/pagopa/ecommerce/WalletClientStatus";
 
 describe("Test handleWalletPaymentGetUserWallets saga", () => {
   const T_SESSION_TOKEN = "ABCD";
@@ -25,6 +26,12 @@ describe("Test handleWalletPaymentGetUserWallets saga", () => {
           paymentMethodId: "paymentMethodId",
           paymentMethodAsset: "paymentMethodAsset",
           applications: [],
+          clients: {
+            IO: {
+              status: WalletClientStatusEnum.ENABLED,
+              lastUsage: new Date()
+            }
+          },
           status: WalletStatusEnum.VALIDATED,
           updateDate: new Date()
         }

ts/features/payments/checkout/store/reducers/index.ts

@@ -34,6 +34,7 @@ import {
   selectPaymentPspAction,
   walletPaymentSetCurrentStep
 } from "../actions/orchestration";
+import { getLatestUsedWallet } from "../../utils";
 export const WALLET_PAYMENT_STEP_MAX = 4;
 
 export type PaymentsCheckoutState = {
@@ -132,10 +133,9 @@ const reducer = (
       return {
         ...state,
         userWallets: pot.some(action.payload),
-        selectedWallet: O.fromNullable(
-          action.payload?.wallets?.reduce((acc, curr) =>
-            acc.updateDate > curr.updateDate ? acc : curr
-          )
+        selectedWallet: pipe(
+          O.fromNullable(action.payload.wallets),
+          O.chain(getLatestUsedWallet)
         )
       };
     case getType(paymentsGetPaymentUserMethodsAction.failure):

ts/features/payments/checkout/store/selectors/paymentMethods.ts

@@ -4,7 +4,7 @@ import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { createSelector } from "reselect";
 import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/ecommerce/PaymentMethodsResponse";
-import { isValidPaymentMethod } from "../../utils";
+import { getLatestUsedWallet, isValidPaymentMethod } from "../../utils";
 import { Wallets } from "../../../../../../definitions/pagopa/ecommerce/Wallets";
 import { selectPaymentsCheckoutState, walletPaymentDetailsSelector } from ".";
 
@@ -17,15 +17,7 @@ export const walletPaymentUserWalletsSelector = createSelector(
 export const walletPaymentUserWalletLastUpdatedSelector = createSelector(
   walletPaymentUserWalletsSelector,
   userWalletsPot =>
-    pipe(
-      userWalletsPot,
-      pot.toOption,
-      O.map(userWallets =>
-        userWallets.reduce((acc, curr) =>
-          acc.updateDate > curr.updateDate ? acc : curr
-        )
-      )
-    )
+    pipe(userWalletsPot, pot.toOption, O.chain(getLatestUsedWallet))
 );
 
 export const walletPaymentAllMethodsSelector = createSelector(

ts/features/payments/checkout/utils/index.ts

@@ -1,5 +1,10 @@
+import * as RA from "fp-ts/lib/ReadonlyArray";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
 import { PaymentMethodManagementTypeEnum } from "../../../../../definitions/pagopa/ecommerce/PaymentMethodManagementType";
 import { PaymentMethodResponse } from "../../../../../definitions/pagopa/ecommerce/PaymentMethodResponse";
+import { WalletInfo } from "../../../../../definitions/pagopa/ecommerce/WalletInfo";
+import { WalletClientStatusEnum } from "../../../../../definitions/pagopa/walletv3/WalletClientStatus";
 
 export const WALLET_PAYMENT_FEEDBACK_URL =
   "https://io.italia.it/diccilatua/ces-pagamento";
@@ -9,3 +14,21 @@ export const isValidPaymentMethod = (method: PaymentMethodResponse) =>
   method.methodManagement === PaymentMethodManagementTypeEnum.NOT_ONBOARDABLE ||
   method.methodManagement ===
     PaymentMethodManagementTypeEnum.ONBOARDABLE_WITH_PAYMENT;
+
+export const getLatestUsedWallet = (
+  wallets: ReadonlyArray<WalletInfo>
+): O.Option<WalletInfo> =>
+  pipe(
+    wallets,
+    RA.filter(
+      wallet => wallet.clients.IO.status === WalletClientStatusEnum.ENABLED
+    ),
+    RA.reduce<WalletInfo, WalletInfo | undefined>(undefined, (acc, curr) =>
+      acc?.clients.IO?.lastUsage &&
+      curr.clients.IO?.lastUsage &&
+      acc.clients.IO.lastUsage > curr.clients.IO.lastUsage
+        ? acc
+        : curr
+    ),
+    O.fromNullable
+  );