feat(Bonus Pagamenti Digitali): [#174847319] Iban insertion screen (#…

…2259) * add screens * add comments * Add navigation stack * add screen events layout * wip * wip * wip * rework ibaninsertion * clean code * file mssing * cleaning * reorder store * clean code * add comments * comments * add locales and validation iban * revert wallet * fix * Update ts/features/bonus/bpd/saga/orchestration/onboarding/enrollToBpd.ts Co-authored-by: Matteo Boschi <[email protected]> * Update ts/features/bonus/bpd/screens/iban/IbanLoadingUpsert.tsx Co-authored-by: Matteo Boschi <[email protected]> * Update ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx Co-authored-by: Matteo Boschi <[email protected]> * Update ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx Co-authored-by: Matteo Boschi <[email protected]> Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Oct 7, 2020 · 6351eff · 6351eff
1 parent e2c180b
commit 6351eff
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 61 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -1555,6 +1555,14 @@ bonus:
       loadingActivateBpd:
         title: "We are activating the cashback"
         body: "Please wait."
+    iban:
+      skip: "Skip"
+      iban: "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."
+        body2: "The IBAN will be checked to find out if the relevant current account is in your name. You can also enter it at a later time."
+
 webView:
   error:
     missingParams: Not all information necessary to access this page are available

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -1587,6 +1587,13 @@ bonus:
       loadingActivateBpd:
         title: "Stiamo attivando il cashback"
         body: "Ti preghiamo di attendere."
+    iban:
+      skip: "Salta"
+      iban: "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."
+        body2: "L’IBAN verrà verificato per sapere se il relativo conto corrente è intestato proprio a te. Puoi inserirlo anche in un secondo momento."
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

diff --git a/ts/features/bonus/bonusVacanze/components/markdown/FooterTwoButtons.tsx b/ts/features/bonus/bonusVacanze/components/markdown/FooterTwoButtons.tsx
@@ -9,11 +9,12 @@ import { OnCancelProps } from "./FooterSingleButton";
 
 type OnRightProps = {
   onRight: () => void;
-  title: string;
+  rightText: string;
 };
 
 type OwnProps = {
   rightDisabled?: boolean;
+  leftText?: string;
 };
 
 type MyProps = OnCancelProps & OnRightProps & OwnProps;
@@ -25,11 +26,11 @@ type MyProps = OnCancelProps & OnRightProps & OwnProps;
 export const FooterTwoButtons: React.FunctionComponent<MyProps> = props => (
   <FooterWithButtons
     type={"TwoButtonsInlineThird"}
-    leftButton={cancelButtonProps(props.onCancel)}
+    leftButton={cancelButtonProps(props.onCancel, props.leftText)}
     rightButton={
       props.rightDisabled ?? false
-        ? disablePrimaryButtonProps(props.title)
-        : confirmButtonProps(props.onRight, props.title)
+        ? disablePrimaryButtonProps(props.rightText)
+        : confirmButtonProps(props.onRight, props.rightText)
     }
   />
 );
diff --git a/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusRequestComponent.tsx b/ts/features/bonus/bonusVacanze/screens/activation/request/ActivateBonusRequestComponent.tsx
@@ -127,7 +127,7 @@ export const ActivateBonusRequestComponent: React.FunctionComponent<Props> = pro
         <FooterTwoButtons
           onCancel={props.onCancel}
           onRight={props.onRequestBonus}
-          title={activateBonusText}
+          rightText={activateBonusText}
         />
       </SafeAreaView>
     </BaseScreenComponent>

diff --git a/ts/features/bonus/bpd/screens/iban/IbanInsertionScreen.tsx b/ts/features/bonus/bpd/screens/iban/IbanInsertionScreen.tsx
diff --git a/ts/features/bonus/bpd/screens/iban/IbanKOCannotVerify.tsx b/ts/features/bonus/bpd/screens/iban/IbanKOCannotVerify.tsx
@@ -34,7 +34,7 @@ const IbanKoCannotVerify: React.FunctionComponent<Props> = props => (
       <FooterTwoButtons
         onRight={props.completeInsertion}
         onCancel={props.modifyIban}
-        title={I18n.t("global.buttons.continue")}
+        rightText={I18n.t("global.buttons.continue")}
       />
     </SafeAreaView>
   </BaseScreenComponent>

diff --git a/ts/features/bonus/bpd/screens/iban/IbanKONotOwned.tsx b/ts/features/bonus/bpd/screens/iban/IbanKONotOwned.tsx
@@ -34,7 +34,7 @@ const IbanKoNotOwned: React.FunctionComponent<Props> = props => (
       <FooterTwoButtons
         onRight={props.completeInsertion}
         onCancel={props.modifyIban}
-        title={I18n.t("global.buttons.continue")}
+        rightText={I18n.t("global.buttons.continue")}
       />
     </SafeAreaView>
   </BaseScreenComponent>

diff --git a/ts/features/bonus/bpd/screens/iban/IbanKOWrong.tsx b/ts/features/bonus/bpd/screens/iban/IbanKOWrong.tsx
@@ -32,7 +32,7 @@ const IbanKoWrong: React.FunctionComponent<Props> = props => (
       <FooterTwoButtons
         onRight={props.modifyIban}
         onCancel={props.cancel}
-        title={"Modifica Iban"}
+        rightText={"Modifica Iban"}
       />
     </SafeAreaView>
   </BaseScreenComponent>

diff --git a/ts/features/bonus/bpd/screens/iban/MainIbanScreen.tsx b/ts/features/bonus/bpd/screens/iban/MainIbanScreen.tsx
@@ -14,7 +14,7 @@ import IbanKoCannotVerify from "./IbanKOCannotVerify";
 import IbanKoNotOwned from "./IbanKONotOwned";
 import IbanKOWrong from "./IbanKOWrong";
 import IbanLoadingUpsert from "./IbanLoadingUpsert";
-import IbanInsertionScreen from "./IbanInsertionScreen";
+import IbanInsertionScreen from "./insertion/IbanInsertionScreen";
 
 export type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;

diff --git a/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx b/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionComponent.tsx
@@ -0,0 +1,77 @@
+import { Input, Item, View } from "native-base";
+import * as React from "react";
+import { useState } from "react";
+import { SafeAreaView } from "react-native";
+import { Iban } from "../../../../../../../definitions/backend/Iban";
+import { Body } from "../../../../../../components/core/typography/Body";
+import { H1 } from "../../../../../../components/core/typography/H1";
+import { H5 } from "../../../../../../components/core/typography/H5";
+import { IOStyles } from "../../../../../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../../../../../components/screens/BaseScreenComponent";
+import I18n from "../../../../../../i18n";
+import { FooterTwoButtons } from "../../../../bonusVacanze/components/markdown/FooterTwoButtons";
+
+type Props = {
+  onBack: () => void;
+  onIbanConfirm: (iban: Iban) => void;
+  onContinue: () => void;
+};
+
+// https://en.wikipedia.org/wiki/International_Bank_Account_Number
+// Italian Iban max length: 27 (sample: IT60X0542811101000000123456)
+const IbanMaxLength = 34;
+
+const loadLocales = () => ({
+  headerTitle: I18n.t("bonus.bpd.title"),
+  title: I18n.t("bonus.bpd.iban.insertion.title"),
+  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")
+});
+
+export const IbanInsertionComponent: React.FunctionComponent<Props> = props => {
+  const [iban, setIban] = useState("");
+  const isInvalidIban = iban.length > 0 && Iban.decode(iban).isLeft();
+  const userCanContinue = !isInvalidIban && iban.length > 0;
+  const {
+    headerTitle,
+    title,
+    body1,
+    body2,
+    ibanDescription,
+    skip
+  } = loadLocales();
+
+  return (
+    <BaseScreenComponent goBack={props.onBack} 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>{body1}</Body>
+          <View spacer={true} large={true} />
+          <H5>{ibanDescription}</H5>
+          <Item error={isInvalidIban}>
+            <Input
+              value={iban}
+              maxLength={IbanMaxLength}
+              onChangeText={text => setIban(text.toUpperCase().trim())}
+            />
+          </Item>
+          <View spacer={true} large={true} />
+          <View spacer={true} small={true} />
+          <Body>{body2}</Body>
+        </View>
+        <FooterTwoButtons
+          rightDisabled={!userCanContinue}
+          onRight={() => Iban.decode(iban).map(props.onIbanConfirm)}
+          onCancel={props.onContinue}
+          rightText={I18n.t("global.buttons.continue")}
+          leftText={skip}
+        />
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
diff --git a/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionScreen.tsx b/ts/features/bonus/bpd/screens/iban/insertion/IbanInsertionScreen.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { Iban } from "../../../../../../../definitions/backend/Iban";
+import { GlobalState } from "../../../../../../store/reducers/types";
+import {
+  bpdIbanInsertionCancel,
+  bpdIbanInsertionContinue,
+  bpdUpsertIban
+} from "../../../store/actions/iban";
+import { IbanInsertionComponent } from "./IbanInsertionComponent";
+
+export type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+/**
+ * This screen allows the user to add / modify an iban to be used to receive the refund provided by bpd
+ * @constructor
+ */
+const IbanInsertionScreen: React.FunctionComponent<Props> = props => (
+  <IbanInsertionComponent
+    onBack={props.cancel}
+    onContinue={props.continue}
+    onIbanConfirm={props.submitIban}
+  />
+);
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  cancel: () => dispatch(bpdIbanInsertionCancel()),
+  continue: () => dispatch(bpdIbanInsertionContinue()),
+  submitIban: (iban: Iban) => dispatch(bpdUpsertIban.request(iban))
+});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(IbanInsertionScreen);
diff --git a/ts/features/bonus/bpd/screens/onboarding/declaration/DeclarationComponent.tsx b/ts/features/bonus/bpd/screens/onboarding/declaration/DeclarationComponent.tsx
@@ -120,7 +120,7 @@ export const DeclarationComponent: React.FunctionComponent<OwnProps> = props =>
           rightDisabled={state !== requiredConditions.length}
           onCancel={props.onCancel}
           onRight={props.onConfirm}
-          title={I18n.t("global.buttons.continue")}
+          rightText={I18n.t("global.buttons.continue")}
         />
       </SafeAreaView>
     </BaseScreenComponent>