Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: [IOBP-316] Add return to origin page after payment flow completion #5399

Merged
merged 20 commits into from
Jan 24, 2024
Merged

chore: [IOBP-316] Add return to origin page after payment flow completion #5399

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
180dfb2
Merge remote-tracking branch 'origin/master' into IOBP-316-resume-sta…
Hantex9 Jan 12, 2024
083a3e8
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 15, 2024
3cc0b68
feat: Add return to origin page after payment flow completion
Hantex9 Jan 15, 2024
4f90967
chore: added popToTop before to navigate
Hantex9 Jan 15, 2024
f9f8912
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 15, 2024
2102d66
chore: added sub-route handling navigation
Hantex9 Jan 15, 2024
3bfd87d
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 15, 2024
832a611
chore: changed orchestration to get current route when starting payme…
Hantex9 Jan 15, 2024
7a0f24a
typo: route name
Hantex9 Jan 15, 2024
29e02b6
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 16, 2024
34fbc2b
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 17, 2024
0c4e545
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 17, 2024
8890b61
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 19, 2024
46229af
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 22, 2024
1c7a0e3
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 22, 2024
1e9b038
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 23, 2024
9db9856
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
mastro993 Jan 23, 2024
5ca24f7
chore: addressed review feedback
Hantex9 Jan 23, 2024
e963a35
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 24, 2024
eea52e1
Merge branch 'master' into IOBP-316-resume-start-point-after-payment
Hantex9 Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -38,6 +41,7 @@ const WalletPaymentOutcomeScreen = () => {

const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
const paymentDetailsPot = useIOSelector(walletPaymentDetailsSelector);
const paymentStartRoute = useIOSelector(walletPaymentStartRouteSelector);

const supportModal = usePaymentFailureSupportModal({
outcome
Expand All @@ -56,6 +60,10 @@ const WalletPaymentOutcomeScreen = () => {

const handleClose = () => {
navigation.popToTop();
if (paymentStartRoute) {
navigation.navigate(paymentStartRoute);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if I need to navigate to a sub-route?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, in this way, we cannot handle a sub-route. I changed the implementation and now the action walletPaymentInitState accepts an object with the root navigator and screen param. In this way, it's possible to navigate anywhere after the payment flow closes.

What do you think? 2102d66

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the best way is to save all the current route info, like we are currently doing in the payment sagas:

    const currentRouteName = NavigationService.getCurrentRouteName();
    const currentRouteKey = NavigationService.getCurrentRouteKey();
    if (currentRouteName !== undefined && currentRouteKey !== undefined) {
      yield* put(
        paymentInitializeEntrypointRoute({
          name: currentRouteName,
          key: currentRouteKey
        })
      );
    }

In this way we will be able to save the information on the route directly within the saga and not from the component that starts the payment flow.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like it, this is way better! Addressed into 832a611

return;
}
navigation.pop();
};

Expand Down
14 changes: 12 additions & 2 deletions ts/features/walletV3/payment/store/actions/orchestration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { ActionType, createStandardAction } from "typesafe-actions";
import { Bundle } from "../../../../../../definitions/pagopa/ecommerce/Bundle";
import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo";
import { AppParamsList } from "../../../../../navigation/params/AppParamsList";

/**
* 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"
)();
)<keyof AppParamsList | undefined>();

export const walletPaymentPickPaymentMethod = createStandardAction(
"WALLET_PAYMENT_PICK_PAYMENT_METHOD"
Expand All @@ -18,8 +23,13 @@ export const walletPaymentResetPickedPsp = createStandardAction(
"WALLET_PAYMENT_RESET_PICKED_PSP"
)();

export const walletPaymentBackState = createStandardAction(
"WALLET_PAYMENT_BACK_STATE"
)();

export type WalletPaymentOrchestrationActions =
| ActionType<typeof walletPaymentInitState>
| ActionType<typeof walletPaymentPickPaymentMethod>
| ActionType<typeof walletPaymentPickPsp>
| ActionType<typeof walletPaymentResetPickedPsp>;
| ActionType<typeof walletPaymentResetPickedPsp>
| ActionType<typeof walletPaymentBackState>;
7 changes: 6 additions & 1 deletion ts/features/walletV3/payment/store/reducers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo";
import { WalletPaymentFailure } from "../../types/failure";
import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId";
import { AppParamsList } from "../../../../../navigation/params/AppParamsList";

export type WalletPaymentState = {
rptId?: RptId;
Expand All @@ -44,6 +45,7 @@ export type WalletPaymentState = {
NetworkError | WalletPaymentFailure
>;
authorizationUrl: pot.Pot<string, NetworkError>;
startRoute?: keyof AppParamsList;
};

const INITIAL_STATE: WalletPaymentState = {
Expand All @@ -64,7 +66,10 @@ const reducer = (
): WalletPaymentState => {
switch (action.type) {
case getType(walletPaymentInitState):
return INITIAL_STATE;
return {
...INITIAL_STATE,
startRoute: action.payload
};

// Payment verification and details
case getType(walletPaymentGetDetails.request):
Expand Down
5 changes: 5 additions & 0 deletions ts/features/walletV3/payment/store/selectors/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,3 +76,8 @@ export const walletPaymentAuthorizationUrlSelector = createSelector(
selectWalletPayment,
state => state.authorizationUrl
);

export const walletPaymentStartRouteSelector = createSelector(
selectWalletPayment,
state => state.startRoute
);
5 changes: 3 additions & 2 deletions ts/screens/profile/playgrounds/WalletPlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable sonarjs/no-identical-functions */
import { Divider, ListItemNav, VSpacer } from "@pagopa/io-app-design-system";
import { useNavigation } from "@react-navigation/native";
import { useNavigation, useRoute } from "@react-navigation/native";
import React from "react";
import { ScrollView } from "react-native";
import { RptId } from "../../../../definitions/pagopa/ecommerce/RptId";
Expand All @@ -20,6 +20,7 @@ import { useIODispatch } from "../../../store/hooks";
const WalletPlayground = () => {
const dispatch = useIODispatch();
const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
const route = useRoute();

const navigateToWalletOnboarding = () => {
navigation.navigate(WalletOnboardingRoutes.WALLET_ONBOARDING_MAIN, {
Expand All @@ -28,7 +29,7 @@ const WalletPlayground = () => {
};

const navigateToWalletPayment = () => {
dispatch(walletPaymentInitState());
dispatch(walletPaymentInitState(route.name as keyof AppParamsList));
navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
screen: WalletPaymentRoutes.WALLET_PAYMENT_DETAIL,
params: {
Expand Down