feat: [IOCOM-868] Update SEND message header and content to the new design system

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

@@ -0,0 +1,48 @@
+import { Divider, H3, LabelSmall, VSpacer } from "@pagopa/io-app-design-system";
+import React, { PropsWithChildren } from "react";
+import { StyleSheet, View } from "react-native";
+import { localeDateFormat } from "../../../../utils/locale";
+import I18n from "../../../../i18n";
+import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
+
+export type MessageDetailHeaderProps = PropsWithChildren<{
+  createdAt: Date;
+  subject: string;
+  sender?: string;
+  service?: ServicePublic;
+}>;
+
+const styles = StyleSheet.create({
+  header: {
+    paddingHorizontal: 24
+  }
+});
+
+const MessageHeaderContent = ({
+  subject,
+  createdAt
+}: MessageDetailHeaderProps) => (
+  <>
+    <H3 testID="message-header-subject">{subject}</H3>
+    <VSpacer size={8} />
+    <LabelSmall fontSize="regular" color="grey-700">
+      {localeDateFormat(
+        createdAt,
+        I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime")
+      )}
+    </LabelSmall>
+  </>
+);
+
+export const MessageDetailHeader = ({
+  children,
+  ...rest
+}: MessageDetailHeaderProps) => (
+  <View style={styles.header}>
+    {children}
+    <MessageHeaderContent {...rest} />
+    <VSpacer size={8} />
+    <Divider />
+    {/* TODO: Add MessageHeaderService */}
+  </View>
+);

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

@@ -0,0 +1,35 @@
+import React, { ComponentProps } from "react";
+import { render } from "@testing-library/react-native";
+import { MessageDetailHeader } from "../MessageDetailHeader";
+import { ServicePublic } from "../../../../../../definitions/backend/ServicePublic";
+
+const service = {
+  service_id: "serviceId",
+  service_name: "health",
+  organization_name: "Organization foo",
+  department_name: "Department one",
+  organization_fiscal_code: "OFSAAAAAA"
+} as ServicePublic;
+
+const defaultProps: ComponentProps<typeof MessageDetailHeader> = {
+  subject: "Subject",
+  createdAt: new Date("2021-10-18T16:00:30.541Z")
+};
+
+describe("MessageDetailHeader component", () => {
+  it("should match the snapshot with default props", () => {
+    const component = render(<MessageDetailHeader {...defaultProps} />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("should match the snapshot with all props", () => {
+    const component = render(
+      <MessageDetailHeader
+        {...defaultProps}
+        sender="Sender"
+        service={service}
+      />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailHeader component should match the snapshot with all props 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 24,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    color="bluegreyDark"
+    defaultColor="bluegreyDark"
+    defaultWeight="SemiBold"
+    font="TitilliumWeb"
+    fontStyle={
+      Object {
+        "fontSize": 24,
+        "lineHeight": 34,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "fontSize": 24,
+          "lineHeight": 34,
+        },
+        Object {
+          "color": "#17324D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "600",
+        },
+      ]
+    }
+    testID="message-header-subject"
+    weight="SemiBold"
+  >
+    Subject
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <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"
+  >
+    18 Oct 2021, 16:00
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#D2D6E3",
+        "height": 0.5,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`MessageDetailHeader component should match the snapshot with default props 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 24,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    color="bluegreyDark"
+    defaultColor="bluegreyDark"
+    defaultWeight="SemiBold"
+    font="TitilliumWeb"
+    fontStyle={
+      Object {
+        "fontSize": 24,
+        "lineHeight": 34,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "fontSize": 24,
+          "lineHeight": 34,
+        },
+        Object {
+          "color": "#17324D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "600",
+        },
+      ]
+    }
+    testID="message-header-subject"
+    weight="SemiBold"
+  >
+    Subject
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <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"
+  >
+    18 Oct 2021, 16:00
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 8,
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#D2D6E3",
+        "height": 0.5,
+      }
+    }
+  />
+</View>
+`;

ts/features/pn/__mocks__/message.ts

@@ -0,0 +1,46 @@
+import { ThirdPartyMessageWithContent } from "../../../../definitions/backend/ThirdPartyMessageWithContent";
+import { message_1 } from "../../messages/__mocks__/message";
+import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
+
+export const thirdPartyMessage: ThirdPartyMessageWithContent = {
+  ...message_1,
+  created_at: new Date("2020-01-01T00:00:00.000Z"),
+  third_party_message: {
+    details: {
+      abstract: "######## abstract ########",
+      attachments: [
+        {
+          messageId: message_1.id,
+          id: "1",
+          displayName: "A First Attachment",
+          contentType: "application/pdf",
+          category: ATTACHMENT_CATEGORY.DOCUMENT,
+          resourceUrl: { href: "/resource/attachment1.pdf" }
+        },
+        {
+          messageId: message_1.id,
+          id: "2",
+          displayName: "A Second Attachment",
+          contentType: "application/pdf",
+          category: ATTACHMENT_CATEGORY.DOCUMENT,
+          resourceUrl: { href: "/resource/attachment2.pdf" }
+        }
+      ],
+      iun: "731143-7-0317-8200-0",
+      subject: "######## subject ########",
+      recipients: [
+        {
+          recipientType: "-",
+          taxId: "AAABBB00A00A000A",
+          denomination: "AaAaAa BbBbBb",
+          payment: {
+            noticeCode: "026773337463073118",
+            creditorTaxId: "00000000009"
+          }
+        }
+      ],
+      notificationStatusHistory: [],
+      senderDenomination: "Sender denomination"
+    }
+  }
+};