feat(Bonus Pagamenti Digitali): [#175488300,#175662744] Iban insertion and workflow (rework due to change request)

locales/en/index.yml

@@ -1644,6 +1644,7 @@ bonus:
     iban:
       iban: "IBAN"
       edit: "Change IBAN"
+      verify: "Check IBAN"
       insertion:
         title: "IBAN for accreditation"
         body1: "Indicate here the IBAN of your current account, on which you want to receive credit once the ranking has been consolidated."
@@ -1657,9 +1658,9 @@ bonus:
         text1: "If you are sure the IBAN"
         text2: "identify the account on which you want to receive credit, you can proceed."
       koNotOwned:
-        title: "The current account is not in your name"
-        text1: "The IBAN you entered"
-        text2: "identify a current account that is not registered in your tax code: are you sure you want to use this IBAN?"
+        title: "Check the IBAN entered"
+        text1: "IBAN"
+        text2: "is not registered to"
       loading:
         "We are verifying your IBAN\n\nPlease wait."
     details:

locales/it/index.yml

@@ -1676,6 +1676,7 @@ bonus:
     iban:
       iban: "IBAN"
       edit: "Modifica IBAN"
+      verify: "Controlla IBAN"
       insertion:
         title: "IBAN per l’accredito"
         body1: "Indica qui l’IBAN del tuo conto corrente, su cui vuoi ricevere l’accredito una volta consolidata la classifica."
@@ -1689,9 +1690,9 @@ bonus:
         text1: "Se sei sicuro che l’IBAN"
         text2: "identifichi il conto su cui vuoi ricevere gli accrediti, puoi proseguire."
       koNotOwned:
-        title: "Il conto corrente non risulta intestato a te"
-        text1: "L’IBAN che hai inserito"
-        text2: "identifica un conto corrente che non risulta intestato al tuo codice fiscale: sei sicuro di voler usare questo IBAN?"
+        title: "Controlla l'IBAN inserito"
+        text1: "L’IBAN"
+        text2: "non risulta intestato a"
       loading:
         "Stiamo verificando il tuo IBAN\n\nTi preghiamo di attendere."
     details:

ts/features/bonus/bpd/screens/iban/MainIbanScreen.tsx

@@ -10,11 +10,10 @@ import {
   bpdIbanInsertionResetScreen
 } from "../../store/actions/iban";
 import { bpdUpsertIbanSelector } from "../../store/reducers/details/activation/payoffInstrument";
-import IbanKoCannotVerify from "./ko/IbanKOCannotVerify";
-import IbanKoNotOwned from "./ko/IbanKONotOwned";
-import IbanKOWrong from "./ko/IbanKOWrong";
 import IbanLoadingUpsert from "./IbanLoadingUpsert";
 import IbanInsertionScreen from "./insertion/IbanInsertionScreen";
+import IbanKoNotOwned from "./ko/IbanKONotOwned";
+import IbanKOWrong from "./ko/IbanKOWrong";
 
 export type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
@@ -25,13 +24,12 @@ const chooseRenderScreen = (props: Props) => {
     return <IbanLoadingUpsert />;
   } else if (isReady(ibanStatus)) {
     switch (ibanStatus.value) {
-      case IbanStatus.CANT_VERIFY:
-        return <IbanKoCannotVerify />;
       case IbanStatus.NOT_OWNED:
         return <IbanKoNotOwned />;
       case IbanStatus.NOT_VALID:
         return <IbanKOWrong />;
       case IbanStatus.OK:
+      case IbanStatus.CANT_VERIFY:
         props.reset();
         props.completed();
     }

ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx

@@ -15,6 +15,7 @@ type Props = {
   onBack: () => void;
   onIbanConfirm: (iban: Iban) => void;
   onContinue: () => void;
+  startIban?: string;
 };
 
 // https://en.wikipedia.org/wiki/International_Bank_Account_Number
@@ -31,7 +32,7 @@ const loadLocales = () => ({
 });
 
 export const IbanInsertionComponent: React.FunctionComponent<Props> = props => {
-  const [iban, setIban] = useState("");
+  const [iban, setIban] = useState(props.startIban ?? "");
   const isInvalidIban = iban.length > 0 && Iban.decode(iban).isLeft();
   const userCanContinue = !isInvalidIban && iban.length > 0;
   const {

ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionScreen.tsx

@@ -8,6 +8,7 @@ import {
   bpdIbanInsertionContinue,
   bpdUpsertIban
 } from "../../../store/actions/iban";
+import { bpdIbanPrefillSelector } from "../../../store/reducers/details/activation";
 import { IbanInsertionComponent } from "./IbanInsertionComponent";
 
 export type Props = ReturnType<typeof mapDispatchToProps> &
@@ -22,6 +23,7 @@ const IbanInsertionScreen: React.FunctionComponent<Props> = props => (
     onBack={props.cancel}
     onContinue={props.continue}
     onIbanConfirm={props.submitIban}
+    startIban={props.prefillIban}
   />
 );
 
@@ -31,7 +33,9 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   submitIban: (iban: Iban) => dispatch(bpdUpsertIban.request(iban))
 });
 
-const mapStateToProps = (_: GlobalState) => ({});
+const mapStateToProps = (state: GlobalState) => ({
+  prefillIban: bpdIbanPrefillSelector(state)
+});
 
 export default connect(
   mapStateToProps,

ts/features/bonus/bpd/screens/iban/ko/IbanKOCannotVerify.tsx

@@ -32,6 +32,7 @@ const loadLocales = () => ({
  * This screen warns the user that the provided iban cannot be verified.
  * This is just a warning, the user can continue and the iban has been registered on the bpd remote system.
  * @constructor
+ * @deprecated not used anymore, still here just in case of change of mind
  */
 const IbanKoCannotVerify: React.FunctionComponent<Props> = props => {
   const { headerTitle, continueStr, edit, title, text1, text2 } = loadLocales();

ts/features/bonus/bpd/screens/iban/ko/IbanKONotOwned.tsx

@@ -1,17 +1,23 @@
+import * as pot from "italia-ts-commons/lib/pot";
+import { View } from "native-base";
 import * as React from "react";
-import { SafeAreaView } from "react-native";
+import { SafeAreaView, StyleSheet } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import image from "../../../../../../../img/pictograms/doubt.png";
+import { Body } from "../../../../../../components/core/typography/Body";
+import { H4 } from "../../../../../../components/core/typography/H4";
+import { Monospace } from "../../../../../../components/core/typography/Monospace";
 import { IOStyles } from "../../../../../../components/core/variables/IOStyles";
 import { renderInfoRasterImage } from "../../../../../../components/infoScreen/imageRendering";
 import { InfoScreenComponent } from "../../../../../../components/infoScreen/InfoScreenComponent";
 import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../../../i18n";
+import { profileSelector } from "../../../../../../store/reducers/profile";
 import { GlobalState } from "../../../../../../store/reducers/types";
 import { FooterTwoButtons } from "../../../../bonusVacanze/components/markdown/FooterTwoButtons";
 import {
-  bpdIbanInsertionContinue,
+  bpdIbanInsertionCancel,
   bpdIbanInsertionResetScreen
 } from "../../../store/actions/iban";
 import IbanKoBody from "./IbanKoBody";
@@ -21,34 +27,71 @@ export type Props = ReturnType<typeof mapDispatchToProps> &
 
 const loadLocales = () => ({
   headerTitle: I18n.t("bonus.bpd.title"),
-  edit: I18n.t("bonus.bpd.iban.edit"),
-  continueStr: I18n.t("global.buttons.continue"),
+  cancel: I18n.t("global.buttons.cancel"),
+  verify: I18n.t("bonus.bpd.iban.verify"),
   title: I18n.t("bonus.bpd.iban.koNotOwned.title"),
   text1: I18n.t("bonus.bpd.iban.koNotOwned.text1"),
   text2: I18n.t("bonus.bpd.iban.koNotOwned.text2")
 });
 
+const styles = StyleSheet.create({
+  profile: {
+    flex: 1,
+    alignContent: "flex-end"
+  },
+  text: {
+    textAlign: "center"
+  }
+});
+
+/**
+ * Render the profile information (name, surname, fiscal code)
+ * @param props
+ * @constructor
+ */
+const ProfileInformation = (props: Props) => {
+  // undefined profile should never happens
+  const profile = pot.getOrElse(props.profile, undefined);
+
+  return (
+    <View style={styles.profile}>
+      <H4 style={styles.text}>
+        {profile?.name} {profile?.family_name},
+      </H4>
+      <Body style={styles.text}>
+        {I18n.t("profile.fiscalCode.fiscalCode")}{" "}
+        <Monospace weight={"SemiBold"}>{profile?.fiscal_code}</Monospace>
+      </Body>
+    </View>
+  );
+};
+
 /**
  * This screen warns the user that the provided iban does not belong to him.
  * This is just a warning, the user can continue and iban has been registered on the bpd remote system.
  * @constructor
  */
 const IbanKoNotOwned: React.FunctionComponent<Props> = props => {
-  const { headerTitle, continueStr, edit, title, text1, text2 } = loadLocales();
+  const { headerTitle, verify, cancel, title, text1, text2 } = loadLocales();
   return (
     <BaseScreenComponent goBack={props.modifyIban} headerTitle={headerTitle}>
       <SafeAreaView style={IOStyles.flex}>
         <InfoScreenComponent
           image={renderInfoRasterImage(image)}
           title={title}
-          body={<IbanKoBody text1={text1} text2={text2} />}
+          body={
+            <View style={IOStyles.flex}>
+              <IbanKoBody text1={text1} text2={text2} isFlex={false} />
+              <ProfileInformation {...props} />
+            </View>
+          }
         />
         <FooterTwoButtons
-          type={"TwoButtonsInlineHalf"}
-          onRight={props.completeInsertion}
-          onCancel={props.modifyIban}
-          rightText={continueStr}
-          leftText={edit}
+          type={"TwoButtonsInlineThird"}
+          onRight={props.modifyIban}
+          onCancel={props.cancel}
+          rightText={verify}
+          leftText={cancel}
         />
       </SafeAreaView>
     </BaseScreenComponent>
@@ -57,9 +100,11 @@ const IbanKoNotOwned: React.FunctionComponent<Props> = props => {
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   modifyIban: () => dispatch(bpdIbanInsertionResetScreen()),
-  completeInsertion: () => dispatch(bpdIbanInsertionContinue())
+  cancel: () => dispatch(bpdIbanInsertionCancel())
 });
 
-const mapStateToProps = (_: GlobalState) => ({});
+const mapStateToProps = (state: GlobalState) => ({
+  profile: profileSelector(state)
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(IbanKoNotOwned);

ts/features/bonus/bpd/screens/iban/ko/IbanKoBody.tsx

@@ -1,4 +1,3 @@
-import { fromNullable } from "fp-ts/lib/Option";
 import { View } from "native-base";
 import * as React from "react";
 import { StyleSheet } from "react-native";
@@ -12,6 +11,7 @@ import { bpdUpsertIbanSelector } from "../../../store/reducers/details/activatio
 type OwnProps = {
   text1: string;
   text2: string;
+  isFlex?: boolean;
 };
 
 export type Props = OwnProps & ReturnType<typeof mapStateToProps>;
@@ -28,17 +28,18 @@ const styles = StyleSheet.create({
  * @constructor
  */
 const IbanKoBody: React.FunctionComponent<Props> = props => {
-  const iban: string = fromNullable(props.candidateIban.value).fold(
-    "",
-    iban => iban as string
-  );
+  const iban: string = props.candidateIban.value ?? "";
+  const style = props.isFlex ?? true ? IOStyles.flex : {};
+
   return (
-    <View style={IOStyles.flex}>
+    <View style={style}>
       <H4 color={"bluegrey"} weight={"Regular"} style={styles.text}>
         {props.text1}
       </H4>
       <View spacer={true} small={true} />
-      <Monospace style={styles.text}>{iban}</Monospace>
+      <Monospace style={styles.text} weight={"SemiBold"}>
+        {iban}
+      </Monospace>
       <View spacer={true} small={true} />
       <H4 color={"bluegrey"} weight={"Regular"} style={styles.text}>
         {props.text2}

ts/features/bonus/bpd/store/reducers/details/activation/index.ts

@@ -1,9 +1,11 @@
+import { fromNullable } from "fp-ts/lib/Option";
 import { combineReducers } from "redux";
 import { createSelector } from "reselect";
 import { getType } from "typesafe-actions";
 import { Action } from "../../../../../../../store/actions/types";
 import { GlobalState } from "../../../../../../../store/reducers/types";
 import {
+  getValue,
   remoteError,
   remoteLoading,
   remoteReady,
@@ -17,6 +19,7 @@ import {
   bpdUnsubscribeCompleted
 } from "../../../actions/onboarding";
 import paymentInstrumentReducer, {
+  bpdUpsertIbanSelector,
   PayoffInstrumentType
 } from "./payoffInstrument";
 
@@ -117,4 +120,18 @@ export const bpdUnsubscriptionSelector = createSelector(
   unsubscription => unsubscription
 );
 
+/**
+ * Return the prefill text based on the iban upsert or iban inserted by user
+ * if the user tried to add a new iban (upsertIban.value !== undefined) return that iban
+ * else try to return the actual iban getValue(iban)
+ *
+ */
+export const bpdIbanPrefillSelector = createSelector(
+  [bpdIbanSelector, bpdUpsertIbanSelector],
+  (iban, upsertIban): string  =>
+    fromNullable(upsertIban.value as string).getOrElse(
+      fromNullable(getValue(iban)).getOrElse("")
+    )
+);
+
 export default bpdActivationReducer;

ts/features/bonus/bpd/store/reducers/details/activation/payoffInstrument.ts

@@ -15,11 +15,12 @@ import { IbanStatus } from "../../../../saga/networking/patchCitizenIban";
 import { bpdLoadActivationStatus } from "../../../actions/details";
 import {
   bpdIbanInsertionResetScreen,
+  bpdIbanInsertionStart,
   bpdUpsertIban
 } from "../../../actions/iban";
 import { bpdDeleteUserFromProgram } from "../../../actions/onboarding";
 
-type UpsertIBAN = {
+export type UpsertIBAN = {
   // the results of the upsert operation
   outcome: RemoteValue<IbanStatus, Error>;
   // the value the user is trying to enter
@@ -98,6 +99,8 @@ const paymentInstrumentUpsertReducer = (
         ...state,
         outcome: remoteUndefined
       };
+    case getType(bpdIbanInsertionStart):
+      return INITIAL_UPSERT;
   }
   return state;
 };