pagopa · Undermaken · Oct 23, 2020 · Oct 9, 2020 · Oct 9, 2020 · Oct 12, 2020
@@ -65,6 +65,7 @@ global:
     saveSelection: Save the selection
     search: Search
     skip: "Skip"
+    add: Add
   navigator:
     messages: messages
     wallet: payments
@@ -636,13 +637,6 @@ wallet:
     bankName: Name of the bank
     noName: Name unavailable
     loading: Loading bank list...
-  addBancomat:
-    title: "Add bancomat {{current}} of {{length}}"
-    screenTitle: "Do you want to add this card?"
-    bodySingular: "We found 1 card headed to you. Proceed with the addition of this card by clicking Add or click Skip to cancel the operation."
-    bodyPlural: "We found {{number}} cards headed to you. Proceed with the addition of this card by clicking Add or click Skip to cancel the operation."
-    skip: Skip
-    add: Add
   accessibility:
     cardsPreview: Payment methods' preview. Activate to navigate to the the list of payment methods.
     transactionListItem:
@@ -662,6 +656,25 @@ wallet:
         chooseAnother: "Choose another bank"
       loadingSearch:
         title: "We are asking Bancomat for the list of your cards\n\nPlease wait"
+      add:
+        title: "Add bancomat {{current}} of {{length}}"
+        screenTitle: "Do you want to add this card?"
+        bodySingular: "We found 1 card headed to you. Proceed with the addition of this card by clicking Add or click Skip to cancel the operation."
+        bodyPlural: "We found {{number}} cards headed to you. Proceed with the addition of this card by clicking Add or click Skip to cancel the operation."
+        loading: "We are adding your PagoBANCOMAT card\n\nPlease wait a few seconds"
+      bpd:
+        suggestActivation:
+          title: "Do you want to activate Digital Payments Cashback?"
+          body: "You have added payment methods compatible with Cashback Digital Payments, the initiative promoted by the Presidency of the Council of Ministers to promote the use of electronic money.\n\n
+                 Each time you pay with one of the compatible electronic payment methods (cards, debit cards, apps, etc.), you will receive a partial refund based on your expense.\n\n
+                 Based on how many transnations you have accumulated, in each period, you can receive a cash prize of up to XXXX euros. "
+          skip: "No, thanks"
+          confirm: "Info and activation"
+        activateNew:
+          title: "Do you want to activate Digital Payments Cashback?"
+          body1: "Payments you make with these methods will receive cashback and compete for your ranking."
+          body2: "If you prefer, you can activate cashback on these methods at a later time as well."
+          skip: "Not now, thanks"
   alert:
     msgErrorUpdateApp: "An error occurred while opening the app store"
     titlePagoPaUpdateApp: Update required

@@ -65,6 +65,7 @@ global:
     saveSelection: Salva la selezione
     search: Ricerca
     skip: "Salta"
+    add: Aggiungi
   navigator:
     messages: messaggi
     wallet: pagamenti
@@ -657,13 +658,6 @@ wallet:
     bankName: Denominazione della banca
     noName: Nome non disponibile
     loading: Carico la lista delle banche...
-  addBancomat:
-    title: "Aggiungi bancomat {{current}} di {{length}}"
-    screenTitle: "Vuoi aggiungere questa carta?"
-    bodySingular: "Abbiamo trovato 1 carta a te intestata. Procedi con l'aggiunta di questa carta cliccando Aggiungi o clicca Salta per annullare l'operazione."
-    bodyPlural: "Abbiamo trovato {{number}} carte a te intestate. Procedi con l'aggiunta di questa carta cliccando Aggiungi o clicca Salta per passare alla carta successiva."
-    skip: Salta
-    add: Aggiungi
   accessibility:
     cardsPreview: Anteprima dei metodi di pagamento. Attiva per accedere alla lista dei tuoi metodi
     transactionListItem:
@@ -683,6 +677,25 @@ wallet:
         chooseAnother: "Scegli un'altra banca"
       loadingSearch:
         title: "Stiamo chiedendo a Bancomat la lista delle tue carte\n\nAttendi qualche secondo"
+      add:
+        title: "Aggiungi bancomat {{current}} di {{length}}"
+        screenTitle: "Vuoi aggiungere questa carta?"
+        bodySingular: "Abbiamo trovato 1 carta a te intestata. Procedi con l'aggiunta di questa carta cliccando Aggiungi o clicca Salta per annullare l'operazione."
+        bodyPlural: "Abbiamo trovato {{number}} carte a te intestate. Procedi con l'aggiunta di questa carta cliccando Aggiungi o clicca Salta per passare alla carta successiva."
+        loading: "Stiamo aggiungendo la tua carta PagoBANCOMAT\n\nAttendi qualche secondo"
+      bpd:
+        suggestActivation:
+          title: "Vuoi attivare il Cashback Pagamenti Digitali?"
+          body: "Hai aggiunto dei metodi di pagamento compatibili con il Cashback Pagamenti Digitali, l’iniziativa promossa dalla Presidenza del Consiglio dei Ministri per promuovere l’uso della moneta elettronica.\n\n
+                 Ogni volta che pagherai con uno dei metodi di pagamento elettronico compatibili (carte, bancomat, app, etc..), riceverai un riborso parziale  in base alla tua spesa.\n\n
+                 In base a quante trasnazioni avrai accumulato, in ciascuno periodo, potrai ricevere un premio in denaro fino a XXXX euro."
+          skip: "No, grazie"
+          confirm: "Info e attivazione"
+        activateNew:
+          title: "Vuoi attivare il Cashback Pagamenti Digitali?"
+          body1: "I pagamenti che farai con questi metodi riceveranno il cashback e concorreranno alla tua posizione in classifica."
+          body2: "Se preferisci, puoi attivare il cashback su questi metodi anche in un secondo momento."
+          skip: "Non ora, grazie"
   alert:
     msgErrorUpdateApp: "Si è verificato un errore durante l'apertura dello store delle app"
     titlePagoPaUpdateApp: Aggiornamento richiesto

@@ -1,12 +1,14 @@
 import * as React from "react";
 import { View } from "react-native";
+import { WalletV2 } from "../../../../../definitions/pagopa/bancomat/WalletV2";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import { Wallet } from "../../../../types/pagopa";
 import { HPan } from "../store/actions/paymentMethods";
 import PaymentMethodBpdToggle from "./paymentMethodActivationToggle/PaymentMethodBpdToggle";
 
 type Props = {
-  paymentList: ReadonlyArray<Wallet>;
+  // TODO: waiting for conversion to WalletV2
+  paymentList: ReadonlyArray<Wallet | WalletV2>;
 };
 
 /**
@@ -22,7 +24,7 @@ export const PaymentMethodBpdList: React.FunctionComponent<Props> = props => (
         key={pm.idWallet}
         // TODO: use hPan when available in v2 wallet
         // TODO: when v2 is available, extract the image and caption foreach different pm
-        hPan={pm.idWallet.toString() as HPan}
+        hPan={pm.idWallet?.toString() as HPan}
         // TODO: read from v2 wallet when ready
         hasBpdCapability={true}
       />

@@ -15,3 +15,13 @@ export const navigateToOnboardingBancomatAdd = () =>
   NavigationActions.navigate({
     routeName: WALLET_ONBOARDING_BANCOMAT_ROUTES.ADD_BANCOMAT
   });
+
+export const navigateToSuggestBpdActivation = () =>
+  NavigationActions.navigate({
+    routeName: WALLET_ONBOARDING_BANCOMAT_ROUTES.SUGGEST_BPD_ACTIVATION
+  });
+
+export const navigateToActivateBpdOnNewBancomat = () =>
+  NavigationActions.navigate({
+    routeName: WALLET_ONBOARDING_BANCOMAT_ROUTES.ACTIVATE_BPD_NEW_BANCOMAT
+  });
@@ -1,4 +1,6 @@
 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 WALLET_ONBOARDING_BANCOMAT_ROUTES from "./routes";
@@ -10,6 +12,12 @@ const PaymentMethodOnboardingBancomatNavigator = createStackNavigator(
     },
     [WALLET_ONBOARDING_BANCOMAT_ROUTES.SEARCH_AVAILABLE_USER_BANCOMAT]: {
       screen: SearchAvailableUserBancomatScreen
+    },
+    [WALLET_ONBOARDING_BANCOMAT_ROUTES.SUGGEST_BPD_ACTIVATION]: {
+      screen: SuggestBpdActivationScreen
+    },
+    [WALLET_ONBOARDING_BANCOMAT_ROUTES.ACTIVATE_BPD_NEW_BANCOMAT]: {
+      screen: ActivateBpdOnNewBancomatScreen
     }
   },
   {

@@ -5,7 +5,9 @@ const WALLET_ONBOARDING_BANCOMAT_ROUTES = {
   SEARCH_AVAILABLE_USER_BANCOMAT:
     "WALLET_ONBOARDING_BANCOMAT_SEARCH_AVAILABLE_USER_BANCOMAT",
 
-  ADD_BANCOMAT: "WALLET_ONBOARDING_BANCOMAT_ADD"
+  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"
 };
 
 export default WALLET_ONBOARDING_BANCOMAT_ROUTES;
@@ -1,18 +1,25 @@
-import { call, put } from "redux-saga/effects";
+import { NavigationActions } from "react-navigation";
+import { call, put, select } from "redux-saga/effects";
 import {
-  ESagaResult,
   executeWorkUnit,
   withResetNavigationStack
 } from "../../../../../../sagas/workUnit";
 import { navigateToWalletHome } from "../../../../../../store/actions/navigation";
+import { navigationCurrentRouteSelector } from "../../../../../../store/reducers/navigation";
 import { SagaCallReturnType } from "../../../../../../types/utils";
-import { navigateToOnboardingBancomatChooseBank } from "../../navigation/action";
+import { isBpdEnabled } from "../../../../../bonus/bpd/saga/orchestration/onboarding/startOnboarding";
+import {
+  navigateToActivateBpdOnNewBancomat,
+  navigateToOnboardingBancomatChooseBank,
+  navigateToSuggestBpdActivation
+} from "../../navigation/action";
 import WALLET_ONBOARDING_BANCOMAT_ROUTES from "../../navigation/routes";
 import {
   walletAddBancomatBack,
   walletAddBancomatCancel,
   walletAddBancomatCompleted
 } from "../../store/actions";
+import { onboardingBancomatAddedPansSelector } from "../../store/reducers/addedPans";
 
 /**
  * Define the workflow that allows the user to add a bancomat to the wallet.
@@ -40,7 +47,71 @@ export function* addBancomatToWalletGeneric() {
     withResetNavigationStack,
     bancomatWorkUnit
   );
-  if (res !== ESagaResult.Back) {
+  if (res !== "back") {
+    yield put(navigateToWalletHome());
+  }
+}
+
+/**
+ * Chain the add bancomat to wallet with "activate bpd on the new bancomat"
+ */
+export function* addBancomatToWalletAndActivateBpd() {
+  const res: SagaCallReturnType<typeof executeWorkUnit> = yield call(
+    withResetNavigationStack,
+    bancomatWorkUnit
+  );
+  if (res !== "back") {
+    // integration with the legacy "Add a payment"
+    // If the payment starts from "WALLET_ADD_PAYMENT_METHOD", remove from stack
+    // This shouldn't happens if all the workflow will use the executeWorkUnit
+    const currentRoute: ReturnType<typeof navigationCurrentRouteSelector> = yield select(
+      navigationCurrentRouteSelector
+    );
+
+    if (
+      currentRoute.isSome() &&
+      currentRoute.value === "WALLET_ADD_PAYMENT_METHOD"
+    ) {
+      yield put(NavigationActions.back());
+    }
+  }
+
+  if (res === "completed") {
+    yield call(activateBpdOnNewBancomat);
+  }
+}
+
+/**
+ * Allows the user to activate bpd on the new added bancomat
+ */
+function* activateBpdOnNewBancomat() {
+  // read the new added bancomat
+  const bancomatAdded: ReturnType<typeof onboardingBancomatAddedPansSelector> = yield select(
+    onboardingBancomatAddedPansSelector
+  );
+  // TODO: change enableableFunction with types representing the possibles functionalities
+  const atLeastOneBancomatWithBpdCapability = bancomatAdded.some(b =>
+    b.enableableFunctions?.includes("BPD")
+  );
+
+  // No bancomat with bpd capability added in the current workflow, return to wallet home
+  if (!atLeastOneBancomatWithBpdCapability) {
+    return yield put(navigateToWalletHome());
+  }
+  const isBpdEnabledResponse: SagaCallReturnType<typeof isBpdEnabled> = yield call(
+    isBpdEnabled
+  );
+
+  // Error while reading the bpdEnabled, return to wallet
+  if (isBpdEnabledResponse.isLeft()) {
     yield put(navigateToWalletHome());
+  } else {
+    if (isBpdEnabledResponse.value) {
+      // navigate to onboarding new bancomat
+      yield put(navigateToActivateBpdOnNewBancomat());
+    } else {
+      // navigate to "ask if u want to start bpd onboarding"
+      yield put(navigateToSuggestBpdActivation());
+    }
   }
 }
@@ -39,7 +39,7 @@ const AddBancomatComponent: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <BaseScreenComponent
       customGoBack={<View hspacer={true} spacer={true} />}
-      headerTitle={I18n.t("wallet.addBancomat.title", {
+      headerTitle={I18n.t("wallet.onboarding.bancomat.add.title", {
         current: props.currentIndex + 1,
         length: props.pansNumber
       })}
@@ -58,7 +58,7 @@ const AddBancomatComponent: React.FunctionComponent<Props> = (props: Props) => {
             paddingHorizontal: customVariables.contentPadding
           }}
         >
-          <H1>{I18n.t("wallet.addBancomat.screenTitle")}</H1>
+          <H1>{I18n.t("wallet.onboarding.bancomat.add.screenTitle")}</H1>
           <View spacer={true} large={true} />
           <PanCardComponent
             pan={props.pan}
@@ -72,21 +72,21 @@ const AddBancomatComponent: React.FunctionComponent<Props> = (props: Props) => {
           <View spacer={true} large={true} />
           <H4 color={"bluegrey"} weight={"Regular"}>
             {props.pansNumber > 1
-              ? I18n.t("wallet.addBancomat.bodyPlural", {
+              ? I18n.t("wallet.onboarding.bancomat.add.bodyPlural", {
                   number: props.pansNumber
                 })
-              : I18n.t("wallet.addBancomat.bodySingular")}
+              : I18n.t("wallet.onboarding.bancomat.add.bodySingular")}
           </H4>
         </View>
         <FooterWithButtons
           type={"TwoButtonsInlineThird"}
           leftButton={cancelButtonProps(
             props.handleSkip,
-            I18n.t("wallet.addBancomat.skip")
+            I18n.t("global.buttons.skip")
           )}
           rightButton={confirmButtonProps(
             props.handleContinue,
-            I18n.t("wallet.addBancomat.add")
+            I18n.t("global.buttons.add")
           )}
         />
       </SafeAreaView>

@@ -24,7 +24,7 @@ const LoadAddBancomatComponent: React.FunctionComponent<Props> = props => {
   return (
     <LoadingErrorComponent
       {...props}
-      loadingCaption={I18n.t("wallet.onboarding.bancomat.loadingSearch.title")}
+      loadingCaption={I18n.t("wallet.onboarding.bancomat.add.loading")}
       onAbort={props.onCancel}
       onRetry={props.onRetry}
     />

@@ -0,0 +1,70 @@
+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 { PaymentMethodBpdList } from "../../../../../bonus/bpd/components/PaymentMethodBpdList";
+import { onboardingBancomatAddedPansSelector } from "../../store/reducers/addedPans";
+
+export type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+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> = props => {
+  const { headerTitle, title, body1, body2, skip, continueStr } = loadLocales();
+  return (
+    <BaseScreenComponent headerTitle={headerTitle}>
+      <SafeAreaView style={IOStyles.flex}>
+        <ScrollView>
+          <View style={IOStyles.horizontalContentPadding}>
+            <View spacer={true} large={true} />
+            <H1>{title}</H1>
+            <View spacer={true} large={true} />
+            <Body>{body1}</Body>
+            <View spacer={true} large={true} />
+            <PaymentMethodBpdList paymentList={props.newBancomat} />
+            <View spacer={true} large={true} />
+            <Body>{body2}</Body>
+          </View>
+        </ScrollView>
+
+        <FooterTwoButtons
+          type={"TwoButtonsInlineHalf"}
+          onCancel={props.skip}
+          onRight={props.skip}
+          rightText={continueStr}
+          leftText={skip}
+        />
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  skip: () => dispatch(NavigationActions.back())
+});
+
+const mapStateToProps = (state: GlobalState) => ({
+  newBancomat: onboardingBancomatAddedPansSelector(state)
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ActivateBpdOnNewBancomatScreen);