[IOBP-518, IOBP-519] Handle payment dismissal after authorization req…

…uest (#5423) Depends on #5419 ## Short description This PR add the handling of payment dismissal after payment authorization request ## List of changes proposed in this pull request - Added `onDismiss` in `useWalletPaymentAuthorizationModal` hook - Added outcome screen navigation on authorization dismissal ## How to test Start a new payment flow from **Profile > Playgrounds > New Wallet > Payment**, dismiss the authorization webview in the last step and check that the payment is correctly cancelled. ## Previews https://github.com/pagopa/io-app/assets/6160324/09a9ee38-3134-4053-8b4b-e5b6aa08b6ee --------- Co-authored-by: Alessandro Izzo <[email protected]> Co-authored-by: Alessandro Izzo <[email protected]>
pagopa · Jan 25, 2024 · e374369 · e374369
1 parent 295b838
commit e374369
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/ts/features/walletV3/payment/hooks/useWalletPaymentAuthorizationModal.tsx b/ts/features/walletV3/payment/hooks/useWalletPaymentAuthorizationModal.tsx
@@ -19,6 +19,7 @@ import {
 
 type Props = {
   onAuthorizationOutcome: (outcome: WalletPaymentOutcome) => void;
+  onDismiss: () => void;
 };
 
 export type WalletPaymentAuthorizationModal = {
@@ -29,7 +30,8 @@ export type WalletPaymentAuthorizationModal = {
 };
 
 export const useWalletPaymentAuthorizationModal = ({
-  onAuthorizationOutcome
+  onAuthorizationOutcome,
+  onDismiss
 }: Props): WalletPaymentAuthorizationModal => {
   const dispatch = useIODispatch();
   const authorizationUrlPot = useIOSelector(
@@ -73,6 +75,7 @@ export const useWalletPaymentAuthorizationModal = ({
             );
           },
           () => {
+            onDismiss();
             dispatch(walletPaymentAuthorization.cancel());
             setIsPendingAuthorization(false);
           }
@@ -86,6 +89,7 @@ export const useWalletPaymentAuthorizationModal = ({
     isPendingAuthorization,
     authorizationUrlPot,
     handleAuthorizationResult,
+    onDismiss,
     dispatch
   ]);
 

diff --git a/ts/features/walletV3/payment/screens/WalletPaymentConfirmScreen.tsx b/ts/features/walletV3/payment/screens/WalletPaymentConfirmScreen.tsx
@@ -29,7 +29,10 @@ import {
   walletPaymentPickedPspSelector,
   walletPaymentTransactionSelector
 } from "../store/selectors";
-import { WalletPaymentOutcome } from "../types/PaymentOutcomeEnum";
+import {
+  WalletPaymentOutcome,
+  WalletPaymentOutcomeEnum
+} from "../types/PaymentOutcomeEnum";
 
 const WalletPaymentConfirmScreen = () => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
@@ -67,31 +70,37 @@ const WalletPaymentConfirmScreen = () => {
       )
     );
 
-  const handleAuthorizationOutcome = (outcome: WalletPaymentOutcome) => {
-    navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-      screen: WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME,
-      params: {
-        outcome
-      }
-    });
-  };
+  const handleAuthorizationOutcome = React.useCallback(
+    (outcome: WalletPaymentOutcome) => {
+      navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
+        screen: WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME,
+        params: {
+          outcome
+        }
+      });
+    },
+    [navigation]
+  );
 
   const {
     isLoading: isAuthUrlLoading,
     isError: isAuthUrlError,
     isPendingAuthorization,
     startPaymentAuthorizaton
   } = useWalletPaymentAuthorizationModal({
-    onAuthorizationOutcome: handleAuthorizationOutcome
+    onAuthorizationOutcome: handleAuthorizationOutcome,
+    onDismiss: () =>
+      handleAuthorizationOutcome(WalletPaymentOutcomeEnum.CANCELED_BY_USER)
   });
 
   const isLoading = isAuthUrlLoading || isPendingAuthorization;
   const isError = isAuthUrlError;
 
-  if (isError) {
-    // TODO: Failure handling (https://pagopa.atlassian.net/browse/IOBP-471)
-    return <></>;
-  }
+  React.useEffect(() => {
+    if (isError) {
+      handleAuthorizationOutcome(WalletPaymentOutcomeEnum.GENERIC_ERROR);
+    }
+  }, [isError, handleAuthorizationOutcome]);
 
   const LoadingContent = () => (
     <SafeAreaView style={styles.loadingContainer}>

diff --git a/ts/features/walletV3/payment/screens/WalletPaymentPickPspScreen.tsx b/ts/features/walletV3/payment/screens/WalletPaymentPickPspScreen.tsx
@@ -100,6 +100,7 @@ const WalletPaymentPickPspScreen = () => {
           dispatch(
             walletPaymentCalculateFees.request({
               paymentMethodId: selectedWallet.paymentMethodId,
+              walletId: selectedWallet.walletId,
               paymentAmount: paymentAmountInCents,
               transferList
             })