feat(Bonus Pagamenti Digitali): [#174863094] No payment methods available screen

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:

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:

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(

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());

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> = props => {

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 = () => (
-  <View />
-);
+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<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+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> = props => {
+  const { headerTitle, skip, addMethod, title, body } = loadLocales();
+  return (
+    <BaseScreenComponent goBack={false} headerTitle={headerTitle}>
+      <SafeAreaView style={IOStyles.flex}>
+        <View style={[IOStyles.horizontalContentPadding, IOStyles.flex]}>
+          <View spacer={true} large={true} />
+          <H1>{title}</H1>
+          <View spacer={true} large={true} />
+          <Body>{body}</Body>
+        </View>
+        <FooterTwoButtons
+          onRight={props.skip}
+          onCancel={props.skip}
+          rightText={addMethod}
+          leftText={skip}
+        />
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  skip: () => dispatch(navigateToWalletHome())
+});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NoPaymentMethodsAvailableScreen);