feat(Bonus Pagamenti Digitali): [#174847335,#174847371,#174847398] Ib…

…an ko screens (#2261) * 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 * [#174847335] add IbanKOWrong * create common body * . * cannot verify string * iban not owned * refactoring * fix basetypography test * 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 iban loading caption * wrong caption * 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 · adf9337 · adf9337
1 parent 13d2999
commit adf9337
Show file tree

Hide file tree

Showing 15 changed files with 297 additions and 162 deletions.
diff --git a/img/pictograms/doubt.png b/img/pictograms/doubt.png
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -1558,11 +1558,25 @@ bonus:
     iban:
       skip: "Skip"
       iban: "IBAN"
+      edit: "Change 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."
-
+      koWrong:
+        title: "Incorrect IBAN"
+        text1: "The IBAN you entered"
+        text2: "is not correct: check it please!"
+      koCannotVerify:
+        title: "Your IBAN could not be verified"
+        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?"
+      loading:
+        "We are verifying your IBAN\n\nPlease wait."
 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
@@ -1590,10 +1590,25 @@ bonus:
     iban:
       skip: "Salta"
       iban: "IBAN"
+      edit: "Modifica 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."
+      koWrong:
+        title: "IBAN non corretto"
+        text1: "L'IBAN che hai inserito"
+        text2: "non risulta corretto: controllalo per piacere!"
+      koCannotVerify:
+        title: "Non è stato possibile verificare il tuo IBAN"
+        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?"
+      loading:
+        "Stiamo verificando il tuo IBAN\n\nTi preghiamo di attendere."
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

diff --git a/ts/components/core/typography/BaseTypography.tsx b/ts/components/core/typography/BaseTypography.tsx
@@ -17,7 +17,7 @@ type BaseTypographyProps = {
 
 type OwnProps = BaseTypographyProps & {
   fontStyle?: StyleProp<TextStyle>;
-} & Omit<React.ComponentPropsWithRef<typeof Text>, "style">;
+} & React.ComponentPropsWithRef<typeof Text>;
 
 /**
  * Decorate the function {@link makeFontStyleObject} with the additional color calculation.
@@ -46,9 +46,12 @@ export const BaseTypography: React.FunctionComponent<OwnProps> = props => {
       calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
     [props.color, props.weight, props.isItalic, props.font]
   );
+  const style = props.style
+    ? [props.style, props.fontStyle, fontStyle]
+    : [props.fontStyle, fontStyle];
 
   return (
-    <Text {...props} style={[props.fontStyle, fontStyle]}>
+    <Text {...props} style={style}>
       {props.children}
     </Text>
   );

diff --git a/ts/features/bonus/bonusVacanze/components/markdown/FooterTwoButtons.tsx b/ts/features/bonus/bonusVacanze/components/markdown/FooterTwoButtons.tsx
@@ -15,6 +15,8 @@ type OnRightProps = {
 type OwnProps = {
   rightDisabled?: boolean;
   leftText?: string;
+  // TODO: temp fix, waiting to create a generic layout for bottombar
+  type?: "TwoButtonsInlineThird" | "TwoButtonsInlineHalf";
 };
 
 type MyProps = OnCancelProps & OnRightProps & OwnProps;
@@ -25,7 +27,7 @@ type MyProps = OnCancelProps & OnRightProps & OwnProps;
  */
 export const FooterTwoButtons: React.FunctionComponent<MyProps> = props => (
   <FooterWithButtons
-    type={"TwoButtonsInlineThird"}
+    type={props.type ?? "TwoButtonsInlineThird"}
     leftButton={cancelButtonProps(props.onCancel, props.leftText)}
     rightButton={
       props.rightDisabled ?? false

diff --git a/ts/features/bonus/bpd/screens/iban/IbanKOCannotVerify.tsx b/ts/features/bonus/bpd/screens/iban/IbanKOCannotVerify.tsx
diff --git a/ts/features/bonus/bpd/screens/iban/IbanKONotOwned.tsx b/ts/features/bonus/bpd/screens/iban/IbanKONotOwned.tsx
diff --git a/ts/features/bonus/bpd/screens/iban/IbanKOWrong.tsx b/ts/features/bonus/bpd/screens/iban/IbanKOWrong.tsx
diff --git a/ts/features/bonus/bpd/screens/iban/IbanLoadingUpsert.tsx b/ts/features/bonus/bpd/screens/iban/IbanLoadingUpsert.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import { Iban } from "../../../../../../definitions/backend/Iban";
+import I18n from "../../../../../i18n";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { useHardwareBackButton } from "../../../bonusVacanze/components/hooks/useHardwareBackButton";
 import { LoadingErrorComponent } from "../../../bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent";
@@ -25,6 +26,8 @@ export type Props = ReturnType<typeof mapDispatchToProps> &
  * @constructor
  */
 const IbanLoadingUpsert: React.FunctionComponent<Props> = props => {
+  const loading = I18n.t("bonus.bpd.iban.loading");
+
   useHardwareBackButton(() => {
     if (!props.isLoading) {
       props.onAbort();
@@ -34,11 +37,9 @@ const IbanLoadingUpsert: React.FunctionComponent<Props> = props => {
   return (
     <LoadingErrorComponent
       {...props}
-      loadingCaption={"insert new iban loading..."}
+      loadingCaption={loading}
       onAbort={props.onAbort}
-      onRetry={() =>
-        fromNullable(props.ibanValue.value).map(props.onRetry)
-      }
+      onRetry={() => fromNullable(props.ibanValue.value).map(props.onRetry)}
     />
   );
 };

diff --git a/ts/features/bonus/bpd/screens/iban/MainIbanScreen.tsx b/ts/features/bonus/bpd/screens/iban/MainIbanScreen.tsx
@@ -10,9 +10,9 @@ import {
   bpdIbanInsertionResetScreen
 } from "../../store/actions/iban";
 import { bpdUpsertIbanSelector } from "../../store/reducers/details/activation/payoffInstrument";
-import IbanKoCannotVerify from "./IbanKOCannotVerify";
-import IbanKoNotOwned from "./IbanKONotOwned";
-import IbanKOWrong from "./IbanKOWrong";
+import IbanKoCannotVerify from "./ko/IbanKOCannotVerify";
+import IbanKoNotOwned from "./ko/IbanKONotOwned";
+import IbanKOWrong from "./ko/IbanKOWrong";
 import IbanLoadingUpsert from "./IbanLoadingUpsert";
 import IbanInsertionScreen from "./insertion/IbanInsertionScreen";
 

diff --git a/ts/features/bonus/bpd/screens/iban/ko/IbanKOCannotVerify.tsx b/ts/features/bonus/bpd/screens/iban/ko/IbanKOCannotVerify.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { SafeAreaView } from "react-native";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import image from "../../../../../../../img/search/search-icon.png";
+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 { GlobalState } from "../../../../../../store/reducers/types";
+import { FooterTwoButtons } from "../../../../bonusVacanze/components/markdown/FooterTwoButtons";
+import {
+  bpdIbanInsertionContinue,
+  bpdIbanInsertionResetScreen
+} from "../../../store/actions/iban";
+import IbanKoBody from "./IbanKoBody";
+
+export type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
+
+const loadLocales = () => ({
+  headerTitle: I18n.t("bonus.bpd.title"),
+  edit: I18n.t("bonus.bpd.iban.edit"),
+  continueStr: I18n.t("global.buttons.continue"),
+  title: I18n.t("bonus.bpd.iban.koCannotVerify.title"),
+  text1: I18n.t("bonus.bpd.iban.koCannotVerify.text1"),
+  text2: I18n.t("bonus.bpd.iban.koCannotVerify.text2")
+});
+
+/**
+ * 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
+ */
+const IbanKoCannotVerify: React.FunctionComponent<Props> = props => {
+  const { headerTitle, continueStr, edit, 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} />}
+        />
+        <FooterTwoButtons
+          type={"TwoButtonsInlineHalf"}
+          onRight={props.completeInsertion}
+          onCancel={props.modifyIban}
+          rightText={continueStr}
+          leftText={edit}
+        />
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  modifyIban: () => dispatch(bpdIbanInsertionResetScreen()),
+  completeInsertion: () => dispatch(bpdIbanInsertionContinue())
+});
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(IbanKoCannotVerify);