Merge branch 'master' into IOPLT-784

locales/en/index.yml

@@ -886,6 +886,13 @@ authentication:
     recoverDescription: If you're missing your password, you can recover it by tapping on the following button.
     dualRecoverDescription: If you're missing your credentials, you can recover them by tapping on the following buttons.
     recoverPassword: Recover the password
+    poste_id:
+      bottom_sheet:
+        title: Log in without a password!
+        description: "If you have the Poste ID app, follow these steps:"
+        feature_1: Tap on **‘Accedi più rapidamente** in the grey band in the middle of the screen
+        feature_2: Enter your PosteID code or use biometric
+        feature_3: When you see **Autorizzazione concessa** appear, go back to IO and press **Acconsento**
   idp_login_success:
     contentTitle: Hi, {{name}}!
   errors:

locales/it/index.yml

@@ -886,6 +886,13 @@ authentication:
     dualRecoverDescription: Se hai dimenticato le tue credenziali, ti consigliamo di procedere cliccando sui bottoni qui di seguito.
     recoverUsername: Recupera il nome utente
     recoverPassword: Recupera la password
+    poste_id:
+      bottom_sheet:
+        title: Accedi senza password!
+        description: "Se hai l’app Poste ID, segui questi passaggi:"
+        feature_1: Tocca su **"Accedi più rapidamente"** nella fascia grigia al centro della schermata
+        feature_2: Inserisci il codice PosteID o usa il biometrico
+        feature_3: Quando vedrai apparire **Autorizzazione concessa**, torna su IO e premi **Acconsento**
   idp_login_success:
     contentTitle: Ciao {{name}}!
   errors:

ts/hooks/useHardwareBackButton.ts

@@ -1,6 +1,6 @@
 /* eslint-disable functional/immutable-data */
 import { BackHandler } from "react-native";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 /**
  * Custom hook to handle the hardware back button on Android devices
@@ -40,11 +40,11 @@ export const useHardwareBackButtonToDismiss = (onDismiss: () => void) => {
   });
 
   return {
-    onOpen: () => {
+    onOpen: useCallback(() => {
       isComponentOpened.current = true;
-    },
-    onClose: () => {
+    }, []),
+    onClose: useCallback(() => {
       isComponentOpened.current = false;
-    }
+    }, [])
   };
 };

ts/screens/authentication/IdpLoginScreen.tsx

@@ -9,7 +9,6 @@ import {
   WebViewHttpErrorEvent,
   WebViewNavigation
 } from "react-native-webview/lib/WebViewTypes";
-
 import _isEqual from "lodash/isEqual";
 import { IdpData } from "../../../definitions/content/IdpData";
 import { IdpSuccessfulAuthentication } from "../../components/IdpSuccessfulAuthentication";
@@ -54,12 +53,9 @@ import {
 import { getUrlBasepath } from "../../utils/url";
 import { standardLoginRequestInfoSelector } from "../../features/spidLogin/store/selectors";
 import { setStandardLoginRequestState } from "../../features/spidLogin/store/actions";
+import { ErrorType as SpidLoginErrorType } from "../../features/spidLogin/types";
 import { originSchemasWhiteList } from "./originSchemasWhiteList";
-
-enum ErrorType {
-  "LOADING_ERROR" = "LOADING_ERROR",
-  "LOGIN_ERROR" = "LOGIN_ERROR"
-}
+import { usePosteIDApp2AppEducational } from "./hooks/usePosteIDApp2AppEducational";
 
 const styles = StyleSheet.create({
   refreshIndicatorContainer: {
@@ -104,16 +100,20 @@ const IdpLoginScreen = () => {
     string | undefined
   >(undefined);
   const [loginTrace, setLoginTrace] = useState<string | undefined>(undefined);
+  const posteIdBottomsheet = usePosteIDApp2AppEducational({
+    selectedIdp,
+    requestState
+  });
 
   const setRequestState = useCallback(
-    (req: pot.Pot<true, ErrorType>) => {
+    (req: pot.Pot<true, SpidLoginErrorType>) => {
       dispatch(setStandardLoginRequestState(req));
     },
     [dispatch]
   );
 
   const handleOnLollipopCheckFailure = useCallback(() => {
-    setRequestState(pot.noneError(ErrorType.LOGIN_ERROR));
+    setRequestState(pot.noneError(SpidLoginErrorType.LOGIN_ERROR));
   }, [setRequestState]);
 
   const idpId = loggedOutWithIdpAuth?.idp.id;
@@ -138,10 +138,10 @@ const IdpLoginScreen = () => {
       if (webViewHttpError.nativeEvent.statusCode) {
         const { statusCode, url } = webViewHttpError.nativeEvent;
         if (url.includes(apiUrlPrefix) || statusCode !== 403) {
-          setRequestState(pot.noneError(ErrorType.LOADING_ERROR));
+          setRequestState(pot.noneError(SpidLoginErrorType.LOADING_ERROR));
         }
       } else {
-        setRequestState(pot.noneError(ErrorType.LOADING_ERROR));
+        setRequestState(pot.noneError(SpidLoginErrorType.LOADING_ERROR));
       }
     },
     [loggedOutWithIdpAuth?.idp.id, setRequestState]
@@ -173,7 +173,7 @@ const IdpLoginScreen = () => {
       );
 
       handleSendAssistanceLog(choosenTool, logText);
-      setRequestState(pot.noneError(ErrorType.LOGIN_ERROR));
+      setRequestState(pot.noneError(SpidLoginErrorType.LOGIN_ERROR));
       setErrorCodeOrMessage(code || message);
     },
     [dispatch, choosenTool, idp, setRequestState]
@@ -363,6 +363,7 @@ const IdpLoginScreen = () => {
     <View style={styles.webViewWrapper}>
       {!hasError && content}
       {renderMask()}
+      {posteIdBottomsheet}
     </View>
   );
 };

ts/screens/authentication/hooks/usePosteIDApp2AppEducational.tsx

@@ -0,0 +1,89 @@
+import { View } from "react-native";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { Body, FeatureInfo, VSpacer } from "@pagopa/io-app-design-system";
+import IOMarkdown from "../../../components/IOMarkdown";
+import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
+import I18n from "../../../i18n";
+import { SpidIdp } from "../../../../definitions/content/SpidIdp";
+import { StandardLoginRequestInfo } from "../../../features/spidLogin/types";
+
+type Props = {
+  selectedIdp?: SpidIdp;
+  requestState: StandardLoginRequestInfo["requestState"];
+};
+
+export const usePosteIDApp2AppEducational = ({
+  selectedIdp,
+  requestState
+}: Props) => {
+  const presentedRef = useRef(false);
+  const bottomSheetContent = useMemo(
+    () => (
+      <View>
+        <Body>
+          {I18n.t("authentication.idp_login.poste_id.bottom_sheet.description")}
+        </Body>
+        <VSpacer size={24} />
+        <FeatureInfo
+          iconName="logout"
+          body={
+            <IOMarkdown
+              content={I18n.t(
+                "authentication.idp_login.poste_id.bottom_sheet.feature_1"
+              )}
+            />
+          }
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          iconName="fingerprint"
+          body={
+            <IOMarkdown
+              content={I18n.t(
+                "authentication.idp_login.poste_id.bottom_sheet.feature_2"
+              )}
+            />
+          }
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          iconName="change"
+          body={
+            <IOMarkdown
+              content={I18n.t(
+                "authentication.idp_login.poste_id.bottom_sheet.feature_3"
+              )}
+            />
+          }
+        />
+        <VSpacer size={24} />
+      </View>
+    ),
+    []
+  );
+
+  const handleOnDismiss = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    presentedRef.current = true;
+  }, []);
+
+  const { bottomSheet, present } = useIOBottomSheetAutoresizableModal({
+    title: I18n.t("authentication.idp_login.poste_id.bottom_sheet.title"),
+    component: bottomSheetContent,
+    onDismiss: handleOnDismiss
+  });
+
+  useEffect(() => {
+    if (
+      selectedIdp?.id === "posteid" &&
+      !pot.isError(requestState) &&
+      !pot.isLoading(requestState) &&
+      !presentedRef.current
+    ) {
+      present();
+    }
+  }, [selectedIdp?.id, present, requestState]);
+
+  return bottomSheet;
+};

ts/utils/hooks/bottomSheet.tsx

@@ -158,10 +158,10 @@ export const useIOBottomSheetModal = ({
     onClose();
   };
 
-  const present = () => {
+  const present = useCallback(() => {
     bottomSheetModalRef.current?.present();
     onOpen();
-  };
+  }, [onOpen]);
 
   // // Add opacity fade effect to backdrop
   const BackdropElement = useCallback(