Merge branch 'master' into IOAPPX-230-remove-datetimepicker

package.json

@@ -95,7 +95,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "1.23.1",
+    "@pagopa/io-app-design-system": "1.23.2",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-crypto": "^0.2.1",
     "@pagopa/io-react-native-login-utils": "^1.0.0",

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

@@ -503,7 +503,6 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                     }
                                   >
                                     <View
-                                      entering={[Function]}
                                       exiting={[Function]}
                                       style={
                                         Array [

ts/features/messages/screens/MessageDetailsScreen.tsx

@@ -1,5 +1,5 @@
-import React, { createRef, useCallback } from "react";
-import { ScrollView, View } from "react-native";
+import React, { useCallback } from "react";
+import { ScrollView } from "react-native";
 import {
   Alert,
   ContentWrapper,
@@ -49,8 +49,6 @@ export const MessageDetailsScreen = (
   const dispatch = useIODispatch();
   const navigation = useIONavigation();
 
-  const viewRef = createRef<View>();
-
   const message = pipe(
     useIOSelector(state => getPaginatedMessageById(state, messageId)),
     pot.toOption,
@@ -139,7 +137,6 @@ export const MessageDetailsScreen = (
             <VSpacer size={8} />
             <Alert
               testID="due-date-alert"
-              viewRef={viewRef}
               variant="warning"
               action={I18n.t("features.messages.alert.action")}
               onPress={constNull}

ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap

@@ -542,7 +542,6 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                                   }
                                 >
                                   <View
-                                    entering={[Function]}
                                     exiting={[Function]}
                                     style={
                                       Array [

ts/hooks/useStartSupportRequest.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { useRoute } from "@react-navigation/native";
 import { ToolEnum } from "../../definitions/content/AssistanceToolConfig";
 import {
   ContextualHelpProps,
@@ -7,7 +8,6 @@ import {
 import { zendeskSupportStart } from "../features/zendesk/store/actions";
 import { useIODispatch, useIOSelector } from "../store/hooks";
 import { assistanceToolConfigSelector } from "../store/reducers/backendStatus";
-import { currentRouteSelector } from "../store/reducers/navigation";
 import { FAQsCategoriesType } from "../utils/faq";
 import {
   assistanceToolRemoteConfig,
@@ -25,11 +25,7 @@ export const useStartSupportRequest = ({
   contextualHelp,
   contextualHelpMarkdown
 }: SupportRequestParams) => {
-  /**
-   *  We have to use the deprecated currentRouteSelector because, at the moment, some components are rendered outside the navigation context.
-   *  TODO: Full usage of navigation header and modal, in order to have always the right context
-   */
-  const currentScreenName = useIOSelector(currentRouteSelector);
+  const { name: currentScreenName } = useRoute();
 
   const dispatch = useIODispatch();
   const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector);

ts/navigation/AuthenticatedStackNavigator.tsx

@@ -106,7 +106,11 @@ const AuthenticatedStackNavigator = () => {
         headerMode: "screen"
       }}
     >
-      <Stack.Screen name={ROUTES.MAIN} component={MainTabNavigator} />
+      <Stack.Screen
+        name={ROUTES.MAIN}
+        options={{ headerShown: false }}
+        component={MainTabNavigator}
+      />
 
       <Stack.Screen
         name={ROUTES.ONBOARDING}

ts/navigation/TabNavigator.tsx

@@ -62,10 +62,8 @@ export const MainTabNavigator = () => {
       isLoading={startupLoaded === StartupStatusEnum.ONBOARDING}
       loadingOpacity={1}
     >
-      <HeaderFirstLevelHandler />
       <Tab.Navigator
         screenOptions={{
-          headerShown: false,
           tabBarLabelStyle: {
             fontSize: isDesignSystemEnabled ? 10 : 12,
             ...makeFontStyleObject(
@@ -91,6 +89,11 @@ export const MainTabNavigator = () => {
           name={MESSAGES_ROUTES.MESSAGES_HOME}
           component={MessagesHomeScreen}
           options={{
+            header: () => (
+              <HeaderFirstLevelHandler
+                currentRouteName={MESSAGES_ROUTES.MESSAGES_HOME}
+              />
+            ),
             title: I18n.t("global.navigator.messages"),
             tabBarIcon: ({ color, focused }) => (
               <TabIconComponent
@@ -108,6 +111,9 @@ export const MainTabNavigator = () => {
           name={ROUTES.WALLET_HOME}
           component={WalletHomeScreen}
           options={{
+            header: () => (
+              <HeaderFirstLevelHandler currentRouteName={ROUTES.WALLET_HOME} />
+            ),
             title: I18n.t("global.navigator.wallet"),
             tabBarIcon: ({ color, focused }) => (
               <TabIconComponent
@@ -130,6 +136,11 @@ export const MainTabNavigator = () => {
               }
             }}
             options={{
+              header: () => (
+                <HeaderFirstLevelHandler
+                  currentRouteName={ROUTES.BARCODE_SCAN}
+                />
+              ),
               title: I18n.t("global.navigator.scan"),
               tabBarIcon: ({ color, focused }) => (
                 <TabIconComponent
@@ -146,6 +157,11 @@ export const MainTabNavigator = () => {
           name={ROUTES.SERVICES_HOME}
           component={ServicesHomeScreen}
           options={{
+            header: () => (
+              <HeaderFirstLevelHandler
+                currentRouteName={ROUTES.SERVICES_HOME}
+              />
+            ),
             title: I18n.t("global.navigator.services"),
             tabBarIcon: ({ color, focused }) => (
               <TabIconComponent
@@ -163,6 +179,9 @@ export const MainTabNavigator = () => {
           name={ROUTES.PROFILE_MAIN}
           component={ProfileMainScreen}
           options={{
+            header: () => (
+              <HeaderFirstLevelHandler currentRouteName={ROUTES.PROFILE_MAIN} />
+            ),
             title: I18n.t("global.navigator.profile"),
             tabBarIcon: ({ color, focused }) => (
               <TabIconComponent

ts/navigation/components/HeaderFirstLevelHandler.tsx

@@ -4,7 +4,7 @@ import { ActionProp, HeaderFirstLevel } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { useIODispatch, useIOSelector } from "../../store/hooks";
+import { useIODispatch } from "../../store/hooks";
 import { MainTabParamsList } from "../params/MainTabParamsList";
 import { useWalletHomeHeaderBottomSheet } from "../../components/wallet/WalletHomeHeader";
 import {
@@ -14,54 +14,36 @@ import {
 import I18n from "../../i18n";
 import { navigateToServicePreferenceScreen } from "../../store/actions/navigation";
 import { searchMessagesEnabled } from "../../store/actions/search";
-import { currentRouteSelector } from "../../store/reducers/navigation";
+import { MESSAGES_ROUTES } from "../../features/messages/navigation/routes";
+import ROUTES from "../routes";
 
 type HeaderFirstLevelProps = ComponentProps<typeof HeaderFirstLevel>;
-type TabRoutes =
-  | Exclude<keyof MainTabParamsList, "MESSAGES_HOME" | "SERVICES_HOME">
-  | "MESSAGES_INBOX"
-  | "MESSAGES_ARCHIVE"
-  | "SERVICES_NATIONAL"
-  | "SERVICES_LOCAL";
+type TabRoutes = keyof MainTabParamsList;
 
 const headerHelpByRoute: Record<TabRoutes, SupportRequestParams> = {
   BARCODE_SCAN: {},
-  MESSAGES_ARCHIVE: {
+  [MESSAGES_ROUTES.MESSAGES_HOME]: {
     faqCategories: ["messages"],
     contextualHelpMarkdown: {
       title: "messages.contextualHelpTitle",
       body: "messages.contextualHelpContent"
     }
   },
-  MESSAGES_INBOX: {
-    faqCategories: ["messages"],
-    contextualHelpMarkdown: {
-      title: "messages.contextualHelpTitle",
-      body: "messages.contextualHelpContent"
-    }
-  },
-  PROFILE_MAIN: {
+  [ROUTES.PROFILE_MAIN]: {
     faqCategories: ["profile"],
     contextualHelpMarkdown: {
       title: "profile.main.contextualHelpTitle",
       body: "profile.main.contextualHelpContent"
     }
   },
-  SERVICES_NATIONAL: {
+  [ROUTES.SERVICES_HOME]: {
     faqCategories: ["services"],
     contextualHelpMarkdown: {
       title: "services.contextualHelpTitle",
       body: "services.contextualHelpContent"
     }
   },
-  SERVICES_LOCAL: {
-    faqCategories: ["services"],
-    contextualHelpMarkdown: {
-      title: "services.contextualHelpTitle",
-      body: "services.contextualHelpContent"
-    }
-  },
-  WALLET_HOME: {
+  [ROUTES.WALLET_HOME]: {
     faqCategories: ["wallet", "wallet_methods"],
     contextualHelpMarkdown: {
       title: "wallet.contextualHelpTitle",
@@ -70,17 +52,19 @@ const headerHelpByRoute: Record<TabRoutes, SupportRequestParams> = {
   }
 };
 
+type Props = {
+  currentRouteName: TabRoutes;
+};
 /**
  * This Component aims to handle the header of the first level screens. based on the current route
  * it will set the header title and the contextual help and the actions related to the screen
  * THIS COMPONENT IS NOT MEANT TO BE USED OUTSIDE THE NAVIGATION.
  * THIS COMPONENT WILL BE REMOVED ONCE REACT NAVIGATION WILL BE UPGRADED TO V6
  */
-export const HeaderFirstLevelHandler = () => {
+export const HeaderFirstLevelHandler = ({ currentRouteName }: Props) => {
   const dispatch = useIODispatch();
   const navigation = useNavigation();
-  const currentRouteName = useIOSelector(currentRouteSelector);
-  // console.log("currentRouteName", currentRouteName);
+
   const requestParams = useMemo(
     () =>
       pipe(
@@ -121,8 +105,7 @@ export const HeaderFirstLevelHandler = () => {
 
   useEffect(() => {
     switch (currentRouteName) {
-      case "SERVICES_NATIONAL":
-      case "SERVICES_LOCAL":
+      case ROUTES.SERVICES_HOME:
         headerPropsRef.current = {
           title: I18n.t("services.title"),
           type: "twoActions",
@@ -136,16 +119,15 @@ export const HeaderFirstLevelHandler = () => {
           }
         };
         break;
-      case "PROFILE_MAIN":
+      case ROUTES.PROFILE_MAIN:
         headerPropsRef.current = {
           title: I18n.t("profile.main.title"),
           backgroundColor: "dark",
           type: "singleAction",
           firstAction: helpAction
         };
         break;
-      case "MESSAGES_INBOX":
-      case "MESSAGES_ARCHIVE":
+      case MESSAGES_ROUTES.MESSAGES_HOME:
         headerPropsRef.current = {
           title: I18n.t("messages.contentTitle"),
           type: "twoActions",
@@ -159,8 +141,8 @@ export const HeaderFirstLevelHandler = () => {
           }
         };
         break;
-      case "BARCODE_SCAN":
-      case "WALLET_HOME":
+      case ROUTES.BARCODE_SCAN:
+      case ROUTES.WALLET_HOME:
         headerPropsRef.current = {
           title: I18n.t("wallet.wallet"),
           type: "twoActions",
@@ -178,9 +160,6 @@ export const HeaderFirstLevelHandler = () => {
       default:
         break;
     }
-    navigation.setOptions({
-      header: () => <HeaderFirstLevel {...headerPropsRef.current} />
-    });
   }, [
     navigation,
     currentRouteName,
@@ -189,5 +168,10 @@ export const HeaderFirstLevelHandler = () => {
     dispatch
   ]);
 
-  return <>{WalletHomeHeaderBottomSheet}</>;
+  return (
+    <>
+      <HeaderFirstLevel {...headerPropsRef.current} />
+      {WalletHomeHeaderBottomSheet}
+    </>
+  );
 };

yarn.lock

@@ -3277,10 +3277,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@pagopa/[email protected].1":
-  version "1.23.1"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.23.1.tgz#acdc3cb37cc157c60a5a3f993223141757f49c8f"
-  integrity sha512-pOd36qeV6c9dALih/3+ro5g/+izQWVf5J0u4sKSr0LF9zTBZ/sDRSpd4Z3/qrrXkKcopOkMEg3lqR6TJrdsGeA==
+"@pagopa/[email protected].2":
+  version "1.23.2"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.23.2.tgz#739da99711af7c208b547d7c0b5cc82c77e1bad3"
+  integrity sha512-MqQnd5bHxGwXd+KdAb95e0Onw2C2Ic+GpJnIUSWN15sggb4oF/bl14tViMhV2yCJCpq7dYaiS8GmdWQjl2fQIQ==
   dependencies:
     "@pagopa/ts-commons" "^12.0.0"
     "@testing-library/jest-native" "^5.4.2"