refactor: [IOBP-1091] Paid in app empty state screen (#6575)

## Short description
This pull request includes updates to localization files and
enhancements to the `ReceiptListScreen` component. The most important
changes is refactoring the empty state logic in the receipt list screen.

## List of changes proposed in this pull request
- Refactored the empty state logic to use a new `emptyProps` object
based on the `noticeCategory`.
- Added `emptyPayer` locale for displaying payment receipts made in the
app.

## How to test
- In `Pagamenti` tap on `Vedi tutte`
- Ensure that the `Pagate in app` tab is display correct empty state

## Preview

https://github.com/user-attachments/assets/8501fe55-1370-4613-9543-b929aa9907d6

locales/en/index.yml

@@ -3240,6 +3240,8 @@ features:
         empty:
           title: Nessuna ricevuta trovata
           subtitle: Se stai cercando la ricevuta di un avviso pagoPA che hai pagato in passato, rivolgiti all’ente creditore.
+        emptyPayer: 
+          title: Qui vedrai le ricevute dei pagamenti fatti in app
     details:
       payPal:
         banner:

locales/it/index.yml

@@ -3240,6 +3240,8 @@ features:
         empty:
           title: Nessuna ricevuta trovata
           subtitle: Se stai cercando la ricevuta di un avviso pagoPA che hai pagato in passato, rivolgiti all’ente creditore.
+        emptyPayer: 
+          title: Qui vedrai le ricevute dei pagamenti fatti in app
     details:
       payPal:
         banner:

ts/features/payments/receipts/screens/ReceiptListScreen.tsx

@@ -12,31 +12,39 @@ import Animated, {
   useSharedValue
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { PaymentsReceiptParamsList } from "../navigation/params";
-import { getPaymentsReceiptAction } from "../store/actions";
-import { walletReceiptListPotSelector } from "../store/selectors";
-import { useIONavigation } from "../../../../navigation/params/AppParamsList";
-import { isPaymentsTransactionsEmptySelector } from "../../home/store/selectors";
-import { ReceiptListItemTransaction } from "../components/ReceiptListItemTransaction";
+import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem";
+import {
+  OperationResultScreenContent,
+  OperationResultScreenContentProps
+} from "../../../../components/screens/OperationResultScreenContent";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
-import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
-import { groupTransactionsByMonth } from "../utils";
 import I18n from "../../../../i18n";
-import { PaymentsReceiptRoutes } from "../navigation/routes";
-import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
+import { isPaymentsTransactionsEmptySelector } from "../../home/store/selectors";
 import * as analytics from "../analytics";
-import { ReceiptsCategoryFilter } from "../types";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import { ReceiptFadeInOutAnimationView } from "../components/ReceiptFadeInOutAnimationView";
+import { ReceiptListItemTransaction } from "../components/ReceiptListItemTransaction";
 import { ReceiptLoadingList } from "../components/ReceiptLoadingList";
 import { ReceiptSectionListHeader } from "../components/ReceiptSectionListHeader";
+import { PaymentsReceiptParamsList } from "../navigation/params";
+import { PaymentsReceiptRoutes } from "../navigation/routes";
+import { getPaymentsReceiptAction } from "../store/actions";
+import { walletReceiptListPotSelector } from "../store/selectors";
+import { ReceiptsCategoryFilter } from "../types";
+import { groupTransactionsByMonth } from "../utils";
 
 export type ReceiptListScreenProps = RouteProp<
   PaymentsReceiptParamsList,
   "PAYMENT_RECEIPT_DETAILS"
 >;
 
+type OperationResultEmptyProps = Pick<
+  OperationResultScreenContentProps,
+  "title" | "subtitle" | "pictogram"
+>;
+
 const AnimatedSectionList = Animated.createAnimatedComponent(
   SectionList as new () => SectionList<NoticeListItem>
 );
@@ -59,7 +67,6 @@ const ReceiptListScreen = () => {
 
   const transactionsPot = useIOSelector(walletReceiptListPotSelector);
   const isEmpty = useIOSelector(isPaymentsTransactionsEmptySelector);
-
   const isLoading = pot.isLoading(transactionsPot);
 
   const handleNavigateToTransactionDetails = (transaction: NoticeListItem) => {
@@ -163,14 +170,23 @@ const ReceiptListScreen = () => {
     </>
   );
 
+  const emptyProps: OperationResultEmptyProps =
+    noticeCategory === "payer"
+      ? {
+          title: I18n.t("features.payments.transactions.list.emptyPayer.title"),
+          pictogram: "empty"
+        }
+      : {
+          title: I18n.t("features.payments.transactions.list.empty.title"),
+          subtitle: I18n.t(
+            "features.payments.transactions.list.empty.subtitle"
+          ),
+          pictogram: "emptyArchive"
+        };
+
   const EmptyStateList = isEmpty ? (
     <ReceiptFadeInOutAnimationView>
-      <OperationResultScreenContent
-        isHeaderVisible
-        title={I18n.t("features.payments.transactions.list.empty.title")}
-        subtitle={I18n.t("features.payments.transactions.list.empty.subtitle")}
-        pictogram="emptyArchive"
-      />
+      <OperationResultScreenContent isHeaderVisible {...emptyProps} />
     </ReceiptFadeInOutAnimationView>
   ) : undefined;