feat: [IOCOM-1411] Navigation to message routing, from new DS message…

…s' home (#5830)

## Short description
This PR adds the navigation to the message routing on a message tap, on
the new DS messages' home.

Precondition handling will come in a later PR (same goes for
archiving/unarchiving)

## List of changes proposed in this pull request
- Added callback to navigate to the message router upon MessageListItem
tap selection

## How to test
Using the io-dev-api-server, enable the new DS and the new messages'
home. Select a message.

---------

Co-authored-by: Martino Cesari Tomba <[email protected]>

ts/features/messages/components/Home/MessageList.tsx

@@ -45,15 +45,15 @@ export const MessageList = ({ category }: MessageListProps) => {
       data={(messageList ?? loadingList) as Readonly<Array<number | UIMessage>>}
       ListEmptyComponent={<EmptyList category={category} />}
       ItemSeparatorComponent={messageList ? () => <Divider /> : undefined}
-      renderItem={({ item }) => {
+      renderItem={({ index, item }) => {
         if (typeof item === "number") {
           return (
             <MessageListItemSkeleton
               accessibilityLabel={I18n.t("messages.loading")}
             />
           );
         } else {
-          return <WrappedMessageListItem message={item} />;
+          return <WrappedMessageListItem index={index} message={item} />;
         }
       }}
     />

ts/features/messages/components/Home/WrappedMessageListItem.tsx

@@ -1,19 +1,24 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { UIMessage } from "../../types";
 import I18n from "../../../../i18n";
 import { TagEnum } from "../../../../../definitions/backend/MessageCategoryPN";
 import { convertDateToWordDistance } from "../../utils/convertDateToWordDistance";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { MESSAGES_ROUTES } from "../../navigation/routes";
 import { logoForService } from "../../../services/home/utils";
 import { accessibilityLabelForMessageItem } from "./homeUtils";
 import { MessageListItem } from "./DS/MessageListItem";
 
 type WrappedMessageListItemProps = {
+  index: number;
   message: UIMessage;
 };
 
 export const WrappedMessageListItem = ({
+  index,
   message
 }: WrappedMessageListItemProps) => {
+  const navigation = useIONavigation();
   const serviceId = message.serviceId;
   const organizationFiscalCode = message.organizationFiscalCode;
 
@@ -40,18 +45,33 @@ export const WrappedMessageListItem = ({
     [message]
   );
 
+  const onPressCallback = useCallback(() => {
+    if (message.category.tag === TagEnum.PN || message.hasPrecondition) {
+      // TODO preconditions IOCOM-840
+      return;
+    }
+    navigation.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
+      screen: MESSAGES_ROUTES.MESSAGE_ROUTER,
+      params: {
+        messageId: message.id,
+        fromNotification: false
+      }
+    });
+  }, [message, navigation]);
+
   return (
     <MessageListItem
       accessibilityLabel={accessibilityLabel}
       serviceName={serviceName}
       messageTitle={messageTitle}
       onLongPress={() => undefined}
-      onPress={() => undefined}
+      onPress={onPressCallback}
       serviceLogos={serviceLogoUriSources}
       badgeText={badgeText}
       isRead={isRead}
       organizationName={organizationName}
       formattedDate={messageDate}
+      testID={`wrapped_message_list_item_${index}`}
     />
   );
 };

ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { createStore } from "redux";
+import { fireEvent } from "@testing-library/react-native";
 import { appReducer } from "../../../../../store/reducers";
 import { applicationChangeState } from "../../../../../store/actions/application";
 import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
@@ -17,6 +18,16 @@ jest.mock("react-redux", () => ({
   useDispatch: () => mockDispatch
 }));
 
+const mockNavigate = jest.fn();
+jest.mock("@react-navigation/native", () => ({
+  ...jest.requireActual<typeof import("@react-navigation/native")>(
+    "@react-navigation/native"
+  ),
+  useNavigation: () => ({
+    navigate: mockNavigate
+  })
+}));
+
 describe("WrappedMessageListItem", () => {
   beforeEach(() => {
     jest.resetAllMocks();
@@ -42,6 +53,21 @@ describe("WrappedMessageListItem", () => {
     const component = renderComponent(message);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it("should trigger navigation to Message Routing when the component is pressed", () => {
+    const message = messageGenerator(false, true);
+    const component = renderComponent(message);
+    const pressable = component.getByTestId("wrapped_message_list_item_0");
+    expect(pressable).toBeDefined();
+    fireEvent.press(pressable);
+    expect(mockNavigate.mock.calls.length).toBe(1);
+    expect(mockNavigate.mock.calls[0][1]).toStrictEqual({
+      screen: MESSAGES_ROUTES.MESSAGE_ROUTER,
+      params: {
+        messageId: message.id,
+        fromNotification: false
+      }
+    });
+  });
 });
 
 const messageGenerator = (isFromSend: boolean, isRead: boolean): UIMessage =>
@@ -66,7 +92,7 @@ const renderComponent = (message: UIMessage) => {
   );
   const store = createStore(appReducer, designSystemState as any);
   return renderScreenWithNavigationStoreContext(
-    () => <WrappedMessageListItem message={message} />,
+    () => <WrappedMessageListItem index={0} message={message} />,
     MESSAGES_ROUTES.MESSAGES_HOME,
     {},
     store

ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap

@@ -342,6 +342,7 @@ exports[`WrappedMessageListItem should match snapshot,     from SEND,   read mes
                             "backgroundColor": undefined,
                           }
                         }
+                        testID="wrapped_message_list_item_0"
                       >
                         <View
                           style={
@@ -1372,6 +1373,7 @@ exports[`WrappedMessageListItem should match snapshot,     from SEND, unread mes
                             "backgroundColor": undefined,
                           }
                         }
+                        testID="wrapped_message_list_item_0"
                       >
                         <View
                           style={
@@ -2457,6 +2459,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND,   read mes
                             "backgroundColor": undefined,
                           }
                         }
+                        testID="wrapped_message_list_item_0"
                       >
                         <View
                           style={
@@ -3272,6 +3275,7 @@ exports[`WrappedMessageListItem should match snapshot, not from SEND, unread mes
                             "backgroundColor": undefined,
                           }
                         }
+                        testID="wrapped_message_list_item_0"
                       >
                         <View
                           style={