feat(Carta Giovani Nazionale): [#176456924,#176655324,#176655351,#176655437,#176655260,#176655162,#176456839] Adds UI on CGN activation workflow

locales/en/index.yml

@@ -2158,8 +2158,31 @@ bonus:
             closed: "Ranking for this period is closed."
       lastUpdate: Updated at {{hour}} on {{date}}
   cgn:
+    activation:
+      loading:
+        caption: "We're activating your Carta Giovani Nazionale"
+        subCaption: "Please wait."
+      error:
+        title: "The Carta Giovani Nazionale service is not available at the moment."
+        body: "We apologize for the issue.\nWe invite you to retry again later."
+      ineligible:
+        title: "We are sorry. You do not have the required characteristics to activate the Carta Giovani Nazionali."
+        body: "The Carta Giovani Nazionali is available only to Italian and European citizens residing in Italy, aged 18 to 35."
+      timeout:
+        title: "We're processing your request."
+        body: "We will send you an in-app message when your Carta Giovani will be activated."
+      alreadyActive:
+        title: "Your Carta Giovani Nazionale is already active!"
+        body: "You can find more details inside the Wallet section."
+      pending:
+        title: "Your Carta Giovani Nazionale's activation is in progress."
+        body: "You will receive a message when it has been activated."
+      success:
+        title: "Congratulation!"
+        body: "Your Carta Giovani Nazionale is active"
     cta:
       activeBonus: Activate your Carta Giovani
+      goToDetail: View your Carta Giovani
 webView:
   error:
     missingParams: Not all information necessary to access this page are available

locales/it/index.yml

@@ -2188,8 +2188,31 @@ bonus:
             closed: "La classifica per questo periodo è chiusa."
       lastUpdate: Aggiornato alle {{hour}} del {{date}}
   cgn:
+    activation:
+      loading:
+        caption: "Stiamo attivando la tua Carta Giovani Nazionale"
+        subCaption: "Ti preghiamo di attendere."
+      error:
+        title: "Il servizio Carta Giovani Nazionale in questo momento non è disponibile."
+        body: "Ci scusiamo per il disagio.\nTi invitiamo a riprovare più tardi."
+      ineligible:
+        title: "Siamo spiacenti. Non hai le caratteristiche per attivare la Carta Giovani Nazionale."
+        body: "La Carta Giovani Nazionali è disponibile solo per i cittadini italiani ed europei residenti in Italia, dai 18 ai 35 anni di età."
+      timeout:
+        title: "Stiamo processando la tua richiesta."
+        body: "Ti invieremo un messaggio in app quando la tua Carta Giovani sarà attiva."
+      alreadyActive:
+        title: "La tua Carta Giovani Nazionale è già attiva!"
+        body: "Puoi visualizzarne i dettagli nella sezione Portafoglio."
+      pending:
+        title: "La tua Carta Giovani Nazionale è in fase di attivazione."
+        body: "Riceverai un messaggio quando sarà attivata."
+      success:
+        title: "Congratulazioni!"
+        body: "La tua Carta Giovani Nazionale è attiva"
     cta:
       activeBonus: Attiva la tua Carta Giovani
+      goToDetail: Visualizza la Carta Giovani
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

ts/components/screens/GenericErrorComponent.tsx

@@ -99,8 +99,6 @@ export default class GenericErrorComponent extends React.PureComponent<Props> {
                 ? this.props.text
                 : I18n.t("wallet.errors.GENERIC_ERROR")}
             </Text>
-            <View spacer={true} extralarge={true} />
-            <View spacer={true} extralarge={true} />
 
             <Text alignCenter={true} accessible={subTextAccessible}>
               {this.props.subText !== undefined

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

@@ -12,6 +12,7 @@ import { bonusVacanzeStyle } from "../Styles";
 export type LoadingErrorProps = WithTestID<{
   isLoading: boolean;
   loadingCaption: string;
+  loadingSubtitle?: string;
   errorText?: string;
   errorSubText?: string;
   onRetry: () => void;
@@ -32,7 +33,7 @@ const renderError = (props: LoadingErrorProps) => (
   />
 );
 
-const renderLoading = (loadingCaption: string) => (
+const renderLoading = (loadingCaption: string, loadingSubtitle?: string) => (
   <View
     accessible={true}
     ref={loadingRef}
@@ -49,6 +50,7 @@ const renderLoading = (loadingCaption: string) => (
         />
       }
       title={loadingCaption}
+      body={loadingSubtitle}
     />
   </View>
 );
@@ -73,7 +75,7 @@ export const LoadingErrorComponent: React.FunctionComponent<LoadingErrorProps> =
   return (
     <SafeAreaView style={bonusVacanzeStyle.flex} testID={props.testID}>
       {props.isLoading
-        ? renderLoading(props.loadingCaption)
+        ? renderLoading(props.loadingCaption, props.loadingSubtitle)
         : renderError(props)}
     </SafeAreaView>
   );

ts/features/bonus/cgn/navigation/actions.ts

@@ -16,6 +16,11 @@ export const navigateToCgnActivationLoading = () =>
     routeName: CGN_ROUTES.ACTIVATION.LOADING
   });
 
+export const navigateToCgnAlreadyActive = () =>
+  NavigationActions.navigate({
+    routeName: CGN_ROUTES.ACTIVATION.EXISTS
+  });
+
 export const navigateToCgnActivationPending = () =>
   NavigationActions.navigate({
     routeName: CGN_ROUTES.ACTIVATION.PENDING

ts/features/bonus/cgn/navigation/navigator.ts

@@ -5,6 +5,8 @@ import CgnActivationPendingScreen from "../screens/activation/CgnActivationPendi
 import CgnActivationTimeoutScreen from "../screens/activation/CgnActivationTimeoutScreen";
 import CgnActivationCompletedScreen from "../screens/activation/CgnActivationCompletedScreen";
 import CgnActivationIneligibleScreen from "../screens/activation/CgnActivationIneligibleScreen";
+import CgnAlreadyActiveScreen from "../screens/activation/CgnAlreadyActiveScreen";
+import CgnDetailScreen from "../screens/CgnDetailScreen";
 import CGN_ROUTES from "./routes";
 
 const CgnNavigator = createStackNavigator(
@@ -18,6 +20,9 @@ const CgnNavigator = createStackNavigator(
     [CGN_ROUTES.ACTIVATION.PENDING]: {
       screen: CgnActivationPendingScreen
     },
+    [CGN_ROUTES.ACTIVATION.EXISTS]: {
+      screen: CgnAlreadyActiveScreen
+    },
     [CGN_ROUTES.ACTIVATION.TIMEOUT]: {
       screen: CgnActivationTimeoutScreen
     },
@@ -26,6 +31,9 @@ const CgnNavigator = createStackNavigator(
     },
     [CGN_ROUTES.ACTIVATION.COMPLETED]: {
       screen: CgnActivationCompletedScreen
+    },
+    [CGN_ROUTES.DETAILS]: {
+      screen: CgnDetailScreen
     }
   },
   {

ts/features/bonus/cgn/navigation/routes.ts

@@ -5,6 +5,7 @@ const CGN_ROUTES = {
     LOAD_CHECK_ACTIVATION_STATUS: "CGN_LOAD_CHECK_ACTIVATION_STATUS",
     INFORMATION_TOS: "CGN_INFORMATION_TOS",
     LOADING: "CGN_ACTIVATION_LOADING",
+    EXISTS: "CGN_ACTIVATION_EXISTS",
     TIMEOUT: "CGN_ACTIVATION_TIMEOUT",
     INELIGIBLE: "CGN_ACTIVATION_INELIGIBLE",
     PENDING: "CGN_ACTIVATION_PENDING",

ts/features/bonus/cgn/saga/__tests__/orchestration/activation/handleActivationSaga.test.ts

@@ -8,10 +8,7 @@ import {
   navigateToCgnActivationTimeout
 } from "../../../../navigation/actions";
 import { navigationHistoryPop } from "../../../../../../../store/actions/navigationHistory";
-import {
-  cgnActivationComplete,
-  cgnActivationStatus
-} from "../../../../store/actions/activation";
+import { cgnActivationStatus } from "../../../../store/actions/activation";
 import { CgnActivationProgressEnum } from "../../../../store/reducers/activation";
 import CGN_ROUTES from "../../../../navigation/routes";
 
@@ -41,9 +38,7 @@ describe("cgnActivationWorker", () => {
       .next()
       .put(navigateToCgnActivationCompleted())
       .next()
-      .put(navigationHistoryPop(1))
-      .next()
-      .take(cgnActivationComplete);
+      .put(navigationHistoryPop(1));
   });
 
   it("should activate user's CGN already on loading screen ", () => {
@@ -61,9 +56,7 @@ describe("cgnActivationWorker", () => {
       .next()
       .put(navigateToCgnActivationCompleted())
       .next()
-      .put(navigationHistoryPop(1))
-      .next()
-      .take(cgnActivationComplete);
+      .put(navigationHistoryPop(1));
   });
 
   it("should navigate to TIMEOUT SCREEN on user's CGN activation", () => {
@@ -85,8 +78,6 @@ describe("cgnActivationWorker", () => {
       .next()
       .put(navigateToCgnActivationTimeout())
       .next()
-      .put(navigationHistoryPop(1))
-      .next()
-      .take(cgnActivationComplete);
+      .put(navigationHistoryPop(1));
   });
 });

ts/features/bonus/cgn/saga/orchestration/activation/handleActivationSaga.ts

@@ -6,15 +6,15 @@ import { fromNullable } from "fp-ts/lib/Option";
 import { navigationHistoryPop } from "../../../../../../store/actions/navigationHistory";
 import {
   cgnActivationCancel,
-  cgnActivationComplete,
   cgnActivationStatus
 } from "../../../store/actions/activation";
 import {
   navigateToCgnActivationCompleted,
   navigateToCgnActivationIneligible,
   navigateToCgnActivationLoading,
   navigateToCgnActivationPending,
-  navigateToCgnActivationTimeout
+  navigateToCgnActivationTimeout,
+  navigateToCgnAlreadyActive
 } from "../../../navigation/actions";
 import { CgnActivationProgressEnum } from "../../../store/reducers/activation";
 import CGN_ROUTES from "../../../navigation/routes";
@@ -29,7 +29,7 @@ const mapEnumToNavigation = new Map<
   [CgnActivationProgressEnum.PENDING, navigateToCgnActivationPending],
   [CgnActivationProgressEnum.TIMEOUT, navigateToCgnActivationTimeout],
   [CgnActivationProgressEnum.INELIGIBLE, navigateToCgnActivationIneligible],
-  [CgnActivationProgressEnum.EXISTS, navigateToCgnActivationCompleted]
+  [CgnActivationProgressEnum.EXISTS, navigateToCgnAlreadyActive]
 ]);
 
 type CgnActivationType = ReturnType<typeof cgnActivationSaga>;
@@ -68,8 +68,6 @@ export function* cgnActivationWorker(cgnActivationSaga: CgnActivationType) {
     yield put(nextNavigationStep());
     yield put(navigationHistoryPop(1));
   }
-
-  yield take(cgnActivationComplete);
 }
 
 /**

ts/features/bonus/cgn/screens/CgnDetailScreen.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { View } from "native-base";
+import { GlobalState } from "../../../../store/reducers/types";
+import { Dispatch } from "../../../../store/actions/types";
+import { H1 } from "../../../../components/core/typography/H1";
+import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+
+type Props = ReturnType<typeof mapStateToProps> &
+  ReturnType<typeof mapDispatchToProps>;
+
+/**
+ * Screen to display all the information about the active CGN
+ */
+const CgnDetailScreen = (_: Props): React.ReactElement => (
+  // TODO PLACEHOLDER for CGN detail screen
+  <BaseScreenComponent>
+    <View>
+      <H1>{"CGN DETAIL"}</H1>
+    </View>
+  </BaseScreenComponent>
+);
+
+const mapStateToProps = (_: GlobalState) => ({});
+
+const mapDispatchToProps = (_: Dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CgnDetailScreen);

ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx

@@ -1,31 +1,48 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { View } from "native-base";
+import { SafeAreaView } from "react-native";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { Dispatch } from "../../../../../store/actions/types";
-import { H1 } from "../../../../../components/core/typography/H1";
-import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent";
+import { InfoScreenComponent } from "../../../../../components/infoScreen/InfoScreenComponent";
+import { FooterStackButton } from "../../../bonusVacanze/components/buttons/FooterStackButtons";
+import { confirmButtonProps } from "../../../bonusVacanze/components/buttons/ButtonConfigurations";
+import { IOStyles } from "../../../../../components/core/variables/IOStyles";
+import IconFont from "../../../../../components/ui/IconFont";
+import { cgnActivationComplete } from "../../store/actions/activation";
+import { navigateToCgnDetails } from "../../navigation/actions";
+import I18n from "../../../../../i18n";
+import { IOColors } from "../../../../../components/core/variables/IOColors";
 
 type Props = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
 
 /**
  * Screen which is displayed when a user requested a CGN activation
- * and it took too long to get an answer from the server
- * (the user will be notified when the activation is completed by a message)
+ * and it has been correctly activated
  */
-const CgnActivationCompletedScreen = (_: Props): React.ReactElement => (
-  // PLACEHOLDER for activation completed screen
-  <BaseScreenComponent>
-    <View>
-      <H1>{"Congrats, activation completed"}</H1>
-    </View>
-  </BaseScreenComponent>
+const CgnActivationCompletedScreen = (props: Props): React.ReactElement => (
+  <SafeAreaView style={IOStyles.flex}>
+    <InfoScreenComponent
+      image={<IconFont name={"io-complete"} size={104} color={IOColors.aqua} />}
+      title={I18n.t("bonus.cgn.activation.success.title")}
+      body={I18n.t("bonus.cgn.activation.success.body")}
+    />
+    <FooterStackButton
+      buttons={[
+        confirmButtonProps(props.onConfirm, I18n.t("bonus.cgn.cta.goToDetail"))
+      ]}
+    />
+  </SafeAreaView>
 );
 
 const mapStateToProps = (_: GlobalState) => ({});
 
-const mapDispatchToProps = (_: Dispatch) => ({});
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onConfirm: () => {
+    dispatch(cgnActivationComplete());
+    dispatch(navigateToCgnDetails());
+  }
+});
 
 export default connect(
   mapStateToProps,

ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx

@@ -1,10 +1,16 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { View } from "native-base";
+import { SafeAreaView } from "react-native";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { Dispatch } from "../../../../../store/actions/types";
-import { H1 } from "../../../../../components/core/typography/H1";
-import BaseScreenComponent from "../../../../../components/screens/BaseScreenComponent";
+import { InfoScreenComponent } from "../../../../../components/infoScreen/InfoScreenComponent";
+import { renderInfoRasterImage } from "../../../../../components/infoScreen/imageRendering";
+import FooterWithButtons from "../../../../../components/ui/FooterWithButtons";
+import { cancelButtonProps } from "../../../bonusVacanze/components/buttons/ButtonConfigurations";
+import { IOStyles } from "../../../../../components/core/variables/IOStyles";
+import { cgnActivationCancel } from "../../store/actions/activation";
+import image from "../../../../../../img/servicesStatus/error-detail-icon.png";
+import I18n from "../../../../../i18n";
 
 type Props = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
@@ -13,18 +19,28 @@ type Props = ReturnType<typeof mapStateToProps> &
  * Screen which is displayed when a user requested a CGN activation
  * but is not eligible for its activation
  */
-const CgnActivationIneligibleScreen = (_: Props): React.ReactElement => (
-  // PLACEHOLDER for request INELIGIBLE screen
-  <BaseScreenComponent>
-    <View>
-      <H1>{"You're not eligible to CGN activation"}</H1>
-    </View>
-  </BaseScreenComponent>
+const CgnActivationIneligibleScreen = (props: Props): React.ReactElement => (
+  <SafeAreaView style={IOStyles.flex}>
+    <InfoScreenComponent
+      image={renderInfoRasterImage(image)}
+      title={I18n.t("bonus.cgn.activation.ineligible.title")}
+      body={I18n.t("bonus.cgn.activation.ineligible.body")}
+    />
+    <FooterWithButtons
+      type="SingleButton"
+      leftButton={cancelButtonProps(
+        props.onCancel,
+        I18n.t("global.buttons.exit")
+      )}
+    />
+  </SafeAreaView>
 );
 
 const mapStateToProps = (_: GlobalState) => ({});
 
-const mapDispatchToProps = (_: Dispatch) => ({});
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onCancel: () => dispatch(cgnActivationCancel())
+});
 
 export default connect(
   mapStateToProps,