Merge branch 'master' into IOAPPX-431-fix-dot-alignment-message-list-…

…item

locales/en/index.yml

@@ -628,6 +628,7 @@ authentication:
       module_cie_id:
         title: Login with CieID
         subtitle: Use the CieID app
+        badge: New
       help_banner:
         title: Not sure what to choose?
         action: We give you a hand
@@ -659,6 +660,9 @@ 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?
+    tour_guide:
+      title: New
+      content: Now you can use CieID to log in IO!
   wizards:
     cie_id_wizard:
       title: Do you have the CieID app?

locales/it/index.yml

@@ -628,6 +628,7 @@ authentication:
       module_cie_id:
         title: Entra con CieID
         subtitle: Usa l'app CieID
+        badge: Novità
       help_banner:
         title: Non sai cosa scegliere?
         action: Ti diamo una mano
@@ -659,6 +660,9 @@ 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?
+    tour_guide:
+      title: Novità
+      content: Ora puoi usare CieID per entrare su IO!
   wizards:
     cie_id_wizard:
       title: Hai l'app CieID?

package.json

@@ -110,7 +110,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "3.0.1",
+    "@pagopa/io-app-design-system": "3.1.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
     "@pagopa/io-react-native-crypto": "^0.3.0",

ts/features/cieLogin/store/actions/index.ts

@@ -10,7 +10,12 @@ export const cieIDFeatureSetEnabled = createStandardAction(
   "PREFERENCES_CIE_ID_FEATURE_SET_ENABLED"
 )<{ isCieIDFeatureEnabled: boolean }>();
 
+export const cieIDDisableTourGuide = createStandardAction(
+  "CIE_ID_DISABLE_TOUR_GUIDE"
+)();
+
 export type CieLoginConfigActions =
   | ActionType<typeof cieLoginDisableUat>
   | ActionType<typeof cieLoginEnableUat>
-  | ActionType<typeof cieIDFeatureSetEnabled>;
+  | ActionType<typeof cieIDFeatureSetEnabled>
+  | ActionType<typeof cieIDDisableTourGuide>;

ts/features/cieLogin/store/reducers/index.ts

@@ -1,21 +1,32 @@
 import { getType } from "typesafe-actions";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { PersistConfig, persistReducer } from "redux-persist";
 import {
+  createMigrate,
+  MigrationManifest,
+  PersistConfig,
+  PersistedState,
+  persistReducer
+} from "redux-persist";
+import { merge } from "lodash";
+import {
+  cieIDDisableTourGuide,
   cieIDFeatureSetEnabled,
   cieLoginDisableUat,
   cieLoginEnableUat
 } from "../actions";
 import { Action } from "../../../../store/actions/types";
+import { isDevEnv } from "../../../../utils/environment";
 
 export type CieLoginState = {
   useUat: boolean;
   isCieIDFeatureEnabled: boolean;
+  isCieIDTourGuideEnabled: boolean;
 };
 
 export const cieLoginInitialState = {
   useUat: false,
-  isCieIDFeatureEnabled: false
+  isCieIDFeatureEnabled: false,
+  isCieIDTourGuideEnabled: true
 };
 
 const cieLoginReducer = (
@@ -38,18 +49,29 @@ const cieLoginReducer = (
         ...state,
         ...action.payload
       };
+    case getType(cieIDDisableTourGuide):
+      return {
+        ...state,
+        isCieIDTourGuideEnabled: false
+      };
     default:
       return state;
   }
 };
 
-const CURRENT_REDUX_CIE_LOGIN_STORE_VERSION = -1;
+const CURRENT_REDUX_CIE_LOGIN_STORE_VERSION = 0;
+
+const migrations: MigrationManifest = {
+  "0": (state: PersistedState) =>
+    merge(state, "features.loginFeatures.cieLogin.isCieIDTourGuideEnabled")
+};
 
 const persistConfig: PersistConfig = {
   key: "cieLogin",
   storage: AsyncStorage,
+  migrate: createMigrate(migrations, { debug: isDevEnv }),
   version: CURRENT_REDUX_CIE_LOGIN_STORE_VERSION,
-  whitelist: ["isCieIDFeatureEnabled"]
+  whitelist: ["isCieIDFeatureEnabled", "isCieIDTourGuideEnabled"]
 };
 
 export const cieLoginPersistor = persistReducer<CieLoginState, Action>(

ts/features/cieLogin/store/selectors/index.ts

@@ -22,3 +22,10 @@ export const isCieIDLocalFeatureEnabledSelector = (state: GlobalState) =>
 export const isCieIDFFEnabledSelector = (state: GlobalState) =>
   isCieIDLocalFeatureEnabledSelector(state) ||
   isCieIdMinAppVersionEnabledSelector(state);
+
+/**
+ * Both `isCieIDTourGuideEnabled` and `isCieIDFFEnabledSelector` return value must be `true`
+ */
+export const isCieIDTourGuideEnabledSelector = (state: GlobalState) =>
+  state.features.loginFeatures.cieLogin.isCieIDTourGuideEnabled &&
+  isCieIDFFEnabledSelector(state);

ts/features/common/store/reducers/__tests__/__snapshots__/index.test.ts.snap

@@ -150,6 +150,7 @@ exports[`featuresPersistor should match snapshot 1`] = `
   "loginFeatures": {
     "cieLogin": {
       "isCieIDFeatureEnabled": false,
+      "isCieIDTourGuideEnabled": true,
       "useUat": false,
     },
     "fastLogin": {

ts/screens/authentication/LandingScreen.tsx

@@ -8,7 +8,8 @@ import {
   ButtonSolid,
   ContentWrapper,
   ModuleNavigation,
-  VSpacer
+  VSpacer,
+  Tooltip
 } from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
 import JailMonkey from "jail-monkey";
@@ -32,6 +33,7 @@ import { IOStyles } from "../../components/core/variables/IOStyles";
 import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
 import {
   isCieIDFFEnabledSelector,
+  isCieIDTourGuideEnabledSelector,
   isCieLoginUatEnabledSelector
 } from "../../features/cieLogin/store/selectors";
 import { isFastLoginEnabledSelector } from "../../features/fastLogin/store/selectors";
@@ -50,6 +52,7 @@ import { setAccessibilityFocus } from "../../utils/accessibility";
 import { tosConfigSelector } from "../../features/tos/store/selectors";
 import { useIOBottomSheetModal } from "../../utils/hooks/bottomSheet";
 import useNavigateToLoginMethod from "../../hooks/useNavigateToLoginMethod";
+import { cieIDDisableTourGuide } from "../../features/cieLogin/store/actions";
 import { trackMethodInfo } from "./analytics";
 import { Carousel } from "./carousel/Carousel";
 
@@ -62,6 +65,9 @@ const SPACE_BETWEEN_BUTTONS = 8;
 const SPACE_AROUND_BUTTON_LINK = 16;
 
 export const LandingScreen = () => {
+  const isCieIDTourGuideEnabled = useIOSelector(
+    isCieIDTourGuideEnabledSelector
+  );
   const isCieIDFFEnabled = useIOSelector(isCieIDFFEnabledSelector);
   const accessibilityFirstFocuseViewRef = useRef<View>(null);
   const {
@@ -100,6 +106,12 @@ export const LandingScreen = () => {
           )}
           icon="device"
           testID="bottom-sheet-login-with-cie-id"
+          badge={{
+            variant: "turquoise",
+            text: I18n.t(
+              "authentication.landing.cie_bottom_sheet.module_cie_id.badge"
+            )
+          }}
           onPress={() => navigateToCieIdLoginScreen("SpidL2")}
         />
         <VSpacer size={24} />
@@ -241,17 +253,28 @@ export const LandingScreen = () => {
     }
   }, [isCieSupported, navigation]);
 
-  const getLoginButtons = useCallback((): [JSX.Element, JSX.Element] => {
+  const [firstButton, secondButton] = useMemo((): [
+    JSX.Element,
+    JSX.Element
+  ] => {
     const loginCieButton = (
-      <ButtonSolid
-        testID="landing-button-login-cie"
-        accessibilityLabel={I18n.t("authentication.landing.loginCie")}
-        fullWidth
-        color={isCieUatEnabled ? "danger" : "primary"}
-        label={I18n.t("authentication.landing.loginCie")}
-        icon={"cie"}
-        onPress={navigateToCiePinScreen}
-      />
+      <Tooltip
+        closeIconAccessibilityLabel={I18n.t("global.buttons.close")}
+        isVisible={isCieIDTourGuideEnabled}
+        onClose={() => dispatch(cieIDDisableTourGuide())}
+        title={I18n.t("authentication.landing.tour_guide.title")}
+        content={I18n.t("authentication.landing.tour_guide.content")}
+      >
+        <ButtonSolid
+          testID="landing-button-login-cie"
+          accessibilityLabel={I18n.t("authentication.landing.loginCie")}
+          fullWidth
+          color={isCieUatEnabled ? "danger" : "primary"}
+          label={I18n.t("authentication.landing.loginCie")}
+          icon="cieLetter"
+          onPress={navigateToCiePinScreen}
+        />
+      </Tooltip>
     );
     const loginSpidButton = (
       <ButtonSolid
@@ -274,11 +297,13 @@ export const LandingScreen = () => {
 
     return [loginSpidButton, loginCieButton];
   }, [
-    isCieIDFFEnabled,
-    isCieSupported,
+    isCieIDTourGuideEnabled,
     isCieUatEnabled,
     navigateToCiePinScreen,
-    navigateToIdpSelection
+    navigateToIdpSelection,
+    isCieIDFFEnabled,
+    isCieSupported,
+    dispatch
   ]);
 
   const LandingScreenComponent = () => {
@@ -345,8 +370,6 @@ export const LandingScreen = () => {
       []
     );
 
-    const [firstButton, secondButton] = getLoginButtons();
-
     return (
       <View style={IOStyles.flex}>
         {isSessionExpiredRef.current ? (