[#173148021] ISEE not eligible refinement

locales/en/index.yml

@@ -1247,6 +1247,7 @@ bonus:
       loading: Checking bonus eligibility
     cta:
       requestBonus: Request
+      cancelRequest: Cancel the request
     eligibility:
       loading: Checking bonus eligibility
       iseeNotAvailable:
@@ -1255,15 +1256,16 @@ bonus:
         text: !include bonus/bonusVacanze/iseeNotAvailable.md
         goToINPSWebsite: Go to INPS Website
       iseeNotEligible:
-        title: ISEE not eligible
-        subtitle: The ISEE submitted does not meet the requirements
-        text: !include bonus/bonusVacanze/iseeNotEligible.md
+        title: We're sorry. Your ISEE exceeds the required threshold.
+        text: If it is not correct, or if your family income has changed since the last ISEE created, you can update it by making a new declaration (DSU) on the INPS website.
+        goToNewDSU: Submit new DSU to INPS
+        goToNewSimulation: Online simulation
       activateBonus:
         title: Activate
         description: You can activate a {{amount}} bonus. Your tax discount is equal to {{taxBenefit}}
       timeout:
-        title: Eligibility request received
-        description: Verification of eligibility for bonus access has been recorded. You will receive a message when the outcome of your request will be available.
+        title: Sorry, it takes longer to verify your ISEE.
+        description: "We will send you a message when INPS has given us the answer related to your ISEE.\n\nWhen you receive it, if it is positive, remember to complete your application within 24 hours, otherwise it will expire and you will have to start a new one."
       activate:
         loading: Bonus activation
         goToDetails: Show details

locales/it/index.yml

@@ -1280,6 +1280,7 @@ bonus:
       loading: Verifico l'idoneità per l'accesso al bonus
     cta:
       requestBonus: Richiedi
+      cancelRequest: Annulla la richiesta
     eligibility:
       loading: Verifico l'idoneità per l'accesso al bonus
       iseeNotAvailable:
@@ -1288,15 +1289,16 @@ bonus:
         text: !include bonus/bonusVacanze/iseeNotAvailable.md
         goToINPSWebsite: Vai al sito INPS
       iseeNotEligible:
-        title: ISEE non idoneo
-        subtitle: L'ISEE presentato non soddisfa i requisiti per il bonus vacanze
-        text: !include bonus/bonusVacanze/iseeNotEligible.md
+        title: Siamo spiacenti. Il tuo ISEE supera la soglia richiesta.
+        text: Se non ti risulta corretto, oppure se il tuo reddito familiare è cambiato dall’ultimo ISEE creato, puoi aggiornarlo effettuando una nuova dichiarazione sostituiva unica (DSU) sul sito di INPS.
+        goToNewDSU: Presenta nuova DSU a INPS
+        goToNewSimulation: Fai una simulazione online
       activateBonus:
         title: Attiva
         description: Puoi attivare un bonus di {{amount}}. Il tuo sconto sulle tasse è pari a {{taxBenefit}}
       timeout:
-        title: Verifica richiesta
-        description: La verifica dell'idoneità per l'accesso al bonus è stata registrata. Riceverai un messaggio quando l'esito della tua richiesta sarà disponibile.
+        title: Siamo spiacenti, serve più tempo per verificare il tuo ISEE.
+        description: "Ti invieremo un messaggio in app quando INPS ci avrà fornito la risposta relativa al tuo ISEE.\n\nQuando lo riceverai, se sarà positivo, ricordati di completare la tua domanda entro 24 ore, altrimenti scadrà e dovrai iniziarne una nuova."
       activate:
         loading: Attivo il bonus
         goToDetails: Visualizza i dettagli

ts/features/bonusVacanze/components/infoScreen/InfoScreenComponent.tsx

@@ -1,26 +1,26 @@
 import { Text, View } from "native-base";
 import * as React from "react";
 import { StyleSheet } from "react-native";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
 import themeVariables from "../../../../theme/variables";
-import { confirmButtonProps } from "../buttons/ButtonConfigurations";
-
-const PropTypes = require("prop-types");
-
-PropTypes.oneOf();
 
 type Props = {
   image: React.ReactNode;
-  body: string;
-  confirmText?: string;
-  onConfirm: () => void;
+  title?: string;
+  body?: string;
 };
 
 const styles = StyleSheet.create({
-  body: {
+  main: {
     padding: themeVariables.contentPadding,
     flex: 1,
     alignItems: "center"
+  },
+  title: {
+    textAlign: "center",
+    fontSize: 20
+  },
+  body: {
+    textAlign: "center"
   }
 });
 
@@ -31,18 +31,22 @@ const styles = StyleSheet.create({
  */
 export const InfoScreenComponent: React.FunctionComponent<Props> = props => {
   return (
-    <>
-      <View style={styles.body}>
-        <View spacer={true} extralarge={true} />
-        <View spacer={true} extralarge={true} />
-        {props.image}
-        <View spacer={true} extralarge={true} />
-        <Text>{props.body}</Text>
-      </View>
-      <FooterWithButtons
-        type={"SingleButton"}
-        leftButton={confirmButtonProps(props.onConfirm, props.confirmText)}
-      />
-    </>
+    <View style={styles.main}>
+      <View spacer={true} extralarge={true} />
+      <View spacer={true} extralarge={true} />
+      <View spacer={true} extralarge={true} />
+      {props.image}
+      <View spacer={true} extralarge={true} />
+      {props.title && (
+        <>
+          <Text style={styles.title} bold={true}>
+            {props.title}
+          </Text>
+          <View spacer={true} />
+        </>
+      )}
+
+      <Text style={styles.body}>{props.body}</Text>
+    </View>
   );
 };

ts/features/bonusVacanze/screens/eligibility/ActivateBonus/ActivateBonusCompletedScreen.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import I18n from "../../../../../i18n";
+import { cancelButtonProps } from "../../../components/buttons/ButtonConfigurations";
+import { FooterStackButton } from "../../../components/buttons/FooterStackButtons";
 import { renderIconImage } from "../../../components/infoScreen/imageRendering";
 import { InfoScreenComponent } from "../../../components/infoScreen/InfoScreenComponent";
 
@@ -24,12 +26,12 @@ const ActivateBonusCompletedScreen: React.FunctionComponent<Props> = props => {
   );
 
   return (
-    <InfoScreenComponent
-      onConfirm={props.onConfirm}
-      confirmText={confirmText}
-      image={renderIconImage("io-complete")}
-      body={body}
-    />
+    <>
+      <InfoScreenComponent image={renderIconImage("io-complete")} body={body} />
+      <FooterStackButton
+        buttons={[cancelButtonProps(props.onConfirm, confirmText)]}
+      />
+    </>
   );
 };
 

ts/features/bonusVacanze/screens/eligibility/ActivateBonus/request/ActivateBonusRequestComponent.tsx

@@ -64,7 +64,9 @@ const renderFamilyMembersList = (
  * @param props
  * @constructor
  */
-const ActivateBonusComponent: React.FunctionComponent<Props> = props => {
+export const ActivateBonusRequestComponent: React.FunctionComponent<
+  Props
+> = props => {
   const description = I18n.t(
     "bonus.bonusVacanza.eligibility.activateBonus.description",
     {
@@ -90,5 +92,3 @@ const ActivateBonusComponent: React.FunctionComponent<Props> = props => {
     </BaseScreenComponent>
   );
 };
-
-export default ActivateBonusComponent;

ts/features/bonusVacanze/screens/eligibility/ActivateBonus/request/ActivateBonusRequestScreen.tsx

@@ -6,7 +6,7 @@ import I18n from "../../../../../../i18n";
 import { identificationRequest } from "../../../../../../store/actions/identification";
 import { GlobalState } from "../../../../../../store/reducers/types";
 import { eligibilityCheckResults } from "../../../../store/reducers/eligibility";
-import ActivateBonusRequestComponent from "./ActivateBonusRequestComponent";
+import { ActivateBonusRequestComponent } from "./ActivateBonusRequestComponent";
 
 type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;

ts/features/bonusVacanze/screens/eligibility/IseeNotEligibleScreen.tsx

@@ -2,42 +2,64 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import I18n from "../../../../i18n";
-import { FooterSingleButton } from "../../components/markdown/FooterSingleButton";
-import { MarkdownBaseScreen } from "../../components/markdown/MarkdownBaseScreen";
+import {
+  cancelButtonProps,
+  confirmButtonProps
+} from "../../components/buttons/ButtonConfigurations";
+import { FooterStackButton } from "../../components/buttons/FooterStackButtons";
+import { renderRasterImage } from "../../components/infoScreen/imageRendering";
+import { InfoScreenComponent } from "../../components/infoScreen/InfoScreenComponent";
 
 type Props = ReturnType<typeof mapDispatchToProps>;
 
+const image = require("../../../../../img/servicesStatus/error-detail-icon.png");
+
 /**
  * This screen display some additional information when the ISEE is not eligible for the bonus vacanza.
- * It provides one CTA:
- * - Cancel: exit from the bonus request workflow
- * The screen is tied to the business logic and is composed using {@link MarkdownBaseScreen} and {@link FooterSingleButton}
+ * It provides three CTA:
+ * - goToDsu: goto INPS website to submit a new DSU
+ * - goToSimulation: goto INPS website to do a simulation
+ * - cancelRequest: abort the request
+ * The screen is tied to the business logic and is composed using {@link InfoScreenComponent} and {@link FooterStackButton}
  * @param props
  * @constructor
  */
 
 const IseeNotEligibleScreen: React.FunctionComponent<Props> = props => {
-  const markdownBody = I18n.t(
-    "bonus.bonusVacanza.eligibility.iseeNotEligible.text"
-  );
   const title = I18n.t("bonus.bonusVacanza.eligibility.iseeNotEligible.title");
-  const subtitle = I18n.t(
-    "bonus.bonusVacanza.eligibility.iseeNotEligible.subtitle"
+  const body = I18n.t("bonus.bonusVacanza.eligibility.iseeNotEligible.text");
+  const goToDsu = I18n.t(
+    "bonus.bonusVacanza.eligibility.iseeNotEligible.goToNewDSU"
+  );
+  const goToSimulation = I18n.t(
+    "bonus.bonusVacanza.eligibility.iseeNotEligible.goToNewSimulation"
   );
 
+  const cancelRequest = I18n.t("bonus.bonusVacanza.cta.cancelRequest");
+
   return (
-    <MarkdownBaseScreen
-      navigationTitle={title}
-      title={title}
-      subtitle={subtitle}
-      markDown={markdownBody}
-    >
-      <FooterSingleButton onCancel={props.onCancel} />
-    </MarkdownBaseScreen>
+    <>
+      <InfoScreenComponent
+        image={renderRasterImage(image)}
+        title={title}
+        body={body}
+      />
+      <FooterStackButton
+        buttons={[
+          confirmButtonProps(props.onGoToDsu, goToDsu),
+          confirmButtonProps(props.onGoToSimulation, goToSimulation),
+          cancelButtonProps(props.onCancel, cancelRequest)
+        ]}
+      />
+    </>
   );
 };
 
 const mapDispatchToProps = (_: Dispatch) => ({
+  // TODO: link with the right dispatch action
+  onGoToDsu: () => undefined,
+  // TODO: link with the right dispatch action
+  onGoToSimulation: () => undefined,
   // TODO: link with the right dispatch action
   onCancel: () => undefined
 });

ts/features/bonusVacanze/screens/eligibility/TimeoutEligibilityCheckInfoScreen.tsx

@@ -3,12 +3,14 @@ import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import I18n from "../../../../i18n";
 import { navigateToWalletHome } from "../../../../store/actions/navigation";
+import { cancelButtonProps } from "../../components/buttons/ButtonConfigurations";
+import { FooterStackButton } from "../../components/buttons/FooterStackButtons";
 import { renderRasterImage } from "../../components/infoScreen/imageRendering";
 import { InfoScreenComponent } from "../../components/infoScreen/InfoScreenComponent";
 
 type Props = ReturnType<typeof mapDispatchToProps>;
 
-const image = require("../../../../../img/wallet/errors/invalid-amount-icon.png");
+const image = require("../../../../../img/wallet/errors/payment-expired-icon.png");
 
 /**
  * This screen informs the user that the request takes longer than necessary to be completed
@@ -21,15 +23,20 @@ const image = require("../../../../../img/wallet/errors/invalid-amount-icon.png"
 const TimeoutEligibilityCheckInfoScreen: React.FunctionComponent<
   Props
 > = props => {
+  const title = I18n.t("bonus.bonusVacanza.eligibility.timeout.title");
   const body = I18n.t("bonus.bonusVacanza.eligibility.timeout.description");
-  const confirmText = I18n.t("global.buttons.close");
+  const confirmText = I18n.t("global.buttons.exit");
   return (
-    <InfoScreenComponent
-      onConfirm={props.onConfirm}
-      confirmText={confirmText}
-      image={renderRasterImage(image)}
-      body={body}
-    />
+    <>
+      <InfoScreenComponent
+        image={renderRasterImage(image)}
+        title={title}
+        body={body}
+      />
+      <FooterStackButton
+        buttons={[cancelButtonProps(props.onConfirm, confirmText)]}
+      />
+    </>
   );
 };