From d51761c92a67ef1246b10e33005df68b0fa44032 Mon Sep 17 00:00:00 2001 From: Alessandro Dell'Oste Date: Tue, 30 Jan 2024 12:35:19 +0100 Subject: [PATCH] feat: [IOCOM-866] Display tags in the header of a SEND message (#5440) This PR depends on https://github.com/pagopa/io-app/pull/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

| MessageDetails | | - | | |

## 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 --- locales/en/index.yml | 2 + locales/it/index.yml | 2 + ts/features/pn/__mocks__/message.ts | 35 ++- ts/features/pn/components/MessageDetails.tsx | 58 +++-- .../__test__/MessageDetails.test.tsx | 39 +++- .../MessageDetails.test.tsx.snap | 210 +++++++++++++++++- .../MessageDetailsScreen.test.tsx.snap | 208 +++++++++++++++++ 7 files changed, 519 insertions(+), 35 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index fd61136f9ff..f53eb1064e6 100644 --- 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 index fb226ff9174..fdcc44df3e6 100644 --- 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 index 6bfc8eeaccb..0bea75bc58e 100644 --- a/ts/features/pn/__mocks__/message.ts +++ b/ts/features/pn/__mocks__/message.ts @@ -1,4 +1,5 @@ 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"; @@ -6,26 +7,24 @@ 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, 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 index d6f25513ce4..bb5ce071485 100644 --- 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; }; -export const MessageDetails = ({ message, service }: MessageDetailsProps) => ( - - - - -); +export const MessageDetails = ({ message, service }: MessageDetailsProps) => { + const partitionedAttachments = pipe( + message.attachments, + O.fromNullable, + O.getOrElse>(() => []), + RA.partition(attachment => attachment.category === ATTACHMENT_CATEGORY.F24) + ); + + const attachmentList = SEP.left(partitionedAttachments); + + return ( + + + + + {attachmentList.length > 0 && ( + <> + + + + )} + + + + + + ); +}; diff --git a/ts/features/pn/components/__test__/MessageDetails.test.tsx b/ts/features/pn/components/__test__/MessageDetails.test.tsx index b6c8687b84c..a87f86291be 100644 --- 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 = ( diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap index 45785dc4e5f..ec8a030d60f 100644 --- a/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap +++ b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MessageDetails component should match the snapshot 1`] = ` +exports[`MessageDetails component should match the snapshot with default props 1`] = ` + + + + + + + + + + + + Legal value + + + + + + + + + + + + + + + + + + + + + + + + + + Legal value + + + + + + + + + + + + + +