-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: [IOBP-438] Add abort dialog for payment flow (#5379)
## Short description This PR adds an abort dialog to exit the payment flow. The dialog is displayed only if the user has already created a transaction (and locked the debt position) and, if the user confirms he wants to exit the payment flow, the transaction is deleted and the debt position unlocked. ## List of changes proposed in this pull request - Added required locale keys - Added `useWalletPaymentGoBackHandler` hook, which handles the dialog logic - Added reducer and saga to handle transaction cancellation - Fixed an issue with the header in `WalletPaymentDetailScreen` ## How to test Using the io-dev-api-server, navigate to the Wallet Payment playground and start a new payment flow. Check that the dialog is displayed only before a transaction is created (3rd step). ## Preview https://github.com/pagopa/io-app/assets/6160324/7f6f66e8-92f0-4581-a38a-97f10634a3ba --------- Co-authored-by: Alessandro Izzo <[email protected]>
- Loading branch information
Showing
11 changed files
with
210 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
ts/features/walletV3/payment/hooks/useWalletPaymentGoBackHandler.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import * as pot from "@pagopa/ts-commons/lib/pot"; | ||
| import { useNavigation } from "@react-navigation/native"; | ||
| import { Alert } from "react-native"; | ||
| import I18n from "../../../../i18n"; | ||
| import { | ||
| AppParamsList, | ||
| IOStackNavigationProp | ||
| } from "../../../../navigation/params/AppParamsList"; | ||
| import { useIODispatch, useIOSelector } from "../../../../store/hooks"; | ||
| import { walletPaymentDeleteTransaction } from "../store/actions/networking"; | ||
| import { walletPaymentTransactionSelector } from "../store/selectors"; | ||
| import { WalletPaymentRoutes } from "../navigation/routes"; | ||
| import { WalletPaymentOutcomeEnum } from "../types/PaymentOutcomeEnum"; | ||
|
|
||
| const useWalletPaymentGoBackHandler = () => { | ||
| const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>(); | ||
| const transactionPot = useIOSelector(walletPaymentTransactionSelector); | ||
| const dispatch = useIODispatch(); | ||
|
|
||
| if (pot.isLoading(transactionPot)) { | ||
| // If transaction is pending cancellation we block every interaction with the back button | ||
| return () => undefined; | ||
| } | ||
|
|
||
| // If we have a transaction in the store means that the user has already locked the debt position. | ||
| // Before leaving the payment flow we must ask to the user if he is sure he wants to proceed and | ||
| // then unlock the debt position by deleting the transaction | ||
| if (pot.isSome(transactionPot)) { | ||
| const { transactionId } = transactionPot.value; | ||
|
|
||
| const handleConfirmAbort = () => { | ||
| dispatch(walletPaymentDeleteTransaction.request(transactionId)); | ||
| navigation.push(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, { | ||
| screen: WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME, | ||
| params: { | ||
| outcome: WalletPaymentOutcomeEnum.CANCELED_BY_USER | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| return () => { | ||
| Alert.alert(I18n.t("wallet.payment.abortDialog.title"), undefined, [ | ||
| { | ||
| text: I18n.t("wallet.payment.abortDialog.confirm"), | ||
| style: "destructive", | ||
| onPress: handleConfirmAbort | ||
| }, | ||
| { | ||
| text: I18n.t("wallet.payment.abortDialog.cancel"), | ||
| style: "cancel" | ||
| } | ||
| ]); | ||
| }; | ||
| } | ||
|
|
||
| // If there is no transaction stored then we can return undefined (no handler) | ||
| return undefined; | ||
| }; | ||
|
|
||
| export { useWalletPaymentGoBackHandler }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
ts/features/walletV3/payment/saga/networking/handleWalletPaymentDeleteTransaction.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import * as E from "fp-ts/lib/Either"; | ||
| import { pipe } from "fp-ts/lib/function"; | ||
| import { call, put } from "typed-redux-saga/macro"; | ||
| import { ActionType } from "typesafe-actions"; | ||
| import { SagaCallReturnType } from "../../../../../types/utils"; | ||
| import { getGenericError, getNetworkError } from "../../../../../utils/errors"; | ||
| import { readablePrivacyReport } from "../../../../../utils/reporters"; | ||
| import { withRefreshApiCall } from "../../../../fastLogin/saga/utils"; | ||
| import { PaymentClient } from "../../api/client"; | ||
| import { walletPaymentDeleteTransaction } from "../../store/actions/networking"; | ||
|
|
||
| export function* handleWalletPaymentDeleteTransaction( | ||
| requestTransactionUserCancellation: PaymentClient["requestTransactionUserCancellation"], | ||
| action: ActionType<(typeof walletPaymentDeleteTransaction)["request"]> | ||
| ) { | ||
| const requestTransactionUserCancellationRequest = | ||
| requestTransactionUserCancellation({ | ||
| transactionId: action.payload | ||
| }); | ||
|
|
||
| try { | ||
| const requestTransactionUserCancellationResult = (yield* call( | ||
| withRefreshApiCall, | ||
| requestTransactionUserCancellationRequest, | ||
| action | ||
| )) as unknown as SagaCallReturnType< | ||
| typeof requestTransactionUserCancellation | ||
| >; | ||
|
|
||
| yield* put( | ||
| pipe( | ||
| requestTransactionUserCancellationResult, | ||
| E.fold( | ||
| error => | ||
| walletPaymentDeleteTransaction.failure({ | ||
| ...getGenericError(new Error(readablePrivacyReport(error))) | ||
| }), | ||
|
|
||
| res => { | ||
| if (res.status === 202) { | ||
| return walletPaymentDeleteTransaction.success(); | ||
| } | ||
| return walletPaymentDeleteTransaction.failure({ | ||
| ...getGenericError(new Error(`Error: ${res.status}`)) | ||
| }); | ||
| } | ||
| ) | ||
| ) | ||
| ); | ||
| } catch (e) { | ||
| yield* put( | ||
| walletPaymentDeleteTransaction.failure({ ...getNetworkError(e) }) | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.