From dd16b6b1756fa6d282c38279cc763ae49642e6cc Mon Sep 17 00:00:00 2001 From: LazyAfternoons Date: Fri, 23 Feb 2024 14:53:25 +0100 Subject: [PATCH 1/2] fix(Firma con IO): [SFEQS-2124] Wrong margins in FCI flow (#5543) ## Short description This PR fixes margins in FCI flow screens. | Before | After | |--------|--------| | | | | | | | | | ## List of changes proposed in this pull request - 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. ## How to test 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 | 19 +-- .../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(+), 172 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 4f293959d2e..8c8dd9d0c0b 100644 --- a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx +++ b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx @@ -1,9 +1,11 @@ import * as React from "react"; import { useRoute } from "@react-navigation/native"; import { + BlockButtons, ButtonSolidProps, - FooterWithButtons + IOVisualCostants } from "@pagopa/io-app-design-system"; +import { View } from "react-native"; import I18n from "../../../i18n"; import { fciEndRequest } from "../store/actions"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; @@ -46,14 +48,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")} + /> + + ); }; From 106c7df8e95e2c9d7c7dd982f75d6103b0d4a768 Mon Sep 17 00:00:00 2001 From: LazyAfternoons Date: Fri, 23 Feb 2024 15:17:20 +0100 Subject: [PATCH 2/2] fix(Firma con IO): [SFEQS-2123] Loading spinner not following DS toggle (#5545) ## Short description This PR addresses an issue caused by a wrong component, which results in the FCI loading spinner failing to change color appropriately to the toggle of the new design system. ## List of changes proposed in this pull request - Replace `LoadingSpinner` with `LoadingIndicator`, a wrapper around `LoadingSpinner` which checks the design system flag and applies the color accordingly. ## How to test Check for any loading screen. This can be easily forced by replacing this section in the `FciRouterScreen` and then by opening a new FCI message: ```javascript return pot.fold( fciSignatureRequest, () => , () => , () => , () => , b => , () => , () => , () => renderErrorComponent() ); ``` --------- Co-authored-by: Mario Perrotta --- .../fci/components/LoadingComponent.tsx | 11 ++--- .../LoadingComponent.test.tsx.snap | 42 ++++++++++--------- 2 files changed, 25 insertions(+), 28 deletions(-) diff --git a/ts/features/fci/components/LoadingComponent.tsx b/ts/features/fci/components/LoadingComponent.tsx index 374adbd3e15..373b8d29064 100644 --- a/ts/features/fci/components/LoadingComponent.tsx +++ b/ts/features/fci/components/LoadingComponent.tsx @@ -1,12 +1,7 @@ import * as React from "react"; import { SafeAreaView, StyleSheet } from "react-native"; -import { - Body, - H3, - LoadingSpinner, - VSpacer, - WithTestID -} from "@pagopa/io-app-design-system"; +import { Body, H3, VSpacer, WithTestID } from "@pagopa/io-app-design-system"; +import { LoadingIndicator } from "../../../components/ui/LoadingIndicator"; const styles = StyleSheet.create({ main: { @@ -35,7 +30,7 @@ const LoadingComponent = (props: Props) => { return ( - +

{captionTitle} 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 152574d8eba..372ac7e0104 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap @@ -12,16 +12,18 @@ exports[`Test LoadingComponent component should render a LoadingComponent compon } >