From 893d6e4ffeef697316c8811fbca3382a1e7b4223 Mon Sep 17 00:00:00 2001
From: Alessandro Izzo <alessandro.izzo998@gmail.com>
Date: Wed, 24 Jan 2024 09:55:16 +0100
Subject: [PATCH] fix: [IOBP-512] Wallet details with new generic error screen
 (#5427)

## Short description
This PR implements the new generic error screen using the
`OperationResultScreenContent` component.

## List of changes proposed in this pull request
- Removed from `WalletDetailsScreen` the old and deprecated
`WorkunitGenericFailure` with the new one

## How to test
Start and complete an onboarding flow with a new card and when you are
in the method details screen, try to force an error on that page.


## Preview
|Before|After|
|-|-|
| <img
src="https://github.com/pagopa/io-app/assets/34343582/4804c505-b4df-4334-b33d-d2b786b18871"
width="300" /> | <img
src="https://github.com/pagopa/io-app/assets/34343582/1290f81c-6e18-468b-884c-31605a162f60"
width="300" /> |

Co-authored-by: Federico Mastrini <federicomastrini93@gmail.com>
---
 locales/en/index.yml                          |  5 +++
 locales/it/index.yml                          |  5 +++
 .../details/screens/WalletDetailsScreen.tsx   | 36 +++++++++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/locales/en/index.yml b/locales/en/index.yml
index 43350d48fbb..e0e59a0642b 100644
--- a/locales/en/index.yml
+++ b/locales/en/index.yml
@@ -1013,6 +1013,11 @@ wallet:
       title: Vuoi pagare in app?
       content: Scopri quali sono i metodi che puoi aggiungere al tuo portafoglio.
       cta: Scopri di più
+    error:
+      title: Si è verificato un errore
+      subtitle: Riprova o contatta l'assistenza
+      primaryButton: Chiudi
+      secondaryButton: Riprova
   wallet: Wallet
   refreshWallet: Refresh the Wallet
   favourite:
diff --git a/locales/it/index.yml b/locales/it/index.yml
index 87e81440b7b..f5a8d5b56b3 100644
--- a/locales/it/index.yml
+++ b/locales/it/index.yml
@@ -1013,6 +1013,11 @@ wallet:
       title: Vuoi pagare in app?
       content: Scopri quali sono i metodi che puoi aggiungere al tuo portafoglio.
       cta: Scopri di più
+    error:
+      title: Si è verificato un errore
+      subtitle: Riprova o contatta l'assistenza
+      primaryButton: Chiudi
+      secondaryButton: Riprova
   wallet: Portafoglio
   refreshWallet: Aggiorna il Portafoglio
   favourite:
diff --git a/ts/features/walletV3/details/screens/WalletDetailsScreen.tsx b/ts/features/walletV3/details/screens/WalletDetailsScreen.tsx
index 2eec49f09b4..d371306e44b 100644
--- a/ts/features/walletV3/details/screens/WalletDetailsScreen.tsx
+++ b/ts/features/walletV3/details/screens/WalletDetailsScreen.tsx
@@ -1,12 +1,11 @@
 import * as React from "react";
-import { RouteProp, useRoute } from "@react-navigation/native";
+import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
 import { useDispatch } from "react-redux";
 import { IOLogoPaymentExtType } from "@pagopa/io-app-design-system";
 
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
-import WorkunitGenericFailure from "../../../../components/error/WorkunitGenericFailure";
 import { PaymentCardBig } from "../../../../components/ui/cards/payment/PaymentCardBig";
 import { useIOSelector } from "../../../../store/hooks";
 import { idPayAreInitiativesFromInstrumentLoadingSelector } from "../../../idpay/wallet/store/reducers";
@@ -22,6 +21,12 @@ import {
 import { walletDetailsGetInstrument } from "../store/actions";
 import { UIWalletInfoDetails } from "../types/UIWalletInfoDetails";
 import { getDateFromExpiryDate } from "../../../../utils/dates";
+import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import I18n from "../../../../i18n";
+import {
+  AppParamsList,
+  IOStackNavigationProp
+} from "../../../../navigation/params/AppParamsList";
 
 export type WalletDetailsScreenNavigationParams = Readonly<{
   walletId: string;
@@ -71,6 +76,7 @@ const generateCardHeaderTitle = (details?: UIWalletInfoDetails) => {
  */
 const WalletDetailsScreen = () => {
   const route = useRoute<WalletDetailsScreenRouteProps>();
+  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
   const dispatch = useDispatch();
   const { walletId } = route.params;
   const walletDetails = useIOSelector(walletDetailsInstrumentSelector);
@@ -82,6 +88,30 @@ const WalletDetailsScreen = () => {
     idPayAreInitiativesFromInstrumentLoadingSelector
   );
 
+  const WalletDetailsGenericFailure = () => (
+    <OperationResultScreenContent
+      title={I18n.t("wallet.methodDetails.error.title")}
+      subtitle={I18n.t("wallet.methodDetails.error.subtitle")}
+      pictogram="umbrellaNew"
+      action={{
+        label: I18n.t("wallet.methodDetails.error.primaryButton"),
+        accessibilityLabel: I18n.t("wallet.methodDetails.error.primaryButton"),
+        onPress: () => navigation.pop()
+      }}
+      secondaryAction={{
+        label: I18n.t("wallet.methodDetails.error.secondaryButton"),
+        accessibilityLabel: I18n.t(
+          "wallet.methodDetails.error.secondaryButton"
+        ),
+        onPress: handleOnRetry
+      }}
+    />
+  );
+
+  const handleOnRetry = () => {
+    dispatch(walletDetailsGetInstrument.request({ walletId }));
+  };
+
   React.useEffect(() => {
     dispatch(walletDetailsGetInstrument.request({ walletId }));
   }, [walletId, dispatch]);
@@ -122,7 +152,7 @@ const WalletDetailsScreen = () => {
       </LoadingSpinnerOverlay>
     );
   } else if (isErrorWalletDetails) {
-    return <WorkunitGenericFailure />;
+    return <WalletDetailsGenericFailure />;
   }
   return null;
 };