chore: [IOCOM-1525] PAID badge, new DS (#5877)

⚠️ This PR depends on #5873 ⚠️

## Short description
This PR enables the PAID badge on messages in the new DS messages' home.
![Simulator Screenshot - iPhone 15 - 2024-06-19 at 14 21
13](https://github.com/pagopa/io-app/assets/5150343/36ca20db-b47a-41b1-8297-8ae9d647f2d5)

## List of changes proposed in this pull request
- `MessageListItem`: support for `success` badgeVariant
- `WrappedMessageListItem`: business logic for `badgeVariant` and
`badgeText`
- `allPaginated` refactored `isNoticePaidSelector` into
`isPaymentMessagewithPaidNoticeSelector`

## How to test
Using the io-dev-api-server, generate some messages with and without
payment. Make sure to enable both DS and new Home. Select a message with
a payment and pay it. The related message's cell should display the PAID
badge.
Be aware that SEND messages with payments do not display the PAID badge.

ts/features/messages/components/Home/DS/MessageListItem.tsx

@@ -49,6 +49,7 @@ const styles = StyleSheet.create({
 type MessageListItemProps = WithTestID<{
   accessibilityLabel: string;
   badgeText?: string;
+  badgeVariant?: "legalMessage" | "success";
   doubleAvatar?: boolean;
   formattedDate: string;
   isRead: boolean;
@@ -80,6 +81,7 @@ const BadgeComponent = ({ color, width = 14 }: BadgeComponentProps) => (
 export const MessageListItem = ({
   accessibilityLabel,
   badgeText,
+  badgeVariant,
   doubleAvatar,
   formattedDate,
   isRead,
@@ -144,11 +146,15 @@ export const MessageListItem = ({
             </View>
           )}
         </View>
-        {badgeText && (
+        {badgeText && badgeVariant && (
           <View style={styles.badgeContainer}>
-            <Tag text={badgeText} variant="legalMessage" />
-            <HSpacer size={8} />
-            <Tag variant="attachment" />
+            <Tag text={badgeText} variant={badgeVariant} />
+            {badgeVariant === "legalMessage" && (
+              <>
+                <HSpacer size={8} />
+                <Tag variant="attachment" />
+              </>
+            )}
           </View>
         )}
       </View>

ts/features/messages/components/Home/WrappedMessageListItem.tsx

@@ -7,6 +7,8 @@ import { convertDateToWordDistance } from "../../utils/convertDateToWordDistance
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { MESSAGES_ROUTES } from "../../navigation/routes";
 import { logoForService } from "../../../services/home/utils";
+import { useIOSelector } from "../../../../store/hooks";
+import { isPaymentMessageWithPaidNoticeSelector } from "../../store/reducers/allPaginated";
 import { accessibilityLabelForMessageItem } from "./homeUtils";
 import { MessageListItem } from "./DS/MessageListItem";
 
@@ -23,6 +25,10 @@ export const WrappedMessageListItem = ({
   const serviceId = message.serviceId;
   const organizationFiscalCode = message.organizationFiscalCode;
 
+  const isPaymentMessageWithPaidNotice = useIOSelector(state =>
+    isPaymentMessageWithPaidNoticeSelector(state, message.category)
+  );
+
   const messageCategoryTag = message.category.tag;
   const doubleAvatar = messageCategoryTag === PaymentTagEnum.PAYMENT;
   const serviceLogoUriSources = useMemo(
@@ -42,6 +48,14 @@ export const WrappedMessageListItem = ({
   const badgeText =
     messageCategoryTag === SENDTagEnum.PN
       ? I18n.t("features.pn.details.badge.legalValue")
+      : isPaymentMessageWithPaidNotice
+      ? I18n.t("messages.badge.paid")
+      : undefined;
+  const badgeVariant =
+    messageCategoryTag === SENDTagEnum.PN
+      ? "legalMessage"
+      : isPaymentMessageWithPaidNotice
+      ? "success"
       : undefined;
   const accessibilityLabel = useMemo(
     () => accessibilityLabelForMessageItem(message),
@@ -65,16 +79,17 @@ export const WrappedMessageListItem = ({
   return (
     <MessageListItem
       accessibilityLabel={accessibilityLabel}
+      badgeText={badgeText}
+      badgeVariant={badgeVariant}
       doubleAvatar={doubleAvatar}
-      serviceName={serviceName}
+      formattedDate={messageDate}
+      isRead={isRead}
       messageTitle={messageTitle}
       onLongPress={() => undefined}
       onPress={onPressCallback}
-      serviceLogos={serviceLogoUriSources}
-      badgeText={badgeText}
-      isRead={isRead}
       organizationName={organizationName}
-      formattedDate={messageDate}
+      serviceLogos={serviceLogoUriSources}
+      serviceName={serviceName}
       testID={`wrapped_message_list_item_${index}`}
     />
   );

ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx

@@ -12,6 +12,7 @@ import { TagEnum as SENDTagEnum } from "../../../../../../definitions/backend/Me
 import { TagEnum as PaymentTagEnum } from "../../../../../../definitions/backend/MessageCategoryPayment";
 import { WrappedMessageListItem } from "../WrappedMessageListItem";
 import { TagEnum } from "../../../../../../definitions/backend/MessageCategoryBase";
+import { GlobalState } from "../../../../../store/reducers/types";
 
 const mockNavigate = jest.fn();
 jest.mock("@react-navigation/native", () => ({
@@ -38,14 +39,36 @@ describe("WrappedMessageListItem", () => {
     const component = renderComponent(message);
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("should match snapshot, not from SEND, contains payment, unread message", () => {
-    const message = messageGenerator(true, false, false);
-    const component = renderComponent(message);
+  it("should match snapshot, not from SEND, contains unpaid payment, unread message", () => {
+    const message = messageGenerator(
+      true,
+      false,
+      false,
+      "00123456789001122334455667788"
+    );
+    const component = renderComponent(message, "00987654321009922994499667799");
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("should match snapshot, not from SEND, contains payment, read message", () => {
-    const message = messageGenerator(true, false, true);
-    const component = renderComponent(message);
+  it("should match snapshot, not from SEND, contains unpaid payment, read message", () => {
+    const message = messageGenerator(
+      true,
+      false,
+      true,
+      "00123456789001122334455667788"
+    );
+    const component = renderComponent(message, "00987654321009922994499667799");
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, not from SEND, contains paid payment, unread message", () => {
+    const paymentId = "00123456789001122334455667788";
+    const message = messageGenerator(true, false, false, paymentId);
+    const component = renderComponent(message, paymentId);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot, not from SEND, contains paid payment, read message", () => {
+    const paymentId = "00123456789001122334455667788";
+    const message = messageGenerator(true, false, true, paymentId);
+    const component = renderComponent(message, paymentId);
     expect(component.toJSON()).toMatchSnapshot();
   });
   it("should match snapshot, from SEND, unread message", () => {
@@ -78,7 +101,8 @@ describe("WrappedMessageListItem", () => {
 const messageGenerator = (
   hasPayment: boolean,
   isFromSend: boolean,
-  isRead: boolean
+  isRead: boolean,
+  rptId: string | undefined = undefined
 ): UIMessage =>
   ({
     createdAt: new Date(1990, 0, 2, 3, 4),
@@ -93,17 +117,33 @@ const messageGenerator = (
         ? SENDTagEnum.PN
         : hasPayment
         ? PaymentTagEnum.PAYMENT
-        : TagEnum.GENERIC
+        : TagEnum.GENERIC,
+      rptId
     }
   } as UIMessage);
 
-const renderComponent = (message: UIMessage) => {
+const renderComponent = (
+  message: UIMessage,
+  paymentId: string = "09173824650012345678991378264"
+) => {
   const initialState = appReducer(undefined, applicationChangeState("active"));
   const designSystemState = appReducer(
     initialState,
     preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
   );
-  const store = createStore(appReducer, designSystemState as any);
+  const stateWithPayment = {
+    ...designSystemState,
+    entities: {
+      ...designSystemState.entities,
+      paymentByRptId: {
+        ...designSystemState.entities.paymentByRptId,
+        [paymentId]: {
+          kind: "COMPLETED"
+        }
+      }
+    }
+  } as GlobalState;
+  const store = createStore(appReducer, stateWithPayment as any);
   return renderScreenWithNavigationStoreContext(
     () => <WrappedMessageListItem index={0} message={message} />,
     MESSAGES_ROUTES.MESSAGES_HOME,