Merge branch 'master' into IOCOM-2087_reminderBanner

package.json

@@ -57,7 +57,7 @@
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/plugin-transform-react-jsx": "^7.25.9",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "5.0.2",
+    "@pagopa/io-app-design-system": "5.0.3",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
     "@pagopa/io-react-native-crypto": "^1.0.1",

ts/RootContainer.tsx

@@ -6,29 +6,27 @@ import {
   AppState,
   AppStateStatus,
   EmitterSubscription,
-  NativeEventSubscription,
-  StatusBar
+  NativeEventSubscription
 } from "react-native";
 import SplashScreen from "react-native-splash-screen";
 import { connect } from "react-redux";
-import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification";
 import DebugInfoOverlay from "./components/DebugInfoOverlay";
 import PagoPATestIndicatorOverlay from "./components/PagoPATestIndicatorOverlay";
 import { LightModalRoot } from "./components/ui/LightModal";
+import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification";
 import { setLocale } from "./i18n";
 import { IONavigationContainer } from "./navigation/AppStackNavigator";
 import RootModal from "./screens/modal/RootModal";
 import { applicationChangeState } from "./store/actions/application";
 import { setDebugCurrentRouteName } from "./store/actions/debug";
 import { navigateBack } from "./store/actions/navigation";
+import { setScreenReaderEnabled } from "./store/actions/preferences";
 import { isDebugModeEnabledSelector } from "./store/reducers/debug";
 import {
   isPagoPATestEnabledSelector,
   preferredLanguageSelector
 } from "./store/reducers/persistedPreferences";
 import { GlobalState } from "./store/reducers/types";
-import customVariables from "./theme/variables";
-import { setScreenReaderEnabled } from "./store/actions/preferences";
 
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;
 
@@ -109,11 +107,6 @@ class RootContainer extends PureComponent<Props> {
 
     return (
       <>
-        <StatusBar
-          barStyle={"dark-content"}
-          backgroundColor={customVariables.androidStatusBarColor}
-        />
-
         <IONavigationContainer />
 
         {/* When debug mode is enabled, the following information

ts/components/BonusCard/BonusCardScreenComponent.tsx

@@ -1,9 +1,15 @@
-import { HeaderActionProps } from "@pagopa/io-app-design-system";
+import {
+  HeaderActionProps,
+  IOColors,
+  useIOThemeContext
+} from "@pagopa/io-app-design-system";
 import { ReactNode } from "react";
 import { Dimensions } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
+import { isAndroid } from "../../utils/platform";
+import FocusAwareStatusBar from "../ui/FocusAwareStatusBar";
 import { IOScrollView, IOScrollViewActions } from "../ui/IOScrollView";
 import { BonusCard } from "./BonusCard";
 
@@ -41,10 +47,24 @@ const BonusCardScreenComponent = ({
   const screenHeight = Dimensions.get("window").height;
   const shouldHideLogo = screenHeight < MIN_HEIGHT_TO_SHOW_FULL_RENDER;
 
+  const { themeType } = useIOThemeContext();
+
+  const isDark = themeType === "dark";
+  // We need to check if the card is a CGN type to set the background color
+  const isCGNType = !cardProps.isLoading && cardProps.cardBackground;
+  // Custom background color for CGN based on the platform
+  const cgnBackgroundColor = isAndroid ? IOColors.white : IOColors["grey-50"];
+  // If the card is not a CGN type, we set the default header background color as card color
+  const backgroundColor = isCGNType
+    ? cgnBackgroundColor
+    : IOColors["blueIO-50"];
+
   useHeaderSecondLevel({
     title: title || "",
     transparent: true,
     supportRequest: true,
+    variant: "neutral",
+    backgroundColor,
     faqCategories,
     contextualHelpMarkdown,
     contextualHelp,
@@ -54,14 +74,19 @@ const BonusCardScreenComponent = ({
   });
 
   return (
-    <IOScrollView
-      animatedRef={animatedScrollViewRef}
-      actions={actions}
-      includeContentMargins={false}
-    >
-      <BonusCard hideLogo={shouldHideLogo} {...cardProps} />
-      {children}
-    </IOScrollView>
+    <>
+      <FocusAwareStatusBar
+        barStyle={isAndroid && isDark ? "light-content" : "dark-content"}
+      />
+      <IOScrollView
+        animatedRef={animatedScrollViewRef}
+        actions={actions}
+        includeContentMargins={false}
+      >
+        <BonusCard hideLogo={shouldHideLogo} {...cardProps} />
+        {children}
+      </IOScrollView>
+    </>
   );
 };
 

ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap

@@ -291,7 +291,8 @@ exports[`LoadingSpinnerOverlay Should match all-properties and loading snapshot
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "alignSelf": "flex-start",
+              "alignSelf": "auto",
+              "flexShrink": 1,
             }
           }
           testID="loadingSpinnerOverlayCancelButton"

ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap

@@ -479,7 +479,8 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                   onStartShouldSetResponder={[Function]}
                                   style={
                                     {
-                                      "alignSelf": "flex-start",
+                                      "alignSelf": "auto",
+                                      "flexShrink": 1,
                                     }
                                   }
                                 >

ts/components/ui/AppHeader.tsx

@@ -4,9 +4,8 @@
 
 import { IOStyles, IOVisualCostants } from "@pagopa/io-app-design-system";
 import { PropsWithChildren } from "react";
-import { ColorValue, StatusBar, View, ViewProps } from "react-native";
+import { ColorValue, View, ViewProps } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import variables from "../../theme/variables";
 
 type Props = ViewProps & {
   backgroundColor?: ColorValue;
@@ -23,10 +22,6 @@ const AppHeader = (props: PropsWithChildren<Props>) => {
         backgroundColor: props.backgroundColor
       }}
     >
-      <StatusBar
-        barStyle={"dark-content"}
-        backgroundColor={variables.androidStatusBarColor}
-      />
       <View
         style={{
           ...IOStyles.row,

ts/components/ui/FocusAwareStatusBar.tsx

@@ -13,7 +13,8 @@ import { StatusBar, StatusBarProps } from "react-native";
 
 const FocusAwareStatusBar = (props: StatusBarProps) => {
   const isFocused = useIsFocused();
-  return <>{isFocused && <StatusBar {...props} />}</>;
+
+  return isFocused && <StatusBar {...props} />;
 };
 
 export default FocusAwareStatusBar;