fix(Firma con IO): [SFEQS-2124] Wrong margins in FCI flow (#5543)

This PR fixes margins in FCI flow screens. | Before | After | |--------|--------| | <img src="https://github.com/pagopa/io-app/assets/12371664/8a3c5192-8ceb-4ce4-bfc0-24ce6a8a1691" height="350"> | <img src="https://github.com/pagopa/io-app/assets/12371664/a9210c57-b2d7-4b01-8dfe-9cce669d83c8" height="350"> | | <img src="https://github.com/pagopa/io-app/assets/12371664/95d0d142-abfc-4b46-bf9d-3229117b2093" height="350"> | <img src="https://github.com/pagopa/io-app/assets/12371664/4c9cf5ee-c8ec-493b-889b-d84082bca837" height="350"> | | <img src="https://github.com/pagopa/io-app/assets/12371664/f9b8e474-d858-48a5-b69e-ba991779041a" height="350"> | <img src="https://github.com/pagopa/io-app/assets/12371664/807f61fa-6769-4243-bb41-edad27f988a8" height="350"> | - Removes `SafeAreaView` in screens where there's a `useHeaderSecondLevel` hook and a `FooterWithButtons` component because they already consume safe area insets. This prevents excessive margins. See first comparison. - Keeps `SafeAreaView` with every edge in screens where there's no `useHeaderSecondLevel` hook nor a `FooterWithButtons` component. Keeps `SafeAreaView` with `top` edge where there's no `useHeaderSecondLevel` and/or `bottom` edge where there's no `FooterWithButtons` component. See second comparison; - Replaces `FooterWithButtons` in `useFciAbortSignatureFlow` with `BlockButtons` because the bottom sheet already consumes insets for the bottom padding, thus preventing double insets. See third comparison. Test every single screen on both iOS and Android including success, error and loading views on the FCI flow and check for any regression. Please note that there's an issue with the abort bottom sheet on Android which is not showing a bottom padding. This is due to the bottom sheet logic which doesn't add a default value if the the inset is 0 (as already done in `FooterWithButtons`). That's out of scope of this PR. --------- Co-authored-by: Mario Perrotta <[email protected]>
pagopa · Feb 23, 2024 · c00a468 · c00a468
1 parent 2fc1faf
commit c00a468
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 173 deletions.
diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx
@@ -187,7 +187,7 @@ const DocumentWithSignature = (props: Props) => {
     <SafeAreaView
       style={[IOStyles.flex, IOStyles.bgWhite]}
       testID={"FciDocumentsScreenTestID"}
-      edges={["bottom", "left", "right"]}
+      edges={["top", "left", "right"]}
     >
       <View style={[IOStyles.horizontalContentPadding, styles.header]}>
         <HSpacer />

diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx
@@ -144,9 +144,9 @@ const ErrorComponent = (props: Props) => {
 
   return (
     <SafeAreaView
+      edges={["top", "left", "right"]}
       style={IOStyles.flex}
       testID={props.testID}
-      edges={["left", "right"]}
     >
       <InfoScreenComponent
         image={<Pictogram name={props.pictogram} />}

diff --git a/ts/features/fci/components/LoadingComponent.tsx b/ts/features/fci/components/LoadingComponent.tsx
@@ -1,17 +1,15 @@
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
+import { SafeAreaView, StyleSheet } from "react-native";
 import {
   Body,
   H3,
   LoadingSpinner,
   VSpacer,
   WithTestID
 } from "@pagopa/io-app-design-system";
-import customVariables from "../../../theme/variables";
 
 const styles = StyleSheet.create({
   main: {
-    padding: customVariables.contentPadding,
     flex: 1,
     alignItems: "center",
     justifyContent: "center"
@@ -36,7 +34,7 @@ const LoadingComponent = (props: Props) => {
   const { captionTitle, captionSubtitle } = props;
 
   return (
-    <View style={styles.main} testID={props.testID}>
+    <SafeAreaView style={styles.main} testID={props.testID}>
       <LoadingSpinner size={76} />
       <VSpacer size={48} />
       <H3 style={styles.textAlignCenter} testID="LoadingSpinnerCaptionTitleID">
@@ -49,7 +47,7 @@ const LoadingComponent = (props: Props) => {
       >
         {captionSubtitle}
       </Body>
-    </View>
+    </SafeAreaView>
   );
 };
 

diff --git a/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Test LoadingComponent component should render a LoadingComponent component with props correctly 1`] = `
-<View
+<RCTSafeAreaView
+  emulateUnlessSupported={true}
   style={
     Object {
       "alignItems": "center",
       "flex": 1,
       "justifyContent": "center",
-      "padding": 24,
     }
   }
 >
@@ -241,5 +241,5 @@ exports[`Test LoadingComponent component should render a LoadingComponent compon
   >
     Please wait...
   </Text>
-</View>
+</RCTSafeAreaView>
 `;
diff --git a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
-import { Alert } from "react-native";
+import { Alert, View } from "react-native";
 import { useRoute } from "@react-navigation/native";
 import {
+  BlockButtons,
   ButtonSolidProps,
-  FooterWithButtons,
+  IOVisualCostants,
   useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
 import I18n from "../../../i18n";
@@ -60,14 +61,13 @@ export const useFciAbortSignatureFlow = () => {
     ),
     snapPoint: [280],
     footer: (
-      <FooterWithButtons
-        type={"TwoButtonsInlineHalf"}
-        primary={{ type: "Outline", buttonProps: cancelButtonProps }}
-        secondary={{
-          type: "Solid",
-          buttonProps: continueButtonProps
-        }}
-      />
+      <View style={{ paddingHorizontal: IOVisualCostants.appMarginDefault }}>
+        <BlockButtons
+          type={"TwoButtonsInlineHalf"}
+          primary={{ type: "Outline", buttonProps: cancelButtonProps }}
+          secondary={{ type: "Solid", buttonProps: continueButtonProps }}
+        />
+      </View>
     )
   });
 

diff --git a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx
@@ -16,7 +16,6 @@ import {
   ListItemNav,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import { SafeAreaView } from "react-native-safe-area-context";
 import I18n from "../../../../i18n";
 import { useIOSelector } from "../../../../store/hooks";
 import {
@@ -127,80 +126,78 @@ const FciDataSharingScreen = (): React.ReactElement => {
 
   return (
     <>
-      <SafeAreaView style={IOStyles.flex} edges={["bottom", "left", "right"]}>
-        <ScrollView
-          style={IOStyles.horizontalContentPadding}
-          testID={"FciDataSharingScreenListTestID"}
-        >
-          <H2>{I18n.t("features.fci.shareDataScreen.title")}</H2>
-          <VSpacer size={16} />
-          <Body>{I18n.t("features.fci.shareDataScreen.content")}</Body>
-          {name && (
-            <ListItemNav
-              testID="FciDataSharingScreenNameTestID"
-              value={I18n.t("features.fci.shareDataScreen.name")}
-              description={name}
-              accessibilityLabel={I18n.t("features.fci.shareDataScreen.name")}
-              onPress={() => undefined}
-              hideChevron
-            />
-          )}
-          {familyName && (
-            <ListItemNav
-              testID="FciDataSharingScreenFamilyNameTestID"
-              value={I18n.t("features.fci.shareDataScreen.familyName")}
-              description={familyName}
-              onPress={() => undefined}
-              hideChevron
-              accessibilityLabel={I18n.t(
-                "features.fci.shareDataScreen.familyName"
-              )}
-            />
-          )}
-          {birthDate && (
-            <ListItemNav
-              testID="FciDataSharingScreenBirthDateTestID"
-              value={I18n.t("features.fci.shareDataScreen.birthDate")}
-              description={formatFiscalCodeBirthdayAsShortFormat(birthDate)}
-              hideChevron
-              accessibilityLabel={I18n.t(
-                "features.fci.shareDataScreen.birthDate"
-              )}
-              onPress={() => undefined}
-            />
-          )}
-          {fiscalCode && (
+      <ScrollView
+        style={IOStyles.horizontalContentPadding}
+        testID={"FciDataSharingScreenListTestID"}
+      >
+        <H2>{I18n.t("features.fci.shareDataScreen.title")}</H2>
+        <VSpacer size={16} />
+        <Body>{I18n.t("features.fci.shareDataScreen.content")}</Body>
+        {name && (
+          <ListItemNav
+            testID="FciDataSharingScreenNameTestID"
+            value={I18n.t("features.fci.shareDataScreen.name")}
+            description={name}
+            accessibilityLabel={I18n.t("features.fci.shareDataScreen.name")}
+            onPress={() => undefined}
+            hideChevron
+          />
+        )}
+        {familyName && (
+          <ListItemNav
+            testID="FciDataSharingScreenFamilyNameTestID"
+            value={I18n.t("features.fci.shareDataScreen.familyName")}
+            description={familyName}
+            onPress={() => undefined}
+            hideChevron
+            accessibilityLabel={I18n.t(
+              "features.fci.shareDataScreen.familyName"
+            )}
+          />
+        )}
+        {birthDate && (
+          <ListItemNav
+            testID="FciDataSharingScreenBirthDateTestID"
+            value={I18n.t("features.fci.shareDataScreen.birthDate")}
+            description={formatFiscalCodeBirthdayAsShortFormat(birthDate)}
+            hideChevron
+            accessibilityLabel={I18n.t(
+              "features.fci.shareDataScreen.birthDate"
+            )}
+            onPress={() => undefined}
+          />
+        )}
+        {fiscalCode && (
+          <ListItemNav
+            testID="FciDataSharingScreenFiscalCodeTestID"
+            value={I18n.t("profile.fiscalCode.fiscalCode")}
+            description={fiscalCode}
+            hideChevron
+            accessibilityLabel={I18n.t("profile.fiscalCode.fiscalCode")}
+            onPress={() => undefined}
+          />
+        )}
+        {O.isSome(email) && (
+          <>
             <ListItemNav
-              testID="FciDataSharingScreenFiscalCodeTestID"
-              value={I18n.t("profile.fiscalCode.fiscalCode")}
-              description={fiscalCode}
+              testID="FciDataSharingScreenEmailTestID"
+              value={I18n.t("profile.data.list.email")}
+              description={email.value}
               hideChevron
-              accessibilityLabel={I18n.t("profile.fiscalCode.fiscalCode")}
+              accessibilityLabel={I18n.t("profile.data.list.email")}
               onPress={() => undefined}
             />
-          )}
-          {O.isSome(email) && (
-            <>
-              <ListItemNav
-                testID="FciDataSharingScreenEmailTestID"
-                value={I18n.t("profile.data.list.email")}
-                description={email.value}
-                hideChevron
-                accessibilityLabel={I18n.t("profile.data.list.email")}
-                onPress={() => undefined}
-              />
-              <AlertTextComponent />
-            </>
-          )}
-        </ScrollView>
-        <View testID="FciDataSharingScreenFooterTestID">
-          <FooterWithButtons
-            type={"TwoButtonsInlineThird"}
-            secondary={{ type: "Solid", buttonProps: confirmButtonProps }}
-            primary={{ type: "Outline", buttonProps: cancelButtonProps }}
-          />
-        </View>
-      </SafeAreaView>
+            <AlertTextComponent />
+          </>
+        )}
+      </ScrollView>
+      <View testID="FciDataSharingScreenFooterTestID">
+        <FooterWithButtons
+          type={"TwoButtonsInlineThird"}
+          secondary={{ type: "Solid", buttonProps: confirmButtonProps }}
+          primary={{ type: "Outline", buttonProps: cancelButtonProps }}
+        />
+      </View>
 
       {fciAbortSignature}
     </>

diff --git a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx
@@ -1,7 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
 import * as S from "fp-ts/lib/string";
-import { SafeAreaView } from "react-native-safe-area-context";
 import I18n from "../../../../i18n";
 import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
@@ -18,12 +16,6 @@ export type FciDocumentPreviewScreenNavigationParams = Readonly<{
   enableAnnotationRendering?: boolean;
 }>;
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-
 export const FciDocumentPreviewScreen = (
   props: IOStackNavigationRouteProps<FciParamsList, "FCI_DOC_PREVIEW">
 ): React.ReactElement => {
@@ -54,19 +46,13 @@ export const FciDocumentPreviewScreen = (
 
   return (
     <>
-      <SafeAreaView
-        style={styles.container}
-        testID={"FciDocumentPreviewScreenTestID"}
-        edges={["bottom", "left", "right"]}
-      >
-        {S.isEmpty(documentUrl) === false && (
-          <DocumentViewer
-            enableAnnotationRendering={enableAnnotationRendering}
-            documentUrl={documentUrl}
-            onError={() => setIsError(true)}
-          />
-        )}
-      </SafeAreaView>
+      {S.isEmpty(documentUrl) === false && (
+        <DocumentViewer
+          enableAnnotationRendering={enableAnnotationRendering}
+          documentUrl={documentUrl}
+          onError={() => setIsError(true)}
+        />
+      )}
     </>
   );
 };
diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx
@@ -4,7 +4,7 @@ import { pipe } from "fp-ts/lib/function";
 import * as RA from "fp-ts/lib/ReadonlyArray";
 import * as O from "fp-ts/lib/Option";
 import * as S from "fp-ts/lib/string";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { useSelector } from "react-redux";
 import {
   RouteProp,
@@ -20,7 +20,6 @@ import {
   IOColors,
   IOStyles
 } from "@pagopa/io-app-design-system";
-import { SafeAreaView } from "react-native-safe-area-context";
 import I18n from "../../../../i18n";
 import DocumentsNavigationBar from "../../components/DocumentsNavigationBar";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
@@ -244,11 +243,7 @@ const FciDocumentsScreen = () => {
         disabled={false}
         testID={"FciDocumentsNavBarTestID"}
       />
-      <SafeAreaView
-        style={IOStyles.flex}
-        testID={"FciDocumentsScreenTestID"}
-        edges={["bottom", "left", "right"]}
-      >
+      <View style={IOStyles.flex} testID={"FciDocumentsScreenTestID"}>
         {documents.length > 0 && (
           <>
             {renderPager()}
@@ -259,7 +254,7 @@ const FciDocumentsScreen = () => {
             />
           </>
         )}
-      </SafeAreaView>
+      </View>
       {fciAbortSignature}
       {fciNoSignatureFields}
     </>

diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx
@@ -11,7 +11,6 @@ import {
   IOStyles,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import { SafeAreaView } from "react-native-safe-area-context";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import {
@@ -172,11 +171,7 @@ const FciQtspClausesScreen = () => {
 
   return (
     <>
-      <SafeAreaView
-        style={IOStyles.flex}
-        edges={["bottom", "left", "right"]}
-        testID={"FciQtspClausesTestID"}
-      >
+      <View style={IOStyles.flex} testID={"FciQtspClausesTestID"}>
         <ScrollView style={IOStyles.horizontalContentPadding}>
           <H2>{I18n.t("features.fci.qtspTos.title")}</H2>
           <VSpacer size={16} />
@@ -188,7 +183,7 @@ const FciQtspClausesScreen = () => {
           primary={{ type: "Outline", buttonProps: cancelButtonProps }}
           secondary={{ type: "Solid", buttonProps: continueButtonProps }}
         />
-      </SafeAreaView>
+      </View>
       {fciAbortSignature}
       {fciCheckService}
     </>