feat: [IOPID-1725] New DS on CIE certificates KO screen (#5775)

## Short description Integrate new DS on CIE certificates KO screen > [!Note] > To test this case, I replaced the wrong pin screen with this one (the CIE certificate KO screen), so the video flow is wrong, but the important thing was to show the screen! > [!Note] > Accessibility tests have not been performed because the template of this screen has been tested many other times and works. ## Screens <p> | 🤖 Android 🤖 | 🍏 iOS 🍏 | | - | - | | <video src="https://github.com/pagopa/io-app/assets/83651704/69a43a62-4637-410e-b4f0-6678110097ef" /> | <video src="https://github.com/pagopa/io-app/assets/83651704/5a79938f-540e-4300-88bd-5040cfb51a7b" /> | </p> ## How to test Run this command `yarn cie-ios:prod` and after this run the application with production environment and then, if you, like me, do not have an expired or revoked CIE, change [this setState](https://github.com/pagopa/io-app/blob/d5d5681817064085219e3854e4fef56431c4519b/ts/screens/authentication/cie/CieCardReaderScreen.tsx#L282) with [this setState](https://github.com/pagopa/io-app/blob/d5d5681817064085219e3854e4fef56431c4519b/ts/screens/authentication/cie/CieCardReaderScreen.tsx#L298) and insert the uncorrect PIN before scan the card. If you have an expired or revoked CIE, run the flow normally. --------- Co-authored-by: Fabio Bombardi <[email protected]> Co-authored-by: mariateresaventura <[email protected]>
pagopa · May 17, 2024 · 26db96b · 26db96b
1 parent e8eeee1
commit 26db96b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 56 deletions.
diff --git a/locales/de/index.yml b/locales/de/index.yml
@@ -572,9 +572,7 @@ authentication:
     card5-title: "Willkommen in IO!"
     card5-content: "Lass uns gemeinsam herausfinden, was du machen kannst"
     card5-content-accessibility: "Wähle das vorherige Element, um einen Chat mit dem IO-Team zu beginnen, wenn etwas nicht so funktioniert, wie es sollte."
-    expiredCardTitle: "Karte abgelaufen oder nicht mehr gültig"
     expiredCardHeaderTitle: "Anmeldung mit CIE"
-    expiredCardContent: "Die verwendete Karte ist nicht mehr gültig oder abgelaufen.\nWenn du dich anmelden und auf die IO zugreifen möchtest, musst du SPID verwenden."
     expiredCardHelp: "Wie erneuert man seine elektronische Identitätskarte?"
   cie:
     genericTitle: "Anmeldung mit CIE"

diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -603,9 +603,9 @@ authentication:
     card5-title: Welcome to IO!
     card5-content: What can you do?
     card5-content-accessibility: Select previous item to open a chat with the IO team if something is not working.
-    expiredCardTitle: Card expired or no longer valid
+    expiredCardTitle: The CIE verification failed
     expiredCardHeaderTitle: Login with CIE
-    expiredCardContent: "The card used is no longer valid or has expired.\nIf you want to log in and access IO you must use SPID."
+    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:
     genericTitle: Login with CIE

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -603,9 +603,9 @@ authentication:
     card5-title: Ti diamo il benvenuto su IO!
     card5-content: Vediamo insieme cosa puoi fare
     card5-content-accessibility: Seleziona elemento precedente per aprire una chat con il team di IO se qualcosa non funziona come dovrebbe.
-    expiredCardTitle: Carta scaduta o non più valida
+    expiredCardTitle: La verifica della CIE non è andata a buon fine
     expiredCardHeaderTitle: Entra con CIE
-    expiredCardContent: "La carta utilizzata non è più valida oppure è scaduta.\nSe vuoi autenticarti ed accedere ad IO devi usare SPID."
+    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:
     genericTitle: Entra con CIE

diff --git a/ts/navigation/AuthenticationNavigator.tsx b/ts/navigation/AuthenticationNavigator.tsx
@@ -83,11 +83,6 @@ const AuthenticationStackNavigator = () => (
       component={TestAuthenticationScreen}
     />
 
-    <Stack.Screen
-      name={ROUTES.CIE_EXPIRED_SCREEN}
-      component={CieExpiredOrInvalidScreen}
-    />
-
     <Stack.Screen
       name={ROUTES.CIE_PIN_SCREEN}
       component={CiePinScreen}
@@ -125,6 +120,11 @@ const AuthenticationStackNavigator = () => (
         name={ROUTES.CIE_WRONG_PIN_SCREEN}
         component={CieWrongCiePinScreen}
       />
+
+      <Stack.Screen
+        name={ROUTES.CIE_EXPIRED_SCREEN}
+        component={CieExpiredOrInvalidScreen}
+      />
     </Stack.Group>
 
     <Stack.Group

diff --git a/ts/screens/authentication/cie/CieExpiredOrInvalidScreen.tsx b/ts/screens/authentication/cie/CieExpiredOrInvalidScreen.tsx
@@ -1,53 +1,29 @@
-import {
-  ContentWrapper,
-  FooterWithButtons,
-  VSpacer
-} from "@pagopa/io-app-design-system";
-import * as React from "react";
-import { ScrollView } from "react-native";
-import { Body } from "../../../components/core/typography/Body";
-import { Link } from "../../../components/core/typography/Link";
-import { ScreenContentHeader } from "../../../components/screens/ScreenContentHeader";
-import TopScreenComponent from "../../../components/screens/TopScreenComponent";
-import { openLink } from "../../../components/ui/Markdown/handlers/link";
+import React, { useCallback } from "react";
 import I18n from "../../../i18n";
-import { resetToAuthenticationRoute } from "../../../store/actions/navigation";
-
-const bookingUrl = I18n.t("cie.booking_url");
-const browseToLink = () => openLink(bookingUrl);
+import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
+import ROUTES from "../../../navigation/routes";
 
 const CieExpiredOrInvalidScreen = () => {
-  const handleGoBack = () => resetToAuthenticationRoute();
+  const navigation = useIONavigation();
+
+  const handleClose = useCallback(() => {
+    navigation.navigate(ROUTES.AUTHENTICATION, {
+      screen: ROUTES.AUTHENTICATION_LANDING
+    });
+  }, [navigation]);
 
   return (
-    <TopScreenComponent
-      goBack={handleGoBack}
-      headerTitle={I18n.t("authentication.landing.expiredCardHeaderTitle")}
-    >
-      <ScreenContentHeader
-        title={I18n.t("authentication.landing.expiredCardTitle")}
-      />
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <ContentWrapper>
-          <Body>{I18n.t("authentication.landing.expiredCardContent")}</Body>
-          <VSpacer size={16} />
-          <Link onPress={browseToLink}>
-            {I18n.t("authentication.landing.expiredCardHelp")}
-          </Link>
-        </ContentWrapper>
-      </ScrollView>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Outline",
-          buttonProps: {
-            label: I18n.t("global.buttons.cancel"),
-            accessibilityLabel: I18n.t("global.buttons.cancel"),
-            onPress: handleGoBack
-          }
-        }}
-      />
-    </TopScreenComponent>
+    <OperationResultScreenContent
+      pictogram="attention"
+      title={I18n.t("authentication.landing.expiredCardTitle")}
+      subtitle={I18n.t("authentication.landing.expiredCardContent")}
+      action={{
+        label: I18n.t("global.buttons.close"),
+        accessibilityLabel: I18n.t("global.buttons.close"),
+        onPress: handleClose
+      }}
+    />
   );
 };