Merge branch 'master' into IOBP-801-add-biz-events-filters

pagopa · Oct 31, 2024 · 03f3116 · 03f3116
2 parents 534add7 + c57f072
commit 03f3116
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/...s/payments/bizEventsTransaction/components/PaymentsBizEventsTransactionHeadingSection.tsx b/...s/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/...tures/payments/bizEventsTransaction/screens/PaymentsTransactionBizEventsDetailsScreen.tsx b/...tures/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>
   );
 };