diff --git a/locales/en/index.yml b/locales/en/index.yml index a10530a05a0..703e5bca753 100644 --- a/locales/en/index.yml +++ b/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: diff --git a/locales/it/index.yml b/locales/it/index.yml index 3a5cbe020ce..283a728cec9 100644 --- a/locales/it/index.yml +++ b/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: diff --git a/ts/features/payments/receipts/screens/ReceiptListScreen.tsx b/ts/features/payments/receipts/screens/ReceiptListScreen.tsx index 95d1f2d51f8..789b1386e7c 100644 --- a/ts/features/payments/receipts/screens/ReceiptListScreen.tsx +++ b/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 ); @@ -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 ? ( - + ) : undefined;