diff --git a/locales/en/index.yml b/locales/en/index.yml index 5ac2ba01db0..a256763df50 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -63,6 +63,7 @@ global: exit: Exit saveSelection: Save the selection search: Search + skip: "Skip" navigator: messages: messages wallet: payments @@ -1553,8 +1554,11 @@ bonus: loadingActivateBpd: title: "We are activating the cashback" body: "Please wait." + noPaymentMethod: + title: "Add at least one payment method" + body: "To start collecting points you have to add your favorite electronic payment methods to IO: today credit cards, prepaid, rechargeable cards, debit cards, bancomat and apps and other digital tools are supported.\n\n + In the future, cashback will support other tools: you can add new payment methods to IO whenever you want and activate the collection of points on each!" iban: - skip: "Skip" iban: "IBAN" edit: "Change IBAN" insertion: diff --git a/locales/it/index.yml b/locales/it/index.yml index 3a502df4722..713d8951874 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -63,6 +63,7 @@ global: exit: Esci saveSelection: Salva la selezione search: Ricerca + skip: "Salta" navigator: messages: messaggi wallet: pagamenti @@ -1585,8 +1586,11 @@ bonus: loadingActivateBpd: title: "Stiamo attivando il cashback" body: "Ti preghiamo di attendere." + noPaymentMethod: + title: "Aggiungi almeno un metodo di pagamento" + body: "Per inziare a raccogliere punti devi aggiungere su IO i tuoi metodi di pagamento elettronico preferiti: oggi sono supportate carte di credito, prepagate, ricaricabili, carte di debito, Bancomat e app e altri strumenti digitali.\n\n + In futuro il cashback supporterà altri strumenti: potrai aggiungere quando vuoi nuovi metodi di pagamento su IO e attivare su ciascuno la raccolta dei punti!" iban: - skip: "Salta" iban: "IBAN" edit: "Modifica IBAN" insertion: diff --git a/ts/features/bonus/bpd/navigation/navigator.ts b/ts/features/bonus/bpd/navigation/navigator.ts index 220f481ca5a..220ef38d6b7 100644 --- a/ts/features/bonus/bpd/navigation/navigator.ts +++ b/ts/features/bonus/bpd/navigation/navigator.ts @@ -5,7 +5,7 @@ import DeclarationScreen from "../screens/onboarding/declaration/DeclarationScre import { EnrollPaymentMethodsScreen } from "../screens/onboarding/EnrollPaymentMethodsScreen"; import LoadActivateBpdScreen from "../screens/onboarding/LoadActivateBpdScreen"; import LoadBpdActivationStatus from "../screens/onboarding/LoadBpdActivationStatus"; -import { NoPaymentMethodsAvailableScreen } from "../screens/onboarding/NoPaymentMethodsAvailableScreen"; +import NoPaymentMethodsAvailableScreen from "../screens/onboarding/NoPaymentMethodsAvailableScreen"; import BPD_ROUTES from "./routes"; const BpdNavigator = createStackNavigator( diff --git a/ts/features/bonus/bpd/saga/orchestration/insertIban.ts b/ts/features/bonus/bpd/saga/orchestration/insertIban.ts index bb314053ed8..0c4c355bed5 100644 --- a/ts/features/bonus/bpd/saga/orchestration/insertIban.ts +++ b/ts/features/bonus/bpd/saga/orchestration/insertIban.ts @@ -5,7 +5,7 @@ import { ActionType, getType, isActionOf } from "typesafe-actions"; import { navigationHistoryPop } from "../../../../../store/actions/navigationHistory"; import { navigationCurrentRouteSelector } from "../../../../../store/reducers/navigation"; import { navigateToBpdIbanInsertion } from "../../navigation/action/iban"; -import { navigateToBpdOnboardingEnrollPaymentMethod } from "../../navigation/action/onboarding"; +import { navigateToBpdOnboardingNoPaymentMethods } from "../../navigation/action/onboarding"; import BPD_ROUTES from "../../navigation/routes"; import { bpdIbanInsertionCancel, @@ -17,7 +17,7 @@ import { isBpdOnboardingOngoing } from "../../store/reducers/onboarding/ongoing" // which screen to display, (the user already have payment methods or not) export const chooseContinueAction = (isOnboarding: boolean) => isOnboarding - ? navigateToBpdOnboardingEnrollPaymentMethod + ? navigateToBpdOnboardingNoPaymentMethods : NavigationActions.back; export const isMainScreen = (screenName: string) => @@ -51,7 +51,7 @@ export function* bpdIbanInsertionWorker() { yield put(NavigationActions.back()); } else { if (onboardingOngoing) { - yield put(navigateToBpdOnboardingEnrollPaymentMethod()); + yield put(navigateToBpdOnboardingNoPaymentMethods()); navigationHistoryPop(1); } else { yield put(NavigationActions.back()); diff --git a/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx b/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx index 121ccaa467a..60152751e28 100644 --- a/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx +++ b/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx @@ -27,7 +27,7 @@ const loadLocales = () => ({ body1: I18n.t("bonus.bpd.iban.insertion.body1"), body2: I18n.t("bonus.bpd.iban.insertion.body2"), ibanDescription: I18n.t("bonus.bpd.iban.iban"), - skip: I18n.t("bonus.bpd.iban.skip") + skip: I18n.t("global.buttons.skip") }); export const IbanInsertionComponent: React.FunctionComponent = props => { diff --git a/ts/features/bonus/bpd/screens/onboarding/NoPaymentMethodsAvailableScreen.tsx b/ts/features/bonus/bpd/screens/onboarding/NoPaymentMethodsAvailableScreen.tsx index af84762f416..205d562f664 100644 --- a/ts/features/bonus/bpd/screens/onboarding/NoPaymentMethodsAvailableScreen.tsx +++ b/ts/features/bonus/bpd/screens/onboarding/NoPaymentMethodsAvailableScreen.tsx @@ -1,10 +1,57 @@ +import { View } from "native-base"; import * as React from "react"; -import { View } from "react-native"; - -/** - * This screen warns the user that he does not have any payment method already present on which it is - * possible to activate the bpd and invites him to add a new one. - */ -export const NoPaymentMethodsAvailableScreen: React.FunctionComponent = () => ( - -); +import { SafeAreaView } from "react-native"; +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 { navigateToWalletHome } from "../../../../../store/actions/navigation"; +import { GlobalState } from "../../../../../store/reducers/types"; +import { FooterTwoButtons } from "../../../bonusVacanze/components/markdown/FooterTwoButtons"; + +export type Props = ReturnType & + ReturnType; + +const loadLocales = () => ({ + headerTitle: I18n.t("bonus.bpd.title"), + skip: I18n.t("global.buttons.skip"), + addMethod: I18n.t("wallet.newPaymentMethod.addButton"), + title: I18n.t("bonus.bpd.onboarding.noPaymentMethod.title"), + body: I18n.t("bonus.bpd.onboarding.noPaymentMethod.body") +}); + +const NoPaymentMethodsAvailableScreen: React.FunctionComponent = props => { + const { headerTitle, skip, addMethod, title, body } = loadLocales(); + return ( + + + + +

{title}

+ + {body} + + +
+
+ ); +}; + +const mapDispatchToProps = (dispatch: Dispatch) => ({ + skip: () => dispatch(navigateToWalletHome()) +}); + +const mapStateToProps = (_: GlobalState) => ({}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(NoPaymentMethodsAvailableScreen);