From 4e47fdad8bb6a6b2a7525455e4e0b186c325a2f8 Mon Sep 17 00:00:00 2001
From: Federico Mastrini <federicomastrini93@gmail.com>
Date: Mon, 18 Mar 2024 16:17:54 +0100
Subject: [PATCH] fix: [IOBP-596] Fix unexpected behavior in wallet onboarding
 Webview on Android devices (#5594)

## Short description
This PR fixes a bug in the wallet onboarding flow, which was causing the
webview to reopen after the flow completed.

## List of changes proposed in this pull request
- Simplified types by leveraging the use of `io-ts` to ensure correct
runtime type checking.
- Refactored `useWalletOnboardingWebView` custom hook with simplified
logics
- Removed unnecessary components in the `WalletOnboardingFeedbackScreen`
which now renders directly the onboarding outcome.

## How to test
Using the
[io-dev-api-server](https://github.com/pagopa/io-dev-api-server) or the
UAT environment, navigate to the **Payments playground** within the
**Profile** section of the app.
Try to onboard new methods while checking that the Webivew does not
reopens after a successful (or unsuccessful) onboarding.

## Preview

<video
src="https://github.com/pagopa/io-app/assets/6160324/d0a8170d-4e1f-4e6b-91c5-6a965216bf42"
/>

---------

Co-authored-by: Alessandro Izzo <alessandro.izzo998@gmail.com>
---
 locales/de/index.yml                          |  15 +-
 locales/en/index.yml                          |   9 +-
 locales/it/index.yml                          |   9 +-
 .../components/WalletOnboardingError.tsx      |  79 --------
 .../components/WalletOnboardingSuccess.tsx    |  43 -----
 .../hooks/useWalletOnboardingWebView.tsx      | 171 +++++++++---------
 .../WalletOnboardingFeedbackScreen.tsx        | 119 ++++++------
 ...letOnboardingSelectPaymentMethodScreen.tsx |  36 ++--
 .../onboarding/types/OnboardingOutcomeEnum.ts |  19 ++
 .../payments/onboarding/types/index.ts        |  57 ------
 .../payments/onboarding/utils/index.ts        |  74 --------
 11 files changed, 201 insertions(+), 430 deletions(-)
 delete mode 100644 ts/features/payments/onboarding/components/WalletOnboardingError.tsx
 delete mode 100644 ts/features/payments/onboarding/components/WalletOnboardingSuccess.tsx
 create mode 100644 ts/features/payments/onboarding/types/OnboardingOutcomeEnum.ts
 delete mode 100644 ts/features/payments/onboarding/types/index.ts

diff --git a/locales/de/index.yml b/locales/de/index.yml
index bf83d987e0d..0d00c548af8 100644
--- a/locales/de/index.yml
+++ b/locales/de/index.yml
@@ -247,7 +247,7 @@ permissionRationale:
   torch:
     title: "Zugriff auf die Kamera gewähren"
     message: "Wir brauchen Zugang zur Kamera, um die Taschenlampenfunktion zu benutzen."
-startup:  
+startup:
   authentication: "Benutzer authentifiziert"
   sessionInfo: "SPID-Attribute geladen"
   profileInfo: "Benutzerprofil geladen"
@@ -556,8 +556,8 @@ authentication:
     card2-title: "Verwende deine bevorzugten Zahlungsmethoden"
     card2-content: "Du kannst eine Steuer oder eine Strafe über dein Bankkonto oder mit deiner Bankkarte bezahlen"
     card3-title: "Bezahle schnell eine Aufforderung in Papierform"
-    card3-content: "Durch das Scannen des QR-Codes kannst du schnell und einfach eine Zahlungsaufforderung in Papierform bezahlen"    
-    card5-title: "Willkommen in IO!" 
+    card3-content: "Durch das Scannen des QR-Codes kannst du schnell und einfach eine Zahlungsaufforderung in Papierform bezahlen"
+    card5-title: "Willkommen in IO!"
     card5-content: "Lass uns gemeinsam herausfinden, was du machen kannst"
     card5-content-accessibility: "Wähle das vorherige Element, um einen Chat mit dem IO-Team zu beginnen, wenn etwas nicht so funktioniert, wie es sollte."
     expiredCardTitle: "Karte abgelaufen oder nicht mehr gültig"
@@ -1159,10 +1159,11 @@ wallet:
             title: "Ich weiß es nicht"
             description: "Wir durchsuchen alle auf deinem Namen lautenden Karten bei den am Dienst teilnehmenden Banken"
     generalError: "Beim Hinzufügen der Zahlungsmethode trat ein allgemeiner Fehler auf"
-    success:
-      title: "Die Karte wurde hinzugefügt!"
-      continueButton: "Weiter"
-    failure:
+    outcome:
+      SUCCESS:
+        title: "Die Karte wurde hinzugefügt!"
+        subtitle: ""
+        primaryAction: "Weiter"
       GENERIC_ERROR:
         title: "Es ist ein unerwarteter Fehler aufgetreten"
         subtitle: "Versuche es erneut oder kontaktiere den Support"
diff --git a/locales/en/index.yml b/locales/en/index.yml
index 1563f4a2876..4fc3dc385cb 100644
--- a/locales/en/index.yml
+++ b/locales/en/index.yml
@@ -1203,10 +1203,11 @@ wallet:
             title: "I don't know"
             description: "We will search for all cards registered to you at participating banks"
     generalError: "There was a generic error while adding the payment method"
-    success:
-      title: "Payment method added successfully!"
-      continueButton: "Vedi dettagli"
-    failure:
+    outcome:
+      SUCCESS:
+        title: "Payment method added successfully!"
+        subtitle: ""
+        primaryAction: "Vedi dettagli"
       GENERIC_ERROR:
         title: Si è verificato un errore imprevisto
         subtitle: Riprova o contatta l'assistenza
diff --git a/locales/it/index.yml b/locales/it/index.yml
index 9155bc6d7c2..014c70a063e 100644
--- a/locales/it/index.yml
+++ b/locales/it/index.yml
@@ -1203,10 +1203,11 @@ wallet:
             title: "Non lo so"
             description: "Cercheremo tutte le carte intestate a te presso le banche aderenti al servizio"
     generalError: "C'è stato un errore generico durante l'aggiunta del metodo di pagamento"
-    success:
-      title: "Il metodo è stato aggiunto"
-      continueButton: "Vedi dettagli"
-    failure:
+    outcome:
+      SUCCESS:
+        title: "Il metodo è stato aggiunto"
+        subtitle: ""
+        primaryAction: "Vedi dettagli"
       GENERIC_ERROR:
         title: Si è verificato un errore imprevisto
         subtitle: Riprova o contatta l'assistenza
diff --git a/ts/features/payments/onboarding/components/WalletOnboardingError.tsx b/ts/features/payments/onboarding/components/WalletOnboardingError.tsx
deleted file mode 100644
index 5c2af8dd381..00000000000
--- a/ts/features/payments/onboarding/components/WalletOnboardingError.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable functional/immutable-data */
-import * as React from "react";
-
-import { OnboardingOutcomeEnum, OnboardingOutcomeFailure } from "../types";
-import I18n from "../../../../i18n";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
-import { openWebUrl } from "../../../../utils/url";
-import {
-  ONBOARDING_FAQ_ENABLE_3DS,
-  ONBOARDING_OUTCOME_ERROR_PICTOGRAM
-} from "../utils";
-
-type WalletOnboardingErrorProps = {
-  onClose: () => void;
-  outcome: OnboardingOutcomeFailure;
-};
-
-type OnboardingErrorEnumKey = Exclude<
-  keyof typeof OnboardingOutcomeEnum,
-  "SUCCESS"
->;
-
-/**
- * Component used to show an error message when the wallet onboarding fails with a specific outcome
- */
-const WalletOnboardingError = ({
-  onClose,
-  outcome
-}: WalletOnboardingErrorProps) => {
-  const handleOnPressPrimaryAction = () => {
-    onClose();
-  };
-  const handleOnPressSecondaryAction = () => {
-    switch (outcome) {
-      case OnboardingOutcomeEnum.AUTH_ERROR:
-        openWebUrl(ONBOARDING_FAQ_ENABLE_3DS);
-    }
-  };
-
-  const outcomeEnumKey = Object.keys(OnboardingOutcomeEnum)[
-    Object.values(OnboardingOutcomeEnum).indexOf(
-      outcome as OnboardingOutcomeEnum
-    )
-  ] as OnboardingErrorEnumKey;
-
-  const renderSecondaryAction = () => {
-    switch (outcome) {
-      case OnboardingOutcomeEnum.AUTH_ERROR:
-        return {
-          label: I18n.t(`wallet.onboarding.failure.AUTH_ERROR.secondaryAction`),
-          accessibilityLabel: I18n.t(
-            `wallet.onboarding.failure.AUTH_ERROR.secondaryAction`
-          ),
-          onPress: handleOnPressSecondaryAction
-        };
-    }
-    return undefined;
-  };
-
-  return (
-    <OperationResultScreenContent
-      title={I18n.t(`wallet.onboarding.failure.${outcomeEnumKey}.title`)}
-      subtitle={I18n.t(`wallet.onboarding.failure.${outcomeEnumKey}.subtitle`)}
-      pictogram={ONBOARDING_OUTCOME_ERROR_PICTOGRAM[outcome]}
-      action={{
-        label: I18n.t(
-          `wallet.onboarding.failure.${outcomeEnumKey}.primaryAction`
-        ),
-        accessibilityLabel: I18n.t(
-          `wallet.onboarding.failure.${outcomeEnumKey}.primaryAction`
-        ),
-        onPress: handleOnPressPrimaryAction
-      }}
-      secondaryAction={renderSecondaryAction()}
-    />
-  );
-};
-
-export default WalletOnboardingError;
diff --git a/ts/features/payments/onboarding/components/WalletOnboardingSuccess.tsx b/ts/features/payments/onboarding/components/WalletOnboardingSuccess.tsx
deleted file mode 100644
index 299c36832bf..00000000000
--- a/ts/features/payments/onboarding/components/WalletOnboardingSuccess.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/* eslint-disable functional/immutable-data */
-import * as React from "react";
-import { SafeAreaView, View } from "react-native";
-import { ButtonSolid, Pictogram } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import { InfoScreenComponent } from "../../../../components/infoScreen/InfoScreenComponent";
-import I18n from "../../../../i18n";
-
-type WalletOnboardingSuccessProps = {
-  onContinue: () => void;
-};
-
-/**
- * Component that shows a success message after the wallet onboarding process is completed
- * TODO: Define the desired design of this component
- */
-const WalletOnboardingSuccess = ({
-  onContinue
-}: WalletOnboardingSuccessProps) => (
-  <SafeAreaView style={IOStyles.flex}>
-    <InfoScreenComponent
-      image={<Pictogram name="success" size={120} />}
-      title={I18n.t("wallet.onboarding.success.title")}
-      body={<ContinueButton onPress={onContinue} />}
-    />
-  </SafeAreaView>
-);
-
-type ContinueButtonProps = {
-  onPress: () => void;
-};
-
-const ContinueButton = ({ onPress }: ContinueButtonProps) => (
-  <View style={IOStyles.alignCenter}>
-    <ButtonSolid
-      accessibilityLabel={I18n.t("wallet.onboarding.success.continueButton")}
-      label={I18n.t("wallet.onboarding.success.continueButton")}
-      onPress={onPress}
-    />
-  </View>
-);
-
-export default WalletOnboardingSuccess;
diff --git a/ts/features/payments/onboarding/hooks/useWalletOnboardingWebView.tsx b/ts/features/payments/onboarding/hooks/useWalletOnboardingWebView.tsx
index db064a22642..0c9212ad11c 100644
--- a/ts/features/payments/onboarding/hooks/useWalletOnboardingWebView.tsx
+++ b/ts/features/payments/onboarding/hooks/useWalletOnboardingWebView.tsx
@@ -1,123 +1,116 @@
-import * as React from "react";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as pot from "@pagopa/ts-commons/lib/pot";
 import { openAuthenticationSession } from "@pagopa/io-react-native-login-utils";
-import {
-  WebViewErrorEvent,
-  WebViewHttpErrorEvent
-} from "react-native-webview/lib/WebViewTypes";
-
-import { OnboardingOutcomeFailure, OnboardingOutcomeSuccess } from "../types";
-import { NetworkError } from "../../../../utils/errors";
-import { WalletCreateResponse } from "../../../../../definitions/pagopa/walletv3/WalletCreateResponse";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as E from "fp-ts/lib/Either";
+import * as TE from "fp-ts/lib/TaskEither";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
+import URLParse from "url-parse";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { walletOnboardingStartupSelector } from "../store";
 import { walletStartOnboarding } from "../store/actions";
 import {
-  ONBOARDING_CALLBACK_URL_SCHEMA,
-  extractOnboardingResult
-} from "../utils";
+  WalletOnboardingOutcome,
+  WalletOnboardingOutcomeEnum
+} from "../types/OnboardingOutcomeEnum";
+import { ONBOARDING_CALLBACK_URL_SCHEMA } from "../utils";
 
-/**
- * Function that extracts the uri to be loaded in the webview from the onboarding startup result pot
- */
-const extractOnboardingWebViewUri = (
-  onboardingStartupResult: pot.Pot<WalletCreateResponse, NetworkError>
-) =>
-  pot.getOrElse(
-    pot.map(onboardingStartupResult, result => encodeURI(result.redirectUrl)),
-    ""
-  );
-
-export type WalletOnboardingWebViewProps = {
-  onSuccess?: (outcome: OnboardingOutcomeSuccess, walletId: string) => void;
-  onFailure?: (outcome: OnboardingOutcomeFailure) => void;
-  onError?: (
-    error?: WebViewErrorEvent | WebViewHttpErrorEvent | NetworkError
+type WalletOnboardingWebViewProps = {
+  onOnboardingOutcome: (
+    outcome: WalletOnboardingOutcome,
+    walletId?: string
   ) => void;
-  onDismiss?: () => void;
+};
+
+export type WalletOnboardingWebView = {
+  isLoading: boolean;
+  isError: boolean;
+  isPendingOnboarding: boolean;
+  startOnboarding: (paymentMethodId: string) => void;
 };
 
 /**
  * This hook handles the onboarding webview flow and returns a function to start the onboarding
- * @param onSuccess callback called when the onboarding is successful
- * @param onFailure callback called when the onboarding is failed
- * @param onError callback called when an error occurs
+ * @param onOnboardingOutcome callback called when the onboarding flow is completed
  */
-export const useWalletOnboardingWebView = (
-  props: WalletOnboardingWebViewProps
-) => {
-  const { onSuccess, onError, onFailure, onDismiss } = props;
-  const [isLoadingWebView, setIsLoadingWebView] = React.useState(false);
-  const onboardingStartupResult = useIOSelector(
-    walletOnboardingStartupSelector
-  );
+export const useWalletOnboardingWebView = ({
+  onOnboardingOutcome
+}: WalletOnboardingWebViewProps): WalletOnboardingWebView => {
   const dispatch = useIODispatch();
 
-  const handleResultOnboarding = React.useCallback(
-    (url: string) => {
-      pipe(
-        url,
-        extractOnboardingResult,
-        O.fromNullable,
-        O.map(result => {
-          if (result.status === "SUCCESS") {
-            onSuccess?.(
-              result.outcome as OnboardingOutcomeSuccess,
-              result.walletId
-            );
-          } else if (result.status === "FAILURE") {
-            onFailure?.(result.outcome as OnboardingOutcomeFailure);
-          }
-        })
+  const onboardingUrlPot = useIOSelector(walletOnboardingStartupSelector);
+
+  const [isPendingOnboarding, setIsPendingOnboarding] =
+    React.useState<boolean>(false);
+  const isLoading = pot.isLoading(onboardingUrlPot);
+  const isError = pot.isError(onboardingUrlPot);
+
+  const handleOnboardingResult = React.useCallback(
+    (resultUrl: string) => {
+      const url = new URLParse(resultUrl, true);
+
+      const outcome = pipe(
+        url.query.outcome,
+        WalletOnboardingOutcome.decode,
+        E.getOrElse(() => WalletOnboardingOutcomeEnum.GENERIC_ERROR)
       );
+
+      onOnboardingOutcome(outcome, url.query.walletId);
     },
-    [onSuccess, onFailure]
+    [onOnboardingOutcome]
   );
 
-  const openOnboardingWebView = React.useCallback(async () => {
-    try {
-      const resultUrl = await openAuthenticationSession(
-        extractOnboardingWebViewUri(onboardingStartupResult),
-        ONBOARDING_CALLBACK_URL_SCHEMA
-      );
-      handleResultOnboarding(resultUrl);
-    } catch (err) {
-      onDismiss?.();
-    } finally {
-      setIsLoadingWebView(false);
+  React.useEffect(() => {
+    if (isPendingOnboarding) {
+      return;
     }
-  }, [onboardingStartupResult, handleResultOnboarding, onDismiss]);
+
+    void pipe(
+      onboardingUrlPot,
+      pot.toOption,
+      TE.fromOption(() => undefined),
+      TE.chain(({ redirectUrl }) =>
+        TE.tryCatch(
+          () => {
+            setIsPendingOnboarding(true);
+            return openAuthenticationSession(
+              redirectUrl,
+              ONBOARDING_CALLBACK_URL_SCHEMA
+            );
+          },
+          () => {
+            onOnboardingOutcome(WalletOnboardingOutcomeEnum.CANCELED_BY_USER);
+          }
+        )
+      ),
+      TE.map(handleOnboardingResult)
+    )();
+  }, [
+    isError,
+    isLoading,
+    isPendingOnboarding,
+    onboardingUrlPot,
+    handleOnboardingResult,
+    onOnboardingOutcome,
+    dispatch
+  ]);
 
   React.useEffect(
     () => () => {
+      setIsPendingOnboarding(false);
       dispatch(walletStartOnboarding.cancel());
     },
     [dispatch]
   );
 
-  React.useEffect(() => {
-    if (pot.isError(onboardingStartupResult) && onError) {
-      onError(onboardingStartupResult.error);
-    }
-    if (
-      !pot.isError(onboardingStartupResult) &&
-      !pot.isLoading(onboardingStartupResult)
-    ) {
-      void openOnboardingWebView();
-    }
-  }, [onboardingStartupResult, openOnboardingWebView, onError]);
-
   const startOnboarding = (paymentMethodId: string) => {
-    if (!pot.isLoading(onboardingStartupResult) && !isLoadingWebView) {
-      setIsLoadingWebView(true);
-      dispatch(walletStartOnboarding.request({ paymentMethodId }));
-    }
+    setIsPendingOnboarding(false);
+    dispatch(walletStartOnboarding.request({ paymentMethodId }));
   };
 
   return {
     startOnboarding,
-    isLoadingWebView
+    isLoading,
+    isError,
+    isPendingOnboarding
   };
 };
diff --git a/ts/features/payments/onboarding/screens/WalletOnboardingFeedbackScreen.tsx b/ts/features/payments/onboarding/screens/WalletOnboardingFeedbackScreen.tsx
index 35969b7d4e0..b74400bf813 100644
--- a/ts/features/payments/onboarding/screens/WalletOnboardingFeedbackScreen.tsx
+++ b/ts/features/payments/onboarding/screens/WalletOnboardingFeedbackScreen.tsx
@@ -1,23 +1,26 @@
-/* eslint-disable functional/immutable-data */
-import * as React from "react";
-
+import { IOPictograms } from "@pagopa/io-app-design-system";
 import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import * as React from "react";
 import { View } from "react-native";
-
-import { WalletOnboardingParamsList } from "../navigation/navigator";
-
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import WalletOnboardingSuccess from "../components/WalletOnboardingSuccess";
-import { OnboardingResult } from "../types";
-import WalletOnboardingError from "../components/WalletOnboardingError";
-import { WalletDetailsRoutes } from "../../details/navigation/navigator";
+import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import I18n from "../../../../i18n";
 import {
   AppParamsList,
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
+import { openWebUrl } from "../../../../utils/url";
+import { WalletDetailsRoutes } from "../../details/navigation/navigator";
+import { WalletOnboardingParamsList } from "../navigation/navigator";
+import {
+  WalletOnboardingOutcome,
+  WalletOnboardingOutcomeEnum
+} from "../types/OnboardingOutcomeEnum";
+import { ONBOARDING_FAQ_ENABLE_3DS } from "../utils";
 
 export type WalletOnboardingFeedbackScreenParams = {
-  onboardingResult: OnboardingResult;
+  outcome: WalletOnboardingOutcome;
+  walletId?: string;
 };
 
 type WalletOnboardingFeedbackScreenRouteProps = RouteProp<
@@ -25,61 +28,75 @@ type WalletOnboardingFeedbackScreenRouteProps = RouteProp<
   "WALLET_ONBOARDING_RESULT_FEEDBACK"
 >;
 
+export const pictogramByOutcome: Record<WalletOnboardingOutcome, IOPictograms> =
+  {
+    [WalletOnboardingOutcomeEnum.SUCCESS]: "success",
+    [WalletOnboardingOutcomeEnum.GENERIC_ERROR]: "umbrellaNew",
+    [WalletOnboardingOutcomeEnum.AUTH_ERROR]: "accessDenied",
+    [WalletOnboardingOutcomeEnum.TIMEOUT]: "time",
+    [WalletOnboardingOutcomeEnum.CANCELED_BY_USER]: "trash",
+    [WalletOnboardingOutcomeEnum.INVALID_SESSION]: "umbrellaNew",
+    [WalletOnboardingOutcomeEnum.ALREADY_ONBOARDED]: "success",
+    [WalletOnboardingOutcomeEnum.BPAY_NOT_FOUND]: "attention"
+  };
+
 const WalletOnboardingFeedbackScreen = () => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
   const route = useRoute<WalletOnboardingFeedbackScreenRouteProps>();
-  const { onboardingResult } = route.params;
+  const { outcome, walletId } = route.params;
+
+  const outcomeEnumKey = Object.keys(WalletOnboardingOutcomeEnum)[
+    Object.values(WalletOnboardingOutcomeEnum).indexOf(outcome)
+  ] as keyof typeof WalletOnboardingOutcomeEnum;
 
   const handleContinueButton = () => {
-    if (onboardingResult && onboardingResult.status === "SUCCESS") {
+    if (outcome === WalletOnboardingOutcomeEnum.SUCCESS && walletId) {
       navigation.replace(WalletDetailsRoutes.WALLET_DETAILS_MAIN, {
         screen: WalletDetailsRoutes.WALLET_DETAILS_SCREEN,
         params: {
-          walletId: onboardingResult.walletId
+          walletId
         }
       });
+    } else {
+      navigation.pop();
+    }
+  };
+
+  const renderSecondaryAction = () => {
+    switch (outcome) {
+      case WalletOnboardingOutcomeEnum.AUTH_ERROR:
+        return {
+          label: I18n.t(`wallet.onboarding.outcome.AUTH_ERROR.secondaryAction`),
+          accessibilityLabel: I18n.t(
+            `wallet.onboarding.outcome.AUTH_ERROR.secondaryAction`
+          ),
+          onPress: () => openWebUrl(ONBOARDING_FAQ_ENABLE_3DS)
+        };
     }
+    return undefined;
   };
 
-  // If the onboarding process is completed (with a success or not), we display the result content feedback
   return (
-    <OnboardingResultContent
-      onboardingResult={onboardingResult}
-      onClose={() => navigation.pop()}
-      onContinue={handleContinueButton}
-    />
+    <View style={IOStyles.flex}>
+      <OperationResultScreenContent
+        title={I18n.t(`wallet.onboarding.outcome.${outcomeEnumKey}.title`)}
+        subtitle={I18n.t(
+          `wallet.onboarding.outcome.${outcomeEnumKey}.subtitle`
+        )}
+        pictogram={pictogramByOutcome[outcome]}
+        action={{
+          label: I18n.t(
+            `wallet.onboarding.outcome.${outcomeEnumKey}.primaryAction`
+          ),
+          accessibilityLabel: I18n.t(
+            `wallet.onboarding.outcome.${outcomeEnumKey}.primaryAction`
+          ),
+          onPress: handleContinueButton
+        }}
+        secondaryAction={renderSecondaryAction()}
+      />
+    </View>
   );
 };
 
-type OnboardingResultContentProps = {
-  onboardingResult: OnboardingResult;
-  onClose: () => void;
-  onContinue: () => void;
-};
-
-/**
- * This component is used to display the result of the onboarding process
- * @param onboardingResult the result of the onboarding process
- * @param onContinue callback to be called when the user tap on 'Continue' button into success screen
- * @param onClose callback to be called when the user tap on 'Close' button into error screen
- */
-const OnboardingResultContent = ({
-  onboardingResult,
-  onContinue,
-  onClose
-}: OnboardingResultContentProps) => (
-  <View style={IOStyles.flex}>
-    {onboardingResult.status === "SUCCESS" && (
-      <WalletOnboardingSuccess onContinue={onContinue} />
-    )}
-    {(onboardingResult.status === "ERROR" ||
-      onboardingResult.status === "FAILURE") && (
-      <WalletOnboardingError
-        outcome={onboardingResult.outcome}
-        onClose={onClose}
-      />
-    )}
-  </View>
-);
-
 export default WalletOnboardingFeedbackScreen;
diff --git a/ts/features/payments/onboarding/screens/WalletOnboardingSelectPaymentMethodScreen.tsx b/ts/features/payments/onboarding/screens/WalletOnboardingSelectPaymentMethodScreen.tsx
index be713bfe10d..994fabf4d11 100644
--- a/ts/features/payments/onboarding/screens/WalletOnboardingSelectPaymentMethodScreen.tsx
+++ b/ts/features/payments/onboarding/screens/WalletOnboardingSelectPaymentMethodScreen.tsx
@@ -25,7 +25,6 @@ import {
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import { PaymentMethodStatusEnum } from "../../../../../definitions/pagopa/walletv3/PaymentMethodStatus";
 import { useWalletOnboardingWebView } from "../hooks/useWalletOnboardingWebView";
-import { OnboardingOutcomeEnum, OnboardingResult } from "../types";
 
 const WalletOnboardingSelectPaymentMethodScreen = () => {
   const navigation = useNavigation<WalletOnboardingStackNavigation>();
@@ -36,6 +35,7 @@ const WalletOnboardingSelectPaymentMethodScreen = () => {
   const paymentMethodsPot = useIOSelector(
     walletOnboardingPaymentMethodsSelector
   );
+
   const availablePaymentMethods = pipe(
     pot.getOrElse(
       pot.map(paymentMethodsPot, el => el.paymentMethods),
@@ -46,17 +46,18 @@ const WalletOnboardingSelectPaymentMethodScreen = () => {
     O.getOrElseW(() => [])
   );
 
-  const { startOnboarding, isLoadingWebView } = useWalletOnboardingWebView({
-    onSuccess: (outcome, walletId) =>
-      navigateToFeedbackPage({ status: "SUCCESS", outcome, walletId }),
-    onFailure: outcome =>
-      navigateToFeedbackPage({ status: "FAILURE", outcome }),
-    onError: () =>
-      navigateToFeedbackPage({
-        status: "ERROR",
-        outcome: OnboardingOutcomeEnum.GENERIC_ERROR
-      })
-  });
+  const { startOnboarding, isLoading, isPendingOnboarding } =
+    useWalletOnboardingWebView({
+      onOnboardingOutcome: (outcome, walletId) => {
+        navigation.replace(
+          WalletOnboardingRoutes.WALLET_ONBOARDING_RESULT_FEEDBACK,
+          {
+            outcome,
+            walletId
+          }
+        );
+      }
+    });
 
   useOnFirstRender(() => {
     dispatch(walletGetPaymentMethods.request());
@@ -68,15 +69,6 @@ const WalletOnboardingSelectPaymentMethodScreen = () => {
     startOnboarding(selectedPaymentMethod.id);
   };
 
-  const navigateToFeedbackPage = (onboardingResult: OnboardingResult) => {
-    navigation.navigate(
-      WalletOnboardingRoutes.WALLET_ONBOARDING_RESULT_FEEDBACK,
-      {
-        onboardingResult
-      }
-    );
-  };
-
   return (
     <TopScreenComponent goBack>
       {pot.isError(paymentMethodsPot) ? (
@@ -97,7 +89,7 @@ const WalletOnboardingSelectPaymentMethodScreen = () => {
             isLoadingMethods={isLoadingPaymentMethods}
             onSelectPaymentMethod={handleSelectedPaymentMethod}
             paymentMethods={availablePaymentMethods}
-            isLoadingWebView={isLoadingWebView}
+            isLoadingWebView={isLoading || isPendingOnboarding}
           />
         </SafeAreaView>
       )}
diff --git a/ts/features/payments/onboarding/types/OnboardingOutcomeEnum.ts b/ts/features/payments/onboarding/types/OnboardingOutcomeEnum.ts
new file mode 100644
index 00000000000..12bcf64190c
--- /dev/null
+++ b/ts/features/payments/onboarding/types/OnboardingOutcomeEnum.ts
@@ -0,0 +1,19 @@
+import { enumType } from "@pagopa/ts-commons/lib/types";
+import * as t from "io-ts";
+
+export enum WalletOnboardingOutcomeEnum {
+  SUCCESS = "0",
+  GENERIC_ERROR = "1",
+  AUTH_ERROR = "2",
+  TIMEOUT = "4",
+  CANCELED_BY_USER = "8",
+  INVALID_SESSION = "14",
+  ALREADY_ONBOARDED = "15",
+  BPAY_NOT_FOUND = "16"
+}
+
+export type WalletOnboardingOutcome = t.TypeOf<typeof WalletOnboardingOutcome>;
+export const WalletOnboardingOutcome = enumType<WalletOnboardingOutcomeEnum>(
+  WalletOnboardingOutcomeEnum,
+  "WalletOnboardingOutcome"
+);
diff --git a/ts/features/payments/onboarding/types/index.ts b/ts/features/payments/onboarding/types/index.ts
deleted file mode 100644
index 95958420607..00000000000
--- a/ts/features/payments/onboarding/types/index.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * All the possible outcomes of the onboarding process
- */
-export enum OnboardingOutcomeEnum {
-  SUCCESS = "0",
-  GENERIC_ERROR = "1",
-  AUTH_ERROR = "2",
-  TIMEOUT = "4",
-  CANCELED_BY_USER = "8",
-  INVALID_SESSION = "14",
-  ALREADY_ONBOARDED = "15",
-  BPAY_NOT_FOUND = "16"
-}
-
-export type OnboardingOutcome = `${OnboardingOutcomeEnum}`;
-
-export type OnboardingStatus = "SUCCESS" | "FAILURE" | "ERROR";
-
-export type OnboardingOutcomeFailure = Exclude<
-  OnboardingOutcome,
-  `${OnboardingOutcomeEnum.SUCCESS}`
->;
-
-export type OnboardingOutcomeSuccess = Extract<
-  OnboardingOutcome,
-  `${OnboardingOutcomeEnum.SUCCESS}`
->;
-
-/**
- * Rapresents the result of onboarding process when it is successfully done
- */
-export type OnboardingSuccess = {
-  status: "SUCCESS";
-  outcome: OnboardingOutcome;
-  walletId: string;
-};
-
-/**
- * Rapresents the result of onboarding process when it is failed by the returned webview outcome
- */
-export type OnboardingFailure = {
-  status: "FAILURE";
-  outcome: OnboardingOutcomeFailure;
-};
-
-/**
- * Rapresents the result of onboarding process when it has a generic error not based on the webview outcome
- */
-export type OnboardingWebViewError = {
-  status: "ERROR";
-  outcome: OnboardingOutcomeFailure;
-};
-
-export type OnboardingResult =
-  | OnboardingSuccess
-  | OnboardingFailure
-  | OnboardingWebViewError;
diff --git a/ts/features/payments/onboarding/utils/index.ts b/ts/features/payments/onboarding/utils/index.ts
index 73e1eea3cb8..b5e3a46516d 100644
--- a/ts/features/payments/onboarding/utils/index.ts
+++ b/ts/features/payments/onboarding/utils/index.ts
@@ -1,77 +1,3 @@
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import { IOPictograms } from "@pagopa/io-app-design-system";
-
-import URLParse from "url-parse";
-import {
-  OnboardingWebViewError,
-  OnboardingOutcome,
-  OnboardingOutcomeEnum,
-  OnboardingOutcomeFailure,
-  OnboardingResult,
-  OnboardingStatus
-} from "../types";
-import { isStringNullyOrEmpty } from "../../../../utils/strings";
-
-// List of outcomes that are considered successful
-export const successOutcomes: ReadonlyArray<OnboardingOutcome> = ["0"];
-
 export const ONBOARDING_FAQ_ENABLE_3DS = "https://io.italia.it/faq/#n3_3";
-
 export const ONBOARDING_CALLBACK_URL_SCHEMA = "iowallet";
-
 export const ONBOARDING_OUTCOME_PATH = "/wallets/outcomes";
-
-export const ONBOARDING_OUTCOME_ERROR_PICTOGRAM: Record<
-  OnboardingOutcomeFailure,
-  IOPictograms
-> = {
-  [OnboardingOutcomeEnum.GENERIC_ERROR]: "umbrellaNew",
-  [OnboardingOutcomeEnum.AUTH_ERROR]: "accessDenied",
-  [OnboardingOutcomeEnum.TIMEOUT]: "time",
-  [OnboardingOutcomeEnum.CANCELED_BY_USER]: "trash",
-  [OnboardingOutcomeEnum.INVALID_SESSION]: "umbrellaNew",
-  [OnboardingOutcomeEnum.ALREADY_ONBOARDED]: "success",
-  [OnboardingOutcomeEnum.BPAY_NOT_FOUND]: "attention"
-};
-
-/**
- * Function to get the onboarding status from the given outcome
- * @param outcome outcome to get the status from
- * @returns the status of the onboarding
- */
-export const getOutcomeStatus = (
-  outcome: OnboardingOutcome
-): OnboardingStatus =>
-  successOutcomes.includes(outcome) ? "SUCCESS" : "FAILURE";
-
-/**
- * Function to extract the onboarding result from the url of the webview
- * It will return a {@link OnboardingWebViewError} if the url is not from the onboarding result page
- * @param url url to extract the onboarding result from
- * @returns an {@link OnboardingResult}
- */
-export const extractOnboardingResult = (url: string): OnboardingResult =>
-  pipe(
-    new URLParse(url, true),
-    O.fromPredicate(urlParse =>
-      urlParse.pathname.includes(ONBOARDING_OUTCOME_PATH)
-    ),
-    O.map(urlParse => ({
-      outcome: urlParse.query.outcome as OnboardingOutcome,
-      walletId: urlParse.query.walletId as string
-    })),
-    O.filter(result => !isStringNullyOrEmpty(result.outcome)),
-    O.map(result => ({
-      status: getOutcomeStatus(result.outcome),
-      outcome: result.outcome as OnboardingOutcomeFailure,
-      walletId: result.walletId
-    })),
-    O.getOrElseW(
-      () =>
-        ({
-          status: "ERROR",
-          outcome: OnboardingOutcomeEnum.GENERIC_ERROR
-        } as OnboardingWebViewError)
-    )
-  );