feat(Firma con IO): [SFEQS-1049] Add documents screen with navigation…

… bar (pagopa#4180)

* chore: add reducers and store

* feat: add router screen

* chore: add right error icon

* feat: add doc bar

* chore: add pdf component

* chore: update navigator and mock

* test: documents screen

* chore: update naming coherency

Co-authored-by: Francesco Persico <[email protected]>

* chore: simplified name for actions

* refactor: change state name

Co-authored-by: Francesco Persico <[email protected]>

* test: update with right store name

* chore: add fci enabled selector

* refactor: name coherency

* test: handle signature request by id

* test: added for error component

* refactor: name selector

* chore: add locales for doc bar

* fix: wrong path

* fix: layout component

* test: update

* refactor: add useref for pdf ref

* refactor: useRef as mutable object

* refactor: remove cast

Co-authored-by: Danilo Spinelli <[email protected]>

* test: update

Co-authored-by: Francesco Persico <[email protected]>
Co-authored-by: Danilo Spinelli <[email protected]>

jestSetup.js

@@ -95,3 +95,5 @@ jest.mock("@gorhom/bottom-sheet", () => {
 });
 
 jest.mock("react-native-device-info", () => mockRNDeviceInfo);
+
+jest.mock('react-native-pdf', () => jest.fn());

locales/en/index.yml

@@ -3183,6 +3183,10 @@ features:
       generic:
         title: There is a problem
         subTitle: To proceed with the signature, check that you have updated the IO app to the latest version.
+    title: "Firma con IO"
+    documentsBar:
+      titleLeft: Document {{currentDoc}} of {{totalDocs}}
+      titleRight: Page {{currentPage}} of {{totalPages}}
 webView:
   error:
     missingParams: Not all information necessary to access this page are available

locales/it/index.yml

@@ -3207,6 +3207,10 @@ features:
       generic:
         title: C’è un problema
         subTitle: Per procedere alla firma, verifica di aver aggiornato l’app IO all’ultima versione
+    title: "Firma con IO"
+    documentsBar:
+      titleLeft: Documento {{currentDoc}} di {{totalDocs}}
+      titleRight: Pagina {{currentPage}} di {{totalPages}}
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina

ts/features/fci/components/DocumentsNavigationBar.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity";
+import IconFont from "../../../components/ui/IconFont";
+import { H4 } from "../../../components/core/typography/H4";
+import { IOColors } from "../../../components/core/variables/IOColors";
+import { WithTestID } from "../../../types/WithTestID";
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: IOColors.white,
+    flexDirection: "row",
+    borderColor: IOColors.bluegreyLight,
+    justifyContent: "space-between",
+    paddingTop: 12,
+    paddingBottom: 12
+  },
+  shadow: {
+    // iOS
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    zIndex: 999,
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    // Android
+    elevation: 8,
+    borderBottomWidth: 0,
+    position: "relative"
+  }
+});
+
+type Props = WithTestID<{
+  titleRight: string;
+  titleLeft: string;
+  iconRightColor?: string;
+  iconLeftColor?: string;
+  onPrevious: () => void;
+  onNext: () => void;
+}>;
+
+/**
+ * A component to render a documents navigation bar with two buttons
+ * @param props
+ * @returns
+ */
+const DocumentsNavigationBar = (props: Props) => (
+  <View style={[styles.shadow, styles.container]}>
+    {/* button left */}
+    <ButtonDefaultOpacity
+      onPress={props.onPrevious}
+      transparent={true}
+      testID={"DocumentsNavigationBarLeftButtonTestID"}
+    >
+      <View style={{ flexDirection: "row" }}>
+        <IconFont
+          name={"io-back"}
+          color={props.iconLeftColor ?? IOColors.blue}
+          accessible={true}
+        />
+        <H4
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {props.titleLeft}
+        </H4>
+      </View>
+    </ButtonDefaultOpacity>
+
+    {/* button right */}
+    <ButtonDefaultOpacity
+      onPress={props.onNext}
+      transparent={true}
+      testID={"DocumentsNavigationBarRightButtonTestID"}
+    >
+      <View style={{ flexDirection: "row" }}>
+        <H4
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {props.titleRight}
+        </H4>
+
+        <IconFont
+          name={"io-right"}
+          color={props.iconRightColor ?? IOColors.blue}
+          accessible={true}
+        />
+      </View>
+    </ButtonDefaultOpacity>
+  </View>
+);
+
+export default DocumentsNavigationBar;

ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import DocumentsNavigationBar from "../DocumentsNavigationBar";
+import { IOColors } from "../../../../components/core/variables/IOColors";
+
+type Props = {
+  titleRight: string;
+  titleLeft: string;
+  iconRightColor?: string;
+  iconLeftColor?: string;
+  onPrevious: () => void;
+  onNext: () => void;
+};
+
+describe("Test DocumentsNavigationBar component", () => {
+  it("should render a DocumentsNavigationBar Component with props correctly", () => {
+    const props = {
+      titleRight: "Pagina 1 di 2",
+      titleLeft: "Documento 1 di 2",
+      iconRightColor: IOColors.blue,
+      iconLeftColor: IOColors.blue,
+      onPrevious: jest.fn(),
+      onNext: jest.fn()
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
+  });
+  it("should render a DocumentsNavigationBar Component with titleRight as 'Page 1 of 2'", () => {
+    const props = {
+      titleRight: "Page 1 of 2",
+      titleLeft: "",
+      onPrevious: jest.fn(),
+      onNext: jest.fn()
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    expect(component.queryByText("Page 1 of 2")).toBeTruthy();
+  });
+  it("should render a DocumentsNavigationBar Component with titleLeft as 'Document 1 of 5'", () => {
+    const props = {
+      titleRight: "",
+      titleLeft: "Document 1 of 5",
+      onPrevious: jest.fn(),
+      onNext: jest.fn()
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    expect(component.queryByText("Document 1 of 5")).toBeTruthy();
+  });
+  it("should render a DocumentsNavigationBar Component with onPrevious button clickable", () => {
+    const onPress = jest.fn();
+    const props = {
+      titleRight: "",
+      titleLeft: "",
+      onPrevious: onPress,
+      onNext: jest.fn()
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    const leftButton = component.getByTestId(
+      "DocumentsNavigationBarLeftButtonTestID"
+    );
+    expect(leftButton).toBeTruthy();
+    expect(leftButton).toBeEnabled();
+    fireEvent.press(leftButton);
+    fireEvent.press(leftButton);
+    expect(onPress).toHaveBeenCalledTimes(2);
+  });
+  it("should render a DocumentsNavigationBar Component with onNext button clickable", () => {
+    const onPress = jest.fn();
+    const props = {
+      titleRight: "",
+      titleLeft: "",
+      onPrevious: jest.fn(),
+      onNext: onPress
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    const rightButton = component.getByTestId(
+      "DocumentsNavigationBarRightButtonTestID"
+    );
+    expect(rightButton).toBeTruthy();
+    expect(rightButton).toBeEnabled();
+    fireEvent.press(rightButton);
+    fireEvent.press(rightButton);
+    expect(onPress).toHaveBeenCalledTimes(2);
+  });
+});
+
+const renderComponent = (props: Props) =>
+  render(<DocumentsNavigationBar {...props} />);

ts/features/fci/components/__tests__/ErrorComponent.test.tsx

@@ -18,7 +18,9 @@ type Props = {
 };
 
 describe("Test ErrorComponent", () => {
-  jest.useFakeTimers();
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
   it("with all props should render a ErrorComponent correctly", () => {
     const props = {
       title: "title",

ts/features/fci/components/__tests__/SuccessComponent.test.tsx

@@ -1,4 +1,3 @@
-import "react-native";
 import React from "react";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";