From c00a4686e90b71c740797c50f1d32d1517393e3c Mon Sep 17 00:00:00 2001 From: LazyAfternoons Date: Fri, 23 Feb 2024 14:53:25 +0100 Subject: [PATCH] fix(Firma con IO): [SFEQS-2124] Wrong margins in FCI flow (#5543) This PR fixes margins in FCI flow screens. | Before | After | |--------|--------| | | | | | | | | | - 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 --- .../fci/components/DocumentWithSignature.tsx | 2 +- ts/features/fci/components/ErrorComponent.tsx | 2 +- .../fci/components/LoadingComponent.tsx | 8 +- .../LoadingComponent.test.tsx.snap | 6 +- .../fci/hooks/useFciAbortSignatureFlow.tsx | 20 +-- .../screens/valid/FciDataSharingScreen.tsx | 139 +++++++++--------- .../valid/FciDocumentPreviewScreen.tsx | 28 +--- .../fci/screens/valid/FciDocumentsScreen.tsx | 11 +- .../screens/valid/FciQtspClausesScreen.tsx | 9 +- .../valid/FciSignatureFieldsScreen.tsx | 31 ++-- .../valid/FciSignatureRequestsScreen.tsx | 13 +- .../fci/screens/valid/FciThankyouScreen.tsx | 30 ++-- 12 files changed, 126 insertions(+), 173 deletions(-) diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx index 5214362d136..adbdf728dad 100644 --- a/ts/features/fci/components/DocumentWithSignature.tsx +++ b/ts/features/fci/components/DocumentWithSignature.tsx @@ -187,7 +187,7 @@ const DocumentWithSignature = (props: Props) => { diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index 15493ed117b..b74d06224a7 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -144,9 +144,9 @@ const ErrorComponent = (props: Props) => { return ( } diff --git a/ts/features/fci/components/LoadingComponent.tsx b/ts/features/fci/components/LoadingComponent.tsx index b3958d6763a..374adbd3e15 100644 --- a/ts/features/fci/components/LoadingComponent.tsx +++ b/ts/features/fci/components/LoadingComponent.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { StyleSheet, View } from "react-native"; +import { SafeAreaView, StyleSheet } from "react-native"; import { Body, H3, @@ -7,11 +7,9 @@ import { 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 ( - +

@@ -49,7 +47,7 @@ const LoadingComponent = (props: Props) => { > {captionSubtitle} - + ); }; diff --git a/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap index 9658bf9934a..152574d8eba 100644 --- 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`] = ` - @@ -241,5 +241,5 @@ exports[`Test LoadingComponent component should render a LoadingComponent compon > Please wait... - + `; diff --git a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx index 001bbeedd8f..39138093c9d 100644 --- 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: ( - + + + ) }); diff --git a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx index 1dc46eed03d..eca0a5adcfc 100644 --- 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 ( <> - - -

{I18n.t("features.fci.shareDataScreen.title")}

- - {I18n.t("features.fci.shareDataScreen.content")} - {name && ( - undefined} - hideChevron - /> - )} - {familyName && ( - undefined} - hideChevron - accessibilityLabel={I18n.t( - "features.fci.shareDataScreen.familyName" - )} - /> - )} - {birthDate && ( - undefined} - /> - )} - {fiscalCode && ( + +

{I18n.t("features.fci.shareDataScreen.title")}

+ + {I18n.t("features.fci.shareDataScreen.content")} + {name && ( + undefined} + hideChevron + /> + )} + {familyName && ( + undefined} + hideChevron + accessibilityLabel={I18n.t( + "features.fci.shareDataScreen.familyName" + )} + /> + )} + {birthDate && ( + undefined} + /> + )} + {fiscalCode && ( + undefined} + /> + )} + {O.isSome(email) && ( + <> undefined} /> - )} - {O.isSome(email) && ( - <> - undefined} - /> - - - )} - - - - - + + + )} + + + + {fciAbortSignature} diff --git a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx index caa09f84eb5..8df6dfa9fa7 100644 --- 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 ): React.ReactElement => { @@ -54,19 +46,13 @@ export const FciDocumentPreviewScreen = ( return ( <> - - {S.isEmpty(documentUrl) === false && ( - setIsError(true)} - /> - )} - + {S.isEmpty(documentUrl) === false && ( + setIsError(true)} + /> + )} ); }; diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx index 45c89ddfee6..a060d6ecd65 100644 --- 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"} /> - + {documents.length > 0 && ( <> {renderPager()} @@ -259,7 +254,7 @@ const FciDocumentsScreen = () => { /> )} - + {fciAbortSignature} {fciNoSignatureFields} diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx index c1d1cc5dfc1..724bea27977 100644 --- 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 ( <> - +

{I18n.t("features.fci.qtspTos.title")}

@@ -188,7 +183,7 @@ const FciQtspClausesScreen = () => { primary={{ type: "Outline", buttonProps: cancelButtonProps }} secondary={{ type: "Solid", buttonProps: continueButtonProps }} /> - + {fciAbortSignature} {fciCheckService} diff --git a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx index 39c7a3b66ed..97b9646c356 100644 --- a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx @@ -15,7 +15,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 { useIODispatch } from "../../../../store/hooks"; @@ -272,25 +271,19 @@ const FciSignatureFieldsScreen = () => { } return ( - <> - - -

{I18n.t("features.fci.signatureFields.title")}

- - {renderSignatureFields()} - - - + + +

{I18n.t("features.fci.signatureFields.title")}

+ + {renderSignatureFields()} + + {fciAbortSignature} - + ); }; export default FciSignatureFieldsScreen; diff --git a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx index a01c98cc392..e05434beaf7 100644 --- a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { SectionList, ScrollView } from "react-native"; import { H2, IOStyles } from "@pagopa/io-app-design-system"; -import { SafeAreaView } from "react-native-safe-area-context"; import SignatureRequestItem from "../../components/SignatureRequestItem"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciSignaturesListSelector } from "../../store/reducers/fciSignaturesList"; @@ -89,14 +88,10 @@ const FciSignatureRequestsScreen = () => { return ( - <> - - -

{I18n.t("features.fci.requests.title")}

- {renderSignatureRequests()} - - - + +

{I18n.t("features.fci.requests.title")}

+ {renderSignatureRequests()} + ); }; diff --git a/ts/features/fci/screens/valid/FciThankyouScreen.tsx b/ts/features/fci/screens/valid/FciThankyouScreen.tsx index fb5b1365bfb..35c6a8f7b2e 100644 --- a/ts/features/fci/screens/valid/FciThankyouScreen.tsx +++ b/ts/features/fci/screens/valid/FciThankyouScreen.tsx @@ -6,7 +6,7 @@ import { IOStyles, Pictogram } from "@pagopa/io-app-design-system"; -import { SafeAreaView } from "react-native-safe-area-context"; +import { View } from "react-native"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciSignatureSelector } from "../../store/reducers/fciSignature"; import GenericErrorComponent from "../../components/GenericErrorComponent"; @@ -49,23 +49,17 @@ const FciThankyouScreen = () => { testID: "FciTypCloseButton" }; return ( - <> - - } - title={I18n.t("features.fci.thankYouPage.title")} - body={I18n.t("features.fci.thankYouPage.content")} - /> - - - + + } + title={I18n.t("features.fci.thankYouPage.title")} + body={I18n.t("features.fci.thankYouPage.content")} + /> + + ); };