diff --git a/ts/features/wallet/onboarding/bancomat/navigation/action.ts b/ts/features/wallet/onboarding/bancomat/navigation/action.ts index 43bc8d858eb..8bf210d342a 100644 --- a/ts/features/wallet/onboarding/bancomat/navigation/action.ts +++ b/ts/features/wallet/onboarding/bancomat/navigation/action.ts @@ -1,4 +1,6 @@ import { NavigationActions } from "react-navigation"; +import { InferNavigationParams } from "../../../../../types/react"; +import { ActivateBpdOnNewCreditCardScreen } from "../screens/bpd/ActivateBpdOnNewCreditCardScreen"; import WALLET_ONBOARDING_BANCOMAT_ROUTES from "./routes"; export const navigateToOnboardingBancomatChooseBank = () => @@ -25,3 +27,11 @@ export const navigateToActivateBpdOnNewBancomat = () => NavigationActions.navigate({ routeName: WALLET_ONBOARDING_BANCOMAT_ROUTES.ACTIVATE_BPD_NEW_BANCOMAT }); + +export const navigateToActivateBpdOnNewCreditCard = ( + params: InferNavigationParams +) => + NavigationActions.navigate({ + routeName: WALLET_ONBOARDING_BANCOMAT_ROUTES.ACTIVATE_BPD_NEW_CREDIT_CARD, + params + }); diff --git a/ts/features/wallet/onboarding/bancomat/navigation/navigator.ts b/ts/features/wallet/onboarding/bancomat/navigation/navigator.ts index be29dc9626b..46e521ef39a 100644 --- a/ts/features/wallet/onboarding/bancomat/navigation/navigator.ts +++ b/ts/features/wallet/onboarding/bancomat/navigation/navigator.ts @@ -1,8 +1,9 @@ import { createStackNavigator } from "react-navigation"; -import ActivateBpdOnNewBancomatScreen from "../screens/bpd/ActivateBpdOnNewBancomatScreen"; import SuggestBpdActivationScreen from "../screens/bpd/SuggestBpdActivationScreen"; import SearchBankScreen from "../screens/search/SearchBankScreen"; import SearchAvailableUserBancomatScreen from "../screens/searchBancomat/SearchAvailableUserBancomatScreen"; +import { ActivateBpdOnNewCreditCardScreen } from "../screens/bpd/ActivateBpdOnNewCreditCardScreen"; +import ActivateBpdOnNewBancomatScreen from "../screens/bpd/ActivateBpdOnNewBancomatScreen"; import WALLET_ONBOARDING_BANCOMAT_ROUTES from "./routes"; const PaymentMethodOnboardingBancomatNavigator = createStackNavigator( @@ -18,6 +19,9 @@ const PaymentMethodOnboardingBancomatNavigator = createStackNavigator( }, [WALLET_ONBOARDING_BANCOMAT_ROUTES.ACTIVATE_BPD_NEW_BANCOMAT]: { screen: ActivateBpdOnNewBancomatScreen + }, + [WALLET_ONBOARDING_BANCOMAT_ROUTES.ACTIVATE_BPD_NEW_CREDIT_CARD]: { + screen: ActivateBpdOnNewCreditCardScreen } }, { diff --git a/ts/features/wallet/onboarding/bancomat/navigation/routes.ts b/ts/features/wallet/onboarding/bancomat/navigation/routes.ts index b5c5186c295..e2b25ba2b5d 100644 --- a/ts/features/wallet/onboarding/bancomat/navigation/routes.ts +++ b/ts/features/wallet/onboarding/bancomat/navigation/routes.ts @@ -7,7 +7,8 @@ const WALLET_ONBOARDING_BANCOMAT_ROUTES = { ADD_BANCOMAT: "WALLET_ONBOARDING_BANCOMAT_ADD", SUGGEST_BPD_ACTIVATION: "WALLET_ONBOARDING_BANCOMAT_SUGGEST_BPD_ACTIVATION", - ACTIVATE_BPD_NEW_BANCOMAT: "WALLET_ONBOARDING_BANCOMAT_ACTIVATE_BPD_NEW" + ACTIVATE_BPD_NEW_BANCOMAT: "WALLET_ONBOARDING_BANCOMAT_ACTIVATE_BPD_NEW", + ACTIVATE_BPD_NEW_CREDIT_CARD: "WALLET_ONBOARDING_CREDIT_CARD_ACTIVATE_BPD_NEW" }; export default WALLET_ONBOARDING_BANCOMAT_ROUTES; diff --git a/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewBancomatScreen.tsx b/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewBancomatScreen.tsx index c2dd1806acf..39074127120 100644 --- a/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewBancomatScreen.tsx +++ b/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewBancomatScreen.tsx @@ -1,70 +1,15 @@ -import { View } from "native-base"; import * as React from "react"; -import { SafeAreaView, ScrollView } from "react-native"; -import { NavigationActions } from "react-navigation"; import { connect } from "react-redux"; -import { Dispatch } from "redux"; -import { Body } from "../../../../../../components/core/typography/Body"; -import { H1 } from "../../../../../../components/core/typography/H1"; -import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; -import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent"; -import I18n from "../../../../../../i18n"; -import { GlobalState } from "../../../../../../store/reducers/types"; -import { FooterTwoButtons } from "../../../../../bonus/bonusVacanze/components/markdown/FooterTwoButtons"; -import { PaymentMethodRawList } from "../../../../../bonus/bpd/components/paymentMethodActivationToggle/list/PaymentMethodRawList"; import { onboardingBancomatAddedPansSelector } from "../../store/reducers/addedPans"; +import { GlobalState } from "../../../../../../store/reducers/types"; +import ActivateBpdOnNewPaymentMethodScreen from "./ActivateBpdOnNewPaymentMethodScreen"; +export type Props = ReturnType; -export type Props = ReturnType & - ReturnType; - -const loadLocales = () => ({ - headerTitle: I18n.t("wallet.onboarding.bancomat.headerTitle"), - title: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.title"), - body1: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.body1"), - body2: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.body2"), - skip: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.skip"), - continueStr: I18n.t("global.buttons.continue") -}); - -const ActivateBpdOnNewBancomatScreen: React.FunctionComponent = props => { - const { headerTitle, title, body1, body2, skip, continueStr } = loadLocales(); - return ( - - - - - -

{title}

- - {body1} - - - - {body2} - -
- - -
-
- ); -}; - -const mapDispatchToProps = (dispatch: Dispatch) => ({ - skip: () => dispatch(NavigationActions.back()) -}); +const ActivateBpdOnNewBancomatScreen: React.FC = (props: Props) => ( + +); const mapStateToProps = (state: GlobalState) => ({ newBancomat: onboardingBancomatAddedPansSelector(state) }); - -export default connect( - mapStateToProps, - mapDispatchToProps -)(ActivateBpdOnNewBancomatScreen); +export default connect(mapStateToProps)(ActivateBpdOnNewBancomatScreen); diff --git a/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewCreditCardScreen.tsx b/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewCreditCardScreen.tsx new file mode 100644 index 00000000000..8d926892006 --- /dev/null +++ b/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewCreditCardScreen.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import { NavigationScreenProps } from "react-navigation"; +import { PatchedWalletV2 } from "../../../../../../types/pagopa"; +import ActivateBpdOnNewPaymentMethodScreen from "./ActivateBpdOnNewPaymentMethodScreen"; + +type ActivateBpdOnNewCreditCardScreenNavigationParams = { + creditCards: ReadonlyArray; +}; +type Props = NavigationScreenProps< + ActivateBpdOnNewCreditCardScreenNavigationParams +>; + +export const ActivateBpdOnNewCreditCardScreen: React.FC = ( + props: Props +) => ( + +); diff --git a/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewPaymentMethodScreen.tsx b/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewPaymentMethodScreen.tsx new file mode 100644 index 00000000000..bbeda818b9e --- /dev/null +++ b/ts/features/wallet/onboarding/bancomat/screens/bpd/ActivateBpdOnNewPaymentMethodScreen.tsx @@ -0,0 +1,68 @@ +import { View } from "native-base"; +import * as React from "react"; +import { SafeAreaView, ScrollView } from "react-native"; +import { NavigationActions } from "react-navigation"; +import { connect } from "react-redux"; +import { Dispatch } from "redux"; +import { Body } from "../../../../../../components/core/typography/Body"; +import { H1 } from "../../../../../../components/core/typography/H1"; +import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; +import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent"; +import I18n from "../../../../../../i18n"; +import { FooterTwoButtons } from "../../../../../bonus/bonusVacanze/components/markdown/FooterTwoButtons"; +import { PaymentMethodRawList } from "../../../../../bonus/bpd/components/paymentMethodActivationToggle/list/PaymentMethodRawList"; +import { PatchedWalletV2 } from "../../../../../../types/pagopa"; + +type OwnProps = { + paymentMethods: ReadonlyArray; +}; + +export type Props = ReturnType & OwnProps; + +const loadLocales = () => ({ + headerTitle: I18n.t("wallet.onboarding.bancomat.headerTitle"), + title: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.title"), + body1: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.body1"), + body2: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.body2"), + skip: I18n.t("wallet.onboarding.bancomat.bpd.activateNew.skip"), + continueStr: I18n.t("global.buttons.continue") +}); + +const ActivateBpdOnNewPaymentMethodScreen: React.FunctionComponent = props => { + const { headerTitle, title, body1, body2, skip, continueStr } = loadLocales(); + return ( + + + + + +

{title}

+ + {body1} + + + + {body2} + +
+ + +
+
+ ); +}; + +const mapDispatchToProps = (dispatch: Dispatch) => ({ + skip: () => dispatch(NavigationActions.back()) +}); + +export default connect( + undefined, + mapDispatchToProps +)(ActivateBpdOnNewPaymentMethodScreen); diff --git a/ts/sagas/wallet.ts b/ts/sagas/wallet.ts index 52ac1c0c1e6..307ea2301de 100644 --- a/ts/sagas/wallet.ts +++ b/ts/sagas/wallet.ts @@ -95,6 +95,7 @@ import { isProfileEmailValidatedSelector } from "../store/reducers/profile"; import { GlobalState } from "../store/reducers/types"; import { + EnableableFunctionsTypeEnum, NullableWallet, PaymentManagerToken, PayRequest @@ -126,6 +127,14 @@ import { } from "./wallet/pagopaApis"; import { getTransactionsRead } from "../store/reducers/entities/readTransactions"; import _ from "lodash"; +import { hasFunctionEnabled } from "../utils/walletv2"; +import { bpdEnabledSelector } from "../features/bonus/bpd/store/reducers/details/activation"; +import { isReady } from "../features/bonus/bpd/model/RemoteValue"; +import { + navigateToActivateBpdOnNewCreditCard, + navigateToSuggestBpdActivation +} from "../features/wallet/onboarding/bancomat/navigation/action"; +import { navigationHistoryPop } from "../store/actions/navigationHistory"; /** * Configure the max number of retries and delay between retries when polling @@ -298,7 +307,38 @@ function* startOrResumeAddCreditCardSaga( const maybeAddedWallet = updatedWallets.find( _ => _.idWallet === idWallet ); + // if the new method has been added if (maybeAddedWallet !== undefined) { + const bpdEnroll: ReturnType = yield select( + bpdEnabledSelector + ); + // check if the new method is compliant with bpd + if (bpdEnabled && maybeAddedWallet.v2) { + const hasBpdFeature = hasFunctionEnabled( + maybeAddedWallet.v2, + EnableableFunctionsTypeEnum.BPD + ); + // if the method is bpd compliant check if we have info about bpd activation + if (hasBpdFeature && isReady(bpdEnroll)) { + // if bdp is active navigate to a screen where it asked to enroll that method in bpd + // otherwise navigate to a screen where is asked to join bpd + if (bpdEnroll.value) { + yield put( + navigateToActivateBpdOnNewCreditCard({ + creditCards: [maybeAddedWallet.v2] + }) + ); + } else { + yield put(navigateToSuggestBpdActivation()); + } + // remove these screens from the navigation stack: method choice, credit card form, credit card resume + // this pop could be easily break when this flow is entered by other points + // different from the current ones (i.e see https://www.pivotaltracker.com/story/show/175757212) + yield put(navigationHistoryPop(3)); + return; + } + } + // dispatch the action: a new card has been added yield put(addWalletNewCreditCardSuccess()); if (action.payload.setAsFavorite === true) {