From f739c1008302f41e5a1b7da9d1466a64699b3ca4 Mon Sep 17 00:00:00 2001 From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:47:18 +0100 Subject: [PATCH] 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 | 2 + locales/it/index.yml | 2 + .../receipts/screens/ReceiptListScreen.tsx | 56 ++++++++++++------- 3 files changed, 40 insertions(+), 20 deletions(-) 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;