From 3e0f184820d5a0667984207f53863b5cfb044c07 Mon Sep 17 00:00:00 2001 From: Alessandro Izzo Date: Wed, 24 Jan 2024 10:11:50 +0100 Subject: [PATCH] chore: [IOBP-316] Add return to origin page after payment flow completion (#5399) ## Short description This PR implements a new feature that allows users to automatically navigate back to their origin page once they have completed (successfully or not) the payment process. This enhancement improves user experience by providing a seamless transition back to their initial context after finishing a transaction. ## List of changes proposed in this pull request - Added an additional argument into `walletPaymentInitState` action that expects an optional route name to go back to after the payment is completed/canceled. ## How to test - Start a new payment flow until you reach the end of it; - When you close the outcome message, you should be able to go back to the origin point that started the flow ## Preview https://github.com/pagopa/io-app/assets/34343582/c4a42ab0-8676-4a7a-8631-624c3a98191a --------- Co-authored-by: Federico Mastrini --- .../screens/WalletPaymentOutcomeScreen.tsx | 12 ++++++++- .../payment/store/actions/orchestration.ts | 4 +++ .../walletV3/payment/store/reducers/index.ts | 25 ++++++++++++++++++- .../walletV3/payment/store/selectors/index.ts | 5 ++++ 4 files changed, 44 insertions(+), 2 deletions(-) diff --git a/ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx b/ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx index ae321c1e63e..6654b6bb063 100644 --- a/ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx +++ b/ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx @@ -17,7 +17,10 @@ import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder"; import { WalletPaymentFeebackBanner } from "../components/WalletPaymentFeedbackBanner"; import { usePaymentFailureSupportModal } from "../hooks/usePaymentFailureSupportModal"; import { WalletPaymentParamsList } from "../navigation/params"; -import { walletPaymentDetailsSelector } from "../store/selectors"; +import { + walletPaymentDetailsSelector, + walletPaymentStartRouteSelector +} from "../store/selectors"; import { WalletPaymentOutcome, WalletPaymentOutcomeEnum @@ -38,6 +41,7 @@ const WalletPaymentOutcomeScreen = () => { const navigation = useNavigation>(); const paymentDetailsPot = useIOSelector(walletPaymentDetailsSelector); + const paymentStartRoute = useIOSelector(walletPaymentStartRouteSelector); const supportModal = usePaymentFailureSupportModal({ outcome @@ -55,6 +59,12 @@ const WalletPaymentOutcomeScreen = () => { }; const handleClose = () => { + if (paymentStartRoute) { + navigation.navigate(paymentStartRoute.routeName, { + screen: paymentStartRoute.routeKey + }); + return; + } navigation.popToTop(); navigation.pop(); }; diff --git a/ts/features/walletV3/payment/store/actions/orchestration.ts b/ts/features/walletV3/payment/store/actions/orchestration.ts index c306089e00a..cba31c50fa9 100644 --- a/ts/features/walletV3/payment/store/actions/orchestration.ts +++ b/ts/features/walletV3/payment/store/actions/orchestration.ts @@ -2,6 +2,10 @@ import { ActionType, createStandardAction } from "typesafe-actions"; import { Bundle } from "../../../../../../definitions/pagopa/ecommerce/Bundle"; import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo"; +/** + * Action to initialize the state of a payment, optionally you can specify the route to go back to + * after the payment is completed or cancelled (default is the popToTop route) + */ export const walletPaymentInitState = createStandardAction( "WALLET_PAYMENT_INIT_STATE" )(); diff --git a/ts/features/walletV3/payment/store/reducers/index.ts b/ts/features/walletV3/payment/store/reducers/index.ts index d96dd69e5c9..036bb117b78 100644 --- a/ts/features/walletV3/payment/store/reducers/index.ts +++ b/ts/features/walletV3/payment/store/reducers/index.ts @@ -1,7 +1,10 @@ import _ from "lodash"; import * as pot from "@pagopa/ts-commons/lib/pot"; import * as O from "fp-ts/lib/Option"; +import { NavigatorScreenParams } from "@react-navigation/native"; import { getType } from "typesafe-actions"; +import { pipe } from "fp-ts/lib/function"; +import { sequenceS } from "fp-ts/lib/Apply"; import { Bundle } from "../../../../../../definitions/pagopa/ecommerce/Bundle"; import { NewTransactionResponse } from "../../../../../../definitions/pagopa/ecommerce/NewTransactionResponse"; import { PaymentRequestsGetResponse } from "../../../../../../definitions/pagopa/ecommerce/PaymentRequestsGetResponse"; @@ -27,6 +30,8 @@ import { import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo"; import { WalletPaymentFailure } from "../../types/failure"; import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId"; +import NavigationService from "../../../../../navigation/NavigationService"; +import { AppParamsList } from "../../../../../navigation/params/AppParamsList"; export type WalletPaymentState = { rptId?: RptId; @@ -44,6 +49,10 @@ export type WalletPaymentState = { NetworkError | WalletPaymentFailure >; authorizationUrl: pot.Pot; + startRoute?: { + routeName: keyof AppParamsList; + routeKey: keyof NavigatorScreenParams["screen"]; + }; }; const INITIAL_STATE: WalletPaymentState = { @@ -64,7 +73,21 @@ const reducer = ( ): WalletPaymentState => { switch (action.type) { case getType(walletPaymentInitState): - return INITIAL_STATE; + const startRoute = pipe( + sequenceS(O.Monad)({ + routeName: O.fromNullable( + NavigationService.getCurrentRouteName() as keyof AppParamsList + ), + routeKey: O.fromNullable( + NavigationService.getCurrentRouteKey() as keyof NavigatorScreenParams["screen"] + ) + }), + O.toUndefined + ); + return { + ...INITIAL_STATE, + startRoute + }; // Payment verification and details case getType(walletPaymentGetDetails.request): diff --git a/ts/features/walletV3/payment/store/selectors/index.ts b/ts/features/walletV3/payment/store/selectors/index.ts index 20afcaaf1b8..e122cb38c2f 100644 --- a/ts/features/walletV3/payment/store/selectors/index.ts +++ b/ts/features/walletV3/payment/store/selectors/index.ts @@ -76,3 +76,8 @@ export const walletPaymentAuthorizationUrlSelector = createSelector( selectWalletPayment, state => state.authorizationUrl ); + +export const walletPaymentStartRouteSelector = createSelector( + selectWalletPayment, + state => state.startRoute +);