From c57f072200c663ab6afaa52b36b61121d69f4d06 Mon Sep 17 00:00:00 2001
From: Alessandro <alessandro.izzo998@gmail.com>
Date: Thu, 31 Oct 2024 14:28:58 +0100
Subject: [PATCH] chore: [IOBP-837] Add payee name as header title into
 transaction details (#6354)

## Short description
This PR adds the payee entity's name to the header with a discrete
transition effect.

## List of changes proposed in this pull request
- Replaced the `IOScrollViewWithLargeHeader` with the `IOScrollView`
that uses the `animatedRef` to the custom hook `useHeaderSecondLevel` to
show the discrete transition in the header while scrolling

## How to test
- Open the Payments screen tab;
- Choose any transaction from the list navigating to the transaction
details screen;
- While scrolling, you should be able to see the discrete transition of
the header with the payee entity's name;

## Preview


https://github.com/user-attachments/assets/7a65c078-a558-4c54-a0ca-59bc97bb2560
---
 ...entsBizEventsTransactionHeadingSection.tsx | 17 ++++++++++-
 ...mentsTransactionBizEventsDetailsScreen.tsx | 29 ++++++++++++-------
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionHeadingSection.tsx b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionHeadingSection.tsx
index 84b82b5f761..add48a218d4 100644
--- a/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionHeadingSection.tsx
+++ b/ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionHeadingSection.tsx
@@ -1,5 +1,11 @@
 import _ from "lodash";
-import { Body, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
+import {
+  Body,
+  H2,
+  IOStyles,
+  useIOTheme,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { View } from "react-native";
@@ -27,6 +33,8 @@ export const PaymentsBizEventsTransactionHeadingSection = ({
   const navigation =
     useNavigation<PaymentsTransactionBizEventsStackNavigation>();
 
+  const theme = useIOTheme();
+
   const transactionInfo = transaction?.infoNotice;
 
   const handlePressTransactionDetails = (cartItem: CartItem) => {
@@ -82,6 +90,13 @@ export const PaymentsBizEventsTransactionHeadingSection = ({
 
   return (
     <View style={[IOStyles.horizontalContentPadding, IOStyles.bgWhite]}>
+      <H2
+        color={theme["textHeading-default"]}
+        accessibilityLabel={I18n.t("transaction.details.title")}
+        accessibilityRole="header"
+      >
+        {I18n.t("transaction.details.title")}
+      </H2>
       <VSpacer size={16} />
       <PaymentsBizEventsTransactionCartList
         carts={transaction?.carts}
diff --git a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx
index 6501d010008..8269d93e705 100644
--- a/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx
+++ b/ts/features/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx
@@ -1,12 +1,12 @@
 import { IOColors, useIOToast } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { RouteProp, useRoute } from "@react-navigation/native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
 import * as React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import FocusAwareStatusBar from "../../../../components/ui/FocusAwareStatusBar";
 import I18n from "../../../../i18n";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
 import { PaymentsBizEventsTransactionHeadingSection } from "../components/PaymentsBizEventsTransactionHeadingSection";
 import WalletTransactionInfoSection from "../components/PaymentsBizEventsTransactionInfoSection";
@@ -21,11 +21,13 @@ import {
 } from "../store/selectors";
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
-import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import { PaymentsTransactionBizEventsRoutes } from "../navigation/routes";
 import { OriginEnum } from "../../../../../definitions/pagopa/biz-events/InfoNotice";
 import * as analytics from "../analytics";
 import { paymentAnalyticsDataSelector } from "../../history/store/selectors";
+import { IOScrollView } from "../../../../components/ui/IOScrollView";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
+import { FAQsCategoriesType } from "../../../../utils/faq";
 
 export type PaymentsTransactionBizEventsDetailsScreenParams = {
   transactionId: string;
@@ -73,6 +75,7 @@ const PaymentsTransactionBizEventsDetailsScreen = () => {
   const isLoadingReceipt = pot.isLoading(transactionReceiptPot);
   const isError = pot.isError(transactionDetailsPot);
   const transactionDetails = pot.toUndefined(transactionDetailsPot);
+  const animatedScrollViewRef = useAnimatedRef<Animated.ScrollView>();
 
   useOnFirstRender(() => {
     fetchTransactionDetails();
@@ -121,6 +124,16 @@ const PaymentsTransactionBizEventsDetailsScreen = () => {
     );
   };
 
+  useHeaderSecondLevel({
+    title:
+      transactionDetails?.carts?.[0].payee?.name ??
+      I18n.t("transaction.details.title"),
+    enableDiscreteTransition: true,
+    animatedRef: animatedScrollViewRef,
+    faqCategories: ["wallet_transaction" as FAQsCategoriesType],
+    supportRequest: true
+  });
+
   if (isError) {
     return (
       <OperationResultScreenContent
@@ -141,10 +154,9 @@ const PaymentsTransactionBizEventsDetailsScreen = () => {
   }
 
   return (
-    <IOScrollViewWithLargeHeader
-      title={{
-        label: I18n.t("transaction.details.title")
-      }}
+    <IOScrollView
+      includeContentMargins={false}
+      animatedRef={animatedScrollViewRef}
       actions={
         transactionDetails?.infoNotice?.origin !== OriginEnum.PM
           ? {
@@ -160,9 +172,6 @@ const PaymentsTransactionBizEventsDetailsScreen = () => {
             }
           : undefined
       }
-      contextualHelp={emptyContextualHelp}
-      faqCategories={["wallet_transaction"]}
-      headerActionsProp={{ showHelp: true }}
     >
       <FocusAwareStatusBar barStyle={"dark-content"} />
       <View style={styles.wrapper}>
@@ -177,7 +186,7 @@ const PaymentsTransactionBizEventsDetailsScreen = () => {
           loading={isLoading}
         />
       </View>
-    </IOScrollViewWithLargeHeader>
+    </IOScrollView>
   );
 };