feat(IT-Wallet): [SIW-3306] Add engagement banners to wallet home screen

locales/it/index.json

@@ -5760,20 +5760,32 @@
         "action": "Ricarica l'app IO",
         "failure": "Nessuna connessione. Collegati a internet e riprova."
       },
-      "upgrade": {
-        "banner": {
-          "documents": {
-            "active": {
-              "title": "Passa a IT-Wallet",
-              "description": "Aggiorna i tuoi documenti digitali e passa a funzionalità evolute con l’unico portafoglio digitale di Stato: pubblico, sicuro e gratuito. Garantito dallo Stato, accessibile solo a te.",
-              "action": "Passa a IT-Wallet"
-            },
-            "inactive": {
-              "title": "IT-Wallet per i tuoi documenti",
-              "description": "Porta i tuoi documenti digitali verso funzionalità evolute con l'unico portafoglio digitale di Stato: **pubblico, sicuro e gratuito**. Garantito dallo Stato, accessibile solo a te.",
-              "action": "Ottieni IT-Wallet"
-            }
-          }
+      "engagementBanner": {
+        "activation": {
+          "title": "Porta su IO i tuoi documenti digitali",
+          "description": "Con piena validità ufficiale, digitali e sempre a portata di mano!",
+          "action": "Aggiungi un documento"
+        },
+        "upgrade_empty": {
+          "title": "Il tuo Portafoglio è ora parte di IT-Wallet",
+          "description": "Scopri le funzionalità evolute dei documenti digitali su IO.",
+          "action": "Aggiungi un documento"
+        },
+        "upgrade": {
+          "title": "IO dà il benvenuto a IT-Wallet",
+          "description": "Il tuo portafoglio digitale pubblico: semplice, sicuro, tuo. Scopri i nuovi documenti ora disponibili!",
+          "action": "Inizia"
+        },
+        "upgrade_with_mdl": {
+          "title": "Dimostra chi sei col tuo dispositivo",
+          "description": "Usa la tua Patente digitale anche come documento di riconoscimento, in modo facile e sicuro!",
+          "action": "Inizia"
+        },
+        "dismissAlert": {
+          "title": "Vuoi rinunciare ai vantaggi di IT-Wallet?",
+          "description": "Potrai ottenere IT-Wallet in qualsiasi altro momento, andando in Impostazioni > IT-Wallet.",
+          "confirm": "Sì, rinuncia",
+          "cancel": "Indietro"
         }
       },
       "settings": {

ts/features/itwallet/common/components/ItwActivationBanner.tsx

@@ -0,0 +1,49 @@
+import I18n from "i18next";
+import { View } from "react-native";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIOSelector } from "../../../../store/hooks";
+import { ITW_ROUTES } from "../../navigation/routes";
+import { itwShouldRenderActivationBannerSelector } from "../store/selectors";
+import { ItwEngagementBanner } from "./ItwEngagementBanner";
+
+/**
+ * Banner displayed to users which are able to activate IT-Wallet.
+ * If the user taps on the action button, they will be redirected to the IT-Wallet credential onboarding screen.
+ * The wallet activiation si contextual to the credential issuance flow.
+ */
+export const ItwActivationBanner = () => {
+  const navigation = useIONavigation();
+
+  const isBannerVisible = useIOSelector(
+    itwShouldRenderActivationBannerSelector
+  );
+
+  if (!isBannerVisible) {
+    return null;
+  }
+
+  const handleOnPress = () => {
+    navigation.navigate(ITW_ROUTES.MAIN, {
+      screen: ITW_ROUTES.ONBOARDING
+    });
+  };
+
+  const handleDismiss = () => {
+    // TODO SIW-3564 implement banner dismissal logic
+  };
+
+  return (
+    <View testID="itwActivationBannerTestID" style={{ marginVertical: 16 }}>
+      <ItwEngagementBanner
+        title={I18n.t("features.itWallet.engagementBanner.activation.title")}
+        description={I18n.t(
+          "features.itWallet.engagementBanner.activation.description"
+        )}
+        action={I18n.t("features.itWallet.engagementBanner.activation.action")}
+        onPress={handleOnPress}
+        onDismiss={handleDismiss}
+        dismissable={true}
+      />
+    </View>
+  );
+};

ts/features/itwallet/common/components/ItwEnvironmentAlert.tsx

@@ -1,7 +1,8 @@
 import { Alert, Body, IOButton, VStack } from "@pagopa/io-app-design-system";
 import I18n from "i18next";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { useIOBottomSheetModal } from "../../../../utils/hooks/bottomSheet";
+import { View } from "react-native";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks.ts";
+import { useIOBottomSheetModal } from "../../../../utils/hooks/bottomSheet.tsx";
 import { itwResetEnv } from "../store/actions/environment.ts";
 import { selectItwEnv } from "../store/selectors/environment.ts";
 
@@ -46,17 +47,19 @@ export const ItwEnvironmentAlert = () => {
 
   return (
     <>
-      <Alert
-        testID="itwEnvironmentAlertTestID"
-        variant="warning"
-        content={I18n.t(
-          "features.itWallet.playgrounds.environment.banner.content"
-        )}
-        action={I18n.t(
-          "features.itWallet.playgrounds.environment.banner.action"
-        )}
-        onPress={infoModal.present}
-      />
+      <View style={{ marginVertical: 8 }}>
+        <Alert
+          testID="itwEnvironmentAlertTestID"
+          variant="warning"
+          content={I18n.t(
+            "features.itWallet.playgrounds.environment.banner.content"
+          )}
+          action={I18n.t(
+            "features.itWallet.playgrounds.environment.banner.action"
+          )}
+          onPress={infoModal.present}
+        />
+      </View>
       {infoModal.bottomSheet}
     </>
   );