[IOCOM-1370, IOCOM-1371] Selectable service name in message details (…

…both standard and SEND), new DS (#5757)

## Short description
This PR makes the service name selectable on the message details'
screen, with the new DS on both standard and SEND messages (selection
leads to service details' screen).
|Standard message|SEND message|
|-|-|
|![Simulator Screenshot - iPhone 15 - 2024-05-09 at 15 26
25](https://github.com/pagopa/io-app/assets/5150343/1e955740-252b-4fb2-92f8-0f6586550458)|![Simulator
Screenshot - iPhone 15 - 2024-05-09 at 15 26
34](https://github.com/pagopa/io-app/assets/5150343/ba799363-3d85-4606-92fe-0814bbde7f38)|

## List of changes proposed in this pull request
- `OrganizationHeader` implements the `onPress` event on the service
name, leading to the service details' screen
- `MessageDetailsHeader` adds the `serviceId` parameter to
`OrganizationHeader` component

## How to test
Using the io-dev-api-server, check that both standard and SEND messages
have a selectable service name that leads to the service details' screen

ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx

@@ -25,8 +25,8 @@ const styles = StyleSheet.create({
 
 export type MessageDetailsHeaderProps = PropsWithChildren<{
   createdAt: Date;
-  subject: string;
   serviceId: ServiceId;
+  subject: string;
 }>;
 
 const MessageDetailsHeaderContent = ({
@@ -68,6 +68,7 @@ export const MessageDetailsHeader = ({
           <OrganizationHeader
             logoUri={logosForService(service)}
             organizationName={service.organization_name}
+            serviceId={serviceId}
             serviceName={service.service_name}
           />
           <Divider />

ts/features/messages/components/MessageDetail/OrganizationHeader.tsx

@@ -1,14 +1,18 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
 import {
   Avatar,
   IOSpacingScale,
   IOStyles,
   LabelSmall
 } from "@pagopa/io-app-design-system";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { SERVICES_ROUTES } from "../../../services/common/navigation/routes";
 
 export type OrganizationHeaderProps = {
   organizationName: string;
+  serviceId: ServiceId;
   serviceName: string;
   logoUri?: ReadonlyArray<ImageURISource>;
 };
@@ -30,20 +34,38 @@ const styles = StyleSheet.create({
 
 export const OrganizationHeader = ({
   logoUri,
+  serviceId,
   organizationName,
   serviceName
-}: OrganizationHeaderProps) => (
-  <View style={styles.item}>
-    <View style={IOStyles.flex}>
-      <LabelSmall fontSize="regular" color="grey-700">
-        {organizationName}
-      </LabelSmall>
-      <LabelSmall fontSize="regular" color="blueIO-500">
-        {serviceName}
-      </LabelSmall>
+}: OrganizationHeaderProps) => {
+  const navigation = useIONavigation();
+  const navigateToServiceDetails = useCallback(
+    () =>
+      navigation.navigate(SERVICES_ROUTES.SERVICES_NAVIGATOR, {
+        screen: SERVICES_ROUTES.SERVICE_DETAIL,
+        params: {
+          serviceId
+        }
+      }),
+    [navigation, serviceId]
+  );
+  return (
+    <View style={styles.item}>
+      <View style={IOStyles.flex}>
+        <LabelSmall fontSize="regular" color="grey-700">
+          {organizationName}
+        </LabelSmall>
+        <LabelSmall
+          fontSize="regular"
+          color="blueIO-500"
+          onPress={navigateToServiceDetails}
+        >
+          {serviceName}
+        </LabelSmall>
+      </View>
+      <View style={styles.itemAvatar}>
+        <Avatar logoUri={logoUri} size="small" shape="circle" />
+      </View>
     </View>
-    <View style={styles.itemAvatar}>
-      <Avatar logoUri={logoUri} size="small" shape="circle" />
-    </View>
-  </View>
-);
+  );
+};

ts/features/messages/components/MessageDetail/__tests__/MessageDetailsHeader.test.tsx

@@ -10,6 +10,7 @@ import { renderScreenWithNavigationStoreContext } from "../../../../../utils/tes
 import { loadServiceDetail } from "../../../../services/details/store/actions/details";
 import { service_1 } from "../../../__mocks__/messages";
 import { reproduceSequence } from "../../../../../utils/tests";
+import { MESSAGES_ROUTES } from "../../../navigation/routes";
 
 const defaultProps: ComponentProps<typeof MessageDetailsHeader> = {
   createdAt: new Date("2021-10-18T16:00:30.541Z"),
@@ -52,7 +53,7 @@ const renderComponent = (
   return {
     component: renderScreenWithNavigationStoreContext<GlobalState>(
       () => <MessageDetailsHeader {...props} />,
-      "DUMMY_ROUTE",
+      MESSAGES_ROUTES.MESSAGE_DETAIL,
       {},
       store
     ),

ts/features/messages/components/MessageDetail/__tests__/OrganizationHeader.test.tsx

@@ -1,16 +1,41 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { createStore } from "redux";
 import { OrganizationHeader } from "../OrganizationHeader";
+import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { MESSAGES_ROUTES } from "../../../navigation/routes";
+import { appReducer } from "../../../../../store/reducers";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { applicationChangeState } from "../../../../../store/actions/application";
 
 describe("OrganizationHeader component", () => {
   it("should match the snapshot", () => {
-    const component = render(
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = () => {
+  const serviceId = "01HXEPR9JD8838JZDN3YD0EF0Z" as ServiceId;
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext<GlobalState>(
+    () => (
       <OrganizationHeader
         logoUri={require("../../../../../../img/test/logo.png")}
         organizationName={"#### organization_name ####"}
         serviceName={"#### service name ####"}
+        serviceId={serviceId}
       />
-    );
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-});
+    ),
+    MESSAGES_ROUTES.MESSAGE_DETAIL,
+    {},
+    store
+  );
+};

ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap

@@ -150,7 +150,7 @@ exports[`MessageDetailsHeader component should match the snapshot with default p
                     }
                   }
                 >
-                  DUMMY_ROUTE
+                  MESSAGE_DETAIL
                 </Text>
               </View>
               <View
@@ -482,6 +482,7 @@ exports[`MessageDetailsHeader component should match the snapshot with default p
                                 "lineHeight": 21,
                               }
                             }
+                            onPress={[Function]}
                             style={
                               Array [
                                 Object {