[#173521040] Update elgibility expired screen & eligibility / activation navigation rework

locales/en/index.yml

@@ -1449,6 +1449,7 @@ bonus:
       eligibilityExpired:
         title: Time expired.
         body: The 24 hours needed to continue your request have expired. Please, start a new request.
+        cta: Request Bonus
       completed:
         title: Congratulation!
         description: Bonus activated

locales/it/index.yml

@@ -1481,6 +1481,7 @@ bonus:
       eligibilityExpired:
         title: Tempo scaduto.
         body: Le 24 ore utili a proseguire la tua richiesta sono scadute. Ti chiediamo di ricominciare una nuova richiesta.
+        cta: "Richiedi Bonus"
       confirm:
         title: Attenzione
         body: Continuando nel processo, non sarà più possibile annullare la richiesta.

ts/features/bonusVacanze/screens/BonusCTAEligibilityStartScreen.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { navigationHistoryPop } from "../../../store/actions/navigationHistory";
 import { Dispatch } from "../../../store/actions/types";
 import { checkBonusVacanzeEligibility } from "../store/actions/bonusVacanze";
 import LoadBonusEligibilityScreen from "./eligibility/LoadBonusEligibilityScreen";
@@ -18,7 +17,6 @@ const BonusCTAEligibilityStartScreen = (props: Props) => {
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   startEligibilityCheck: () => {
     dispatch(checkBonusVacanzeEligibility.request());
-    dispatch(navigationHistoryPop(1));
   }
 });
 

ts/features/bonusVacanze/screens/BonusInformationScreen.tsx

@@ -20,7 +20,6 @@ import { LightModalContextInterface } from "../../../components/ui/LightModal";
 import Markdown from "../../../components/ui/Markdown";
 import I18n from "../../../i18n";
 import { navigateBack } from "../../../store/actions/navigation";
-import { navigationHistoryPop } from "../../../store/actions/navigationHistory";
 import customVariables from "../../../theme/variables";
 import { getLocalePrimaryWithFallback } from "../../../utils/locale";
 import { maybeNotNullyString } from "../../../utils/strings";
@@ -240,7 +239,6 @@ const BonusInformationScreen: React.FunctionComponent<Props> = props => {
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   requestBonusActivation: () => {
     dispatch(checkBonusVacanzeEligibility.request());
-    dispatch(navigationHistoryPop(1));
   },
   navigateBack: () => dispatch(navigateBack())
 });

ts/features/bonusVacanze/screens/activation/BonusAlreadyExists.tsx

@@ -9,7 +9,10 @@ import { useHardwareBackButton } from "../../components/hooks/useHardwareBackBut
 import { renderInfoRasterImage } from "../../components/infoScreen/imageRendering";
 import { InfoScreenComponent } from "../../components/infoScreen/InfoScreenComponent";
 import { bonusVacanzeStyle } from "../../components/Styles";
-import { cancelBonusVacanzeRequest } from "../../store/actions/bonusVacanze";
+import {
+  cancelBonusVacanzeRequest,
+  showBonusVacanze
+} from "../../store/actions/bonusVacanze";
 
 type Props = ReturnType<typeof mapDispatchToProps>;
 
@@ -41,13 +44,16 @@ const BonusAlreadyExists: React.FunctionComponent<Props> = props => {
         title={title}
         body={body}
       />
-      <FooterStackButton buttons={[confirmButtonProps(props.onCancel, cta)]} />
+      <FooterStackButton
+        buttons={[confirmButtonProps(props.onGoToBonus, cta)]}
+      />
     </SafeAreaView>
   );
 };
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onCancel: () => dispatch(cancelBonusVacanzeRequest())
+  onCancel: () => dispatch(cancelBonusVacanzeRequest()),
+  onGoToBonus: () => dispatch(showBonusVacanze())
 });
 
 export default connect(

ts/features/bonusVacanze/screens/activation/EligibilityExpired.tsx

@@ -2,18 +2,24 @@ import * as React from "react";
 import { SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
+import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
 import I18n from "../../../../i18n";
-import { cancelButtonProps } from "../../components/buttons/ButtonConfigurations";
-import { FooterStackButton } from "../../components/buttons/FooterStackButtons";
+import {
+  cancelButtonProps,
+  confirmButtonProps
+} from "../../components/buttons/ButtonConfigurations";
 import { useHardwareBackButton } from "../../components/hooks/useHardwareBackButton";
 import { renderInfoRasterImage } from "../../components/infoScreen/imageRendering";
 import { InfoScreenComponent } from "../../components/infoScreen/InfoScreenComponent";
 import { bonusVacanzeStyle } from "../../components/Styles";
-import { cancelBonusVacanzeRequest } from "../../store/actions/bonusVacanze";
+import {
+  cancelBonusVacanzeRequest,
+  checkBonusVacanzeEligibility
+} from "../../store/actions/bonusVacanze";
 
 type Props = ReturnType<typeof mapDispatchToProps>;
 
-const image = require("../../../../../img/wallet/errors/payment-expired-icon.png");
+const image = require("../../../../../img/pictograms/hourglass.png");
 
 /**
  * This screen informs the user that the eligibility data has expired
@@ -32,6 +38,7 @@ const EligibilityExpired: React.FunctionComponent<Props> = props => {
   );
   const body = I18n.t("bonus.bonusVacanze.activation.eligibilityExpired.body");
   const cancel = I18n.t("global.buttons.close");
+  const cta = I18n.t("bonus.bonusVacanze.activation.eligibilityExpired.cta");
 
   useHardwareBackButton(() => {
     props.onCancel();
@@ -45,15 +52,18 @@ const EligibilityExpired: React.FunctionComponent<Props> = props => {
         title={title}
         body={body}
       />
-      <FooterStackButton
-        buttons={[cancelButtonProps(props.onCancel, cancel)]}
+      <FooterWithButtons
+        type={"TwoButtonsInlineThird"}
+        leftButton={cancelButtonProps(props.onCancel, cancel)}
+        rightButton={confirmButtonProps(props.onRestart, cta)}
       />
     </SafeAreaView>
   );
 };
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onCancel: () => dispatch(cancelBonusVacanzeRequest())
+  onCancel: () => dispatch(cancelBonusVacanzeRequest()),
+  onRestart: () => dispatch(checkBonusVacanzeEligibility.request())
 });
 
 export default connect(

ts/features/bonusVacanze/store/actions/bonusVacanze.ts

@@ -59,6 +59,10 @@ export const cancelBonusVacanzeRequest = createStandardAction(
   "BONUS_VACANZE_REQUEST_CANCEL"
 )<void>();
 
+export const showBonusVacanze = createStandardAction("BONUS_VACANZE_SHOW")<
+  void
+>();
+
 // Complete the bonus activation phase with success
 export const completeBonusVacanzeActivation = createStandardAction(
   "BONUS_VACANZE_ACTIVATION_COMPLETE"
@@ -94,4 +98,5 @@ export type BonusActions =
   | ActionType<typeof startLoadBonusFromIdPolling>
   | ActionType<typeof cancelBonusVacanzeRequest>
   | ActionType<typeof completeBonusVacanzeActivation>
+  | ActionType<typeof showBonusVacanze>
   | ActionType<typeof cancelLoadBonusFromIdPolling>;

ts/features/bonusVacanze/store/sagas/activation/__tests__/integration/mockData.ts → ts/features/bonusVacanze/store/sagas/activation/__mock__/backendMockData.ts

@@ -2,23 +2,35 @@ import { Either, left, right } from "fp-ts/lib/Either";
 import { Errors } from "io-ts";
 import { pot } from "italia-ts-commons";
 import { ProblemJson } from "italia-ts-commons/lib/responses";
-import { BonusActivationStatusEnum } from "../../../../../../../../definitions/bonus_vacanze/BonusActivationStatus";
-import { InstanceId } from "../../../../../../../../definitions/bonus_vacanze/InstanceId";
-import { navigationHistoryPop } from "../../../../../../../store/actions/navigationHistory";
-import { mockedBonus } from "../../../../../mock/mockData";
+import { NavigationActions } from "react-navigation";
+import { Action } from "redux";
+import { BonusActivationStatusEnum } from "../../../../../../../definitions/bonus_vacanze/BonusActivationStatus";
+import { InstanceId } from "../../../../../../../definitions/bonus_vacanze/InstanceId";
+import { navigateToWalletHome } from "../../../../../../store/actions/navigation";
+import { navigationHistoryPop } from "../../../../../../store/actions/navigationHistory";
+import { mockedBonus } from "../../../../mock/mockData";
 import {
   navigateToBonusActivationCompleted,
   navigateToBonusActivationTimeout,
   navigateToBonusActiveDetailScreen,
   navigateToBonusAlreadyExists,
   navigateToEligibilityExpired
-} from "../../../../../navigation/action";
+} from "../../../../navigation/action";
+import {
+  cancelBonusVacanzeRequest,
+  checkBonusVacanzeEligibility,
+  completeBonusVacanzeActivation,
+  showBonusVacanze
+} from "../../../actions/bonusVacanze";
 import {
   ActivationState,
   BonusActivationProgressEnum
-} from "../../../../reducers/activation";
-import { AllActiveState } from "../../../../reducers/allActive";
-import { IExpectedActions } from "../mockData";
+} from "../../../reducers/activation";
+import { AllActiveState } from "../../../reducers/allActive";
+import {
+  completeBonusDefaultActions,
+  IExpectedActions
+} from "./networkingSagaResponseMockData";
 
 const genericServiceUnavailable: Either<Errors, any> = right({
   status: 500,
@@ -90,6 +102,44 @@ interface MockBackendScenario extends IExpectedActions {
   finalState: MockActivationState;
 }
 
+interface IMockUserActions extends IExpectedActions {
+  userAction: Action;
+}
+
+// Mock user actions
+
+const userCancel: IMockUserActions = {
+  displayName: "User Cancel Action",
+  userAction: cancelBonusVacanzeRequest(),
+  expectedActions: [NavigationActions.back()]
+};
+
+const userCompleteActivation: IMockUserActions = {
+  displayName: "User Complete Activation",
+  userAction: completeBonusVacanzeActivation(),
+  expectedActions: []
+};
+
+const userShowBonusVacanze: IMockUserActions = {
+  displayName: "User Show Bonus Vacanze",
+  userAction: showBonusVacanze(),
+  expectedActions: [navigateToWalletHome(), navigationHistoryPop(1)]
+};
+
+const userRestartEligibility: IMockUserActions = {
+  displayName: "User Restart Eligibility",
+  userAction: checkBonusVacanzeEligibility.request(),
+  expectedActions: []
+};
+
+export const possibleUserActions: ReadonlyArray<IMockUserActions> = [
+  userCancel,
+  userCompleteActivation,
+  userShowBonusVacanze,
+  userRestartEligibility
+];
+
+// Mock Backend response
 export const success: MockBackendScenario = {
   displayName: "success",
   responses: [
@@ -100,6 +150,7 @@ export const success: MockBackendScenario = {
   ],
   expectedActions: [
     navigateToBonusActivationCompleted(),
+    navigationHistoryPop(1),
     navigateToBonusActiveDetailScreen({ bonus: mockedBonus }),
     navigationHistoryPop(1)
   ],
@@ -117,7 +168,11 @@ export const eligibilityExpired: MockBackendScenario = {
       getBonusActivationResponseById: right(undefined)
     }
   ],
-  expectedActions: [navigateToEligibilityExpired(), navigationHistoryPop(1)],
+  expectedActions: [
+    navigateToEligibilityExpired(),
+    navigationHistoryPop(1),
+    ...completeBonusDefaultActions
+  ],
   finalState: {
     activation: { status: BonusActivationProgressEnum.ELIGIBILITY_EXPIRED },
     allActive: {}
@@ -132,7 +187,11 @@ export const bonusAlreadyExists: MockBackendScenario = {
       getBonusActivationResponseById: right(undefined)
     }
   ],
-  expectedActions: [navigateToBonusAlreadyExists(), navigationHistoryPop(1)],
+  expectedActions: [
+    navigateToBonusAlreadyExists(),
+    navigationHistoryPop(1),
+    ...completeBonusDefaultActions
+  ],
   finalState: {
     activation: { status: BonusActivationProgressEnum.EXISTS },
     allActive: {}
@@ -150,7 +209,8 @@ export const timeout: MockBackendScenario = {
   ],
   expectedActions: [
     navigateToBonusActivationTimeout(),
-    navigationHistoryPop(1)
+    navigationHistoryPop(1),
+    ...completeBonusDefaultActions
   ],
   finalState: {
     activation: { status: BonusActivationProgressEnum.TIMEOUT },
@@ -194,7 +254,7 @@ export const error: MockBackendScenario = {
       getBonusActivationResponseById: getActivationSuccessBonusError
     }
   ],
-  expectedActions: [],
+  expectedActions: completeBonusDefaultActions,
   finalState: {
     activation: { status: BonusActivationProgressEnum.ERROR },
     allActive: {}
@@ -208,5 +268,3 @@ export const backendIntegrationTestCases: ReadonlyArray<MockBackendScenario> = [
   timeout,
   error
 ];
-
-test.skip("mockDataOnlyFile", () => undefined);