[#173077316] Timeout eligibility screen

locales/en/index.yml

@@ -1247,18 +1247,23 @@ bonus:
       loading: Checking bonus eligibility
     cta:
       requestBonus: Request
-    iseeNotAvailable:
-      title: ISEE not available
-      subtitle: ISEE not found for the user
-      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
-    activateBonus:
-      title: Activate
-      description: You can activate a {{amount}} bonus. Your tax discount is equal to {{taxBenefit}}
+    eligibility:
+      loading: Checking bonus eligibility
+      iseeNotAvailable:
+        title: ISEE not available
+        subtitle: ISEE not found for the user
+        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
+      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.
   bonusList:
     title: Available bonuses
     contentTitle: Select one of the available bonus

locales/it/index.yml

@@ -1280,18 +1280,23 @@ bonus:
       loading: Verifico l'idoneità per l'accesso al bonus
     cta:
       requestBonus: Richiedi
-    iseeNotAvailable:
-      title: ISEE not trovato
-      subtitle: Non è disponibile nessun ISEE per l'utente
-      text: !include bonus/bonusVacanze/iseeNotAvailable.md
-      goToINPSWebsite: Vai al sito INPS
-    iseeNotEligible:
-      title: ISEE not idoneo
-      subtitle: L'ISEE presentato non soddisfa i requisiti per il bonus vacanze
-      text: !include bonus/bonusVacanze/iseeNotEligible.md
-    activateBonus:
-      title: Attiva
-      description: Puoi attivare un bonus di {{amount}}. Il tuo sconto sulle tasse è pari a {{taxBenefit}}
+    eligibility:
+      loading: Verifico l'idoneità per l'accesso al bonus
+      iseeNotAvailable:
+        title: ISEE non trovato
+        subtitle: Non è disponibile nessun ISEE per l'utente
+        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
+      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.
   bonusList:
     title: Bonus disponibili
     contentTitle: Seleziona uno dei bonus disponibili

ts/features/bonusVacanze/components/InfoScreenComponent.tsx

@@ -0,0 +1,49 @@
+import { Text, View } from "native-base";
+import * as React from "react";
+import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
+import FooterWithButtons from "../../../components/ui/FooterWithButtons";
+import themeVariables from "../../../theme/variables";
+import { confirmButtonProps } from "./markdown/ButtonConfigurations";
+
+/**
+ * TODO Rename the title prop in the BaseScreenComponent to navigationTitle
+ * https://www.pivotaltracker.com/story/show/173056117
+ */
+type Props = {
+  navigationTitle: string;
+  image?: ImageSourcePropType;
+  body: string;
+  confirmText?: string;
+  onConfirm: () => void;
+};
+
+const styles = StyleSheet.create({
+  body: {
+    padding: themeVariables.contentPadding,
+    flex: 1,
+    alignItems: "center"
+  }
+});
+
+/**
+ * A base screen that displays one image, text, and one bottom button
+ * @param props
+ * @constructor
+ */
+export const InfoScreenComponent: React.FunctionComponent<Props> = props => {
+  return (
+    <BaseScreenComponent goBack={true} headerTitle={props.navigationTitle}>
+      <View style={styles.body}>
+        <View spacer={true} extralarge={true} />
+        {props.image && <Image source={props.image} resizeMode="contain" />}
+        <View spacer={true} extralarge={true} />
+        <Text>{props.body}</Text>
+      </View>
+      <FooterWithButtons
+        type={"SingleButton"}
+        leftButton={confirmButtonProps(props.onConfirm, props.confirmText)}
+      />
+    </BaseScreenComponent>
+  );
+};

ts/features/bonusVacanze/components/loadingErrorScreen/BaseLoadingErrorScreen.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import ScreenContent from "../../../../components/screens/ScreenContent";
 import {
   LoadingErrorComponent,
   LoadingErrorProps
@@ -19,9 +18,7 @@ type Props = OwnProps & LoadingErrorProps;
 export const BaseLoadingErrorScreen: React.FunctionComponent<Props> = props => {
   return (
     <BaseScreenComponent goBack={true} headerTitle={props.navigationTitle}>
-      <ScreenContent bounces={false}>
-        <LoadingErrorComponent {...props} />
-      </ScreenContent>
+      <LoadingErrorComponent {...props} />
     </BaseScreenComponent>
   );
 };

ts/features/bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent.tsx

@@ -1,5 +1,6 @@
 import { View } from "native-base";
 import * as React from "react";
+import { StyleSheet } from "react-native";
 import { withLoadingSpinner } from "../../../../components/helpers/withLoadingSpinner";
 import GenericErrorComponent from "../../../../components/screens/GenericErrorComponent";
 
@@ -12,6 +13,12 @@ export type LoadingErrorProps = {
   onCancel?: () => void;
 };
 
+const styles = StyleSheet.create({
+  body: {
+    flex: 1
+  }
+});
+
 /**
  * This component is a generic error component composed with a loading.
  * In this way it is testable regardless of how it will be connected to the application flow.
@@ -26,7 +33,7 @@ const InnerLoadingErrorComponent: React.FunctionComponent<
   LoadingErrorProps
 > = props => {
   return (
-    <View>
+    <View style={styles.body}>
       <GenericErrorComponent
         onRetry={props.onRetry}
         onCancel={props.onCancel}

ts/features/bonusVacanze/components/markdown/ButtonConfigurations.ts

@@ -0,0 +1,24 @@
+import { BlockButtonProps } from "../../../../components/ui/BlockButtons";
+import I18n from "../../../../i18n";
+
+export const cancelButtonProps = (
+  onPress: () => void,
+  title?: string
+): BlockButtonProps => {
+  return {
+    bordered: true,
+    title: title ? title : I18n.t("global.buttons.cancel"),
+    onPress
+  };
+};
+
+export const confirmButtonProps = (
+  onPress: () => void,
+  title?: string
+): BlockButtonProps => {
+  return {
+    primary: true,
+    title: title ? title : I18n.t("global.buttons.confirm"),
+    onPress
+  };
+};

ts/features/bonusVacanze/components/markdown/FooterSingleButton.tsx

@@ -1,22 +1,13 @@
 import * as React from "react";
-import { BlockButtonProps } from "../../../../components/ui/BlockButtons";
 import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
-import I18n from "../../../../i18n";
+import { cancelButtonProps } from "./ButtonConfigurations";
 
 export type OnCancelProps = {
   onCancel: () => void;
 };
 
-export const cancelButtonProps = (props: OnCancelProps): BlockButtonProps => {
-  return {
-    bordered: true,
-    title: I18n.t("global.buttons.cancel"),
-    onPress: props.onCancel
-  };
-};
-
 /**
- * A preset for {@link MarkdownBaseView}
+ * A preset for {@link MarkdownBaseView} with a single cancel button
  * @param props
  */
 export const FooterSingleButton: React.FunctionComponent<
@@ -25,7 +16,7 @@ export const FooterSingleButton: React.FunctionComponent<
   return (
     <FooterWithButtons
       type={"SingleButton"}
-      leftButton={cancelButtonProps(props)}
+      leftButton={cancelButtonProps(props.onCancel)}
     />
   );
 };

ts/features/bonusVacanze/components/markdown/FooterTwoButtons.tsx

@@ -1,21 +1,13 @@
 import * as React from "react";
-import { BlockButtonProps } from "../../../../components/ui/BlockButtons";
 import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
-import { cancelButtonProps, OnCancelProps } from "./FooterSingleButton";
+import { cancelButtonProps, confirmButtonProps } from "./ButtonConfigurations";
+import { OnCancelProps } from "./FooterSingleButton";
 
 type OnRightProps = {
   onRight: () => void;
   title: string;
 };
 
-export const rightButtonProps = (props: OnRightProps): BlockButtonProps => {
-  return {
-    primary: true,
-    title: props.title,
-    onPress: props.onRight
-  };
-};
-
 type MyProps = OnCancelProps & OnRightProps;
 
 /**
@@ -26,8 +18,8 @@ export const FooterTwoButtons: React.FunctionComponent<MyProps> = props => {
   return (
     <FooterWithButtons
       type={"TwoButtonsInlineHalf"}
-      leftButton={cancelButtonProps(props)}
-      rightButton={rightButtonProps(props)}
+      leftButton={cancelButtonProps(props.onCancel)}
+      rightButton={confirmButtonProps(props.onRight, props.title)}
     />
   );
 };

ts/features/bonusVacanze/navigation/action.ts

@@ -1,7 +1,7 @@
 import { NavigationActions } from "react-navigation";
 import BONUSVACANZE_ROUTES from "./routes";
 
-export const navigateToBonusEligibilityCheck = () =>
+export const navigateToBonusEligibilityLoading = () =>
   NavigationActions.navigate({
     routeName: BONUSVACANZE_ROUTES.ELIGIBILITY.CHECK
   });
@@ -20,3 +20,8 @@ export const navigateToActivateBonus = () =>
   NavigationActions.navigate({
     routeName: BONUSVACANZE_ROUTES.ELIGIBILITY.ACTIVATE_BONUS
   });
+
+export const navigateToTimeoutEligibilityCheck = () =>
+  NavigationActions.navigate({
+    routeName: BONUSVACANZE_ROUTES.ELIGIBILITY.TIMEOUT
+  });

ts/features/bonusVacanze/navigation/navigator.ts

@@ -1,14 +1,15 @@
 import { createStackNavigator } from "react-navigation";
-import ActivateBonusScreen from "../screens/ActivateBonus/ActivateBonusScreen";
-import CheckBonusEligibilityScreen from "../screens/CheckBonusEligibilityScreen";
-import IseeNotAvailableScreen from "../screens/IseeNotAvailableScreen";
-import IseeNotEligibleScreen from "../screens/IseeNotEligibleScreen";
+import ActivateBonusScreen from "../screens/eligibility/ActivateBonus/ActivateBonusScreen";
+import IseeNotAvailableScreen from "../screens/eligibility/IseeNotAvailableScreen";
+import IseeNotEligibleScreen from "../screens/eligibility/IseeNotEligibleScreen";
+import LoadBonusEligibilityScreen from "../screens/eligibility/LoadBonusEligibilityScreen";
+import TimeoutEligibilityCheckInfoScreen from "../screens/eligibility/TimeoutEligibilityCheckInfoScreen";
 import BONUSVACANZE_ROUTES from "./routes";
 
 const BonusVacanzeNavigator = createStackNavigator(
   {
     [BONUSVACANZE_ROUTES.ELIGIBILITY.CHECK]: {
-      screen: CheckBonusEligibilityScreen
+      screen: LoadBonusEligibilityScreen
     },
     [BONUSVACANZE_ROUTES.ELIGIBILITY.ISEE_NOT_AVAILABLE]: {
       screen: IseeNotAvailableScreen
@@ -18,6 +19,9 @@ const BonusVacanzeNavigator = createStackNavigator(
     },
     [BONUSVACANZE_ROUTES.ELIGIBILITY.ACTIVATE_BONUS]: {
       screen: ActivateBonusScreen
+    },
+    [BONUSVACANZE_ROUTES.ELIGIBILITY.TIMEOUT]: {
+      screen: TimeoutEligibilityCheckInfoScreen
     }
   },
   {

ts/features/bonusVacanze/screens/ActivateBonus/ActivateBonusComponent.tsx → ts/features/bonusVacanze/screens/eligibility/ActivateBonus/ActivateBonusComponent.tsx

@@ -1,14 +1,14 @@
 import { List, View } from "native-base";
 import * as React from "react";
 import { StyleSheet, Text } from "react-native";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import ListItemComponent from "../../../../components/screens/ListItemComponent";
-import ScreenContent from "../../../../components/screens/ScreenContent";
-import I18n from "../../../../i18n";
-import themeVariables from "../../../../theme/variables";
-import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
-import { FooterTwoButtons } from "../../components/markdown/FooterTwoButtons";
-import { FamilyMember } from "../../types/eligibility";
+import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent";
+import ListItemComponent from "../../../../../components/screens/ListItemComponent";
+import ScreenContent from "../../../../../components/screens/ScreenContent";
+import I18n from "../../../../../i18n";
+import themeVariables from "../../../../../theme/variables";
+import { formatNumberCentsToAmount } from "../../../../../utils/stringBuilder";
+import { FooterTwoButtons } from "../../../components/markdown/FooterTwoButtons";
+import { FamilyMember } from "../../../types/eligibility";
 
 type Props = {
   familyMembers: ReadonlyArray<FamilyMember>;
@@ -28,9 +28,6 @@ const styles = StyleSheet.create({
   }
 });
 
-const title = I18n.t("bonus.bonusVacanza.activateBonus.title");
-const activateBonusText = title;
-
 /**
  * Transform an object of type {@link FamilyMember} to a string representation
  * @param familyMember
@@ -68,10 +65,16 @@ const renderFamilyMembersList = (
  * @constructor
  */
 export const ActivateBonusComponent: React.FunctionComponent<Props> = props => {
-  const description = I18n.t("bonus.bonusVacanza.activateBonus.description", {
-    amount: formatNumberCentsToAmount(props.bonusAmount, true),
-    taxBenefit: formatNumberCentsToAmount(props.taxBenefit, true)
-  });
+  const title = I18n.t("bonus.bonusVacanza.eligibility.activateBonus.title");
+  const activateBonusText = title;
+
+  const description = I18n.t(
+    "bonus.bonusVacanza.eligibility.activateBonus.description",
+    {
+      amount: formatNumberCentsToAmount(props.bonusAmount, true),
+      taxBenefit: formatNumberCentsToAmount(props.taxBenefit, true)
+    }
+  );
 
   return (
     <BaseScreenComponent goBack={true} headerTitle={title}>