feat: [IOCOM-867] Add service info in MessageDetailsScreen

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

@@ -1,9 +1,16 @@
-import { Divider, H3, LabelSmall, VSpacer } from "@pagopa/io-app-design-system";
 import React, { PropsWithChildren } from "react";
-import { StyleSheet, View } from "react-native";
+import {
+  ContentWrapper,
+  Divider,
+  H3,
+  LabelSmall,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import { localeDateFormat } from "../../../../utils/locale";
 import I18n from "../../../../i18n";
 import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
+import { logosForService } from "../../../../utils/services";
+import { OrganizationHeader } from "./OrganizationHeader";
 
 export type MessageDetailHeaderProps = PropsWithChildren<{
   createdAt: Date;
@@ -12,12 +19,6 @@ export type MessageDetailHeaderProps = PropsWithChildren<{
   service?: ServicePublic;
 }>;
 
-const styles = StyleSheet.create({
-  header: {
-    paddingHorizontal: 24
-  }
-});
-
 const MessageHeaderContent = ({
   subject,
   createdAt
@@ -36,13 +37,24 @@ const MessageHeaderContent = ({
 
 export const MessageDetailHeader = ({
   children,
+  service,
   ...rest
 }: MessageDetailHeaderProps) => (
-  <View style={styles.header}>
+  <ContentWrapper>
     {children}
     <MessageHeaderContent {...rest} />
     <VSpacer size={8} />
     <Divider />
-    {/* TODO: Add MessageHeaderService */}
-  </View>
+    {service && (
+      <>
+        {/* TODO: update logoUri when MultiImage component will be available in DS */}
+        <OrganizationHeader
+          logoUri={logosForService(service)[0]}
+          organizationName={service.organization_name}
+          serviceName={service.service_name}
+        />
+        <Divider />
+      </>
+    )}
+  </ContentWrapper>
 );

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { ImageURISource, StyleSheet, View } from "react-native";
+import {
+  Avatar,
+  IOSpacingScale,
+  IOStyles,
+  LabelSmall
+} from "@pagopa/io-app-design-system";
+
+export type OrganizationHeaderProps = {
+  organizationName: string;
+  serviceName: string;
+  logoUri: ImageURISource;
+};
+
+const ITEM_PADDING_VERTICAL: IOSpacingScale = 6;
+const AVATAR_MARGIN_LEFT: IOSpacingScale = 16;
+
+const styles = StyleSheet.create({
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: ITEM_PADDING_VERTICAL
+  },
+  itemAvatar: {
+    marginLeft: AVATAR_MARGIN_LEFT
+  }
+});
+
+export const OrganizationHeader = ({
+  logoUri,
+  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>
+    </View>
+    <View style={styles.itemAvatar}>
+      <Avatar logoUri={logoUri} size="small" shape="circle" />
+    </View>
+  </View>
+);

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

@@ -26,10 +26,22 @@ describe("MessageDetailHeader component", () => {
     const component = render(
       <MessageDetailHeader
         {...defaultProps}
-        sender="Sender"
+        sender="#### Sender ####"
         service={service}
       />
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+
+  it("should render the organization info when the service is defined", () => {
+    const component = render(
+      <MessageDetailHeader
+        {...defaultProps}
+        sender="#### Sender ####"
+        service={service}
+      />
+    );
+    expect(component.queryByText(service.organization_name)).not.toBeNull();
+    expect(component.queryByText(service.service_name)).not.toBeNull();
+  });
 });

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { OrganizationHeader } from "../OrganizationHeader";
+
+describe("OrganizationHeader component", () => {
+  it("should match the snapshot", () => {
+    const component = render(
+      <OrganizationHeader
+        logoUri={require("../../../../../../img/test/logo.png")}
+        organizationName={"#### organization_name ####"}
+        serviceName={"#### service name ####"}
+      />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -92,6 +92,137 @@ exports[`MessageDetailHeader component should match the snapshot with all props
       }
     }
   />
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "paddingVertical": 6,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        color="grey-700"
+        defaultColor="blue"
+        defaultWeight="Bold"
+        font="TitilliumWeb"
+        fontSize="regular"
+        fontStyle={
+          Object {
+            "fontSize": 14,
+            "lineHeight": 21,
+          }
+        }
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "#555C70",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "700",
+            },
+          ]
+        }
+        weight="Bold"
+      >
+        Organization foo
+      </Text>
+      <Text
+        allowFontScaling={false}
+        color="blueIO-500"
+        defaultColor="blue"
+        defaultWeight="Bold"
+        font="TitilliumWeb"
+        fontSize="regular"
+        fontStyle={
+          Object {
+            "fontSize": 14,
+            "lineHeight": 21,
+          }
+        }
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "#0B3EE3",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "700",
+            },
+          ]
+        }
+        weight="Bold"
+      >
+        health
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "marginLeft": 16,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "rgba(14,15,19,0.1)",
+              "borderWidth": 1,
+              "overflow": "hidden",
+              "resizeMode": "contain",
+            },
+            Object {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": 22,
+              "height": 44,
+              "padding": 6,
+              "width": 44,
+            },
+          ]
+        }
+      >
+        <Image
+          onError={[Function]}
+          source={
+            Object {
+              "uri": "https://assets.cdn.io.italia.it/logos/services/serviceid.png",
+            }
+          }
+          style={
+            Object {
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#D2D6E3",
+        "height": 0.5,
+      }
+    }
+  />
 </View>
 `;