From ef8743a2524414fb73415f7976b0102dd41bacdb Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Tue, 2 Jan 2024 12:52:17 +0100 Subject: [PATCH 01/33] chore: update --- .../fci/screens/valid/FciDocumentsScreen.tsx | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx index a79476eeb12..69c85314583 100644 --- a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx +++ b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx @@ -13,10 +13,15 @@ import { useNavigation, useRoute } from "@react-navigation/native"; -import { IconButton, IOColors } from "@pagopa/io-app-design-system"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; +import { + BlockButtonProps, + ButtonSolidProps, + FooterWithButtons, + IconButton, + IOColors, + IOStyles +} from "@pagopa/io-app-design-system"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; -import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; import I18n from "../../../../i18n"; import DocumentsNavigationBar from "../../components/DocumentsNavigationBar"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; @@ -128,19 +133,28 @@ const FciDocumentsScreen = () => { const onCancelPress = () => present(); - const cancelButtonProps = { - block: true, - light: false, - bordered: true, + const cancelButtonProps: ButtonSolidProps = { onPress: onCancelPress, - title: I18n.t("features.fci.documents.footer.cancel") + label: I18n.t("features.fci.documents.footer.cancel"), + accessibilityLabel: I18n.t("features.fci.documents.footer.cancel") }; - const continueButtonProps = { - block: true, - primary: true, + const continueButtonProps: ButtonSolidProps = { onPress: onContinuePress, - title: I18n.t("features.fci.documents.footer.continue") + label: I18n.t("features.fci.documents.footer.continue"), + accessibilityLabel: I18n.t("features.fci.documents.footer.continue") + }; + + const keepReadingButtonProps: ButtonSolidProps = { + onPress: () => pointToPage(totalPages), + label: I18n.t("global.buttons.continue"), + accessibilityLabel: I18n.t("global.buttons.continue") + }; + + const cont: BlockButtonProps = { + type: currentPage < totalPages ? "Outline" : "Solid", + buttonProps: + currentPage < totalPages ? keepReadingButtonProps : continueButtonProps }; const pointToPage = (page: number) => @@ -150,14 +164,6 @@ const FciDocumentsScreen = () => { O.map(_ => _.setPage(page)) ); - const keepReadingButtonProps = { - block: true, - light: true, - bordered: true, - onPress: () => pointToPage(totalPages), - title: I18n.t("global.buttons.continue") - }; - const renderPager = () => ( { /> ); - const renderFooterButtons = () => - currentPage < totalPages ? keepReadingButtonProps : continueButtonProps; - return ( { <> {renderPager()} )} From 57eb58eaed329cfcc656d90eb3695a0d3aa2ba5a Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Tue, 2 Jan 2024 12:52:41 +0100 Subject: [PATCH 02/33] chore: update --- ts/features/fci/components/DocumentsNavigationBar.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ts/features/fci/components/DocumentsNavigationBar.tsx b/ts/features/fci/components/DocumentsNavigationBar.tsx index 66c8bd7150e..1ff45215c58 100644 --- a/ts/features/fci/components/DocumentsNavigationBar.tsx +++ b/ts/features/fci/components/DocumentsNavigationBar.tsx @@ -1,10 +1,14 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; -import { IOColors, Icon, HSpacer } from "@pagopa/io-app-design-system"; +import { + IOColors, + Icon, + HSpacer, + H4, + IOStyles +} from "@pagopa/io-app-design-system"; import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity"; -import { H4 } from "../../../components/core/typography/H4"; import { WithTestID } from "../../../types/WithTestID"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; const styles = StyleSheet.create({ container: { From bfeffcbf870ba8e6cbba08dc217887260b14b3be Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 15:58:06 +0100 Subject: [PATCH 03/33] chore: update documents navigation bar --- .../fci/components/DocumentsNavigationBar.tsx | 65 ++-- .../__tests__/DocumentsNavigationBar.test.tsx | 11 +- .../DocumentsNavigationBar.test.tsx.snap | 348 +++++++++--------- 3 files changed, 202 insertions(+), 222 deletions(-) diff --git a/ts/features/fci/components/DocumentsNavigationBar.tsx b/ts/features/fci/components/DocumentsNavigationBar.tsx index 1ff45215c58..cf7bdcb7c92 100644 --- a/ts/features/fci/components/DocumentsNavigationBar.tsx +++ b/ts/features/fci/components/DocumentsNavigationBar.tsx @@ -2,13 +2,12 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; import { IOColors, - Icon, HSpacer, - H4, - IOStyles + H6, + IOStyles, + IconButton, + WithTestID } from "@pagopa/io-app-design-system"; -import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity"; -import { WithTestID } from "../../../types/WithTestID"; const styles = StyleSheet.create({ container: { @@ -17,13 +16,7 @@ const styles = StyleSheet.create({ borderColor: IOColors.bluegreyLight, alignItems: "center", paddingTop: 12, - paddingBottom: 12 - }, - button: { - paddingLeft: 8, - paddingRight: 8, - paddingBottom: 0, - paddingTop: 0 + paddingBottom: 14 }, shadow: { // iOS @@ -47,8 +40,8 @@ export type IndicatorPositionEnum = "left" | "right"; type Props = WithTestID<{ titleRight: string; titleLeft: string; - iconRightColor?: IOColors; - iconLeftColor?: IOColors; + iconRightDisabled?: boolean; + iconLeftDisabled?: boolean; disabled?: boolean; indicatorPosition: IndicatorPositionEnum; onPrevious: () => void; @@ -56,41 +49,29 @@ type Props = WithTestID<{ }>; const renderNavigationComponent = ( - { onPrevious, onNext, disabled, iconLeftColor, iconRightColor }: Props, + { onPrevious, onNext, iconLeftDisabled, iconRightDisabled }: Props, title: string ) => ( <> {/* button left */} - - - -

{title}

+ icon="chevronLeft" + iconSize={24} + accessibilityLabel="previous" + /> +
{title}
{/* button right */} - - - + icon="chevronRight" + iconSize={24} + accessibilityLabel="next" + /> ); @@ -105,13 +86,13 @@ const DocumentsNavigationBar = (props: Props) => ( <> {renderNavigationComponent(props, props.titleLeft)} -

{props.titleRight}

+
{props.titleRight}
)} {props.indicatorPosition === "right" && ( <> -

{props.titleLeft}

+
{props.titleLeft}
{renderNavigationComponent(props, props.titleRight)} diff --git a/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx b/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx index 5aaad148a56..7f591ee7afa 100644 --- a/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx +++ b/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx @@ -1,6 +1,5 @@ import * as React from "react"; import { fireEvent, render } from "@testing-library/react-native"; -import type { IOColors } from "@pagopa/io-app-design-system"; import DocumentsNavigationBar, { IndicatorPositionEnum } from "../DocumentsNavigationBar"; @@ -8,8 +7,8 @@ import DocumentsNavigationBar, { type Props = { titleRight: string; titleLeft: string; - iconRightColor?: IOColors; - iconLeftColor?: IOColors; + iconRightDisabled?: boolean; + iconLeftDisabled?: boolean; disabled?: boolean; indicatorPosition: IndicatorPositionEnum; onPrevious: () => void; @@ -21,8 +20,6 @@ describe("Test DocumentsNavigationBar component", () => { const props: Props = { titleRight: "Pagina 1 di 2", titleLeft: "Documento 1 di 2", - iconRightColor: "blue", - iconLeftColor: "blue", indicatorPosition: "left", onPrevious: jest.fn(), onNext: jest.fn() @@ -100,7 +97,7 @@ describe("Test DocumentsNavigationBar component", () => { const props: Props = { titleRight: "", titleLeft: "", - disabled: true, + iconRightDisabled: true, indicatorPosition: "left", onPrevious: jest.fn(), onNext: onPress @@ -121,7 +118,7 @@ describe("Test DocumentsNavigationBar component", () => { const props: Props = { titleRight: "", titleLeft: "", - disabled: true, + iconLeftDisabled: true, indicatorPosition: "left", onPrevious: jest.fn(), onNext: onPress diff --git a/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap index abecc0e98b7..c4139034efa 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap @@ -22,255 +22,255 @@ exports[`Test DocumentsNavigationBar component should render a DocumentsNavigati "backgroundColor": "#FFFFFF", "borderColor": "#CCD4DC", "flexDirection": "row", - "paddingBottom": 12, + "paddingBottom": 14, "paddingTop": 12, }, ] } > - - - - - + } + bbHeight={24} + bbWidth={24} + color={4278219750} + focusable={false} + height={24} + importantForAccessibility="no-hide-descendants" + meetOrSlice={0} + minX={0} + minY={0} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#0073E6", + }, + Object { + "flex": 0, + "height": 24, + "width": 24, + }, + ] + } + tintColor={4278219750} + vbHeight={24} + vbWidth={24} + width={24} + > + + + + + Documento 1 di 2 - - - - - + } + bbHeight={24} + bbWidth={24} + color={4278219750} + focusable={false} + height={24} + importantForAccessibility="no-hide-descendants" + meetOrSlice={0} + minX={0} + minY={0} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#0073E6", + }, + Object { + "flex": 0, + "height": 24, + "width": 24, + }, + ] + } + tintColor={4278219750} + vbHeight={24} + vbWidth={24} + width={24} + > + + + + + Pagina 1 di 2 From a01ffe715dcf99c5df5c52abc3eca1467fe0c7c7 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:04:04 +0100 Subject: [PATCH 04/33] chore: add loading component --- .../fci/components/LoadingComponent.tsx | 56 ++++ .../__tests__/LoadingComponent.test.tsx | 47 ++++ .../LoadingComponent.test.tsx.snap | 245 ++++++++++++++++++ 3 files changed, 348 insertions(+) create mode 100644 ts/features/fci/components/LoadingComponent.tsx create mode 100644 ts/features/fci/components/__tests__/LoadingComponent.test.tsx create mode 100644 ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap diff --git a/ts/features/fci/components/LoadingComponent.tsx b/ts/features/fci/components/LoadingComponent.tsx new file mode 100644 index 00000000000..b3958d6763a --- /dev/null +++ b/ts/features/fci/components/LoadingComponent.tsx @@ -0,0 +1,56 @@ +import * as React from "react"; +import { StyleSheet, View } 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" + }, + textAlignCenter: { + textAlign: "center" + } +}); + +type Props = WithTestID< + Readonly<{ + captionTitle?: string; + captionSubtitle?: string; + }> +>; + +/** + * A Component to display an animated spinner. + * It can be used to display a loading spinner with optionally a caption title and subtitle. + */ +const LoadingComponent = (props: Props) => { + const { captionTitle, captionSubtitle } = props; + + return ( + + + +

+ {captionTitle} +

+ + + {captionSubtitle} + + + ); +}; + +export default LoadingComponent; diff --git a/ts/features/fci/components/__tests__/LoadingComponent.test.tsx b/ts/features/fci/components/__tests__/LoadingComponent.test.tsx new file mode 100644 index 00000000000..117b6c6fba9 --- /dev/null +++ b/ts/features/fci/components/__tests__/LoadingComponent.test.tsx @@ -0,0 +1,47 @@ +import * as React from "react"; +import { render } from "@testing-library/react-native"; +import LoadingComponent from "../LoadingComponent"; + +type Props = { + captionTitle?: string; + captionSubtitle?: string; +}; + +describe("Test LoadingComponent component", () => { + it("should render a LoadingComponent component with props correctly", () => { + const props = { + captionTitle: "Loading", + captionSubtitle: "Please wait..." + }; + const component = renderComponent({ ...props }); + expect(component).toBeTruthy(); + expect(component).toMatchSnapshot(); + }); + it("should render a LoadingComponent component with the right caption title", () => { + const props = { + captionTitle: "Loading", + captionSubtitle: "Please wait..." + }; + const component = renderComponent({ ...props }); + expect(component).toBeTruthy(); + expect( + component.queryByTestId("LoadingSpinnerCaptionTitleID") + ).toBeTruthy(); + expect(component.queryByText("Loading")).toBeTruthy(); + }); + it("should render a LoadingComponent component with the right caption subTitle", () => { + const props = { + captionTitle: "Loading", + captionSubtitle: "Please wait..." + }; + const component = renderComponent({ ...props }); + expect(component).toBeTruthy(); + expect( + component.queryByTestId("LoadingSpinnerCaptionSubTitleID") + ).toBeTruthy(); + expect(component.queryByText("Please wait...")).toBeTruthy(); + }); +}); + +const renderComponent = (props: Props) => + render(); diff --git a/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap new file mode 100644 index 00000000000..9658bf9934a --- /dev/null +++ b/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap @@ -0,0 +1,245 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test LoadingComponent component should render a LoadingComponent component with props correctly 1`] = ` + + + + + + + + + + + + + + + + + + + + + Loading + + + + Please wait... + + +`; From bba48af799bb23ffd143fd3853879afb5e2570fb Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:05:09 +0100 Subject: [PATCH 05/33] chore: update router screen --- ts/features/fci/screens/FciRouterScreen.tsx | 23 ++++++++------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/ts/features/fci/screens/FciRouterScreen.tsx b/ts/features/fci/screens/FciRouterScreen.tsx index 7ce71d0f8f3..5de3fe04fad 100644 --- a/ts/features/fci/screens/FciRouterScreen.tsx +++ b/ts/features/fci/screens/FciRouterScreen.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { constNull, pipe } from "fp-ts/lib/function"; +import { pipe } from "fp-ts/lib/function"; import * as pot from "@pagopa/ts-commons/lib/pot"; import * as E from "fp-ts/lib/Either"; import * as O from "fp-ts/lib/Option"; @@ -11,7 +11,6 @@ import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { FciParamsList } from "../navigation/params"; import { fciEndRequest, fciSignatureRequestFromId } from "../store/actions"; import { fciSignatureRequestSelector } from "../store/reducers/fciSignatureRequest"; -import { LoadingErrorComponent } from "../../bonus/bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent"; import SuccessComponent from "../components/SuccessComponent"; import GenericErrorComponent from "../components/GenericErrorComponent"; import { withValidatedEmail } from "../../../components/helpers/withValidatedEmail"; @@ -24,6 +23,7 @@ import { } from "../../../utils/errors"; import { ProblemJson } from "../../../../definitions/fci/ProblemJson"; import ErrorComponent from "../components/ErrorComponent"; +import LoadingComponent from "../components/LoadingComponent"; export type FciRouterScreenNavigationParams = Readonly<{ signatureRequestId: SignatureRequestDetailView["id"]; @@ -57,13 +57,8 @@ const FciSignatureScreen = ( ); } - const LoadingComponent = () => ( - + const LoadingView = () => ( + ); const GenericError = (status?: ProblemJson["status"]) => { @@ -110,13 +105,13 @@ const FciSignatureScreen = ( return pot.fold( fciSignatureRequest, - () => , - () => , - () => , + () => , + () => , + () => , renderErrorComponent, b => , - () => , - () => , + () => , + () => , () => renderErrorComponent() ); }; From d5395ebfc9ff9b6dd47fdf6b3b891d6caa9e9acf Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:06:03 +0100 Subject: [PATCH 06/33] chore: update documents screen --- ts/features/fci/screens/valid/FciDocumentsScreen.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx index 69c85314583..9cf021a37b0 100644 --- a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx +++ b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx @@ -151,7 +151,7 @@ const FciDocumentsScreen = () => { accessibilityLabel: I18n.t("global.buttons.continue") }; - const cont: BlockButtonProps = { + const secondaryButtonProps: BlockButtonProps = { type: currentPage < totalPages ? "Outline" : "Solid", buttonProps: currentPage < totalPages ? keepReadingButtonProps : continueButtonProps @@ -238,8 +238,8 @@ const FciDocumentsScreen = () => { currentPage, totalPages })} - iconLeftColor={currentPage === 1 ? "bluegreyLight" : "blue"} - iconRightColor={currentPage === totalPages ? "bluegreyLight" : "blue"} + iconLeftDisabled={currentPage === 1} + iconRightDisabled={currentPage === totalPages} onPrevious={onPrevious} onNext={onNext} disabled={false} @@ -251,7 +251,7 @@ const FciDocumentsScreen = () => { {renderPager()} From 8df1f63ef7dcf9c2c078654e4f4ef58dad4fd6e7 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:07:17 +0100 Subject: [PATCH 07/33] chore: update signature field item --- .../fci/components/SignatureFieldItem.tsx | 52 +++--- .../__tests__/SignatureFieldItem.test.tsx | 10 +- .../SignatureFieldItem.test.tsx.snap | 152 +++++++++++------- 3 files changed, 117 insertions(+), 97 deletions(-) diff --git a/ts/features/fci/components/SignatureFieldItem.tsx b/ts/features/fci/components/SignatureFieldItem.tsx index c7e8a1185db..64182762cb4 100644 --- a/ts/features/fci/components/SignatureFieldItem.tsx +++ b/ts/features/fci/components/SignatureFieldItem.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; -import { IOColors, Icon } from "@pagopa/io-app-design-system"; -import { H4 } from "../../../components/core/typography/H4"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; -import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity"; -import { Link } from "../../../components/core/typography/Link"; +import { + H6, + IOColors, + IOStyles, + IconButton, + LabelLink +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; type Props = { @@ -41,40 +43,26 @@ const SignatureFieldItem = (props: Props) => { return ( -

+

{props.title} -
- + { + onChange(!checked); + }} accessibilityLabel={ checked ? I18n.t("features.fci.signatureFields.accessibility.selected") : I18n.t("features.fci.signatureFields.accessibility.unselected") } - accessibilityState={{ selected: checked }} - testID={"SignatureFieldItemButtonTestID"} - onPress={() => { - onChange(!checked); - }} - disabled={props.disabled} - style={{ alignSelf: "center" }} - > - - + icon={checked ? "legCheckOn" : "legCheckOff"} + iconSize={24} + /> - { onPress={props.onPressDetail} > {I18n.t("features.fci.signatureFields.showOnDocument")} - + ); diff --git a/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx b/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx index 90aaeeaac08..b849dad376a 100644 --- a/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx +++ b/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx @@ -56,7 +56,7 @@ describe("Test SignatureFieldItem component", () => { expect( component.getByTestId("SignatureFieldItemCheckboxTestID") ).toBeTruthy(); - expect(component.queryAllByText("io-checkbox-on")).toBeTruthy(); + expect(component.queryAllByText("legCheckOn")).toBeTruthy(); }); it("should render a SignatureFieldItem component with checkbox clickable", () => { const onPress = jest.fn(); @@ -68,13 +68,15 @@ describe("Test SignatureFieldItem component", () => { }; const component = renderComponent({ ...props }); expect(component).toBeTruthy(); - const rightButton = component.getByTestId("SignatureFieldItemButtonTestID"); + const rightButton = component.getByTestId( + "SignatureFieldItemCheckboxTestID" + ); expect(rightButton).toBeTruthy(); expect(rightButton).toBeEnabled(); fireEvent.press(rightButton); - expect(component.queryAllByText("io-checkbox-on")).toBeTruthy(); + expect(component.queryAllByText("legCheckOn")).toBeTruthy(); fireEvent.press(rightButton); - expect(component.queryAllByText("io-checkbox-off")).toBeTruthy(); + expect(component.queryAllByText("legCheckOff")).toBeTruthy(); expect(onPress).toHaveBeenCalledTimes(2); }); it("should render a SignatureFieldItem component with right text for details link", () => { diff --git a/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap index 1312c2f0e10..acd65d004d6 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap @@ -21,12 +21,15 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co } > Clause title 1 - - - - - + } + bbHeight={24} + bbWidth={24} + color={4278219750} + focusable={false} + height={24} + importantForAccessibility="no-hide-descendants" + meetOrSlice={0} + minX={0} + minY={0} + style={ + Array [ + Object { + "backgroundColor": "transparent", + "borderWidth": 0, + }, + Object { + "color": "#0073E6", + }, + Object { + "flex": 0, + "height": 24, + "width": 24, + }, + ] + } + tintColor={4278219750} + vbHeight={22} + vbWidth={22} + width={24} + > + + + + + Date: Thu, 4 Jan 2024 16:08:10 +0100 Subject: [PATCH 08/33] chore: update document signature preview --- .../fci/components/DocumentWithSignature.tsx | 45 +++++++++---------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx index 4560d707252..7a63913e686 100644 --- a/ts/features/fci/components/DocumentWithSignature.tsx +++ b/ts/features/fci/components/DocumentWithSignature.tsx @@ -5,9 +5,14 @@ import { constNull, pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { SafeAreaView, StyleSheet } from "react-native"; -import { IconButton, IOColors } from "@pagopa/io-app-design-system"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; -import FooterWithButtons from "../../../components/ui/FooterWithButtons"; +import { + ButtonSolidProps, + FooterWithButtons, + H5, + IconButton, + IOColors, + IOStyles +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { ExistingSignatureFieldAttrs } from "../../../../definitions/fci/ExistingSignatureFieldAttrs"; import { SignatureFieldToBeCreatedAttrs } from "../../../../definitions/fci/SignatureFieldToBeCreatedAttrs"; @@ -15,12 +20,11 @@ import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignat import AppHeader from "../../../components/ui/AppHeader"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { WithTestID } from "../../../types/WithTestID"; -import { H5 } from "../../../components/core/typography/H5"; import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender"; import { fciDocumentSignatureFields } from "../store/actions"; import { fciSignatureFieldDrawingSelector } from "../store/reducers/fciSignatureFieldDrawing"; -import LoadingSpinnerOverlay from "../../../components/LoadingSpinnerOverlay"; import DocumentsNavigationBar from "./DocumentsNavigationBar"; +import LoadingComponent from "./LoadingComponent"; export type SignatureFieldAttrType = | ExistingSignatureFieldAttrs @@ -49,11 +53,12 @@ const DocumentWithSignature = (props: Props) => { const { attrs, currentDoc } = props; const dispatch = useIODispatch(); const onContinuePress = () => props.onClose(); - const continueButtonProps = { - block: true, - primary: true, + const continueButtonProps: ButtonSolidProps = { onPress: onContinuePress, - title: I18n.t("features.fci.documents.footer.backToSignFieldsList") + label: I18n.t("features.fci.documents.footer.backToSignFieldsList"), + accessibilityLabel: I18n.t( + "features.fci.documents.footer.backToSignFieldsList" + ) }; /** @@ -139,12 +144,6 @@ const DocumentWithSignature = (props: Props) => { ); }; - /** - * Renders the loading spinner. - * @returns a loading spinner overlay - */ - const LoadingView = () => ; - /** * Callback to be used when the pdf cannot be loaded or the signature field cannot be drawn. * It returns an empty fragment and calls the `onError` callback. @@ -161,15 +160,15 @@ const DocumentWithSignature = (props: Props) => { () => pot.fold( parsedDocuments, - () => , - () => , - () => , + () => , + () => , + () => , () => , some => ( ), - () => , - () => , + () => , + () => , () => ), [ErrorView, RenderPdf, parsedDocuments] @@ -204,8 +203,8 @@ const DocumentWithSignature = (props: Props) => { currentPage, totalPages })} - iconLeftColor={currentPage === 1 ? "bluegreyLight" : "blue"} - iconRightColor={currentPage === totalPages ? "bluegreyLight" : "blue"} + iconLeftDisabled={currentPage === 1} + iconRightDisabled={currentPage === totalPages} onPrevious={onPrevious} onNext={onNext} disabled={false} @@ -215,7 +214,7 @@ const DocumentWithSignature = (props: Props) => { From e5737dc606cf87b98d7cb949c5652205e0add2c8 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:09:40 +0100 Subject: [PATCH 09/33] chore: update data sharing screen --- .../screens/valid/FciDataSharingScreen.tsx | 224 ++++++++++-------- 1 file changed, 121 insertions(+), 103 deletions(-) diff --git a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx index f9b9beca4bf..a8f69ebb12a 100644 --- a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx +++ b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx @@ -1,15 +1,22 @@ import * as pot from "@pagopa/ts-commons/lib/pot"; import { useNavigation, useRoute } from "@react-navigation/native"; -import { List } from "native-base"; import * as React from "react"; -import { SafeAreaView, StyleSheet, View } from "react-native"; +import { SafeAreaView, StyleSheet, View, ScrollView } from "react-native"; import * as O from "fp-ts/lib/Option"; -import { Icon } from "@pagopa/io-app-design-system"; -import { H4 } from "../../../../components/core/typography/H4"; -import { Link } from "../../../../components/core/typography/Link"; +import { + Body, + ButtonSolidProps, + FooterWithButtons, + H2, + H6, + HSpacer, + IOStyles, + IconButton, + LabelLink, + ListItemNav, + VSpacer +} from "@pagopa/io-app-design-system"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; -import ListItemComponent from "../../../../components/screens/ListItemComponent"; -import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; import I18n from "../../../../i18n"; import { useIOSelector } from "../../../../store/hooks"; import { @@ -18,40 +25,17 @@ import { profileNameSelector, profileSelector } from "../../../../store/reducers/profile"; -import customVariables from "../../../../theme/variables"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; import { capitalize } from "../../../../utils/strings"; -import { - cancelButtonProps, - confirmButtonProps -} from "../../../bonus/bonusVacanze/components/buttons/ButtonConfigurations"; import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow"; import ROUTES from "../../../../navigation/routes"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; import { withValidatedEmail } from "../../../../components/helpers/withValidatedEmail"; -import ScreenContent from "../../../../components/screens/ScreenContent"; import { trackFciUserDataConfirmed, trackFciUserExit } from "../../analytics"; import { localeDateFormat } from "../../../../utils/locale"; const styles = StyleSheet.create({ - padded: { - paddingLeft: customVariables.contentPadding, - paddingRight: customVariables.contentPadding, - paddingBottom: customVariables.contentPadding - }, - verticalPadding: { - paddingTop: customVariables.spacerHeight, - paddingBottom: customVariables.spacerHeight - }, - paddingTextLarge: { - paddingLeft: 14 - }, - paddingText: { - paddingLeft: 4 - }, alertTextContainer: { flexDirection: "row", - justifyContent: "space-between", alignItems: "center" } }); @@ -77,26 +61,51 @@ const FciDataSharingScreen = (): React.ReactElement => { const { present, bottomSheet: fciAbortSignature } = useFciAbortSignatureFlow(); + const cancelButtonProps: ButtonSolidProps = { + onPress: () => present(), + label: I18n.t("features.fci.shareDataScreen.cancel"), + accessibilityLabel: I18n.t("features.fci.shareDataScreen.cancel") + }; + + const confirmButtonProps: ButtonSolidProps = { + onPress: () => { + trackFciUserDataConfirmed(); + navigation.navigate("FCI_QTSP_TOS"); + }, + label: I18n.t("features.fci.shareDataScreen.confirm"), + accessibilityLabel: I18n.t("features.fci.shareDataScreen.confirm") + }; + const AlertTextComponent = () => ( - -

- {I18n.t("features.fci.shareDataScreen.alertText")} - - { - trackFciUserExit(route.name, "modifica_email"); - navigation.navigate(ROUTES.PROFILE_NAVIGATOR, { - screen: ROUTES.INSERT_EMAIL_SCREEN - }); - }} - > - {I18n.t("features.fci.shareDataScreen.alertLink")} - -

+ undefined} + /> + + +
+ {I18n.t("features.fci.shareDataScreen.alertText")} + + { + trackFciUserExit(route.name, "modifica_email"); + navigation.navigate(ROUTES.PROFILE_NAVIGATOR, { + screen: ROUTES.INSERT_EMAIL_SCREEN + }); + }} + > + {I18n.t("features.fci.shareDataScreen.alertLink")} + +
+ ); @@ -107,70 +116,79 @@ const FciDataSharingScreen = (): React.ReactElement => { goBack > - - - - {name && ( - - )} - {familyName && ( - - )} - {birthDate && ( - +

{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" )} - {fiscalCode && ( - + /> + )} + {birthDate && ( + + hideChevron + accessibilityLabel={I18n.t( + "features.fci.shareDataScreen.birthDate" )} - - - - + onPress={() => undefined} + /> + )} + {fiscalCode && ( + undefined} + /> + )} + {O.isSome(email) && ( + <> + undefined} + /> + + + )} + present(), - I18n.t("features.fci.shareDataScreen.cancel") - )} - rightButton={confirmButtonProps(() => { - trackFciUserDataConfirmed(); - navigation.navigate("FCI_QTSP_TOS"); - }, `${I18n.t("features.fci.shareDataScreen.confirm")}`)} + secondary={{ type: "Solid", buttonProps: confirmButtonProps }} + primary={{ type: "Outline", buttonProps: cancelButtonProps }} /> From 6393c262d7a843e99d39e45b13e98239796effab Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:11:16 +0100 Subject: [PATCH 10/33] chore: update qtsp screen --- ts/features/fci/components/DocumentViewer.tsx | 152 +++++++------ ts/features/fci/components/LinkedText.tsx | 16 +- .../fci/components/QtspClauseListItem.tsx | 20 +- .../__tests__/QtspClauseListItem.test.tsx | 4 +- .../__snapshots__/LinkedText.test.tsx.snap | 208 ++++++++++-------- .../screens/valid/FciQtspClausesScreen.tsx | 69 +++--- 6 files changed, 243 insertions(+), 226 deletions(-) diff --git a/ts/features/fci/components/DocumentViewer.tsx b/ts/features/fci/components/DocumentViewer.tsx index a21d48ca1fb..3849c990f87 100644 --- a/ts/features/fci/components/DocumentViewer.tsx +++ b/ts/features/fci/components/DocumentViewer.tsx @@ -1,17 +1,18 @@ import React, { useState } from "react"; import { StyleSheet } from "react-native"; -import { constNull } from "fp-ts/lib/function"; import * as pot from "@pagopa/ts-commons/lib/pot"; import ReactNativeBlobUtil from "react-native-blob-util"; import Pdf from "react-native-pdf"; import * as S from "fp-ts/lib/string"; -import { IOColors } from "@pagopa/io-app-design-system"; -import FooterWithButtons from "../../../components/ui/FooterWithButtons"; +import { + ButtonSolidProps, + FooterWithButtons, + IOColors +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { isIos } from "../../../utils/platform"; import { share } from "../../../utils/share"; import { showToast } from "../../../utils/showToast"; -import { confirmButtonProps } from "../../bonus/bonusVacanze/components/buttons/ButtonConfigurations"; import { FciDownloadPreviewDirectoryPath } from "../saga/networking/handleDownloadDocument"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { fciDownloadPreview } from "../store/actions"; @@ -19,7 +20,7 @@ import { fciDownloadPathSelector, fciDownloadPreviewSelector } from "../store/reducers/fciDownloadPreview"; -import { LoadingErrorComponent } from "../../bonus/bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent"; +import LoadingComponent from "./LoadingComponent"; const styles = StyleSheet.create({ pdf: { @@ -31,72 +32,88 @@ const styles = StyleSheet.create({ export const getFileNameFromUrl = (url: string) => url.substring(url.lastIndexOf("/") + 1).split("?")[0] + ".pdf"; -const renderFooter = (url: string, filePath: string) => - isIos ? ( +const renderFooter = (url: string, filePath: string) => { + const confirmButtonProps: ButtonSolidProps = { + onPress: () => ReactNativeBlobUtil.ios.presentOptionsMenu(filePath), + label: I18n.t("messagePDFPreview.open"), + accessibilityLabel: I18n.t("messagePDFPreview.open") + }; + + const shareButtonProps: ButtonSolidProps = { + onPress: () => { + share( + `file://${ + FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url) + }`, + undefined, + false + )().catch(_ => { + showToast(I18n.t("messagePDFPreview.errors.sharing")); + }); + }, + label: I18n.t("global.buttons.share"), + accessibilityLabel: I18n.t("global.buttons.share") + }; + + const saveButtonProps: ButtonSolidProps = { + onPress: () => { + ReactNativeBlobUtil.MediaCollection.copyToMediaStore( + { + name: getFileNameFromUrl(url), + parentFolder: "", + mimeType: "application/pdf" + }, + "Download", + FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url) + ) + .then(_ => { + showToast( + I18n.t("messagePDFPreview.savedAtLocation", { + name: "attachment.displayName" + }), + "success" + ); + }) + .catch(_ => { + showToast(I18n.t("messagePDFPreview.errors.saving")); + }); + }, + label: I18n.t("messagePDFPreview.save"), + accessibilityLabel: I18n.t("messagePDFPreview.save") + }; + + const openButtonProps: ButtonSolidProps = { + onPress: () => { + ReactNativeBlobUtil.android + .actionViewIntent( + FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url), + "application/pdf" + ) + .catch(_ => { + showToast(I18n.t("messagePDFPreview.errors.opening")); + }); + }, + label: I18n.t("messagePDFPreview.open"), + accessibilityLabel: I18n.t("messagePDFPreview.open") + }; + + return isIos ? ( { - ReactNativeBlobUtil.ios.presentOptionsMenu(filePath); - }, I18n.t("messagePDFPreview.open"))} + primary={{ type: "Solid", buttonProps: confirmButtonProps }} /> ) : ( { - share( - `file://${ - FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url) - }`, - undefined, - false - )().catch(_ => { - showToast(I18n.t("messagePDFPreview.errors.sharing")); - }); - }, - title: I18n.t("global.buttons.share") - }} - midButton={{ - bordered: true, - primary: false, - onPress: () => { - ReactNativeBlobUtil.MediaCollection.copyToMediaStore( - { - name: getFileNameFromUrl(url), - parentFolder: "", - mimeType: "application/pdf" - }, - "Download", - FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url) - ) - .then(_ => { - showToast( - I18n.t("messagePDFPreview.savedAtLocation", { - name: "attachment.displayName" - }), - "success" - ); - }) - .catch(_ => { - showToast(I18n.t("messagePDFPreview.errors.saving")); - }); - }, - title: I18n.t("messagePDFPreview.save") + primary={{ + type: "Solid", + buttonProps: shareButtonProps }} - rightButton={confirmButtonProps(() => { - ReactNativeBlobUtil.android - .actionViewIntent( - FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url), - "application/pdf" - ) - .catch(_ => { - showToast(I18n.t("messagePDFPreview.errors.opening")); - }); - }, I18n.t("messagePDFPreview.open"))} + secondary={{ type: "Outline", buttonProps: saveButtonProps }} + third={{ type: "Outline", buttonProps: openButtonProps }} /> ); +}; type Props = { documentUrl: string; @@ -106,15 +123,6 @@ type Props = { onError: () => void; }; -const LoadingComponent = () => ( - -); - export const DocumentViewer = (props: Props): React.ReactElement => { const [isError, setIsError] = useState(false); const documentUrl = props.documentUrl; @@ -128,7 +136,7 @@ export const DocumentViewer = (props: Props): React.ReactElement => { }, [documentUrl, dispatch]); if (pot.isLoading(fciDownloadSelector)) { - return ; + return ; } if (pot.isError(fciDownloadSelector) || isError) { diff --git a/ts/features/fci/components/LinkedText.tsx b/ts/features/fci/components/LinkedText.tsx index 959b93acb0e..dcdcc524548 100644 --- a/ts/features/fci/components/LinkedText.tsx +++ b/ts/features/fci/components/LinkedText.tsx @@ -1,8 +1,6 @@ import * as React from "react"; import * as O from "fp-ts/lib/Option"; -import { H4 } from "../../../components/core/typography/H4"; -import { Link } from "../../../components/core/typography/Link"; -import { WithTestID } from "../../../types/WithTestID"; +import { H4, H6, LabelLink, WithTestID } from "@pagopa/io-app-design-system"; type Props = WithTestID<{ text: string; @@ -65,14 +63,14 @@ const LinkedText = (props: Props) => { const textToBeLinked = splitted[1]; const url = splitted[2]; return ( - onPress(getOrReplaceTagWithLink(url, props.replacementUrl)) } > {textToBeLinked} - + ); }; @@ -91,15 +89,15 @@ const LinkedText = (props: Props) => { {textWithSeparator.split("$@").map((text, index) => O.isSome(O.fromNullable(arrayOfLinkedText[index])) ? ( <> -

+

{text} -
+ {arrayOfLinkedText[index]} ) : ( -

+

{text} -
+ ) )} diff --git a/ts/features/fci/components/QtspClauseListItem.tsx b/ts/features/fci/components/QtspClauseListItem.tsx index 2a4d02cef90..fa5f7fc51d8 100644 --- a/ts/features/fci/components/QtspClauseListItem.tsx +++ b/ts/features/fci/components/QtspClauseListItem.tsx @@ -1,9 +1,7 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; import { useSelector } from "react-redux"; -import { Icon } from "@pagopa/io-app-design-system"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; -import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity"; +import { IOStyles, IconButton } from "@pagopa/io-app-design-system"; import { QtspClause } from "../../../../definitions/fci/QtspClause"; import { fciQtspFilledDocumentUrlSelector } from "../store/reducers/fciQtspFilledDocument"; import I18n from "../../../i18n"; @@ -48,28 +46,20 @@ const QtspClauseListItem = (props: Props) => { } - { onChange(!checked); setChecked(!checked); }} - > - - - - + icon={checked ? "legCheckOn" : "legCheckOff"} + iconSize={24} + /> ); }; diff --git a/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx b/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx index 92ab5762be9..2bb5a796784 100644 --- a/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx +++ b/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx @@ -84,9 +84,9 @@ describe("Test QtspClauseListItem component", () => { const component = renderComponent({ ...props }, store); expect(component).toBeTruthy(); expect( - component.getByTestId("QtspClauseListItemCheckboxTestID") + component.getByTestId("QtspClauseListItemContainerTestID") ).toBeTruthy(); - expect(component.queryAllByText("io-checkbox-on")).toBeTruthy(); + expect(component.queryAllByText("legCheckOn")).toBeTruthy(); }); it("should render a QtspClauseListItem component with checkbox clickable", () => { const mockStore = configureMockStore(); diff --git a/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap index 493e234a7e7..b2d98facc5c 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap @@ -2,45 +2,50 @@ exports[`Test LinkedText component should render a LinkedText component with props correctly 1`] = ` C l a u s e t i t l e 1 `; diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx index a68f8cb2705..ecee8aaa4f4 100644 --- a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx +++ b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx @@ -1,11 +1,17 @@ import * as React from "react"; -import { SafeAreaView, FlatList, View } from "react-native"; +import { SafeAreaView, FlatList, View, ScrollView } from "react-native"; import { useSelector } from "react-redux"; import { useNavigation } from "@react-navigation/native"; import * as pot from "@pagopa/ts-commons/lib/pot"; -import { constNull } from "fp-ts/lib/function"; -import { VSpacer } from "@pagopa/io-app-design-system"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; +import { + Body, + ButtonSolidProps, + Divider, + FooterWithButtons, + H2, + IOStyles, + VSpacer +} from "@pagopa/io-app-design-system"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; @@ -14,15 +20,12 @@ import { fciQtspPrivacyTextSelector, fciQtspPrivacyUrlSelector } from "../../store/reducers/fciQtspClauses"; -import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow"; -import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent"; import customVariables from "../../../../theme/variables"; import QtspClauseListItem from "../../components/QtspClauseListItem"; import { FCI_ROUTES } from "../../navigation/routes"; import { useIODispatch } from "../../../../store/hooks"; import { fciEndRequest, fciStartSigningRequest } from "../../store/actions"; -import { LoadingErrorComponent } from "../../../bonus/bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent"; import { fciPollFilledDocumentErrorSelector, fciPollFilledDocumentReadySelector @@ -35,8 +38,8 @@ import { ServiceId } from "../../../../../definitions/backend/ServiceId"; import { useFciCheckService } from "../../hooks/useFciCheckService"; import { isServicePreferenceResponseSuccess } from "../../../../types/services/ServicePreferenceResponse"; import { fciMetadataServiceIdSelector } from "../../store/reducers/fciMetadata"; -import ScreenContent from "../../../../components/screens/ScreenContent"; import { trackFciUxConversion } from "../../analytics"; +import LoadingComponent from "../../components/LoadingComponent"; const FciQtspClausesScreen = () => { const dispatch = useIODispatch(); @@ -80,15 +83,6 @@ const FciQtspClausesScreen = () => { }); }; - const LoadingComponent = () => ( - - ); - if (fciPollFilledDocumentError && !isPollFilledDocumentReady) { return ( { /> ); } else if (!isPollFilledDocumentReady) { - return ; + return ; } const renderClausesFields = () => ( @@ -114,9 +108,7 @@ const FciQtspClausesScreen = () => { `${index}`} - ItemSeparatorComponent={() => ( - - )} + ItemSeparatorComponent={() => } renderItem={({ item }) => ( { )} ListFooterComponent={ <> - + { ); - const cancelButtonProps = { - block: true, - light: false, - bordered: true, + const cancelButtonProps: ButtonSolidProps = { onPress: showAbort, - title: I18n.t("global.buttons.cancel") + label: I18n.t("global.buttons.cancel"), + accessibilityLabel: I18n.t("global.buttons.cancel") }; - const continueButtonProps = { - block: true, - primary: true, + const continueButtonProps: ButtonSolidProps = { disabled: clausesChecked !== qtspClausesSelector.length, onPress: () => { if (isServiceActive) { @@ -166,7 +154,8 @@ const FciQtspClausesScreen = () => { showCheckService(); } }, - title: I18n.t("global.buttons.continue") + label: I18n.t("global.buttons.continue"), + accessibilityLabel: I18n.t("global.buttons.continue") }; return ( @@ -176,18 +165,16 @@ const FciQtspClausesScreen = () => { contextualHelp={emptyContextualHelp} > - - - {renderClausesFields()} - - + +

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

+ + {I18n.t("features.fci.qtspTos.subTitle")} + {renderClausesFields()} + {fciAbortSignature} From 8e60204287d60d83cfdea30cd14db00a1f56cfb0 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:12:01 +0100 Subject: [PATCH 11/33] chore: update signature fields screen --- .../valid/FciSignatureFieldsScreen.tsx | 55 +++++++++++-------- 1 file changed, 33 insertions(+), 22 deletions(-) diff --git a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx index 85ef6f668e1..d1f86d2d450 100644 --- a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx @@ -1,12 +1,26 @@ import * as React from "react"; -import { View, SafeAreaView, SectionList, Platform } from "react-native"; +import { + View, + SafeAreaView, + SectionList, + Platform, + ScrollView +} from "react-native"; import { useSelector } from "react-redux"; import { StackActions, useNavigation } from "@react-navigation/native"; import * as RA from "fp-ts/lib/ReadonlyArray"; import * as O from "fp-ts/lib/Option"; import { constFalse, increment, pipe } from "fp-ts/lib/function"; -import { IconButton, IOColors, VSpacer } from "@pagopa/io-app-design-system"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; +import { + ButtonSolidProps, + FooterWithButtons, + H2, + H4, + IconButton, + IOColors, + IOStyles, + VSpacer +} from "@pagopa/io-app-design-system"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; @@ -19,9 +33,7 @@ import { DocumentDetailView } from "../../../../../definitions/fci/DocumentDetai import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList"; import { FciParamsList } from "../../navigation/params"; import SignatureFieldItem from "../../components/SignatureFieldItem"; -import { H3 } from "../../../../components/core/typography/H3"; import { SignatureField } from "../../../../../definitions/fci/SignatureField"; -import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; import { FCI_ROUTES } from "../../navigation/routes"; import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; import { @@ -40,7 +52,6 @@ import { getSectionListData, orderSignatureFields } from "../../utils/signatureFields"; -import ScreenContent from "../../../../components/screens/ScreenContent"; import { LightModalContext } from "../../../../components/ui/LightModal"; import DocumentWithSignature from "../../components/DocumentWithSignature"; import GenericErrorComponent from "../../components/GenericErrorComponent"; @@ -163,9 +174,9 @@ const FciSignatureFieldsScreen = ( flexDirection: "row" }} > -

+

{clauseLabel} -

+ {/* Show info icon and signature field info only for unfair clauses @@ -188,7 +199,6 @@ const FciSignatureFieldsScreen = ( const renderSignatureFields = () => ( ); - const cancelButtonProps = { - block: true, - light: false, - bordered: true, + const cancelButtonProps: ButtonSolidProps = { onPress: present, - title: I18n.t("global.buttons.cancel") + label: I18n.t("global.buttons.cancel"), + accessibilityLabel: I18n.t("global.buttons.cancel") }; - const continueButtonProps = { - block: true, - primary: true, + const continueButtonProps: ButtonSolidProps = { disabled: !isClausesChecked, onPress: () => { if (currentDoc < documentsSelector.length - 1) { @@ -241,7 +247,11 @@ const FciSignatureFieldsScreen = ( }); } }, - title: + accessibilityLabel: + currentDoc < documentsSelector.length - 1 + ? I18n.t("global.buttons.continue") + : "Firma", + label: currentDoc < documentsSelector.length - 1 ? I18n.t("global.buttons.continue") : "Firma" @@ -275,14 +285,15 @@ const FciSignatureFieldsScreen = ( contextualHelp={emptyContextualHelp} > - + +

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

{renderSignatureFields()} - + {fciAbortSignature} From 8bfe166d0ec9fdfff88efd2d03e9c7d1c8894a80 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:12:39 +0100 Subject: [PATCH 12/33] chore: update typ --- .../__tests__/FciThankyouScreen.test.tsx | 3 +- .../fci/screens/valid/FciThankyouScreen.tsx | 79 +++++++++---------- 2 files changed, 39 insertions(+), 43 deletions(-) diff --git a/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx b/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx index 0a08b2f9720..ff660cd4363 100644 --- a/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx +++ b/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx @@ -73,8 +73,7 @@ describe("Test FciThankyouScreen screen", () => { store.dispatch(fciSigningRequest.success(mockSignatureDetailView)); const component = renderComponent(store); expect(component).toBeTruthy(); - expect(component.queryByTestId("FciTypSuccessTestID")).toBeTruthy(); - const closeButton = component.getByTestId("FciTypSuccessFooterButton"); + const closeButton = component.getByTestId("FciTypCloseButton"); expect(closeButton).toBeTruthy(); expect(closeButton).toBeEnabled(); fireEvent.press(closeButton, "onPress"); diff --git a/ts/features/fci/screens/valid/FciThankyouScreen.tsx b/ts/features/fci/screens/valid/FciThankyouScreen.tsx index a16cbb6a9e2..3086df0754a 100644 --- a/ts/features/fci/screens/valid/FciThankyouScreen.tsx +++ b/ts/features/fci/screens/valid/FciThankyouScreen.tsx @@ -1,36 +1,32 @@ import * as React from "react"; import { SafeAreaView } from "react-native"; import * as pot from "@pagopa/ts-commons/lib/pot"; -import { constNull } from "fp-ts/lib/function"; +import { + ButtonSolidProps, + FooterWithButtons, + IOStyles, + Pictogram +} from "@pagopa/io-app-design-system"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; -import { LoadingErrorComponent } from "../../../bonus/bonusVacanze/components/loadingErrorScreen/LoadingErrorComponent"; import { fciSignatureSelector } from "../../store/reducers/fciSignature"; import GenericErrorComponent from "../../components/GenericErrorComponent"; -import paymentCompleted from "../../../../../img/pictograms/payment-completed.png"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; import I18n from "../../../../i18n"; -import FooterWithButtons from "../../../../components/ui/FooterWithButtons"; -import { InfoScreenComponent } from "../../../../components/infoScreen/InfoScreenComponent"; -import { renderInfoRasterImage } from "../../../../components/infoScreen/imageRendering"; import { fciEndRequest, fciStartRequest } from "../../store/actions"; import { trackFciUxSuccess } from "../../analytics"; import { TypeEnum as ClauseTypeEnum } from "../../../../../definitions/fci/Clause"; import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures"; import { getClausesCountByTypes } from "../../utils/signatureFields"; +import LoadingComponent from "../../components/LoadingComponent"; +import { InfoScreenComponent } from "../../components/InfoScreenComponent"; const FciThankyouScreen = () => { const fciCreateSignatureSelector = useIOSelector(fciSignatureSelector); const documentSignatures = useIOSelector(fciDocumentSignaturesSelector); const dispatch = useIODispatch(); - const LoadingComponent = () => ( - + const LoadingView = () => ( + ); const ErrorComponent = () => ( @@ -44,34 +40,35 @@ const FciThankyouScreen = () => { /> ); - const SuccessComponent = () => ( - - - - dispatch(fciEndRequest()), - title: I18n.t("features.fci.thankYouPage.cta"), - block: true, - light: false, - bordered: true, - testID: "FciTypSuccessFooterButton" - }} - /> - - - ); + const SuccessComponent = () => { + const continueButtonProps: ButtonSolidProps = { + onPress: () => dispatch(fciEndRequest()), + label: I18n.t("features.fci.thankYouPage.cta"), + accessibilityLabel: I18n.t("features.fci.thankYouPage.cta"), + testID: "FciTypCloseButton" + }; + return ( + + + } + title={I18n.t("features.fci.thankYouPage.title")} + body={I18n.t("features.fci.thankYouPage.content")} + /> + + + + ); + }; return pot.fold( fciCreateSignatureSelector, - () => , - () => , - () => , + () => , + () => , + () => , _ => , _ => { trackFciUxSuccess( @@ -84,8 +81,8 @@ const FciThankyouScreen = () => { ); return ; }, - () => , - () => , + () => , + () => , _ => ); }; From 224bc0ffefa6369ecf2bf805f13b43a25ffd9e2c Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:13:19 +0100 Subject: [PATCH 13/33] chore: update signautre requests list --- .../fci/components/SignatureRequestItem.tsx | 35 +++++++++---------- .../valid/FciSignatureRequestsScreen.tsx | 14 ++++---- 2 files changed, 22 insertions(+), 27 deletions(-) diff --git a/ts/features/fci/components/SignatureRequestItem.tsx b/ts/features/fci/components/SignatureRequestItem.tsx index 5b01e01185e..d0ecdc51e17 100644 --- a/ts/features/fci/components/SignatureRequestItem.tsx +++ b/ts/features/fci/components/SignatureRequestItem.tsx @@ -1,13 +1,15 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; -import { HSpacer } from "@pagopa/io-app-design-system"; -import { H4 } from "../../../components/core/typography/H4"; +import { + Badge, + Divider, + H6, + HSpacer, + LabelSmall +} from "@pagopa/io-app-design-system"; import { SignatureRequestListView } from "../../../../definitions/fci/SignatureRequestListView"; import { SignatureRequestStatusEnum } from "../../../../definitions/fci/SignatureRequestStatus"; -import { IOBadge } from "../../../components/core/IOBadge"; -import { LabelSmall } from "../../../components/core/typography/LabelSmall"; import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity"; -import ItemSeparatorComponent from "../../../components/ItemSeparatorComponent"; import I18n from "../../../i18n"; type Props = { @@ -29,20 +31,16 @@ const SignatureRequestItem = (props: Props) => { switch (item.status) { case SignatureRequestStatusEnum.WAIT_FOR_SIGNATURE: return ( - ); case SignatureRequestStatusEnum.SIGNED: return ( - @@ -50,10 +48,9 @@ const SignatureRequestItem = (props: Props) => { case SignatureRequestStatusEnum.WAIT_FOR_QTSP: default: return ( - @@ -68,7 +65,7 @@ const SignatureRequestItem = (props: Props) => { testID={"FciSignatureRequestOnPress"} > -

{item.dossier_title}

+
{item.dossier_title}
{I18n.t("features.fci.requests.itemSubtitle", { date: item.created_at.toLocaleDateString(), @@ -80,7 +77,7 @@ const SignatureRequestItem = (props: Props) => { {renderStatusLabel()} - + ); }; diff --git a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx index 434e231d406..e83200772f9 100644 --- a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx @@ -1,8 +1,7 @@ import * as React from "react"; -import { SafeAreaView, View, SectionList } from "react-native"; -import { IOStyles } from "../../../../components/core/variables/IOStyles"; +import { SafeAreaView, SectionList, ScrollView } from "react-native"; +import { H2, IOStyles } from "@pagopa/io-app-design-system"; import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; -import ScreenContent from "../../../../components/screens/ScreenContent"; import SignatureRequestItem from "../../components/SignatureRequestItem"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciSignaturesListSelector } from "../../store/reducers/fciSignaturesList"; @@ -87,11 +86,10 @@ const FciSignatureRequestsScreen = () => { headerTitle={I18n.t("features.fci.requests.header")} > - - - {renderSignatureRequests()} - - + +

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

+ {renderSignatureRequests()} + From 248c33ce252e4ccc386b67476a4f77b3bb66cc9e Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:13:57 +0100 Subject: [PATCH 14/33] chore: update error component --- ts/features/fci/components/ErrorComponent.tsx | 84 ++++++++++++------- .../fci/components/InfoScreenComponent.tsx | 9 +- 2 files changed, 58 insertions(+), 35 deletions(-) diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index 0cb3f7072b1..b4ce3a05db7 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -1,12 +1,18 @@ import * as React from "react"; -import { SafeAreaView } from "react-native"; +import { SafeAreaView, View } from "react-native"; import { EmailString } from "@pagopa/ts-commons/lib/strings"; -import { IOPictograms, Pictogram } from "@pagopa/io-app-design-system"; +import { + ButtonOutline, + ButtonSolid, + ButtonSolidProps, + IOPictograms, + IOStyles, + Pictogram, + VSpacer +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; import { WithTestID } from "../../../types/WithTestID"; -import { FooterStackButton } from "../../bonus/bonusVacanze/components/buttons/FooterStackButtons"; import { addTicketCustomField, assistanceToolRemoteConfig, @@ -64,49 +70,69 @@ const ErrorComponent = (props: Props) => { } }; - const retryButtonProps = { + const retryButtonProps: ButtonSolidProps = { testID: "FciRetryButtonTestID", - block: true, - primary: true, onPress: props.onPress, - title: I18n.t("features.fci.errors.buttons.retry") + fullWidth: true, + label: I18n.t("features.fci.errors.buttons.retry"), + accessibilityLabel: I18n.t("features.fci.errors.buttons.retry") }; - const closeButtonProps = { + const closeButtonProps: ButtonSolidProps = { testID: "FciCloseButtonTestID", - bordered: true, - block: true, onPress: props.onPress, - title: I18n.t("features.fci.errors.buttons.close") + fullWidth: true, + label: I18n.t("features.fci.errors.buttons.close"), + accessibilityLabel: I18n.t("features.fci.errors.buttons.close") }; - const assistanceButtonProps = { + const assistanceButtonProps: ButtonSolidProps = { testID: "FciAssistanceButtonTestID", - bordered: true, - primary: false, - block: true, + fullWidth: true, onPress: handleAskAssistance, - title: I18n.t("features.fci.errors.buttons.assistance") + label: I18n.t("features.fci.errors.buttons.assistance"), + accessibilityLabel: I18n.t("features.fci.errors.buttons.assistance") }; + /** + * Render the footer buttons as vertical stacked buttons + * @returns {React.ReactElement} + */ const footerButtons = () => { if (props.retry && props.assistance) { - return [retryButtonProps, assistanceButtonProps]; + return ( + <> + + + + + ); } if (props.retry) { - return [retryButtonProps, closeButtonProps]; + return ( + <> + + + + + ); } if (props.assistance) { - return [ - { - ...closeButtonProps, - bordered: false, - title: I18n.t("features.fci.errors.buttons.back") - }, - assistanceButtonProps - ]; + return ( + <> + + + + + ); } - return [closeButtonProps]; + return ; }; return ( @@ -118,7 +144,7 @@ const ErrorComponent = (props: Props) => { body={props.subTitle} email={props.email} /> - + {footerButtons()} ); diff --git a/ts/features/fci/components/InfoScreenComponent.tsx b/ts/features/fci/components/InfoScreenComponent.tsx index a6453b5fcb4..430076c40e3 100644 --- a/ts/features/fci/components/InfoScreenComponent.tsx +++ b/ts/features/fci/components/InfoScreenComponent.tsx @@ -2,12 +2,9 @@ import { NavigationEvents } from "@react-navigation/compat"; import * as React from "react"; import { Linking, StyleSheet, Text, View } from "react-native"; import { EmailString } from "@pagopa/ts-commons/lib/strings"; -import { VSpacer } from "@pagopa/io-app-design-system"; +import { Body, H2, LabelLink, VSpacer } from "@pagopa/io-app-design-system"; import themeVariables from "../../../theme/variables"; import { setAccessibilityFocus } from "../../../utils/accessibility"; -import { Body } from "../../../components/core/typography/Body"; -import { H2 } from "../../../components/core/typography/H2"; -import { Link } from "../../../components/core/typography/Link"; type Props = { image: React.ReactNode; @@ -38,9 +35,9 @@ const renderNode = (body: string | React.ReactNode, email?: EmailString) => { {email && <> } {email && ( - Linking.openURL(`mailto:${email}`)}> + Linking.openURL(`mailto:${email}`)}> {email} - + )} ); From 4029d529892975bbb2f1a7ef0b3bbc44bbb7ba7f Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:15:51 +0100 Subject: [PATCH 15/33] chore: update abort hook --- .../fci/hooks/useFciAbortSignatureFlow.tsx | 78 +++++++++---------- 1 file changed, 37 insertions(+), 41 deletions(-) diff --git a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx index 513eadb7d20..a5a18e8f53c 100644 --- a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx +++ b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx @@ -1,24 +1,16 @@ import * as React from "react"; -import { StyleSheet, View } from "react-native"; import { useRoute } from "@react-navigation/native"; -import { useLegacyIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; -import { H3 } from "../../../components/core/typography/H3"; -import FooterWithButtons from "../../../components/ui/FooterWithButtons"; +import { + ButtonSolidProps, + FooterWithButtons +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; -import customVariables from "../../../theme/variables"; -import { errorButtonProps } from "../../bonus/bonusVacanze/components/buttons/ButtonConfigurations"; import { fciEndRequest } from "../store/actions"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { trackFciUserExit } from "../analytics"; import { fciSignatureRequestDossierTitleSelector } from "../store/reducers/fciSignatureRequest"; import Markdown from "../../../components/ui/Markdown"; - -const styles = StyleSheet.create({ - verticalPad: { - paddingVertical: customVariables.spacerHeight - } -}); +import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; /** * A hook that returns a function to present the abort signature flow bottom sheet @@ -27,37 +19,41 @@ export const useFciAbortSignatureFlow = () => { const dispatch = useIODispatch(); const route = useRoute(); const dossierTitle = useIOSelector(fciSignatureRequestDossierTitleSelector); - const { present, bottomSheet, dismiss } = useLegacyIOBottomSheetModal( - + const cancelButtonProps: ButtonSolidProps = { + testID: "FciStopAbortingSignatureTestID", + onPress: () => dismiss(), + label: I18n.t("features.fci.abort.confirm"), + accessibilityLabel: I18n.t("features.fci.abort.confirm") + }; + const continueButtonProps: ButtonSolidProps = { + onPress: () => { + trackFciUserExit(route.name); + dispatch(fciEndRequest()); + dismiss(); + }, + color: "danger", + label: I18n.t("features.fci.abort.cancel"), + accessibilityLabel: I18n.t("features.fci.abort.cancel") + }; + const { present, bottomSheet, dismiss } = useIOBottomSheetModal({ + title: I18n.t("features.fci.abort.title"), + component: ( {I18n.t("features.fci.abort.content", { dossierTitle })} - , - -

- {I18n.t("features.fci.abort.title")} -

- , - 280, - dismiss(), - title: I18n.t("features.fci.abort.confirm") - }} - rightButton={{ - ...errorButtonProps(() => { - trackFciUserExit(route.name); - dispatch(fciEndRequest()); - dismiss(); - }, I18n.t("features.fci.abort.cancel")), - onPressWithGestureHandler: true - }} - /> - ); + ), + snapPoint: [280], + footer: ( + + ) + }); return { dismiss, From 90cdaa10ae6e97784c1a6d852391ed73f4c15202 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:27:37 +0100 Subject: [PATCH 16/33] chore: update check service hook --- ts/features/fci/hooks/useFciCheckService.tsx | 122 ++++++++++--------- 1 file changed, 64 insertions(+), 58 deletions(-) diff --git a/ts/features/fci/hooks/useFciCheckService.tsx b/ts/features/fci/hooks/useFciCheckService.tsx index 59a221090b8..fd3cd849d43 100644 --- a/ts/features/fci/hooks/useFciCheckService.tsx +++ b/ts/features/fci/hooks/useFciCheckService.tsx @@ -1,14 +1,14 @@ import * as React from "react"; -import { StyleSheet, View } from "react-native"; +import { View } from "react-native"; import * as pot from "@pagopa/ts-commons/lib/pot"; -import { useLegacyIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; -import { H3 } from "../../../components/core/typography/H3"; -import FooterWithButtons from "../../../components/ui/FooterWithButtons"; +import { + Body, + ButtonSolidProps, + FooterWithButtons, + H4, + IOStyles +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; -import customVariables from "../../../theme/variables"; -import { confirmButtonProps } from "../../bonus/bonusVacanze/components/buttons/ButtonConfigurations"; -import { H4 } from "../../../components/core/typography/H4"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { fciStartSigningRequest } from "../store/actions"; import { upsertServicePreference } from "../../../store/actions/services/servicePreference"; @@ -17,12 +17,7 @@ import { isServicePreferenceResponseSuccess } from "../../../types/services/Serv import { servicePreferenceSelector } from "../../../store/reducers/entities/services/servicePreference"; import { fciMetadataServiceIdSelector } from "../store/reducers/fciMetadata"; import { trackFciUxConversion } from "../analytics"; - -const styles = StyleSheet.create({ - verticalPad: { - paddingVertical: customVariables.spacerHeight - } -}); +import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; /** * A hook that returns a function to present the abort signature flow bottom sheet @@ -32,50 +27,61 @@ export const useFciCheckService = () => { const fciServiceId = useIOSelector(fciMetadataServiceIdSelector); const servicePreference = useIOSelector(servicePreferenceSelector); const servicePreferenceValue = pot.getOrElse(servicePreference, undefined); - const { present, bottomSheet, dismiss } = useLegacyIOBottomSheetModal( - -

{I18n.t("features.fci.checkService.content")}

- , - -

- {I18n.t("features.fci.checkService.title")} -

- , - 280, - { - dispatch(fciStartSigningRequest()); - dismiss(); - }, - title: I18n.t("features.fci.checkService.cancel") - }} - rightButton={{ - ...confirmButtonProps(() => { - if ( - fciServiceId && - servicePreferenceValue && - isServicePreferenceResponseSuccess(servicePreferenceValue) - ) { - const sp = { ...servicePreferenceValue.value, inbox: true }; - dispatch( - upsertServicePreference.request({ - id: fciServiceId as ServiceId, - ...sp - }) - ); - } - trackFciUxConversion(); - dispatch(fciStartSigningRequest()); - dismiss(); - }, I18n.t("features.fci.checkService.confirm")), - onPressWithGestureHandler: true - }} - /> - ); + const cancelButtonProps: ButtonSolidProps = { + onPress: () => { + dispatch(fciStartSigningRequest()); + dismiss(); + }, + label: I18n.t("features.fci.checkService.cancel"), + accessibilityLabel: I18n.t("features.fci.checkService.cancel") + }; + const confirmButtonProps: ButtonSolidProps = { + onPress: () => { + if ( + fciServiceId && + servicePreferenceValue && + isServicePreferenceResponseSuccess(servicePreferenceValue) + ) { + const sp = { ...servicePreferenceValue.value, inbox: true }; + dispatch( + upsertServicePreference.request({ + id: fciServiceId as ServiceId, + ...sp + }) + ); + } + trackFciUxConversion(); + dispatch(fciStartSigningRequest()); + dismiss(); + }, + label: I18n.t("features.fci.checkService.confirm"), + accessibilityLabel: I18n.t("features.fci.checkService.confirm") + }; + const { present, bottomSheet, dismiss } = useIOBottomSheetModal({ + component: ( + + {I18n.t("features.fci.checkService.content")} + + ), + title: ( + +

+ {I18n.t("features.fci.checkService.title")} +

+ + ), + snapPoint: [320], + footer: ( + + ) + }); return { dismiss, From 7fbd71f56d1ad44f29871caf91756789604b4370 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:39:47 +0100 Subject: [PATCH 17/33] chore: no signature fields hook --- .../fci/hooks/useFciNoSignatureFields.tsx | 108 +++++++++--------- 1 file changed, 53 insertions(+), 55 deletions(-) diff --git a/ts/features/fci/hooks/useFciNoSignatureFields.tsx b/ts/features/fci/hooks/useFciNoSignatureFields.tsx index f394ad90c87..aa8da76cea8 100644 --- a/ts/features/fci/hooks/useFciNoSignatureFields.tsx +++ b/ts/features/fci/hooks/useFciNoSignatureFields.tsx @@ -1,30 +1,22 @@ import * as React from "react"; -import { StyleSheet, View } from "react-native"; import { StackActions, useNavigation } from "@react-navigation/native"; import { increment } from "fp-ts/lib/function"; -import { useLegacyIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; -import { IOStyles } from "../../../components/core/variables/IOStyles"; -import { H3 } from "../../../components/core/typography/H3"; -import FooterWithButtons from "../../../components/ui/FooterWithButtons"; +import { + Body, + ButtonSolidProps, + FooterWithButtons +} from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; -import customVariables from "../../../theme/variables"; -import { confirmButtonProps } from "../../bonus/bonusVacanze/components/buttons/ButtonConfigurations"; -import { H4 } from "../../../components/core/typography/H4"; import { FCI_ROUTES } from "../navigation/routes"; import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest"; import { useIOSelector } from "../../../store/hooks"; import { trackFciStartSignature } from "../analytics"; +import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; type Props = { currentDoc: number; }; -const styles = StyleSheet.create({ - verticalPad: { - paddingVertical: customVariables.spacerHeight - } -}); - /** * A hook that returns a function to present the abort signature flow bottom sheet */ @@ -32,47 +24,53 @@ export const useFciNoSignatureFields = (props: Props) => { const navigation = useNavigation(); const documents = useIOSelector(fciSignatureDetailDocumentsSelector); const { currentDoc } = props; - const { present, bottomSheet, dismiss } = useLegacyIOBottomSheetModal( - -

{I18n.t("features.fci.noFields.content")}

- , - -

- {I18n.t("features.fci.noFields.title")} -

- , - 280, - { - dismiss(); - }, - title: I18n.t("features.fci.noFields.leftButton") - }} - rightButton={{ - ...confirmButtonProps(() => { - dismiss(); - if (currentDoc < documents.length - 1) { - navigation.dispatch( - StackActions.push(FCI_ROUTES.DOCUMENTS, { - attrs: undefined, - currentDoc: increment(currentDoc) - }) - ); - } else { - trackFciStartSignature(); - navigation.navigate(FCI_ROUTES.MAIN, { - screen: FCI_ROUTES.USER_DATA_SHARE - }); - } - }, I18n.t("features.fci.noFields.rightButton")), - onPressWithGestureHandler: true - }} - /> - ); + const readButtonProps: ButtonSolidProps = { + onPress: () => { + dismiss(); + }, + label: I18n.t("features.fci.noFields.leftButton"), + accessibilityLabel: I18n.t("features.fci.noFields.leftButton") + }; + const confirmButtonProps: ButtonSolidProps = { + onPress: () => { + dismiss(); + if (currentDoc < documents.length - 1) { + navigation.dispatch( + StackActions.push(FCI_ROUTES.DOCUMENTS, { + attrs: undefined, + currentDoc: increment(currentDoc) + }) + ); + } else { + trackFciStartSignature(); + navigation.navigate(FCI_ROUTES.MAIN, { + screen: FCI_ROUTES.USER_DATA_SHARE + }); + } + }, + label: I18n.t("features.fci.noFields.rightButton"), + accessibilityLabel: I18n.t("features.fci.noFields.rightButton") + }; + const { present, bottomSheet, dismiss } = useIOBottomSheetModal({ + component: ( + {I18n.t("features.fci.noFields.content")} + ), + title: I18n.t("features.fci.noFields.title"), + snapPoint: [280], + footer: ( + + ) + }); return { dismiss, From ff485de2925e463424a255ddd04de8456d99dac1 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 4 Jan 2024 16:41:52 +0100 Subject: [PATCH 18/33] chore: update check service hook --- ts/features/fci/hooks/useFciCheckService.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/ts/features/fci/hooks/useFciCheckService.tsx b/ts/features/fci/hooks/useFciCheckService.tsx index fd3cd849d43..8b84502aaa8 100644 --- a/ts/features/fci/hooks/useFciCheckService.tsx +++ b/ts/features/fci/hooks/useFciCheckService.tsx @@ -63,13 +63,7 @@ export const useFciCheckService = () => { {I18n.t("features.fci.checkService.content")} ), - title: ( - -

- {I18n.t("features.fci.checkService.title")} -

- - ), + title: I18n.t("features.fci.checkService.title"), snapPoint: [320], footer: ( Date: Thu, 4 Jan 2024 16:42:55 +0100 Subject: [PATCH 19/33] chore: remove unused ref from check service hook --- ts/features/fci/hooks/useFciCheckService.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/ts/features/fci/hooks/useFciCheckService.tsx b/ts/features/fci/hooks/useFciCheckService.tsx index 8b84502aaa8..87fc48d6f1f 100644 --- a/ts/features/fci/hooks/useFciCheckService.tsx +++ b/ts/features/fci/hooks/useFciCheckService.tsx @@ -1,12 +1,9 @@ import * as React from "react"; -import { View } from "react-native"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { Body, ButtonSolidProps, - FooterWithButtons, - H4, - IOStyles + FooterWithButtons } from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; From 8763b89df04838173bdd3e60c6cfc7c478b725ef Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 11 Jan 2024 16:14:19 +0100 Subject: [PATCH 20/33] chore: migrate to header second level --- .../fci/navigation/FciStackNavigator.tsx | 10 +- .../screens/valid/FciDataSharingScreen.tsx | 35 ++++-- .../valid/FciDocumentPreviewScreen.tsx | 54 ++++---- .../fci/screens/valid/FciDocumentsScreen.tsx | 116 ++++++++++-------- .../screens/valid/FciQtspClausesScreen.tsx | 35 ++++-- .../valid/FciSignatureFieldsScreen.tsx | 51 ++++---- .../valid/FciSignatureRequestsScreen.tsx | 38 ++++-- .../fci/screens/valid/FciThankyouScreen.tsx | 5 +- 8 files changed, 220 insertions(+), 124 deletions(-) diff --git a/ts/features/fci/navigation/FciStackNavigator.tsx b/ts/features/fci/navigation/FciStackNavigator.tsx index a5a3dd107f7..3fa2a6d5fdf 100644 --- a/ts/features/fci/navigation/FciStackNavigator.tsx +++ b/ts/features/fci/navigation/FciStackNavigator.tsx @@ -28,7 +28,7 @@ export const fciLinkingOptions: PathConfigMap = { export const FciStackNavigator = () => ( @@ -42,7 +42,13 @@ export const FciStackNavigator = () => ( component={FciDataSharingScreen} /> - + { ); const email = useIOSelector(profileEmailSelector); + const startSupportRequest = useStartSupportRequest({ + contextualHelp: emptyContextualHelp + }); + + React.useLayoutEffect(() => { + navigation.setOptions({ + header: () => ( + + ) + }); + }, [navigation, startSupportRequest]); + const { present, bottomSheet: fciAbortSignature } = useFciAbortSignatureFlow(); @@ -112,11 +137,7 @@ const FciDataSharingScreen = (): React.ReactElement => { ); return ( - + <> { {fciAbortSignature} - + ); }; diff --git a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx index 348f6acb75c..8679b63a370 100644 --- a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx +++ b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx @@ -1,8 +1,8 @@ import React from "react"; -import { Platform, SafeAreaView, StyleSheet } from "react-native"; +import { SafeAreaView, StyleSheet } from "react-native"; import * as S from "fp-ts/lib/string"; -import { IconButton } from "@pagopa/io-app-design-system"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; +import { HeaderSecondLevel } from "@pagopa/io-app-design-system"; +import { useNavigation } from "@react-navigation/native"; import I18n from "../../../../i18n"; import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; @@ -12,6 +12,7 @@ import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciDownloadPreviewClear, fciEndRequest } from "../../store/actions"; import { fciDownloadPathSelector } from "../../store/reducers/fciDownloadPreview"; import GenericErrorComponent from "../../components/GenericErrorComponent"; +import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; export type FciDocumentPreviewScreenNavigationParams = Readonly<{ documentUrl: string; @@ -33,6 +34,33 @@ export const FciDocumentPreviewScreen = ( props.route.params.enableAnnotationRendering; const fciDownloadPath = useIOSelector(fciDownloadPathSelector); const dispatch = useIODispatch(); + const navigation = useNavigation(); + + const startSupportRequest = useStartSupportRequest({ + contextualHelp: emptyContextualHelp + }); + + React.useLayoutEffect(() => { + navigation.setOptions({ + header: () => ( + + dispatch(fciDownloadPreviewClear({ path: fciDownloadPath })) + } + title={I18n.t("messagePDFPreview.title")} + type={"singleAction"} + backAccessibilityLabel={I18n.t("global.buttons.back")} + firstAction={{ + icon: "help", + onPress: startSupportRequest, + accessibilityLabel: I18n.t( + "global.accessibility.contextualHelp.open.label" + ) + }} + /> + ) + }); + }, [dispatch, fciDownloadPath, navigation, startSupportRequest]); if (isError) { return ( @@ -45,24 +73,8 @@ export const FciDocumentPreviewScreen = ( ); } - const customGoBack: React.ReactElement = ( - { - dispatch(fciDownloadPreviewClear({ path: fciDownloadPath })); - }} - accessibilityLabel={I18n.t("global.buttons.back")} - /> - ); - return ( - + <> )} - + ); }; diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx index 39402485adf..90bdb79552c 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 { Platform, SafeAreaView, StyleSheet } from "react-native"; +import { SafeAreaView, StyleSheet } from "react-native"; import { useSelector } from "react-redux"; import { RouteProp, @@ -17,11 +17,10 @@ import { BlockButtonProps, ButtonSolidProps, FooterWithButtons, - IconButton, + HeaderSecondLevel, IOColors, IOStyles } from "@pagopa/io-app-design-system"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; import DocumentsNavigationBar from "../../components/DocumentsNavigationBar"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; @@ -48,6 +47,7 @@ import { } from "../../utils/signatureFields"; import { useFciNoSignatureFields } from "../../hooks/useFciNoSignatureFields"; import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; +import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; const styles = StyleSheet.create({ pdf: { @@ -209,60 +209,68 @@ const FciDocumentsScreen = () => { ); }; - const customGoBack: React.ReactElement = ( - { - if (currentDoc <= 0) { - dispatch(fciClearStateRequest()); - } - navigation.goBack(); - }} - accessibilityLabel={I18n.t("global.buttons.back")} - /> - ); + const startSupportRequest = useStartSupportRequest({ + contextualHelp: emptyContextualHelp + }); + + React.useLayoutEffect(() => { + navigation.setOptions({ + header: () => ( + { + if (currentDoc <= 0) { + dispatch(fciClearStateRequest()); + } + navigation.goBack(); + }} + title={I18n.t("features.fci.title")} + type={"singleAction"} + backAccessibilityLabel={I18n.t("global.buttons.back")} + firstAction={{ + icon: "help", + onPress: startSupportRequest, + accessibilityLabel: I18n.t( + "global.accessibility.contextualHelp.open.label" + ) + }} + /> + ) + }); + }, [currentDoc, dispatch, navigation, startSupportRequest]); return ( - - - - {documents.length > 0 && ( - <> - {renderPager()} - - - )} - - {fciAbortSignature} - {fciNoSignatureFields} - + + + {documents.length > 0 && ( + <> + {renderPager()} + + + )} + + {fciAbortSignature} + {fciNoSignatureFields} ); }; diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx index 51a6ffcecc8..bd50f269d93 100644 --- a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx +++ b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx @@ -9,10 +9,10 @@ import { Divider, FooterWithButtons, H2, + HeaderSecondLevel, IOStyles, VSpacer } from "@pagopa/io-app-design-system"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; import { @@ -41,6 +41,7 @@ import { fciMetadataServiceIdSelector } from "../../store/reducers/fciMetadata"; import { trackFciUxConversion } from "../../analytics"; import LoadingComponent from "../../components/LoadingComponent"; import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; +import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; const FciQtspClausesScreen = () => { const dispatch = useIODispatch(); @@ -85,6 +86,30 @@ const FciQtspClausesScreen = () => { }); }; + const startSupportRequest = useStartSupportRequest({ + contextualHelp: emptyContextualHelp + }); + + React.useLayoutEffect(() => { + navigation.setOptions({ + header: () => ( + + ) + }); + }, [navigation, startSupportRequest]); + if (fciPollFilledDocumentError && !isPollFilledDocumentReady) { return ( { }; return ( - + <>

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

@@ -181,7 +202,7 @@ const FciQtspClausesScreen = () => { {fciAbortSignature} {fciCheckService} - + ); }; export default FciQtspClausesScreen; diff --git a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx index 5a43dd59760..e8c26dfccdf 100644 --- a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx @@ -1,11 +1,5 @@ import * as React from "react"; -import { - View, - SafeAreaView, - SectionList, - Platform, - ScrollView -} from "react-native"; +import { View, SafeAreaView, SectionList, ScrollView } from "react-native"; import { useSelector } from "react-redux"; import { StackActions, useNavigation } from "@react-navigation/native"; import * as RA from "fp-ts/lib/ReadonlyArray"; @@ -16,12 +10,12 @@ import { FooterWithButtons, H2, H4, + HeaderSecondLevel, IconButton, IOColors, IOStyles, VSpacer } from "@pagopa/io-app-design-system"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import I18n from "../../../../i18n"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; import { useIODispatch } from "../../../../store/hooks"; @@ -61,6 +55,7 @@ import { } from "../../analytics"; import { useFciSignatureFieldInfo } from "../../hooks/useFciSignatureFieldInfo"; import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; +import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; export type FciSignatureFieldsScreenNavigationParams = Readonly<{ documentId: DocumentDetailView["id"]; @@ -259,14 +254,29 @@ const FciSignatureFieldsScreen = ( : "Firma" }; - const customGoBack: React.ReactElement = ( - - ); + const startSupportRequest = useStartSupportRequest({ + contextualHelp: emptyContextualHelp + }); + + React.useLayoutEffect(() => { + navigation.setOptions({ + header: () => ( + + ) + }); + }, [navigation, startSupportRequest]); if (isError) { return ( @@ -280,12 +290,7 @@ const FciSignatureFieldsScreen = ( } return ( - + <>

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

@@ -299,7 +304,7 @@ const FciSignatureFieldsScreen = ( /> {fciAbortSignature} - + ); }; export default FciSignatureFieldsScreen; diff --git a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx index e83200772f9..1bc5ca85f00 100644 --- a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { SafeAreaView, SectionList, ScrollView } from "react-native"; -import { H2, IOStyles } from "@pagopa/io-app-design-system"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; +import { H2, HeaderSecondLevel, IOStyles } from "@pagopa/io-app-design-system"; +import { useNavigation } from "@react-navigation/native"; import SignatureRequestItem from "../../components/SignatureRequestItem"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciSignaturesListSelector } from "../../store/reducers/fciSignaturesList"; @@ -23,12 +23,15 @@ import { } from "../../../zendesk/store/actions"; import { ToolEnum } from "../../../../../definitions/content/AssistanceToolConfig"; import { SignatureRequestListView } from "../../../../../definitions/fci/SignatureRequestListView"; +import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; +import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; const FciSignatureRequestsScreen = () => { const dispatch = useIODispatch(); const dataItems = useIOSelector(fciSignaturesListSelector); const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector); const choosenTool = assistanceToolRemoteConfig(assistanceToolConfig); + const navigation = useNavigation(); const zendeskAssistanceLogAndStart = ( signatureRequestId: SignatureRequestListView["id"] @@ -61,6 +64,30 @@ const FciSignatureRequestsScreen = () => { dispatch(fciSignaturesListRequest.request()); }, [dispatch]); + const startSupportRequest = useStartSupportRequest({ + contextualHelp: emptyContextualHelp + }); + + React.useLayoutEffect(() => { + navigation.setOptions({ + header: () => ( + + ) + }); + }, [navigation, startSupportRequest]); + const renderSignatureRequests = () => ( ({ @@ -81,17 +108,14 @@ const FciSignatureRequestsScreen = () => { return ( - + <>

{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 911b49ca485..ea7675794e3 100644 --- a/ts/features/fci/screens/valid/FciThankyouScreen.tsx +++ b/ts/features/fci/screens/valid/FciThankyouScreen.tsx @@ -7,7 +7,6 @@ import { IOStyles, Pictogram } from "@pagopa/io-app-design-system"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciSignatureSelector } from "../../store/reducers/fciSignature"; import GenericErrorComponent from "../../components/GenericErrorComponent"; @@ -50,7 +49,7 @@ const FciThankyouScreen = () => { testID: "FciTypCloseButton" }; return ( - + <> } @@ -62,7 +61,7 @@ const FciThankyouScreen = () => { primary={{ type: "Solid", buttonProps: continueButtonProps }} /> - + ); }; From 80eac64a17150477974bd0de466050b0fd8ece7c Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 11 Jan 2024 16:27:22 +0100 Subject: [PATCH 21/33] chore: update --- ts/features/fci/navigation/FciStackNavigator.tsx | 8 +++++++- ts/features/fci/screens/valid/FciDocumentsScreen.tsx | 10 +++++++--- ts/features/fci/screens/valid/FciQtspClausesScreen.tsx | 2 +- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/ts/features/fci/navigation/FciStackNavigator.tsx b/ts/features/fci/navigation/FciStackNavigator.tsx index 3fa2a6d5fdf..ad63d25b0df 100644 --- a/ts/features/fci/navigation/FciStackNavigator.tsx +++ b/ts/features/fci/navigation/FciStackNavigator.tsx @@ -31,7 +31,13 @@ export const FciStackNavigator = () => ( headerMode={"screen"} screenOptions={{ gestureEnabled: isGestureEnabled }} > - + { }); }, [currentDoc, dispatch, navigation, startSupportRequest]); + if (S.isEmpty(downloadPath)) { + return ; + } + return ( - + <> { {fciAbortSignature} {fciNoSignatureFields} - + ); }; export default FciDocumentsScreen; diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx index bd50f269d93..ba53ae4698f 100644 --- a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx +++ b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx @@ -95,7 +95,7 @@ const FciQtspClausesScreen = () => { header: () => ( Date: Thu, 11 Jan 2024 17:21:09 +0100 Subject: [PATCH 22/33] chore: use header second level hook --- .../screens/valid/FciDataSharingScreen.tsx | 29 +++----------- .../valid/FciDocumentPreviewScreen.tsx | 34 +++------------- .../fci/screens/valid/FciDocumentsScreen.tsx | 40 +++++-------------- .../screens/valid/FciQtspClausesScreen.tsx | 29 +++----------- .../valid/FciSignatureFieldsScreen.tsx | 27 ++----------- .../valid/FciSignatureRequestsScreen.tsx | 32 +++------------ 6 files changed, 37 insertions(+), 154 deletions(-) diff --git a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx index 3c9613d1931..227ddfa4984 100644 --- a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx +++ b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx @@ -10,7 +10,6 @@ import { H2, H6, HSpacer, - HeaderSecondLevel, IOStyles, IconButton, LabelLink, @@ -33,7 +32,7 @@ import { withValidatedEmail } from "../../../../components/helpers/withValidated import { trackFciUserDataConfirmed, trackFciUserExit } from "../../analytics"; import { localeDateFormat } from "../../../../utils/locale"; import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; -import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; const styles = StyleSheet.create({ alertTextContainer: { @@ -61,30 +60,12 @@ const FciDataSharingScreen = (): React.ReactElement => { ); const email = useIOSelector(profileEmailSelector); - const startSupportRequest = useStartSupportRequest({ - contextualHelp: emptyContextualHelp + useHeaderSecondLevel({ + title: I18n.t("features.fci.title"), + contextualHelp: emptyContextualHelp, + supportRequest: true }); - React.useLayoutEffect(() => { - navigation.setOptions({ - header: () => ( - - ) - }); - }, [navigation, startSupportRequest]); - const { present, bottomSheet: fciAbortSignature } = useFciAbortSignatureFlow(); diff --git a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx index 8679b63a370..ab1b0f5eea8 100644 --- a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx +++ b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx @@ -1,8 +1,6 @@ import React from "react"; import { SafeAreaView, StyleSheet } from "react-native"; import * as S from "fp-ts/lib/string"; -import { HeaderSecondLevel } from "@pagopa/io-app-design-system"; -import { useNavigation } from "@react-navigation/native"; import I18n from "../../../../i18n"; import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList"; import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; @@ -12,7 +10,7 @@ import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciDownloadPreviewClear, fciEndRequest } from "../../store/actions"; import { fciDownloadPathSelector } from "../../store/reducers/fciDownloadPreview"; import GenericErrorComponent from "../../components/GenericErrorComponent"; -import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; export type FciDocumentPreviewScreenNavigationParams = Readonly<{ documentUrl: string; @@ -34,34 +32,14 @@ export const FciDocumentPreviewScreen = ( props.route.params.enableAnnotationRendering; const fciDownloadPath = useIOSelector(fciDownloadPathSelector); const dispatch = useIODispatch(); - const navigation = useNavigation(); - const startSupportRequest = useStartSupportRequest({ - contextualHelp: emptyContextualHelp + useHeaderSecondLevel({ + title: I18n.t("messagePDFPreview.title"), + contextualHelp: emptyContextualHelp, + supportRequest: true, + goBack: () => dispatch(fciDownloadPreviewClear({ path: fciDownloadPath })) }); - React.useLayoutEffect(() => { - navigation.setOptions({ - header: () => ( - - dispatch(fciDownloadPreviewClear({ path: fciDownloadPath })) - } - title={I18n.t("messagePDFPreview.title")} - type={"singleAction"} - backAccessibilityLabel={I18n.t("global.buttons.back")} - firstAction={{ - icon: "help", - onPress: startSupportRequest, - accessibilityLabel: I18n.t( - "global.accessibility.contextualHelp.open.label" - ) - }} - /> - ) - }); - }, [dispatch, fciDownloadPath, navigation, startSupportRequest]); - if (isError) { return ( { ); }; - const startSupportRequest = useStartSupportRequest({ - contextualHelp: emptyContextualHelp + useHeaderSecondLevel({ + title: I18n.t("features.fci.title"), + supportRequest: true, + contextualHelp: emptyContextualHelp, + goBack: () => { + if (currentDoc <= 0) { + dispatch(fciClearStateRequest()); + } + navigation.goBack(); + } }); - React.useLayoutEffect(() => { - navigation.setOptions({ - header: () => ( - { - if (currentDoc <= 0) { - dispatch(fciClearStateRequest()); - } - navigation.goBack(); - }} - title={I18n.t("features.fci.title")} - type={"singleAction"} - backAccessibilityLabel={I18n.t("global.buttons.back")} - firstAction={{ - icon: "help", - onPress: startSupportRequest, - accessibilityLabel: I18n.t( - "global.accessibility.contextualHelp.open.label" - ) - }} - /> - ) - }); - }, [currentDoc, dispatch, navigation, startSupportRequest]); - if (S.isEmpty(downloadPath)) { return ; } diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx index ba53ae4698f..b17759e34dd 100644 --- a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx +++ b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx @@ -9,7 +9,6 @@ import { Divider, FooterWithButtons, H2, - HeaderSecondLevel, IOStyles, VSpacer } from "@pagopa/io-app-design-system"; @@ -41,7 +40,7 @@ import { fciMetadataServiceIdSelector } from "../../store/reducers/fciMetadata"; import { trackFciUxConversion } from "../../analytics"; import LoadingComponent from "../../components/LoadingComponent"; import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment"; -import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; const FciQtspClausesScreen = () => { const dispatch = useIODispatch(); @@ -86,30 +85,12 @@ const FciQtspClausesScreen = () => { }); }; - const startSupportRequest = useStartSupportRequest({ - contextualHelp: emptyContextualHelp + useHeaderSecondLevel({ + title: I18n.t("features.fci.title"), + contextualHelp: emptyContextualHelp, + supportRequest: true }); - React.useLayoutEffect(() => { - navigation.setOptions({ - header: () => ( - - ) - }); - }, [navigation, startSupportRequest]); - if (fciPollFilledDocumentError && !isPollFilledDocumentReady) { return ( { - navigation.setOptions({ - header: () => ( - - ) - }); - }, [navigation, startSupportRequest]); - if (isError) { return ( { const dispatch = useIODispatch(); const dataItems = useIOSelector(fciSignaturesListSelector); const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector); const choosenTool = assistanceToolRemoteConfig(assistanceToolConfig); - const navigation = useNavigation(); const zendeskAssistanceLogAndStart = ( signatureRequestId: SignatureRequestListView["id"] @@ -64,30 +62,12 @@ const FciSignatureRequestsScreen = () => { dispatch(fciSignaturesListRequest.request()); }, [dispatch]); - const startSupportRequest = useStartSupportRequest({ - contextualHelp: emptyContextualHelp + useHeaderSecondLevel({ + title: I18n.t("features.fci.requests.header"), + contextualHelp: emptyContextualHelp, + supportRequest: true }); - React.useLayoutEffect(() => { - navigation.setOptions({ - header: () => ( - - ) - }); - }, [navigation, startSupportRequest]); - const renderSignatureRequests = () => ( ({ From 12a3a2cb8f628c45806b83e0488a40052f35ba53 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 11 Jan 2024 18:07:49 +0100 Subject: [PATCH 23/33] fix: test --- .../__tests__/FciDocumentsScreen.test.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx b/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx index 1f23d7b733a..c1c62c8727d 100644 --- a/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx +++ b/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx @@ -7,7 +7,10 @@ import FciDocumentsScreen from "../valid/FciDocumentsScreen"; import { FCI_ROUTES } from "../../navigation/routes"; import { mockSignatureRequestDetailView } from "../../types/__mocks__/SignatureRequestDetailView.mock"; import { renderScreenFakeNavRedux } from "../../../../utils/testWrapper"; -import { fciSignatureRequestFromId } from "../../store/actions"; +import { + fciDownloadPreview, + fciSignatureRequestFromId +} from "../../store/actions"; describe("Test FciDocuments screen", () => { beforeEach(() => { @@ -21,8 +24,7 @@ describe("Test FciDocuments screen", () => { ); store.dispatch( fciSignatureRequestFromId.success({ - ...mockSignatureRequestDetailView, - documents: [] + ...mockSignatureRequestDetailView }) ); const component = renderComponent(store); @@ -36,8 +38,12 @@ describe("Test FciDocuments screen", () => { ); store.dispatch( fciSignatureRequestFromId.success({ - ...mockSignatureRequestDetailView, - documents: [] + ...mockSignatureRequestDetailView + }) + ); + store.dispatch( + fciDownloadPreview.success({ + path: mockSignatureRequestDetailView.documents[0].url }) ); const testComponent = renderComponent(store); From 3d8a28bdd9ae6de16609b5d25f05860114ccfc00 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Mon, 15 Jan 2024 14:58:48 +0100 Subject: [PATCH 24/33] test: update snapshots --- .../fci/components/QtspClauseListItem.tsx | 29 +- .../fci/components/SignatureFieldItem.tsx | 41 +- .../__tests__/QtspClauseListItem.test.tsx | 15 +- .../__tests__/SignatureFieldItem.test.tsx | 46 +- .../QtspClauseListItem.test.tsx.snap | 785 ++++++++++++++++++ .../SignatureFieldItem.test.tsx.snap | 275 +++--- 6 files changed, 982 insertions(+), 209 deletions(-) create mode 100644 ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap diff --git a/ts/features/fci/components/QtspClauseListItem.tsx b/ts/features/fci/components/QtspClauseListItem.tsx index fa5f7fc51d8..13fd38a90c2 100644 --- a/ts/features/fci/components/QtspClauseListItem.tsx +++ b/ts/features/fci/components/QtspClauseListItem.tsx @@ -1,10 +1,9 @@ import * as React from "react"; import { StyleSheet, View } from "react-native"; import { useSelector } from "react-redux"; -import { IOStyles, IconButton } from "@pagopa/io-app-design-system"; +import { CheckboxLabel, IOStyles } from "@pagopa/io-app-design-system"; import { QtspClause } from "../../../../definitions/fci/QtspClause"; import { fciQtspFilledDocumentUrlSelector } from "../store/reducers/fciQtspFilledDocument"; -import I18n from "../../../i18n"; import LinkedText from "./LinkedText"; type Props = { @@ -37,28 +36,20 @@ const QtspClauseListItem = (props: Props) => { return ( - { - - } + - { + { onChange(!checked); setChecked(!checked); }} - icon={checked ? "legCheckOn" : "legCheckOff"} - iconSize={24} /> ); diff --git a/ts/features/fci/components/SignatureFieldItem.tsx b/ts/features/fci/components/SignatureFieldItem.tsx index 64182762cb4..cf7ec21733d 100644 --- a/ts/features/fci/components/SignatureFieldItem.tsx +++ b/ts/features/fci/components/SignatureFieldItem.tsx @@ -1,11 +1,10 @@ import * as React from "react"; import { View, StyleSheet } from "react-native"; import { - H6, IOColors, IOStyles, - IconButton, - LabelLink + LabelLink, + ListItemCheckbox } from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; @@ -22,15 +21,13 @@ const styles = StyleSheet.create({ paddingTop: 16, paddingBottom: 8, marginBottom: 16, - flexDirection: "column", borderBottomColor: IOColors.greyLight, borderBottomWidth: 1 }, details: { paddingTop: 16, paddingBottom: 8 - }, - titleMargin: { marginRight: 22, flex: 1 } + } }); const SignatureFieldItem = (props: Props) => { @@ -42,25 +39,19 @@ const SignatureFieldItem = (props: Props) => { return ( - -
- {props.title} -
- { - onChange(!checked); - }} - accessibilityLabel={ - checked - ? I18n.t("features.fci.signatureFields.accessibility.selected") - : I18n.t("features.fci.signatureFields.accessibility.unselected") - } - icon={checked ? "legCheckOn" : "legCheckOff"} - iconSize={24} - /> - + { + onChange(!checked); + }} + accessibilityLabel={ + checked + ? I18n.t("features.fci.signatureFields.accessibility.selected") + : I18n.t("features.fci.signatureFields.accessibility.unselected") + } + /> { }; const component = renderComponent({ ...props }, store); expect(component).toBeTruthy(); + expect(component).toMatchSnapshot(); }); it("should render a QtspClauseListItem component with container", () => { const mockStore = configureMockStore(); @@ -88,7 +88,7 @@ describe("Test QtspClauseListItem component", () => { ).toBeTruthy(); expect(component.queryAllByText("legCheckOn")).toBeTruthy(); }); - it("should render a QtspClauseListItem component with checkbox clickable", () => { + it("should render a QtspClauseListItem component with checkbox enabled", () => { const mockStore = configureMockStore(); const store: ReturnType = mockStore(globalState); @@ -101,14 +101,9 @@ describe("Test QtspClauseListItem component", () => { }; const component = renderComponent({ ...props }, store); expect(component).toBeTruthy(); - const rightButton = component.getByTestId("QtspClauseListItemButtonTestID"); - expect(rightButton).toBeTruthy(); - expect(rightButton).toBeEnabled(); - fireEvent.press(rightButton); - expect(component.queryAllByText("io-checkbox-on")).toBeTruthy(); - fireEvent.press(rightButton); - expect(component.queryAllByText("io-checkbox-off")).toBeTruthy(); - expect(onPress).toHaveBeenCalledTimes(2); + const checkbox = component.getByTestId("AnimatedCheckbox"); + expect(checkbox).toBeTruthy(); + expect(checkbox).toBeEnabled(); }); it("should render a QtspClauseListItem component with right text for clause", () => { const mockStore = configureMockStore(); diff --git a/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx b/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx index b849dad376a..c763f296088 100644 --- a/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx +++ b/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx @@ -31,7 +31,7 @@ describe("Test SignatureFieldItem component", () => { expect(component).toBeTruthy(); expect(component.queryByText("Clause title 1")).toBeTruthy(); }); - it("should render a SignatureFieldItem component with checkbox unchecked", () => { + it("should render a SignatureFieldItem component with checkbox enabled", () => { const props = { title: "Clause title 1", onChange: jest.fn(), @@ -39,45 +39,27 @@ describe("Test SignatureFieldItem component", () => { }; const component = renderComponent({ ...props }); expect(component).toBeTruthy(); - expect( - component.getByTestId("SignatureFieldItemCheckboxTestID") - ).toBeTruthy(); - expect(component.queryAllByText("io-checkbox-off")).toBeTruthy(); + const listItemCheckbox = component.getByTestId("ListItemCheckbox"); + expect(listItemCheckbox).toBeTruthy(); + const checkbox = component.getByTestId("AnimatedCheckboxInput"); + expect(checkbox).toBeTruthy(); + expect(checkbox).toBeEnabled(); }); - it("should render a SignatureFieldItem component with checkbox checked", () => { + it("should render a SignatureFieldItem component with checkbox disabled", () => { const props = { title: "Clause title 1", - value: true, + value: false, + disabled: true, onChange: jest.fn(), onPressDetail: jest.fn() }; const component = renderComponent({ ...props }); expect(component).toBeTruthy(); - expect( - component.getByTestId("SignatureFieldItemCheckboxTestID") - ).toBeTruthy(); - expect(component.queryAllByText("legCheckOn")).toBeTruthy(); - }); - it("should render a SignatureFieldItem component with checkbox clickable", () => { - const onPress = jest.fn(); - const props = { - title: "Clause title 1", - value: true, - onChange: onPress, - onPressDetail: jest.fn() - }; - const component = renderComponent({ ...props }); - expect(component).toBeTruthy(); - const rightButton = component.getByTestId( - "SignatureFieldItemCheckboxTestID" - ); - expect(rightButton).toBeTruthy(); - expect(rightButton).toBeEnabled(); - fireEvent.press(rightButton); - expect(component.queryAllByText("legCheckOn")).toBeTruthy(); - fireEvent.press(rightButton); - expect(component.queryAllByText("legCheckOff")).toBeTruthy(); - expect(onPress).toHaveBeenCalledTimes(2); + const listItemCheckbox = component.getByTestId("ListItemCheckbox"); + expect(listItemCheckbox).toBeTruthy(); + const checkbox = component.getByTestId("AnimatedCheckboxInput"); + expect(checkbox).toBeTruthy(); + expect(checkbox).toBeDisabled(); }); it("should render a SignatureFieldItem component with right text for details link", () => { const props = { diff --git a/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap new file mode 100644 index 00000000000..2f1a30c75c2 --- /dev/null +++ b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap @@ -0,0 +1,785 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test QtspClauseListItem component should render a QtspClauseListItem component with props correctly 1`] = ` + + + + + + + + + + + + + FCI_QTSP_TOS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + (1) Io sottoscritto/a dichiaro quanto indicato nel + + + QUADRO E - AUTOCERTIFICAZIONE E SOTTOSCRIZIONE DA PARTE DEL TITOLARE. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap index acd65d004d6..9861c803f01 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap @@ -6,7 +6,6 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co Object { "borderBottomColor": "#E6E9F2", "borderBottomWidth": 1, - "flexDirection": "column", "marginBottom": 16, "paddingBottom": 8, "paddingTop": 16, @@ -14,152 +13,182 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co } > - - Clause title 1 - - - - - + - - + weight="SemiBold" + > + Clause title 1 + + + + + + + + + + From 37bbf8b1727d7d8cdbfcfc28fa2ac8c322816f6b Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Mon, 22 Jan 2024 17:34:44 +0100 Subject: [PATCH 25/33] test: update snapshot --- .../QtspClauseListItem.test.tsx.snap | 660 +++++++----------- 1 file changed, 240 insertions(+), 420 deletions(-) diff --git a/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap index 2f1a30c75c2..4144a70d0c0 100644 --- a/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap +++ b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap @@ -298,477 +298,297 @@ exports[`Test QtspClauseListItem component should render a QtspClauseListItem co - - + (1) Io sottoscritto/a dichiaro quanto indicato nel + + - + QUADRO E - AUTOCERTIFICAZIONE E SOTTOSCRIZIONE DA PARTE DEL TITOLARE. + + + + + + + + - + - - - - - - - - (1) Io sottoscritto/a dichiaro quanto indicato nel - - - QUADRO E - AUTOCERTIFICAZIONE E SOTTOSCRIZIONE DA PARTE DEL TITOLARE. - - - - - - - - - - - - - - - - - - - - - - + }, + ] + } + /> + + From d4196d1647c5aca1268db6a85db4b3fb67667b85 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Wed, 24 Jan 2024 11:16:56 +0100 Subject: [PATCH 26/33] chore: update --- ts/features/fci/components/ErrorComponent.tsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index b4ce3a05db7..61720baa0d3 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -11,7 +11,6 @@ import { VSpacer } from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; -import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; import { WithTestID } from "../../../types/WithTestID"; import { addTicketCustomField, @@ -136,17 +135,15 @@ const ErrorComponent = (props: Props) => { }; return ( - - - } - title={props.title} - body={props.subTitle} - email={props.email} - /> - {footerButtons()} - - + + } + title={props.title} + body={props.subTitle} + email={props.email} + /> + {footerButtons()} + ); }; From e06c0d6caf3b52f3993ec45063674c4cb5b591ee Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 25 Jan 2024 09:41:11 +0100 Subject: [PATCH 27/33] chore: update --- .../fci/components/DocumentWithSignature.tsx | 65 ++++++++++--------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx index 7a63913e686..dc838d3053a 100644 --- a/ts/features/fci/components/DocumentWithSignature.tsx +++ b/ts/features/fci/components/DocumentWithSignature.tsx @@ -1,23 +1,23 @@ import * as React from "react"; import Pdf from "react-native-pdf"; -import { Body, Container, Left, Right } from "native-base"; import { constNull, pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import * as pot from "@pagopa/ts-commons/lib/pot"; -import { SafeAreaView, StyleSheet } from "react-native"; +import { SafeAreaView, StyleSheet, View } from "react-native"; import { ButtonSolidProps, FooterWithButtons, H5, + HSpacer, IconButton, IOColors, - IOStyles + IOStyles, + VSpacer } from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { ExistingSignatureFieldAttrs } from "../../../../definitions/fci/ExistingSignatureFieldAttrs"; import { SignatureFieldToBeCreatedAttrs } from "../../../../definitions/fci/SignatureFieldToBeCreatedAttrs"; import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest"; -import AppHeader from "../../../components/ui/AppHeader"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { WithTestID } from "../../../types/WithTestID"; import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender"; @@ -41,6 +41,14 @@ const styles = StyleSheet.create({ pdf: { flex: 1, backgroundColor: IOColors.bluegrey + }, + header: { + alignItems: "center", + flexDirection: "row" + }, + headerTitle: { + flex: 1, + textAlign: "center" } }); @@ -175,24 +183,23 @@ const DocumentWithSignature = (props: Props) => { ); return ( - - - - -
- {I18n.t("messagePDFPreview.title")} -
- - - - - + + + +
+ {I18n.t("messagePDFPreview.title")} +
+ + + { disabled={false} testID={"FciDocumentsNavBarTestID"} /> - - - - - + + + ); }; export default DocumentWithSignature; From adfc9703584159331128ff75d4451567be712701 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 25 Jan 2024 10:14:20 +0100 Subject: [PATCH 28/33] test: fix id --- ts/features/fci/components/DocumentWithSignature.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx index dc838d3053a..4ae5a669021 100644 --- a/ts/features/fci/components/DocumentWithSignature.tsx +++ b/ts/features/fci/components/DocumentWithSignature.tsx @@ -197,6 +197,7 @@ const DocumentWithSignature = (props: Props) => { accessibilityLabel={I18n.t("global.buttons.close")} icon="closeLarge" onPress={props.onClose} + testID="FciDocumentWithSignatureTopRightButtonTestID" /> From 41fd877e7e1ad91f8b29a4d938f6a615bb2d37f3 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Tue, 30 Jan 2024 09:50:53 +0100 Subject: [PATCH 29/33] chore: switch to safe-area-context --- ts/features/fci/components/DocumentWithSignature.tsx | 4 +++- ts/features/fci/components/ErrorComponent.tsx | 9 +++++++-- ts/features/fci/screens/valid/FciDataSharingScreen.tsx | 5 +++-- .../fci/screens/valid/FciDocumentPreviewScreen.tsx | 4 +++- ts/features/fci/screens/valid/FciDocumentsScreen.tsx | 9 +++++++-- ts/features/fci/screens/valid/FciQtspClausesScreen.tsx | 9 +++++++-- .../fci/screens/valid/FciSignatureFieldsScreen.tsx | 9 +++++++-- .../fci/screens/valid/FciSignatureRequestsScreen.tsx | 5 +++-- ts/features/fci/screens/valid/FciThankyouScreen.tsx | 8 ++++++-- 9 files changed, 46 insertions(+), 16 deletions(-) diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx index 4ae5a669021..5214362d136 100644 --- a/ts/features/fci/components/DocumentWithSignature.tsx +++ b/ts/features/fci/components/DocumentWithSignature.tsx @@ -3,7 +3,7 @@ import Pdf from "react-native-pdf"; import { constNull, pipe } from "fp-ts/lib/function"; import * as O from "fp-ts/lib/Option"; import * as pot from "@pagopa/ts-commons/lib/pot"; -import { SafeAreaView, StyleSheet, View } from "react-native"; +import { StyleSheet, View } from "react-native"; import { ButtonSolidProps, FooterWithButtons, @@ -14,6 +14,7 @@ import { IOStyles, VSpacer } from "@pagopa/io-app-design-system"; +import { SafeAreaView } from "react-native-safe-area-context"; import I18n from "../../../i18n"; import { ExistingSignatureFieldAttrs } from "../../../../definitions/fci/ExistingSignatureFieldAttrs"; import { SignatureFieldToBeCreatedAttrs } from "../../../../definitions/fci/SignatureFieldToBeCreatedAttrs"; @@ -186,6 +187,7 @@ const DocumentWithSignature = (props: Props) => { diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index 61720baa0d3..e4320a218e5 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { SafeAreaView, View } from "react-native"; +import { View } from "react-native"; import { EmailString } from "@pagopa/ts-commons/lib/strings"; import { ButtonOutline, @@ -10,6 +10,7 @@ import { Pictogram, VSpacer } from "@pagopa/io-app-design-system"; +import { SafeAreaView } from "react-native-safe-area-context"; import I18n from "../../../i18n"; import { WithTestID } from "../../../types/WithTestID"; import { @@ -135,7 +136,11 @@ const ErrorComponent = (props: Props) => { }; return ( - + } title={props.title} diff --git a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx index 49d0e93ba42..3f1dfc560ba 100644 --- a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx +++ b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx @@ -1,7 +1,7 @@ import * as pot from "@pagopa/ts-commons/lib/pot"; import { useNavigation, useRoute } from "@react-navigation/native"; import * as React from "react"; -import { SafeAreaView, StyleSheet, View, ScrollView } from "react-native"; +import { StyleSheet, View, ScrollView } from "react-native"; import * as O from "fp-ts/lib/Option"; import { Body, @@ -16,6 +16,7 @@ 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 { @@ -119,7 +120,7 @@ const FciDataSharingScreen = (): React.ReactElement => { return ( <> - + {S.isEmpty(documentUrl) === false && ( { disabled={false} testID={"FciDocumentsNavBarTestID"} /> - + {documents.length > 0 && ( <> {renderPager()} diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx index b17759e34dd..c5f05dbed1a 100644 --- a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx +++ b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { SafeAreaView, FlatList, View, ScrollView } from "react-native"; +import { FlatList, View, ScrollView } from "react-native"; import { useSelector } from "react-redux"; import { useNavigation } from "@react-navigation/native"; import * as pot from "@pagopa/ts-commons/lib/pot"; @@ -12,6 +12,7 @@ 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 { @@ -168,7 +169,11 @@ const FciQtspClausesScreen = () => { return ( <> - +

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

diff --git a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx index 57bb87bd033..93a0ad23bfe 100644 --- a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { View, SafeAreaView, SectionList, ScrollView } from "react-native"; +import { View, SectionList, ScrollView } from "react-native"; import { useSelector } from "react-redux"; import { StackActions, useNavigation } from "@react-navigation/native"; import * as RA from "fp-ts/lib/ReadonlyArray"; @@ -15,6 +15,7 @@ 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,7 +273,11 @@ const FciSignatureFieldsScreen = ( return ( <> - +

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

diff --git a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx index 034032e977a..a01c98cc392 100644 --- a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx +++ b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx @@ -1,6 +1,7 @@ import * as React from "react"; -import { SafeAreaView, SectionList, ScrollView } from "react-native"; +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,7 +90,7 @@ const FciSignatureRequestsScreen = () => { return ( <> - +

{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 ea7675794e3..fb5b1365bfb 100644 --- a/ts/features/fci/screens/valid/FciThankyouScreen.tsx +++ b/ts/features/fci/screens/valid/FciThankyouScreen.tsx @@ -1,5 +1,4 @@ import * as React from "react"; -import { SafeAreaView } from "react-native"; import * as pot from "@pagopa/ts-commons/lib/pot"; import { ButtonSolidProps, @@ -7,6 +6,7 @@ import { IOStyles, Pictogram } from "@pagopa/io-app-design-system"; +import { SafeAreaView } from "react-native-safe-area-context"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import { fciSignatureSelector } from "../../store/reducers/fciSignature"; import GenericErrorComponent from "../../components/GenericErrorComponent"; @@ -50,7 +50,11 @@ const FciThankyouScreen = () => { }; return ( <> - + } title={I18n.t("features.fci.thankYouPage.title")} From 1391fea0064bccbd4b565712c41e01cd9f6fa229 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Wed, 31 Jan 2024 12:40:18 +0100 Subject: [PATCH 30/33] chore: add insets --- ts/features/fci/components/ErrorComponent.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index e4320a218e5..62eb994daf6 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -10,7 +10,10 @@ import { Pictogram, VSpacer } from "@pagopa/io-app-design-system"; -import { SafeAreaView } from "react-native-safe-area-context"; +import { + SafeAreaView, + useSafeAreaInsets +} from "react-native-safe-area-context"; import I18n from "../../../i18n"; import { WithTestID } from "../../../types/WithTestID"; import { @@ -46,6 +49,7 @@ const ErrorComponent = (props: Props) => { const signatureRequestId = useIOSelector(fciSignatureRequestIdSelector); const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector); const choosenTool = assistanceToolRemoteConfig(assistanceToolConfig); + const insets = useSafeAreaInsets(); const zendeskAssistanceLogAndStart = () => { resetCustomFields(); @@ -139,7 +143,7 @@ const ErrorComponent = (props: Props) => { } @@ -147,7 +151,14 @@ const ErrorComponent = (props: Props) => { body={props.subTitle} email={props.email} /> - {footerButtons()} + + {footerButtons()} + ); }; From f1eeda42499805ad23f7f0ae4709f7cf0be7a94b Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Wed, 31 Jan 2024 14:38:54 +0100 Subject: [PATCH 31/33] chore: update --- ts/features/fci/components/ErrorComponent.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index 62eb994daf6..aef3cb828b4 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -6,6 +6,7 @@ import { ButtonSolid, ButtonSolidProps, IOPictograms, + IOSpacingScale, IOStyles, Pictogram, VSpacer @@ -44,6 +45,8 @@ export type Props = WithTestID<{ onPress: () => void; }>; +const DEFAULT_BOTTOM_PADDING: IOSpacingScale = 16; + const ErrorComponent = (props: Props) => { const dispatch = useIODispatch(); const signatureRequestId = useIOSelector(fciSignatureRequestIdSelector); @@ -154,7 +157,7 @@ const ErrorComponent = (props: Props) => { {footerButtons()} From 0efa059f61711117652308532c144deee79398f9 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Thu, 1 Feb 2024 09:41:46 +0100 Subject: [PATCH 32/33] chore: update spacing --- ts/features/fci/components/ErrorComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index aef3cb828b4..ad1d685e856 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -45,7 +45,7 @@ export type Props = WithTestID<{ onPress: () => void; }>; -const DEFAULT_BOTTOM_PADDING: IOSpacingScale = 16; +const DEFAULT_BOTTOM_PADDING: IOSpacingScale = 20; const ErrorComponent = (props: Props) => { const dispatch = useIODispatch(); @@ -146,7 +146,7 @@ const ErrorComponent = (props: Props) => { } From 1b3f73aa8e360ffff101e8747bb182ea84c56c9e Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Fri, 2 Feb 2024 11:01:45 +0100 Subject: [PATCH 33/33] chore: update --- ts/features/fci/components/ErrorComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx index ad1d685e856..15493ed117b 100644 --- a/ts/features/fci/components/ErrorComponent.tsx +++ b/ts/features/fci/components/ErrorComponent.tsx @@ -146,7 +146,7 @@ const ErrorComponent = (props: Props) => { }