Merge branch 'master' into upgrade-to-rn-075

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:

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:

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) => (
+    <View onLayout={onLayout}>
+      <H2
+        accessibilityLabel={I18n.t("features.payments.transactions.title")}
+        accessibilityRole="header"
+      >
+        {I18n.t("features.payments.transactions.title")}
+      </H2>
+      <VSpacer size={16} />
+      <PaymentsBizEventsFilterTabs
+        selectedCategory={selectedCategory}
+        onCategorySelected={onCategorySelected}
+      />
+    </View>
+  ),
+  (prevProps, nextProps) =>
+    prevProps.selectedCategory === nextProps.selectedCategory
+);

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 (

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 ?? ""
+                      )
                     }
                   />
                   <Divider />

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 = (
-    <View onLayout={getTitleHeight}>
-      <H2
-        accessibilityLabel={I18n.t("features.payments.transactions.title")}
-        accessibilityRole="header"
-      >
-        {I18n.t("features.payments.transactions.title")}
-      </H2>
-      <VSpacer size={16} />
-      <PaymentsBizEventsFilterTabs
-        selectedCategory={noticeCategory}
-        onCategorySelected={handleCategorySelected}
-      />
-    </View>
-  );
-
   const ShowLegacyTransactionsButton = () => (
     <View style={{ marginTop: 12 }}>
       <VSpacer size={16} />
@@ -240,7 +226,13 @@ const PaymentsTransactionBizEventsListScreen = () => {
       }}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={0.25}
-      ListHeaderComponent={SectionListHeaderTitle}
+      ListHeaderComponent={
+        <PaymentBizEventsSectionListHeader
+          onLayout={getTitleHeight}
+          selectedCategory={noticeCategory}
+          onCategorySelected={handleCategorySelected}
+        />
+      }
       onScroll={scrollHandler}
       stickySectionHeadersEnabled={false}
       sections={

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", () => {

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;