refactor: [IOPLT-1274] Unify Offline status alert component (#7252)

## Short description
This PR aims to unify the connectivity banner handling in a single
point. In this PR has been introduced a fix to prevent mixpanel event to
be spammed for each user and status changes.

## List of changes proposed in this pull request
- Removes the offline wrapper for ITW feature
- Unify the logic to show offline banner.

## How to test
Check offline feature, anything should be changed.

---------

Co-authored-by: Federico Mastrini <[email protected]>

Author: CrisTofani

ts/App.tsx

@@ -17,8 +17,9 @@ import { persistor, store } from "./boot/configureStoreAndPersistor";
 import { LightModalProvider } from "./components/ui/LightModal";
 import { sentryDsn } from "./config";
 import { isDevEnv } from "./utils/environment";
-import { StatusMessages } from "./components/StatusMessages";
+import { StatusMessages } from "./components/StatusMessages/StatusMessages";
 import { AppFeedbackProvider } from "./features/appReviews/components/AppFeedbackProvider";
+import { IOAlertVisibleContextProvider } from "./components/StatusMessages/IOAlertVisibleContext";
 
 export type ReactNavigationInstrumentation = ReturnType<
   typeof Sentry.reactNavigationIntegration
@@ -125,15 +126,17 @@ const App = (): JSX.Element => (
             <ToastProvider>
               <Provider store={store}>
                 <PersistGate loading={undefined} persistor={persistor}>
-                  <BottomSheetModalProvider>
-                    <LightModalProvider>
-                      <AppFeedbackProvider>
-                        <StatusMessages>
-                          <RootContainer store={store} />
-                        </StatusMessages>
-                      </AppFeedbackProvider>
-                    </LightModalProvider>
-                  </BottomSheetModalProvider>
+                  <IOAlertVisibleContextProvider>
+                    <BottomSheetModalProvider>
+                      <LightModalProvider>
+                        <AppFeedbackProvider>
+                          <StatusMessages>
+                            <RootContainer store={store} />
+                          </StatusMessages>
+                        </AppFeedbackProvider>
+                      </LightModalProvider>
+                    </BottomSheetModalProvider>
+                  </IOAlertVisibleContextProvider>
                 </PersistGate>
               </Provider>
             </ToastProvider>

ts/components/StatusMessages/IOAlertVisibleContext.tsx

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren, useState } from "react";
+
+type IOAlertVisibleContext = {
+  isAlertVisible: boolean;
+  setAlertVisible: (isAlertVisible: boolean) => void;
+};
+
+/**
+ * Experimental Context for new UI Representations
+ */
+export const IOAlertVisibleContext = React.createContext<IOAlertVisibleContext>(
+  {
+    isAlertVisible: false,
+    setAlertVisible: () => void 0
+  }
+);
+
+export const useIOAlertVisible = () => React.useContext(IOAlertVisibleContext);
+
+type IOAlertVisibleContextProviderProps = {
+  isNewTypefaceEnabled?: boolean;
+};
+
+export const IOAlertVisibleContextProvider = ({
+  children
+}: PropsWithChildren<IOAlertVisibleContextProviderProps>) => {
+  const [isAlertVisible, setAlertVisible] = useState(false);
+  return (
+    <IOAlertVisibleContext.Provider value={{ isAlertVisible, setAlertVisible }}>
+      {children}
+    </IOAlertVisibleContext.Provider>
+  );
+};

ts/components/StatusMessages.tsx renamed to ts/components/StatusMessages/StatusMessages.tsx

@@ -1,6 +1,7 @@
-import { AlertEdgeToEdgeWrapper } from "@pagopa/io-app-design-system";
 import { PropsWithChildren } from "react";
-import { useStatusAlertProps } from "../hooks/useStatusAlertProps";
+import { AlertEdgeToEdgeWrapper, IOColors } from "@pagopa/io-app-design-system";
+import { StatusBar } from "react-native";
+import { useStatusAlertProps } from "../../hooks/useStatusAlertProps";
 
 type StatusMessagesProps = PropsWithChildren;
 
@@ -9,6 +10,12 @@ export const StatusMessages = ({ children }: StatusMessagesProps) => {
 
   return (
     <AlertEdgeToEdgeWrapper alertProps={statusAlert?.alertProps}>
+      {statusAlert && (
+        <StatusBar
+          barStyle="dark-content"
+          backgroundColor={IOColors["info-100"]}
+        />
+      )}
       {children}
       {statusAlert?.bottomSheet}
     </AlertEdgeToEdgeWrapper>

ts/components/ui/IOScrollView.tsx

@@ -44,9 +44,9 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue
 } from "react-native-reanimated";
-import { useStatusAlertProps } from "../../hooks/useStatusAlertProps";
 import { WithTestID } from "../../types/WithTestID";
 import { useFooterActionsMargin } from "../../hooks/useFooterActionsMargin";
+import { useIOAlertVisible } from "../StatusMessages/IOAlertVisibleContext";
 
 type ButtonBlockProps = Omit<
   IOButtonBlockSpecificProps,
@@ -169,7 +169,7 @@ export const IOScrollView = ({
   contentContainerStyle,
   testID
 }: IOScrollView) => {
-  const alertProps = useStatusAlertProps();
+  const { isAlertVisible } = useIOAlertVisible();
   const theme = useIOTheme();
 
   /* Navigation */
@@ -248,11 +248,11 @@ export const IOScrollView = ({
   }));
 
   const ignoreSafeAreaMargin = useMemo(() => {
-    if (alertProps !== undefined) {
+    if (isAlertVisible) {
       return true;
     }
     return headerConfig?.ignoreSafeAreaMargin;
-  }, [headerConfig?.ignoreSafeAreaMargin, alertProps]);
+  }, [headerConfig?.ignoreSafeAreaMargin, isAlertVisible]);
 
   /* Set custom header with `react-navigation` library using
      `useLayoutEffect` hook */

ts/components/ui/IOScrollViewWithReveal.tsx

@@ -37,8 +37,8 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 import { useFooterActionsMargin } from "../../hooks/useFooterActionsMargin";
-import { useStatusAlertProps } from "../../hooks/useStatusAlertProps";
 import { WithTestID } from "../../types/WithTestID";
+import { useIOAlertVisible } from "../StatusMessages/IOAlertVisibleContext";
 
 type ButtonBlockProps = Omit<
   IOButtonBlockSpecificProps,
@@ -116,7 +116,7 @@ export const IOScrollViewWithReveal = ({
   hideAnchorAction,
   testID
 }: IOScrollViewWithRevealProps) => {
-  const alertProps = useStatusAlertProps();
+  const { isAlertVisible } = useIOAlertVisible();
   const theme = useIOTheme();
 
   /* Navigation */
@@ -184,11 +184,11 @@ export const IOScrollViewWithReveal = ({
   }));
 
   const ignoreSafeAreaMargin = useMemo(() => {
-    if (alertProps !== undefined) {
+    if (isAlertVisible) {
       return true;
     }
     return headerConfig?.ignoreSafeAreaMargin;
-  }, [headerConfig?.ignoreSafeAreaMargin, alertProps]);
+  }, [headerConfig?.ignoreSafeAreaMargin, isAlertVisible]);
 
   /* Set custom header with `react-navigation` library using
      `useLayoutEffect` hook */

ts/features/authentication/login/cie/screens/__test__/ActivateNfcScreen.test.tsx

@@ -23,9 +23,19 @@ jest.mock("../../../../../../store/hooks", () => ({
   useIOStore: jest.fn()
 }));
 
-jest.mock("../../../../../../hooks/useStatusAlertProps", () => ({
-  useStatusAlertProps: jest.fn()
-}));
+// Mock the useIOAlertVisible hook
+jest.mock(
+  "../../../../../../components/StatusMessages/IOAlertVisibleContext",
+  () => ({
+    ...jest.requireActual(
+      "../../../../../../components/StatusMessages/IOAlertVisibleContext"
+    ),
+    useIOAlertVisible: () => ({
+      isAlertVisible: false,
+      setAlertVisible: jest.fn()
+    })
+  })
+);
 
 const mockNavigate = jest.fn();
 const mockReplace = jest.fn();

ts/features/itwallet/common/hooks/useOfflineAlertDetailModal.tsx

@@ -0,0 +1,76 @@
+import { useCallback } from "react";
+import { VStack, IOButton } from "@pagopa/io-app-design-system";
+import I18n from "i18next";
+import { useIODispatch } from "../../../../store/hooks";
+import { OfflineAccessReasonEnum } from "../../../ingress/store/reducer";
+import { trackItwOfflineRicaricaAppIO } from "../../analytics";
+import { resetOfflineAccessReason } from "../../../ingress/store/actions";
+import { startupLoadSuccess } from "../../../../store/actions/startup";
+import { StartupStatusEnum } from "../../../../store/reducers/startup";
+import { useIOBottomSheetModal } from "../../../../utils/hooks/bottomSheet";
+import IOMarkdown from "../../../../components/IOMarkdown";
+import { useAppRestartAction } from "../../wallet/hooks/useAppRestartAction";
+
+/**
+ * Hook that creates and manages a bottom sheet modal to display detailed information
+ * about the current offline state and provide app restart functionality.
+ *
+ * The modal includes:
+ * - A title based on the specific offline reason
+ * - Detailed explanation content rendered via IOMarkdown
+ * - A button to attempt app restart when connectivity is restored
+ *
+ * When the restart button is pressed:
+ * - If the device is connected, it will reset the offline state and restart the application
+ * - If the device is still offline, it shows an error toast
+ *
+ * @param offlineAccessReason - The specific reason for the offline state, used to
+ *                             determine the content and behavior of the modal
+ * @returns An object with the bottom sheet modal controller (present, dismiss) and the modal component
+ */
+export const useOfflineAlertDetailModal = (
+  offlineAccessReason: OfflineAccessReasonEnum
+) => {
+  const dispatch = useIODispatch();
+  const handleAppRestart = useAppRestartAction("bottom_sheet");
+
+  const navigateOnAuthPage = useCallback(() => {
+    trackItwOfflineRicaricaAppIO("bottom_sheet");
+    // Reset the offline access reason.
+    // Since this state is `undefined` when the user is online,
+    // the startup saga will proceed without blocking.
+    dispatch(resetOfflineAccessReason());
+    // Dispatch this action to mount the correct navigator.
+    dispatch(startupLoadSuccess(StartupStatusEnum.NOT_AUTHENTICATED));
+  }, [dispatch]);
+
+  const handlePressModalAction = useCallback(() => {
+    if (offlineAccessReason === OfflineAccessReasonEnum.SESSION_EXPIRED) {
+      navigateOnAuthPage();
+    } else {
+      handleAppRestart();
+    }
+  }, [handleAppRestart, navigateOnAuthPage, offlineAccessReason]);
+
+  return useIOBottomSheetModal({
+    title: I18n.t(
+      `features.itWallet.offline.${offlineAccessReason}.modal.title`
+    ),
+    component: (
+      <VStack space={24}>
+        <IOMarkdown
+          content={I18n.t(
+            `features.itWallet.offline.${offlineAccessReason}.modal.content`
+          )}
+        />
+        <IOButton
+          variant="solid"
+          label={I18n.t(
+            `features.itWallet.offline.${offlineAccessReason}.modal.footerAction`
+          )}
+          onPress={handlePressModalAction}
+        />
+      </VStack>
+    )
+  });
+};