feat: [IOCOM-866] Display tags in the header of a SEND message (#5440)

This PR depends on #5431 ## Short description This PR updates the `MessageDetails` component in order to display the tags. _NOTE: Other PRs will follow to update the rest of the message._ <details open><summary>Details</summary> <p> | MessageDetails | | - | | <img src="https://github.com/pagopa/io-app/assets/29163287/3df211d0-43fa-460a-b7a7-b2ef0a514f41" width="300"/> | </p> </details> ## List of changes proposed in this pull request - added the tags in the header of the SEND message ## How to test Using the `io-dev-api-server`, generate a SEND message. Enable the design system and navigate to the message details. Check that the content is displayed correctly. --------- Co-authored-by: Andrea <[email protected]>
pagopa · Jan 30, 2024 · d51761c · d51761c
1 parent 52a3d1e
commit d51761c
Show file tree

Hide file tree

Showing 7 changed files with 519 additions and 35 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -3116,6 +3116,8 @@ features:
         activated: "Grazie, il servizio è attivo!"
         error: "Si è verificato un errore con la tua richiesta"
     details:
+      badge:
+        legalValue: "Legal value"
       title: Dettaglio del messaggio
       noticeCode: "Codice avviso"
       loadError:

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -3116,6 +3116,8 @@ features:
         activated: "Grazie, il servizio è attivo!"
         error: "Si è verificato un errore con la tua richiesta"
     details:
+      badge:
+        legalValue: "Valore legale"
       title: Dettaglio del messaggio
       noticeCode: "Codice avviso"
       loadError:

diff --git a/ts/features/pn/__mocks__/message.ts b/ts/features/pn/__mocks__/message.ts
@@ -1,31 +1,30 @@
 import { ThirdPartyMessageWithContent } from "../../../../definitions/backend/ThirdPartyMessageWithContent";
+import { ThirdPartyAttachment } from "../../../../definitions/pn/ThirdPartyAttachment";
 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: {
+    attachments: [
+      {
+        id: "1",
+        name: "A First Attachment",
+        content_type: "application/pdf",
+        category: ATTACHMENT_CATEGORY.DOCUMENT,
+        url: "/resource/attachment1.pdf"
+      },
+      {
+        id: "2",
+        name: "A Second Attachment",
+        content_type: "application/pdf",
+        category: ATTACHMENT_CATEGORY.DOCUMENT,
+        url: "/resource/attachment2.pdf"
+      }
+    ] as Array<ThirdPartyAttachment>,
     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: [

diff --git a/ts/features/pn/components/MessageDetails.tsx b/ts/features/pn/components/MessageDetails.tsx
@@ -1,10 +1,17 @@
 import React from "react";
-import { ScrollView } from "react-native";
+import { ScrollView, View } from "react-native";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import * as RA from "fp-ts/lib/ReadonlyArray";
+import * as SEP from "fp-ts/lib/Separated";
+import { HSpacer, IOStyles, Tag, VSpacer } from "@pagopa/io-app-design-system";
 import { ServicePublic } from "../../../../definitions/backend/ServicePublic";
-import { UIMessageId } from "../../messages/types";
+import { UIAttachment, UIMessageId } from "../../messages/types";
 import { PNMessage } from "../store/types/types";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
 import { MessageDetailHeader } from "../../messages/components/MessageDetail/MessageDetailHeader";
+import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
+import I18n from "../../../i18n";
 import { MessageDetailsContent } from "./MessageDetailsContent";
 
 type MessageDetailsProps = {
@@ -14,14 +21,39 @@ type MessageDetailsProps = {
   payments?: ReadonlyArray<NotificationPaymentInfo>;
 };
 
-export const MessageDetails = ({ message, service }: MessageDetailsProps) => (
-  <ScrollView>
-    <MessageDetailHeader
-      service={service}
-      sender={message.senderDenomination}
-      subject={message.subject}
-      createdAt={message.created_at}
-    />
-    <MessageDetailsContent abstract={message.abstract} />
-  </ScrollView>
-);
+export const MessageDetails = ({ message, service }: MessageDetailsProps) => {
+  const partitionedAttachments = pipe(
+    message.attachments,
+    O.fromNullable,
+    O.getOrElse<ReadonlyArray<UIAttachment>>(() => []),
+    RA.partition(attachment => attachment.category === ATTACHMENT_CATEGORY.F24)
+  );
+
+  const attachmentList = SEP.left(partitionedAttachments);
+
+  return (
+    <ScrollView>
+      <MessageDetailHeader
+        service={service}
+        sender={message.senderDenomination}
+        subject={message.subject}
+        createdAt={message.created_at}
+      >
+        <View style={IOStyles.row}>
+          <Tag
+            text={I18n.t("features.pn.details.badge.legalValue")}
+            variant="legalMessage"
+          />
+          {attachmentList.length > 0 && (
+            <>
+              <HSpacer size={8} />
+              <Tag variant="attachment" testID="attachment-tag" />
+            </>
+          )}
+        </View>
+        <VSpacer size={8} />
+      </MessageDetailHeader>
+      <MessageDetailsContent abstract={message.abstract} />
+    </ScrollView>
+  );
+};
diff --git a/ts/features/pn/components/__test__/MessageDetails.test.tsx b/ts/features/pn/components/__test__/MessageDetails.test.tsx
@@ -11,19 +11,52 @@ import { PNMessage } from "../../store/types/types";
 import { thirdPartyMessage } from "../../__mocks__/message";
 import { toPNMessage } from "../../store/types/transformers";
 import { UIMessageId } from "../../../messages/types";
+import I18n from "../../../../i18n";
 
-const pnMessage = pipe(thirdPartyMessage, toPNMessage, O.toUndefined);
+const pnMessage = pipe(thirdPartyMessage, toPNMessage, O.toUndefined)!;
 
 describe("MessageDetails component", () => {
-  it("should match the snapshot", () => {
+  it("should match the snapshot with default props", () => {
     const { component } = renderComponent(
       generateComponentProperties(
         thirdPartyMessage.id as UIMessageId,
-        pnMessage!
+        pnMessage
       )
     );
     expect(component).toMatchSnapshot();
   });
+
+  it("should display the legalMessage tag", () => {
+    const { component } = renderComponent(
+      generateComponentProperties(
+        thirdPartyMessage.id as UIMessageId,
+        pnMessage
+      )
+    );
+    expect(
+      component.queryByText(I18n.t("features.pn.details.badge.legalValue"))
+    ).not.toBeNull();
+  });
+
+  it("should display the attachment tag if there are attachments", () => {
+    const { component } = renderComponent(
+      generateComponentProperties(
+        thirdPartyMessage.id as UIMessageId,
+        pnMessage
+      )
+    );
+    expect(component.queryByTestId("attachment-tag")).not.toBeNull();
+  });
+
+  it("should NOT display the attachment tag if there are no attachments", () => {
+    const { component } = renderComponent(
+      generateComponentProperties(thirdPartyMessage.id as UIMessageId, {
+        ...pnMessage,
+        attachments: []
+      })
+    );
+    expect(component.queryByTestId("attachment-tag")).toBeNull();
+  });
 });
 
 const generateComponentProperties = (