From ea4c74b8ccc081ff1d9a7eba455dcb74fafbbd17 Mon Sep 17 00:00:00 2001
From: Federico Mastrini <federicomastrini93@gmail.com>
Date: Mon, 19 Aug 2024 17:40:51 +0200
Subject: [PATCH] chore(IT Wallet): [SIW-1465] Fix header in eID preview screen
 (#6085)

## Short description
This PR adds the correct close button in the eID preview screen header

## List of changes proposed in this pull request
- Added `ForceScrollDownView` in the `ItwIssuanceEidPreviewScreen`
- Manually added `HeaderSecondLevel` component via the
`navigation.setOption` function

## How to test
Start the eID issuance flow. In the eID preview screen, check that the
close button is correctly displayed and, when it is pressed, it shows
the dismiss dialog

## Preview

<img
src="https://github.com/user-attachments/assets/105c165a-029b-4a9e-9781-a17bf5ba3dbd"
width="250" />

---------

Co-authored-by: Mario Perrotta <mario.perrotta@pagopa.it>
---
 .../screens/ItwIssuanceEidPreviewScreen.tsx   | 93 ++++++++++++-------
 1 file changed, 61 insertions(+), 32 deletions(-)

diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx
index 80ef6a989c1..d3275397c76 100644
--- a/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx
+++ b/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx
@@ -1,9 +1,16 @@
-import { ContentWrapper } from "@pagopa/io-app-design-system";
+import {
+  ForceScrollDownView,
+  H2,
+  HeaderSecondLevel,
+  IOVisualCostants,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
 import { constNull, pipe } from "fp-ts/lib/function";
 import React from "react";
+import { StyleSheet, View } from "react-native";
 import LoadingScreenContent from "../../../../components/screens/LoadingScreenContent";
-import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
+import { FooterActions } from "../../../../components/ui/FooterActions";
 import { useDebugInfo } from "../../../../hooks/useDebugInfo";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
@@ -49,12 +56,6 @@ const ContentView = ({ eid }: ContentViewProps) => {
   const dispatch = useIODispatch();
   const navigation = useIONavigation();
 
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: true
-    });
-  }, [navigation]);
-
   useDebugInfo({
     parsedCredential: eid.parsedCredential
   });
@@ -84,31 +85,59 @@ const ContentView = ({ eid }: ContentViewProps) => {
     );
   };
 
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      header: () => (
+        <HeaderSecondLevel
+          title=""
+          type="singleAction"
+          firstAction={{
+            icon: "closeLarge",
+            onPress: dismissDialog.show,
+            accessibilityLabel: I18n.t("global.buttons.close")
+          }}
+        />
+      )
+    });
+  }, [navigation, dismissDialog]);
+
   return (
-    <IOScrollViewWithLargeHeader
-      canGoback={false}
-      title={{
-        label: I18n.t("features.itWallet.issuance.eidPreview.title")
-      }}
-      actions={{
-        type: "TwoButtons",
-        primary: {
-          label: I18n.t(
-            "features.itWallet.issuance.eidPreview.actions.primary"
-          ),
-          onPress: handleSaveToWallet
-        },
-        secondary: {
-          label: I18n.t(
-            "features.itWallet.issuance.eidPreview.actions.secondary"
-          ),
-          onPress: dismissDialog.show
-        }
-      }}
-    >
-      <ContentWrapper>
+    <ForceScrollDownView contentContainerStyle={styles.scroll}>
+      <View style={styles.contentWrapper}>
+        <H2>{I18n.t("features.itWallet.issuance.eidPreview.title")}</H2>
+        <VSpacer size={24} />
         <ItwCredentialClaimsList data={eid} isPreview={true} />
-      </ContentWrapper>
-    </IOScrollViewWithLargeHeader>
+        <VSpacer size={24} />
+      </View>
+      <FooterActions
+        fixed={false}
+        actions={{
+          type: "TwoButtons",
+          primary: {
+            label: I18n.t(
+              "features.itWallet.issuance.eidPreview.actions.primary"
+            ),
+            onPress: handleSaveToWallet
+          },
+          secondary: {
+            label: I18n.t(
+              "features.itWallet.issuance.eidPreview.actions.secondary"
+            ),
+            onPress: dismissDialog.show
+          }
+        }}
+      />
+    </ForceScrollDownView>
   );
 };
+
+const styles = StyleSheet.create({
+  scroll: {
+    flexGrow: 1
+  },
+  contentWrapper: {
+    flexGrow: 1,
+    paddingHorizontal: IOVisualCostants.appMarginDefault
+  }
+});