From e567d2d6c9d4e264618477ab5c44ac21ac5f7fdd Mon Sep 17 00:00:00 2001 From: Alessandro Date: Tue, 5 Nov 2024 12:24:51 +0100 Subject: [PATCH 1/3] chore: [IOBP-954] Edit filter notice tab label (#6364) ## Short description This PR edits the filter notice tab in the notices list from `Pagate da me` to `Pagate in app` ## List of changes proposed in this pull request - Edited locales ## How to test Open the Payments screen and then tap on the `Vedi tutte` CTA, you should be able to see the new label "Pagate in app" --------- Co-authored-by: Jacopo Pompilii --- locales/en/index.yml | 2 +- locales/it/index.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 7ef54a3eb76..5a13e697ac4 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -3215,7 +3215,7 @@ features: filters: tabs: all: Tutte - payer: Pagate da me + payer: Paid in app debtor: Intestate a me list: empty: diff --git a/locales/it/index.yml b/locales/it/index.yml index 9a0a69c1f4c..1d60d0fd3cf 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -3215,7 +3215,7 @@ features: filters: tabs: all: Tutte - payer: Pagate da me + payer: Pagate in app debtor: Intestate a me list: empty: From cb1583ed86a22df7a1f145a5106c2bdbf9fa7469 Mon Sep 17 00:00:00 2001 From: Alessandro Date: Tue, 5 Nov 2024 12:42:13 +0100 Subject: [PATCH 2/3] fix: [IOBP-950] Filter tabs behavior into biz events notices list (#6363) ## Short description This PR fixes a strange behavior on the filter tabs in the notices list screen. When the user taps on a tab and it become selected, it seems that doesn't stay in "active" mode. This PR fixes it preventing unnecessary rerendering. ## List of changes proposed in this pull request - Memoized the `SectionListHeaderTitle` component to avoid unnecessary re-renders that causes an issue with the component animation of the TabItem that loses the focus state. ## How to test - Open the `Pagamenti` section. - Tap on the CTA `Vedi tutte`. - Tap on any of the three available tabs in the list and check that the color is the one that marks the active state. --- .../PaymentBizEventsSectionListHeader.tsx | 36 +++++++++++++ .../PaymentsBizEventsFilterTabs.tsx | 4 +- ...PaymentsTransactionBizEventsListScreen.tsx | 50 ++++++++----------- 3 files changed, 60 insertions(+), 30 deletions(-) create mode 100644 ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx new file mode 100644 index 00000000000..baa799ab7c1 --- /dev/null +++ b/ts/features/payments/bizEventsTransaction/components/PaymentBizEventsSectionListHeader.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { H2, VSpacer } from "@pagopa/io-app-design-system"; +import { LayoutChangeEvent, View } from "react-native"; +import I18n from "../../../../i18n"; +import { PaymentBizEventsCategoryFilter } from "../types"; +import { PaymentsBizEventsFilterTabs } from "./PaymentsBizEventsFilterTabs"; + +type PaymentBizEventsSectionListHeaderProps = { + onLayout: (event: LayoutChangeEvent) => void; + selectedCategory: PaymentBizEventsCategoryFilter; + onCategorySelected: (category: PaymentBizEventsCategoryFilter) => void; +}; + +export const PaymentBizEventsSectionListHeader = React.memo( + ({ + onLayout, + selectedCategory, + onCategorySelected + }: PaymentBizEventsSectionListHeaderProps) => ( + +

+ {I18n.t("features.payments.transactions.title")} +

+ + + + ), + (prevProps, nextProps) => + prevProps.selectedCategory === nextProps.selectedCategory +); diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx index b8f9d2da1e5..0eedbaabd49 100644 --- a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx +++ b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsFilterTabs.tsx @@ -26,7 +26,9 @@ const PaymentsBizEventsFilterTabs = ({ const handleFilterSelected = (index: number) => { const categoryByIndex = paymentsBizEventsCategoryFilters[index]; - onCategorySelected?.(categoryByIndex); + if (categoryByIndex !== selectedCategory) { + onCategorySelected?.(categoryByIndex); + } }; return ( diff --git a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx index 7eb39287251..ab1dbec3b1b 100644 --- a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx +++ b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsListScreen.tsx @@ -1,7 +1,6 @@ import { ButtonLink, Divider, - H2, IOStyles, ListItemHeader, VSpacer @@ -35,11 +34,11 @@ import { PaymentsTransactionBizEventsRoutes } from "../navigation/routes"; import { PaymentsTransactionRoutes } from "../../transaction/navigation/routes"; import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem"; import * as analytics from "../analytics"; -import { PaymentsBizEventsFilterTabs } from "../components/PaymentsBizEventsFilterTabs"; import { PaymentBizEventsCategoryFilter } from "../types"; import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent"; import { PaymentsBizEventsFadeInOutAnimationView } from "../components/PaymentsBizEventsFadeInOutAnimationView"; import { PaymentsBizEventsTransactionLoadingList } from "../components/PaymentsBizEventsTransactionLoadingList"; +import { PaymentBizEventsSectionListHeader } from "../components/PaymentBizEventsSectionListHeader"; export type PaymentsTransactionBizEventsListScreenProps = RouteProp< PaymentsTransactionBizEventsParamsList, @@ -139,16 +138,19 @@ const PaymentsTransactionBizEventsListScreen = () => { ); }; - const handleCategorySelected = (category: PaymentBizEventsCategoryFilter) => { - setNoticeCategory(category); - dispatch( - getPaymentsBizEventsTransactionsAction.request({ - firstLoad: true, - noticeCategory: category, - onSuccess: handleOnSuccess - }) - ); - }; + const handleCategorySelected = React.useCallback( + (category: PaymentBizEventsCategoryFilter) => { + setNoticeCategory(category); + dispatch( + getPaymentsBizEventsTransactionsAction.request({ + firstLoad: true, + noticeCategory: category, + onSuccess: handleOnSuccess + }) + ); + }, + [setNoticeCategory, dispatch] + ); useOnFirstRender( React.useCallback(() => { @@ -177,22 +179,6 @@ const PaymentsTransactionBizEventsListScreen = () => { } }, [transactionsPot]); - const SectionListHeaderTitle = ( - -

- {I18n.t("features.payments.transactions.title")} -

- - - - ); - const ShowLegacyTransactionsButton = () => ( @@ -240,7 +226,13 @@ const PaymentsTransactionBizEventsListScreen = () => { }} onEndReached={fetchNextPage} onEndReachedThreshold={0.25} - ListHeaderComponent={SectionListHeaderTitle} + ListHeaderComponent={ + + } onScroll={scrollHandler} stickySectionHeadersEnabled={false} sections={ From 088166596fdd2bf6ba48b3c1c17e75ce2009ad3e Mon Sep 17 00:00:00 2001 From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Date: Tue, 5 Nov 2024 13:03:17 +0100 Subject: [PATCH 3/3] fix: [IOBP-953] Capitalize transaction fields (#6365) ## Short description This pull request includes importing and utilizing a new utility function for text capitalization, and updating the test cases to cover new scenarios. ## List of changes proposed in this pull request - Apply `capitalizeTextName` to `getPayerInfoLabel` function - Update test suite of `getPayerInfoLabel` to handle uppercase string ## How to test - Go in `Pagamenti` - Tap on a transaction - Check _Eseguita da_ and _Metodo intestato a_ field to be capitalize (Edit `PaymentsBizEventsTransactionInfoSection` file with custom string and check results) --------- Co-authored-by: Alessandro --- .../PaymentsBizEventsTransactionInfoSection.tsx | 5 ++++- .../utils/__tests__/index.test.ts | 12 ++++++++++++ .../payments/bizEventsTransaction/utils/index.ts | 3 ++- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx index a6c805cb820..353a08214fc 100644 --- a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx +++ b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionInfoSection.tsx @@ -22,6 +22,7 @@ import { WalletInfo } from "../../../../../definitions/pagopa/biz-events/WalletI import { getPayerInfoLabel } from "../utils"; import { NoticeDetailResponse } from "../../../../../definitions/pagopa/biz-events/NoticeDetailResponse"; import { OriginEnum } from "../../../../../definitions/pagopa/biz-events/InfoNotice"; +import { capitalizeTextName } from "../../../../utils/strings"; type PaymentsBizEventsTransactionInfoSectionProps = { transaction?: NoticeDetailResponse; @@ -99,7 +100,9 @@ const PaymentsBizEventsTransactionInfoSection = ({ label={I18n.t("transaction.details.info.headedTo")} value={ transactionInfo.walletInfo?.maskedEmail ?? - transactionInfo.walletInfo?.accountHolder + capitalizeTextName( + transactionInfo.walletInfo?.accountHolder ?? "" + ) } /> diff --git a/ts/features/payments/bizEventsTransaction/utils/__tests__/index.test.ts b/ts/features/payments/bizEventsTransaction/utils/__tests__/index.test.ts index 5147a37b83f..4e41ff7be8b 100644 --- a/ts/features/payments/bizEventsTransaction/utils/__tests__/index.test.ts +++ b/ts/features/payments/bizEventsTransaction/utils/__tests__/index.test.ts @@ -89,6 +89,18 @@ describe("getPayerInfoLabel", () => { const result = getPayerInfoLabel(payer); expect(result).toBe("John Doe\n(123456789)"); }); + + it("should return only the name if taxCode is empty string", () => { + const payer = { name: "John Doe", taxCode: "" }; + const result = getPayerInfoLabel(payer); + expect(result).toBe("John Doe"); + }); + + it("should return capitalize string", () => { + const payer = { name: "john doe", taxCode: "123456789" }; + const result = getPayerInfoLabel(payer); + expect(result).toBe("John Doe\n(123456789)"); + }); }); describe("calculateTotalAmount", () => { diff --git a/ts/features/payments/bizEventsTransaction/utils/index.ts b/ts/features/payments/bizEventsTransaction/utils/index.ts index 04a4995190b..533cc4c1888 100644 --- a/ts/features/payments/bizEventsTransaction/utils/index.ts +++ b/ts/features/payments/bizEventsTransaction/utils/index.ts @@ -1,6 +1,7 @@ import { SectionListData } from "react-native"; import { NoticeListItem } from "../../../../../definitions/pagopa/biz-events/NoticeListItem"; import { InfoNotice } from "../../../../../definitions/pagopa/biz-events/InfoNotice"; +import { capitalizeTextName } from "../../../../utils/strings"; export const RECEIPT_DOCUMENT_TYPE_PREFIX = "data:application/pdf;base64,"; @@ -64,7 +65,7 @@ export const getPayerInfoLabel = (payer: InfoNotice["payer"]): string => { return ""; } - const name = payer.name ? payer.name.trim() : ""; + const name = payer.name ? capitalizeTextName(payer.name).trim() : ""; const taxCode = payer.taxCode ? payer.taxCode.trim() : ""; const payerInfo = name ? (taxCode ? `${name}\n(${taxCode})` : name) : taxCode;