feat(IT Wallet): [SIW-218] Add action banner sticky component (#4721)

## Short description
This PR adds an ITW action banner sticky component. It also adds the
banner in message home screen.

locales/en/index.yml

@@ -3220,7 +3220,14 @@ features:
       itemSubtitle: "{{date}} · {{time}} · ID {{id}}"
       signed: "Signed"
       notAvailable: "Not available"
-      signingInProgress: "Signature in progress"   
+      signingInProgress: "Signature in progress"  
+  itWallet:
+    title: "IT Wallet"
+    actionBanner:
+      title: "Novità IT Wallet"
+      description: "Da oggi puoi collezionare le tue credenziali digitali (come Licenza di Guida, Tessera Sanitaria, etc.) e accedere ai servizi online con IT Wallet."
+      action: "Attiva IT Wallet"
+      hideLabel: "Nascondi questo banner"
 webView:
   error:
     missingParams: Not all information necessary to access this page are available

locales/it/index.yml

@@ -3244,7 +3244,14 @@ features:
       itemSubtitle: "{{date}} · {{time}} · ID {{id}}"
       signed: "Firmato"
       notAvailable: "Non disponibile"
-      signingInProgress: "Firma in corso"        
+      signingInProgress: "Firma in corso"   
+  itWallet:
+    title: "IT Wallet"
+    actionBanner:
+      title: "Novità IT Wallet"
+      description: "Da oggi puoi collezionare le tue credenziali digitali (come Licenza di Guida, Tessera Sanitaria, etc.) e accedere ai servizi online con IT Wallet."
+      action: "Attiva IT Wallet"
+      hideLabel: "Nascondi questo banner"
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

ts/components/messages/MessagesInbox.tsx

@@ -10,6 +10,8 @@ import { UaDonationsBanner } from "../../features/uaDonations/components/UaDonat
 import { useItemsSelection } from "../../utils/hooks/useItemsSelection";
 import ListSelectionBar from "../ListSelectionBar";
 import { IOStyles } from "../core/variables/IOStyles";
+import { ItwActionBanner } from "../../features/it-wallet/components/ItwActionBanner";
+import { itWalletEnabled } from "../../config";
 import { EmptyListComponent } from "./EmptyListComponent";
 import MessageList from "./MessageList";
 
@@ -81,7 +83,9 @@ const MessagesInbox = ({
           onLongPressItem={onLongPressItem}
           selectedMessageIds={O.toUndefined(selectedItems)}
           ListEmptyComponent={ListEmptyComponent}
-          ListHeaderComponent={<UaDonationsBanner />}
+          ListHeaderComponent={
+            itWalletEnabled ? <ItwActionBanner /> : <UaDonationsBanner />
+          }
         />
       </View>
       {isSelecting && (

ts/features/it-wallet/components/ItwActionBanner.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { View } from "react-native";
+import { Banner } from "../../../components/Banner";
+import { VSpacer } from "../../../components/core/spacer/Spacer";
+import I18n from "../../../i18n";
+
+/**
+ * The base graphical component, take a text as input and dispatch onPress when pressed
+ * include also a close button
+ */
+export const ItwActionBanner = (): React.ReactElement => {
+  const viewRef = React.createRef<View>();
+  return (
+    <>
+      <VSpacer size={24} />
+      <Banner
+        testID={"ItwBannerTestID"}
+        viewRef={viewRef}
+        color={"neutral"}
+        variant="big"
+        title={I18n.t("features.itWallet.actionBanner.title")}
+        content={I18n.t("features.itWallet.actionBanner.description")}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        pictogramName={"setup"}
+        action={I18n.t("features.itWallet.actionBanner.action")}
+        labelClose={I18n.t("features.itWallet.actionBanner.hideLabel")}
+        onPress={() => null}
+        onClose={() => null}
+      />
+    </>
+  );
+};