feat: [IOPID-1548] DS add new cie errors

locales/de/index.yml

@@ -700,7 +700,6 @@ authentication:
     subtitlel2: "Um die App nutzen zu können, müsst du zunächst den Zugang zu IO entsperren."
     subtitlel3: "Um mit all deinen SPID-Anmeldedaten oder deiner CIE auf die App zugreifen zu können, musst du den Zugang entsperren."
     learnmore: "Mehr erfahren"
-    loginIO: "Schließen"
   unlockmodal:
     title: "Was bedeutet das?"
     description1_1: "Wenn du den Zugang zu IO aus Sicherheitsgründen gesperrt hast, musst du ihn zunächst entsperren, um die App wieder öffnen zu können."

locales/en/index.yml

@@ -607,6 +607,16 @@ authentication:
     expiredCardHeaderTitle: Login with CIE
     expiredCardContent: The card used is no longer valid or has expired. Use SPID to enter the app.
     expiredCardHelp: How to renew your Electronic Identity Card?
+  cie_errors: 
+    error_22: 
+      title: You haven't agreed to share your data
+      subtitle: To enter, you must agree to share some data
+    error_1001:
+      title: Sorry, you don't meet the minimum age requirement
+      subtitle: You must be at least 18 years old
+    generic: 
+      title: Sorry, access was not available.
+      subtitle: A problem occurred while logging in. Please try again in a few minutes.
   cie:
     genericTitle: Login with CIE
     cie: CIE
@@ -751,7 +761,7 @@ authentication:
     subtitlel2: In order to use the app, you must first unlock access to IO.
     subtitlel3: To be able to access the app with all your SPID or CIE identities, unlock access.
     learnmore: Learn more
-    loginIO: Close
+    loginIO: Not now
   unlockmodal:
     title: What does it mean?
     description1_1: If you have blocked access to IO for security reasons, you must first unlock it in order to re-enter the app.

locales/it/index.yml

@@ -607,6 +607,16 @@ authentication:
     expiredCardHeaderTitle: Entra con CIE
     expiredCardContent: La carta utilizzata potrebbe essere scaduta o non più valida. Prova ad usare SPID per entrare in app.
     expiredCardHelp: Come rinnovare la propria Carta di Identità Elettronica?
+  cie_errors: 
+    error_22: 
+      title: Non hai dato il consenso all’invio dei dati
+      subtitle: Per accedere, è necessario acconsentire all’invio di alcuni dati.
+    error_1001:
+      title: Non hai l'età minima richiesta
+      subtitle: Per accedere, devi avere almeno 18 anni
+    generic: 
+      title: Non è stato possibile accedere
+      subtitle: Si è verificato un problema durante l’accesso. Riprova tra qualche minuto.
   cie:
     genericTitle: Entra con CIE
     cie: CIE
@@ -751,7 +761,7 @@ authentication:
     subtitlel2: Per poter usare l'app, devi prima sbloccare l'accesso a IO.
     subtitlel3: Per poter accedere all’app con tutte le tue identità SPID o CIE, sblocca l’accesso.
     learnmore: Scopri di più
-    loginIO: Chiudi
+    loginIO: Non ora, entra su IO
   unlockmodal:
     title: Cosa significa?
     description1_1: Se hai bloccato l’accesso a IO per motivi di sicurezza, per poter rientrare in app devi prima sbloccarlo.

ts/components/screens/CustomWizardScreen.tsx

@@ -0,0 +1,126 @@
+import {
+  Body,
+  ButtonLink,
+  ButtonLinkProps,
+  ButtonSolid,
+  ButtonSolidProps,
+  ContentWrapper,
+  H3,
+  IOPictograms,
+  IOStyles,
+  Pictogram,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { SafeAreaView } from "react-native-safe-area-context";
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import {
+  BodyProps,
+  ComposedBodyFromArray
+} from "../core/typography/ComposedBodyFromArray";
+export type CustomWizardScreenProps = {
+  title: string;
+  description?: string | Array<BodyProps>;
+  pictogram: IOPictograms;
+  primaryButton: Pick<
+    ButtonSolidProps,
+    "label" | "accessibilityLabel" | "onPress" | "testID"
+  >;
+  actionButton?: Pick<
+    ButtonLinkProps,
+    "label" | "accessibilityLabel" | "onPress" | "testID"
+  >;
+  buttonLink?: Pick<
+    ButtonLinkProps,
+    "label" | "accessibilityLabel" | "onPress" | "testID"
+  >;
+};
+
+/**
+ * A common screen used in a wizard flow to show a pictogram, a title, a description and one or two buttons.
+ */
+const CustomWizardScreen = ({
+  title,
+  description,
+  pictogram,
+  primaryButton,
+  actionButton,
+  buttonLink
+}: CustomWizardScreenProps) => (
+  <SafeAreaView style={IOStyles.flex}>
+    <WizardBody
+      pictogram={pictogram}
+      title={title}
+      description={description}
+      buttonLink={buttonLink}
+    />
+    <ContentWrapper>
+      <ButtonSolid {...primaryButton} fullWidth={true} />
+      {actionButton && (
+        <>
+          <VSpacer size={24} />
+          <View style={[IOStyles.alignCenter, IOStyles.selfCenter]}>
+            <ButtonLink {...actionButton} />
+          </View>
+          <VSpacer size={16} />
+        </>
+      )}
+    </ContentWrapper>
+  </SafeAreaView>
+);
+
+type CustomWizardBodyProps = {
+  title: string;
+  description?: string | Array<BodyProps>;
+  pictogram: IOPictograms;
+  buttonLink?: Pick<
+    ButtonLinkProps,
+    "label" | "accessibilityLabel" | "onPress" | "testID"
+  >;
+};
+
+const WizardBody = ({
+  title,
+  description,
+  pictogram,
+  buttonLink
+}: CustomWizardBodyProps) => (
+  <View style={styles.wizardContent}>
+    <View style={IOStyles.alignCenter}>
+      <Pictogram name={pictogram} size={120} />
+    </View>
+    <VSpacer size={24} />
+    <View style={{ paddingHorizontal: 28 }}>
+      <H3 style={styles.textCenter}>{title}</H3>
+      {description && (
+        <>
+          <VSpacer size={8} />
+          {typeof description === "string" ? (
+            <Body style={styles.textCenter}>{description}</Body>
+          ) : (
+            <ComposedBodyFromArray body={description} textAlign="center" />
+          )}
+        </>
+      )}
+      {buttonLink && (
+        <View style={IOStyles.selfCenter}>
+          <VSpacer size={16} />
+          <ButtonLink {...buttonLink} />
+        </View>
+      )}
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  textCenter: {
+    textAlign: "center"
+  },
+  wizardContent: {
+    ...IOStyles.flex,
+    ...IOStyles.horizontalContentPadding,
+    ...IOStyles.centerJustified
+  }
+});
+
+export { CustomWizardScreen };

ts/navigation/AuthenticationNavigator.tsx

@@ -21,6 +21,8 @@ import { AuthSessionPage } from "../screens/authentication/idpAuthSessionHandler
 import CieNotSupported from "../components/cie/CieNotSupported";
 import RootedDeviceModal from "../screens/modal/RootedDeviceModal";
 import { isGestureEnabled } from "../utils/navigation";
+import CieAuthErrorScreen from "../screens/authentication/cie/CieAuthErrorScreen";
+import UnlockAccessScreen from "../screens/authentication/UnlockAccessScreen";
 import { AuthenticationParamsList } from "./params/AuthenticationParamsList";
 import ROUTES from "./routes";
 import CloseButton from "./components/CloseButton";
@@ -121,6 +123,16 @@ const AuthenticationStackNavigator = () => (
         component={CieWrongCiePinScreen}
       />
 
+      <Stack.Screen
+        name={ROUTES.AUTH_ERROR_SCREEN}
+        component={CieAuthErrorScreen}
+      />
+
+      <Stack.Screen
+        name={ROUTES.UNLOCK_ACCESS_SCREEN}
+        component={UnlockAccessScreen}
+      />
+
       <Stack.Screen
         name={ROUTES.CIE_EXPIRED_SCREEN}
         component={CieExpiredOrInvalidScreen}

ts/navigation/params/AuthenticationParamsList.ts

@@ -1,7 +1,9 @@
 import { ChosenIdentifier } from "../../screens/authentication/NewOptInScreen";
+import { AuthErrorScreenProps } from "../../screens/authentication/cie/CieAuthErrorScreen";
 import { CieCardReaderScreenNavigationParams } from "../../screens/authentication/cie/CieCardReaderScreen";
 import { CieConsentDataUsageScreenNavigationParams } from "../../screens/authentication/cie/CieConsentDataUsageScreen";
 import { CieWrongCiePinScreenNavigationParams } from "../../screens/authentication/cie/CieWrongCiePinScreen";
+import { UnlockAccessProps } from "../../screens/authentication/UnlockAccessComponent";
 import ROUTES from "../routes";
 
 export type AuthenticationParamsList = {
@@ -14,6 +16,8 @@ export type AuthenticationParamsList = {
   [ROUTES.AUTHENTICATION_AUTH_SESSION]: undefined;
   [ROUTES.AUTHENTICATION_IDP_TEST]: undefined;
   [ROUTES.CIE_NOT_SUPPORTED]: undefined;
+  [ROUTES.AUTH_ERROR_SCREEN]: AuthErrorScreenProps;
+  [ROUTES.UNLOCK_ACCESS_SCREEN]: UnlockAccessProps;
   // For expired cie screen
   [ROUTES.CIE_EXPIRED_SCREEN]: undefined;
   [ROUTES.CIE_PIN_SCREEN]: undefined;

ts/navigation/routes.ts

@@ -16,6 +16,8 @@ const ROUTES = {
   AUTHENTICATION_IDP_TEST: "AUTHENTICATION_IDP_TEST",
   AUTHENTICATION_CIE: "AUTHENTICATION_CIE",
   CIE_NOT_SUPPORTED: "CIE_NOT_SUPPORTED",
+  AUTH_ERROR_SCREEN: "CIE_AUTH_ERROR_SCREEN",
+  UNLOCK_ACCESS_SCREEN: "UNLOCK_ACCESS_SCREEN",
   MARKDOWN: "MARKDOWN",
 
   // CIE

ts/screens/authentication/IdpLoginScreen.tsx

@@ -50,9 +50,9 @@ import {
 import { getUrlBasepath } from "../../utils/url";
 import { IdpData } from "../../../definitions/content/IdpData";
 import { trackSpidLoginError } from "../../utils/analytics";
-import UnlockAccessScreen from "../onboarding/UnlockAccessScreen";
 import { apiUrlPrefix } from "../../config";
 import { emptyContextualHelp } from "../../utils/emptyContextualHelp";
+import UnlockAccessComponent from "./UnlockAccessComponent";
 import { originSchemasWhiteList } from "./originSchemasWhiteList";
 import { IdpAuthErrorScreen } from "./idpAuthErrorScreen";
 
@@ -228,7 +228,14 @@ const IdpLoginScreen = (props: Props) => {
       );
     } else if (pot.isError(requestState)) {
       if (errorCode === "1002") {
-        return <UnlockAccessScreen identifier="SPID" />;
+        // TODO: refactor this logic and
+        // change this UnlockAccessComponent with navigation
+        // props.navigation.navigate(ROUTES.AUTHENTICATION, {
+        //   screen: ROUTES.UNLOCK_ACCESS_SCREEN,
+        //   params: { authLevel: "L2" }
+        // });
+        // jira ticket: https://pagopa.atlassian.net/browse/IOPID-1547
+        return <UnlockAccessComponent authLevel="L2" />;
       } else {
         return (
           <IdpAuthErrorScreen