Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Dec 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
54ed367
chore: update locales
LeleDallas Dec 20, 2024
8a94545
refactor: empty transaction payer screen content
LeleDallas Dec 20, 2024
67c8471
Merge branch 'master' into IOBP-1091-payed-in-app-empty-state
LeleDallas Dec 20, 2024
2267d45
Merge branch 'master' into IOBP-1091-payed-in-app-empty-state
LeleDallas Dec 20, 2024
28dd53c
Merge branch 'master' into IOBP-1091-payed-in-app-empty-state
LeleDallas Dec 23, 2024
d9cbd7f
refactor: change request
LeleDallas Dec 23, 2024
1d03d31
refactor: move type definition outside hook
LeleDallas Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions locales/en/index.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 2 additions & 0 deletions locales/it/index.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
56 changes: 36 additions & 20 deletions ts/features/payments/receipts/screens/ReceiptListScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -59,7 +67,6 @@ const ReceiptListScreen = () => {

const transactionsPot = useIOSelector(walletReceiptListPotSelector);
const isEmpty = useIOSelector(isPaymentsTransactionsEmptySelector);

const isLoading = pot.isLoading(transactionsPot);

const handleNavigateToTransactionDetails = (transaction: NoticeListItem) => {
Expand Down Expand Up @@ -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;

Expand Down
Loading