chore(IT Wallet): [SIW-1639] Show error banner when wallet instance status check fails (#6568)

## Short description
This PR handles unexpected failures during the request to fetch the
Wallet Instance status. When it is not possible to determine the status,
the Wallet will not be available.

## List of changes proposed in this pull request
- Created `ItwWalletNotAvailableBanner` component
- Turned `itWallet.walletInstance.status` into a pot for better async
handling (+ store migration)
- Hide `ItwWalletReadyBanner` and `ItwWalletCardsContainer` when the
Wallet Instance status call failed

## How to test
- Get a wallet instance, then fake an error in
`api/v1/wallet/wallet-instances/<wallet_instance_id>/status`: you should
see the following screen

Regression tests:
- Get a wallet instance and restart the app: everything should work as
before
- Get a wallet instance, then revoke it: everything should work as
before (with an alert only shown once)

<img
src="https://github.com/user-attachments/assets/cf8d36d0-0fad-4e5e-a4a8-80b75ce3c72b"
width="240" />

Author: gispada

locales/en/index.yml

@@ -3300,6 +3300,9 @@ features:
         claimNotAvailable: "Attributo non riconosciuto"
         claimLabelNotAvailable: "Etichetta attributo non presente"
         organizationName: "Nome ente non disponibile"
+      walletNotAvailable:
+        message: Abbiamo avuto un problema nel recuperare i tuoi documenti.
+        cta: Chiudi e riapri l'app per riprovare.
     verifiableCredentials:
       claims:
         uniqueId: "ID univoco"

locales/it/index.yml

@@ -3300,6 +3300,9 @@ features:
         claimNotAvailable: "Attributo non riconosciuto"
         claimLabelNotAvailable: "Etichetta attributo non presente"
         organizationName: "Nome ente non disponibile"
+      walletNotAvailable:
+        message: Abbiamo avuto un problema nel recuperare i tuoi documenti.
+        cta: Chiudi e riapri l'app per riprovare.
     verifiableCredentials:
       claims:
         uniqueId: "ID univoco"

ts/features/common/store/reducers/__tests__/__snapshots__/index.test.ts.snap

@@ -132,7 +132,9 @@ exports[`featuresPersistor should match snapshot 1`] = `
     },
     "walletInstance": {
       "attestation": undefined,
-      "status": undefined,
+      "status": {
+        "kind": "PotNone",
+      },
     },
   },
   "landingBanners": {

ts/features/itwallet/common/components/ItwWalletNotAvailableBanner.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import {
+  BodySmall,
+  IOAlertSpacing,
+  IOColors,
+  Icon
+} from "@pagopa/io-app-design-system";
+import I18n from "../../../../i18n";
+import { useIOSelector } from "../../../../store/hooks";
+import { itwIsWalletInstanceStatusFailureSelector } from "../../walletInstance/store/selectors";
+import { withWalletCategoryFilter } from "../../../wallet/utils";
+
+/**
+ * Component shown when it is not possible to retrieve the wallet instance status
+ * from the backend, because of unexpected errors.
+ */
+export const ItwWalletNotAvailableBanner = withWalletCategoryFilter(
+  "itw",
+  () => {
+    const isWalletInstanceStatusFailure = useIOSelector(
+      itwIsWalletInstanceStatusFailureSelector
+    );
+
+    if (!isWalletInstanceStatusFailure) {
+      return null;
+    }
+
+    return (
+      <View style={styles.bannerContainer}>
+        <Icon name="warningFilled" />
+        <BodySmall style={styles.textCenter}>
+          {I18n.t("features.itWallet.generic.walletNotAvailable.message")}
+        </BodySmall>
+        <BodySmall style={styles.textCenter}>
+          {I18n.t("features.itWallet.generic.walletNotAvailable.cta")}
+        </BodySmall>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  bannerContainer: {
+    padding: IOAlertSpacing[1],
+    marginVertical: 16,
+    backgroundColor: IOColors["grey-50"],
+    borderRadius: 8,
+    alignItems: "center",
+    gap: 8
+  },
+  textCenter: {
+    textAlign: "center"
+  }
+});

ts/features/itwallet/common/store/reducers/__tests__/__snapshots__/index.test.ts.snap

@@ -19,7 +19,9 @@ exports[`itWalletReducer should match snapshot [if this test fails, remember to
   },
   "walletInstance": {
     "attestation": undefined,
-    "status": undefined,
+    "status": {
+      "kind": "PotNone",
+    },
   },
 }
 `;

ts/features/itwallet/common/store/selectors/index.ts

@@ -8,6 +8,7 @@ import {
   itwIsWalletEmptySelector
 } from "../../../credentials/store/selectors";
 import { itwLifecycleIsValidSelector } from "../../../lifecycle/store/selectors";
+import { itwIsWalletInstanceStatusFailureSelector } from "../../../walletInstance/store/selectors";
 import {
   itwIsFeedbackBannerHiddenSelector,
   itwIsDiscoveryBannerHiddenSelector
@@ -49,13 +50,14 @@ export const itwShouldRenderFeedbackBannerSelector = (state: GlobalState) =>
 
 /**
  * Returns if the wallet ready banner should be visible. The banner is visible if:
- * - The Wallet has valid Wallet Instance and a valid eID
+ * - The Wallet has valid Wallet Instance with a known status, and a valid eID
  * - The eID is not expired
  * - The Wallet is empty
  * @param state the application global state
  * @returns true if the banner should be visible, false otherwise
  */
 export const itwShouldRenderWalletReadyBannerSelector = (state: GlobalState) =>
   itwLifecycleIsValidSelector(state) &&
+  !itwIsWalletInstanceStatusFailureSelector(state) &&
   itwCredentialsEidStatusSelector(state) !== "jwtExpired" &&
   itwIsWalletEmptySelector(state);

ts/features/itwallet/lifecycle/saga/checkWalletInstanceStateSaga.ts

@@ -6,27 +6,32 @@ import { assert } from "../../../../utils/assert";
 import { getWalletInstanceStatus } from "../../common/utils/itwAttestationUtils";
 import { ensureIntegrityServiceIsReady } from "../../common/utils/itwIntegrityUtils";
 import { itwIntegrityKeyTagSelector } from "../../issuance/store/selectors";
+import { itwUpdateWalletInstanceStatus } from "../../walletInstance/store/actions";
 import { itwLifecycleIsOperationalOrValid } from "../store/selectors";
 import { itwIntegritySetServiceIsReady } from "../../issuance/store/actions";
-import { itwUpdateWalletInstanceStatus } from "../../walletInstance/store/actions";
+import { getNetworkError } from "../../../../utils/errors";
 import { handleWalletInstanceResetSaga } from "./handleWalletInstanceResetSaga";
 
 export function* getStatusOrResetWalletInstance(integrityKeyTag: string) {
   const sessionToken = yield* select(sessionTokenSelector);
   assert(sessionToken, "Missing session token");
 
-  const walletInstanceStatus = yield* call(
-    getWalletInstanceStatus,
-    integrityKeyTag,
-    sessionToken
-  );
+  try {
+    const walletInstanceStatus = yield* call(
+      getWalletInstanceStatus,
+      integrityKeyTag,
+      sessionToken
+    );
+
+    if (walletInstanceStatus.is_revoked) {
+      yield* call(handleWalletInstanceResetSaga);
+    }
 
-  if (walletInstanceStatus.is_revoked) {
-    yield* call(handleWalletInstanceResetSaga);
+    // Update wallet instance status
+    yield* put(itwUpdateWalletInstanceStatus.success(walletInstanceStatus));
+  } catch (e) {
+    yield* put(itwUpdateWalletInstanceStatus.failure(getNetworkError(e)));
   }
-
-  // Update wallet instance status
-  yield* put(itwUpdateWalletInstanceStatus(walletInstanceStatus));
 }
 
 /**

ts/features/itwallet/walletInstance/hook/useItwWalletInstanceRevocationAlert.ts

@@ -30,7 +30,7 @@ export const useItwWalletInstanceRevocationAlert = () => {
     useCallback(() => {
       if (walletInstanceStatus?.is_revoked) {
         showWalletRevocationAlert(walletInstanceStatus.revocation_reason);
-        dispatch(itwUpdateWalletInstanceStatus(undefined));
+        dispatch(itwUpdateWalletInstanceStatus.cancel());
       }
     }, [walletInstanceStatus, dispatch])
   );

ts/features/itwallet/walletInstance/store/actions/index.ts

@@ -1,5 +1,10 @@
-import { ActionType, createStandardAction } from "typesafe-actions";
+import {
+  ActionType,
+  createStandardAction,
+  createAsyncAction
+} from "typesafe-actions";
 import { WalletInstanceStatus } from "../../../common/utils/itwTypesUtils";
+import { NetworkError } from "../../../../../utils/errors";
 
 /**
  * This action stores the Wallet Instance Attestation
@@ -9,11 +14,14 @@ export const itwWalletInstanceAttestationStore = createStandardAction(
 )<string>();
 
 /**
- * This action update the Wallet Instance Status
+ * This action handles the Wallet Instance Status fetch
  */
-export const itwUpdateWalletInstanceStatus = createStandardAction(
-  "ITW_WALLET_INSTANCE_STATUS_UPDATE"
-)<WalletInstanceStatus | undefined>();
+export const itwUpdateWalletInstanceStatus = createAsyncAction(
+  "ITW_WALLET_INSTANCE_STATUS_REQUEST",
+  "ITW_WALLET_INSTANCE_STATUS_SUCCESS",
+  "ITW_WALLET_INSTANCE_STATUS_FAILURE",
+  "ITW_WALLET_INSTANCE_STATUS_CANCEL"
+)<void, WalletInstanceStatus, NetworkError, undefined>();
 
 export type ItwWalletInstanceActions =
   | ActionType<typeof itwWalletInstanceAttestationStore>

ts/features/itwallet/walletInstance/store/reducers/index.ts

@@ -1,5 +1,12 @@
-import { PersistConfig, persistReducer } from "redux-persist";
+import {
+  MigrationManifest,
+  PersistConfig,
+  PersistedState,
+  createMigrate,
+  persistReducer
+} from "redux-persist";
 import { getType } from "typesafe-actions";
+import * as pot from "@pagopa/ts-commons/lib/pot";
 import { Action } from "../../../../../store/actions/types";
 import itwCreateSecureStorage from "../../../common/store/storages/itwSecureStorage";
 import { itwLifecycleStoresReset } from "../../../lifecycle/store/actions";
@@ -8,18 +15,34 @@ import {
   itwUpdateWalletInstanceStatus
 } from "../actions";
 import { WalletInstanceStatus } from "../../../common/utils/itwTypesUtils";
+import { NetworkError } from "../../../../../utils/errors";
+import { isDevEnv } from "../../../../../utils/environment";
 
 export type ItwWalletInstanceState = {
   attestation: string | undefined;
-  status: WalletInstanceStatus | undefined;
+  status: pot.Pot<WalletInstanceStatus, NetworkError>;
 };
 
 export const itwWalletInstanceInitialState: ItwWalletInstanceState = {
   attestation: undefined,
-  status: undefined
+  status: pot.none
 };
 
-const CURRENT_REDUX_ITW_WALLET_INSTANCE_STORE_VERSION = -1;
+const CURRENT_REDUX_ITW_WALLET_INSTANCE_STORE_VERSION = 0;
+
+const migrations: MigrationManifest = {
+  // Convert status into a pot for better async handling
+  "0": (state): ItwWalletInstanceState & PersistedState => {
+    const prevState = state as PersistedState & {
+      attestation: string | undefined;
+      status: WalletInstanceStatus | undefined;
+    };
+    return {
+      ...prevState,
+      status: prevState.status ? pot.some(prevState.status) : pot.none
+    };
+  }
+};
 
 const reducer = (
   state: ItwWalletInstanceState = itwWalletInstanceInitialState,
@@ -28,15 +51,29 @@ const reducer = (
   switch (action.type) {
     case getType(itwWalletInstanceAttestationStore): {
       return {
-        status: undefined,
+        status: pot.none,
         attestation: action.payload
       };
     }
 
-    case getType(itwUpdateWalletInstanceStatus): {
+    case getType(itwUpdateWalletInstanceStatus.success): {
+      return {
+        ...state,
+        status: pot.some(action.payload)
+      };
+    }
+
+    case getType(itwUpdateWalletInstanceStatus.failure): {
+      return {
+        ...state,
+        status: pot.toError(state.status, action.payload)
+      };
+    }
+
+    case getType(itwUpdateWalletInstanceStatus.cancel): {
       return {
         ...state,
-        status: action.payload
+        status: pot.none
       };
     }
 
@@ -51,7 +88,8 @@ const reducer = (
 const itwWalletInstancePersistConfig: PersistConfig = {
   key: "itwWalletInstance",
   storage: itwCreateSecureStorage(),
-  version: CURRENT_REDUX_ITW_WALLET_INSTANCE_STORE_VERSION
+  version: CURRENT_REDUX_ITW_WALLET_INSTANCE_STORE_VERSION,
+  migrate: createMigrate(migrations, { debug: isDevEnv })
 };
 
 const persistedReducer = persistReducer(

ts/features/itwallet/walletInstance/store/selectors/index.ts

@@ -1,5 +1,6 @@
 import * as O from "fp-ts/lib/Option";
 import { flow } from "fp-ts/lib/function";
+import * as pot from "@pagopa/ts-commons/lib/pot";
 import { createSelector } from "reselect";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { isWalletInstanceAttestationValid } from "../../../common/utils/itwAttestationUtils";
@@ -20,4 +21,11 @@ export const itwIsWalletInstanceAttestationValidSelector = createSelector(
 
 /* Selector to get the wallet instance status */
 export const itwWalletInstanceStatusSelector = (state: GlobalState) =>
-  state.features.itWallet.walletInstance.status;
+  pot.toUndefined(state.features.itWallet.walletInstance.status);
+
+/**
+ * Returns true when it was not possible to retrieve the wallet instance status because of unexpected errors,
+ * hence we cannot know whether the wallet instance is valid or has been revoked.
+ */
+export const itwIsWalletInstanceStatusFailureSelector = (state: GlobalState) =>
+  pot.isError(state.features.itWallet.walletInstance.status);