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: 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/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/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={ 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;